Message

</div>

<button
        type="submit"
        disabled={status.state === "loading"}
        className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-50"
      >
        {status.state === "loading" ? "Submitting..." : "Send Message"}
      </button>

{status.message && (
        <p className={status.state === "success" ? "text-green-600" : "text-red-600"}>
          {status.message}
        </p>
      )}
    </form>
  );
}
```

## 6. Next.js (App Router Client Component)

Next.js 14 / 15 / 16 compatible App Router component with client-side form submission:

```tsx
"use client";

import { useState } from "react";

export default function NextContactForm() {
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSubmitting(true);

const formData = new FormData(e.currentTarget);

try {
      const response = await fetch("https://formbold.com/s/YOUR_FORM_ID", {
        method: "POST",
        body: formData,
        headers: { Accept: "application/json" },
      });

if (response.ok) {
        setSubmitted(true);
      }
    } finally {
      setSubmitting(false);
    }
  };

if (submitted) {
    return (
      <div className="p-6 bg-green-50 border border-green-200 rounded-xl text-green-800">
        <h3 className="font-semibold text-lg">Thank you!</h3>
        <p>Your message has been received. We will get back to you shortly.</p>
      </div>
    );
  }

return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4">
      <input type="text" name="name" placeholder="Your Name" required className="input" />
      <input type="email" name="email" placeholder="Your Email" required className="input" />
      <textarea name="message" placeholder="Your Message" rows={4} required className="textarea" />
      <button type="submit" disabled={submitting} className="btn-primary">
        {submitting ? "Sending..." : "Submit"}
      </button>
    </form>
  );
}
```

## 7. Vue 3 (Composition API)

Vue 3 single-file component using <script setup> and the Fetch API:

```html
<script setup>
import { ref } from 'vue'

const isSubmitting = ref(false)
const isSuccess = ref(false)
const errorMessage = ref('')

async function handleSubmit(event) {
  isSubmitting.value = true
  errorMessage.value = ''

const formData = new FormData(event.target)

try {
    const res = await fetch('https://formbold.com/s/YOUR_FORM_ID', {
      method: 'POST',
      body: formData,
      headers: { Accept: 'application/json' }
    })

if (res.ok) {
      isSuccess.value = true
      event.target.reset()
    } else {
      errorMessage.value = 'Failed to submit form. Please try again.'
    }
  } catch (err) {
    errorMessage.value = 'An error occurred. Check your internet connection.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <div v-if="isSuccess" class="alert-success">Thank you for your message!</div>
    <div v-if="errorMessage" class="alert-error">{{ errorMessage }}</div>

<label for="email">Email</label>
    <input id="email" name="email" type="email" required />

<label for="message">Message</label>
    <textarea id="message" name="message" required>

``` ## 8. Angular (standalone component) An Angular standalone component that posts with `HttpClient`. Add `provideHttpClient()` to your app config if you haven't already. ```typescript import { Component, inject } from "@angular/core"; import { HttpClient } from "@angular/common/http"; @Component({ selector: "app-contact-form", standalone: true, template: ` `, }) export class ContactFormComponent { private http = inject(HttpClient); sending = false; status = ""; onSubmit(event: Event) { event.preventDefault(); const form = event.target as HTMLFormElement; this.sending = true; this.http .post("https://formbold.com/s/YOUR_FORM_ID", new FormData(form), { headers: { Accept: "application/json" }, }) .subscribe({ next: () => { this.status = "Thanks! Your message has been sent."; form.reset(); this.sending = false; }, error: () => { this.status = "Something went wrong. Please try again."; this.sending = false; }, }); } } ``` If you use `*ngIf`, import `NgIf` (or `CommonModule`) in the component's `imports`. On Angular 17 and newer you can use `@if` instead. ## 9. Prompt for AI coding tools The quickest route is the **Built with an AI Tool?** section on your form's **Form Setup** tab. Pick Lovable, Bolt.new, v0.dev, Cursor, ChatGPT or General, and Formbold writes the prompt with your endpoint already in it. If you'd rather write your own, this one works in Cursor, ChatGPT, Claude or v0: ```markdown I have created a Formbold form with the endpoint: https://formbold.com/s/YOUR_FORM_ID Please help me integrate this form into my web application. My stack is: [Insert stack, e.g. Next.js 15 App Router with Tailwind CSS] Requirements: 1. Submit the form to the Formbold endpoint using POST. 2. Provide form fields for Name, Email, and Message with proper validation. 3. Use the Fetch API with an 'Accept: application/json' header, so the page doesn't reload. 4. Disable the submit button and show a spinner while submitting. 5. Display accessible success and error state alerts. 6. Reset the form fields after successful submission. ``` Read what the AI gives back before you ship it. Check the URL is your endpoint and every field still has a `name`. --- # Webhooks Guide Source: https://formbold.com/docs/webhooks Section: Docs / Webhooks Send each form submission to your own server as a JSON POST request. Webhooks are available on the Starter, Premium and Business plans. ## How do Formbold webhooks work? When someone submits your form, Formbold sends an HTTP POST with the submission as JSON to a URL you choose. It happens in real time, so your server doesn't have to poll for new entries. Use a webhook when you want submissions in your own database, a serverless function or an internal tool. For Slack, Google Sheets or a CRM, the built-in integrations are less work. ## How do I add a webhook to my form? Webhooks live with the other apps on your form's Integrations tab. ![Webhook dialog in the Formbold Integrations tab](#) 1. Open your form and click the **Integrations** tab. 1. Find **Webhook** and click **Connect**. 1. Paste your endpoint. It must be an **HTTPS** URL, like `https://example.com/api/formbold-webhook`. 1. Choose which submissions to receive (see the next section) and save. Send a test from the **Test Form** tab right away and check that your server logged it. ## Which submissions does the webhook receive? The dialog has two checkboxes: - **Receive verified submissions (passed spam check)** is on by default. These arrive with `"is_spam": false`. - **Receive submissions marked as spam** is off by default. Turn it on if you want to review or score spam yourself. These arrive with `"is_spam": true`. If you turn both on, always check `is_spam` in your handler before you act on a submission. Otherwise a bot can end up in your CRM. ## What does the webhook payload look like? Every request has `Content-Type: application/json` and a body like this: ```json { "event": "submission.created", "form_id": "YOUR_FORM_ID", "submission_id": "sub_8f2b1a9c3d4e", "created_at": "2026-09-10T12:00:00.000Z", "data": { "name": "Sarah Connor", "email": "sarah@example.com", "message": "Interested in your enterprise solution.", "budget": "$10,000+" }, "files": [], "is_spam": false } ``` The keys inside `data` are your form's field names, so a field with `name="budget"` arrives as `data.budget`. Rename a field on your site and the key changes too, which is a common way to break a webhook without noticing. ## How do I handle the webhook in Node.js with Express? A minimal Express endpoint looks like this: ```javascript import express from "express"; const app = express(); app.use(express.json()); app.post("/api/formbold-webhook", (req, res) => { const { event, form_id, submission_id, data, is_spam } = req.body; // Only accept forms you expect if (form_id !== process.env.FORMBOLD_FORM_ID) { return res.status(404).end(); } // Answer quickly, then do the slow work res.status(200).json({ received: true }); if (is_spam) return; console.log(`[Formbold] ${event} ${submission_id}:`, data.name, data.email); // Save to your database, create a ticket, and so on }); app.listen(3000, () => console.log("Webhook server running on port 3000")); ``` Respond with a `2xx` status as soon as you've read the body. If you need to call other APIs or send emails, do it after responding, or push the job to a queue. ## How do I secure my webhook endpoint? Formbold doesn't sign webhook requests, so your endpoint should do its own checks. These are simple and cover most cases: - **Use HTTPS only.** Formbold requires it, and it keeps the payload private in transit. - **Make the URL hard to guess.** Put a long random value in the path or query string, like `/api/formbold-webhook?key=8f3c...`, and reject any request where it doesn't match a value in your environment variables. - **Check `form_id`.** Accept only the form IDs you expect and ignore the rest. - **Treat `data` as untrusted input.** It's whatever a visitor typed. Validate and escape it before you store it or show it in an admin page. - **Respond fast.** Return `2xx` first and do heavy work in the background, so a slow downstream service doesn't hold up the request. Your API token isn't used for webhooks. Don't put it in the webhook URL. ## How do I test webhooks locally with ngrok? Your laptop isn't reachable from the internet, so use a tunnel: 1. Start your local server, for example on port 3000. 1. Run `ngrok http 3000`. 1. Copy the HTTPS forwarding URL and add your path, like `https://abc123.ngrok-free.app/api/formbold-webhook`. 1. Paste that URL into the Webhook dialog on the **Integrations** tab. 1. Submit your form and watch the payload arrive in your terminal. Free ngrok URLs change each time you restart ngrok, so update the webhook URL when they do. If you just want to see the raw request first, a free URL from webhook.site works too. --- # REST API Reference Source: https://formbold.com/docs/api-reference Section: Docs / API Reference Fetch a form's submissions with the Formbold REST API. Available on every plan, including Free. ## What can I do with the Formbold REST API? Right now it does one job: fetch the submissions for any of your forms. That's enough to copy new leads into a CRM or keep a backup in your own database. | Item | Value | | --- | --- | | Base URL | https://api.formbold.com/api | | Format | JSON responses | | Protocol | HTTPS only | | Plans | Every plan, including Free | ## How do I authenticate? Every request needs an API token in the `Authorization` header. Create one in **API & MCP > API Tokens**. See [API Tokens](/docs/api-tokens). ```bash Authorization: Bearer YOUR_API_TOKEN ``` ## Which endpoints are available? | Method | Endpoint | What it does | | --- | --- | --- | | GET | /api/forms/:formId/submissions | Lists a form's submissions | ## How do I fetch a form's submissions? `GET https://api.formbold.com/api/forms/:formId/submissions` returns the submissions for one form. Replace `:formId` with your form's ID, the last part of its endpoint. If your endpoint is `https://formbold.com/s/3Vy25`, the ID is `3Vy25`. First, turn on **HTTP API** for that form. Open the form, go to **Settings**, and switch on **HTTP API** in the **Email Configuration** card ("Allow programmatic access to this form's submissions"). Without it, the request fails with a `400`. ### Parameters | Parameter | Type | Required | Description | | --- | --- | --- | --- | | formId (path) | string | Yes | Your form's ID, the last part of its endpoint (for example 3Vy25) | ### Request examples cURL: ```bash curl -X GET "https://api.formbold.com/api/forms/3Vy25/submissions" \ -H "Authorization: Bearer YOUR_API_TOKEN" \ -H "Accept: application/json" ``` JavaScript or Node.js: ```javascript const formId = "3Vy25"; const response = await fetch( `https://api.formbold.com/api/forms/${formId}/submissions`, { headers: { Authorization: `Bearer ${process.env.FORMBOLD_API_TOKEN}`, Accept: "application/json", }, } ); if (!response.ok) { throw new Error(`Formbold API error: ${response.status}`); } const data = await response.json(); console.log(data); ``` Python: ```python import os import requests form_id = "3Vy25" url = f"https://api.formbold.com/api/forms/{form_id}/submissions" headers = { "Authorization": f"Bearer {os.environ['FORMBOLD_API_TOKEN']}", "Accept": "application/json", } response = requests.get(url, headers=headers) response.raise_for_status() print(response.json()) ``` Run these on a server. A token in front-end code is a token anyone can copy. ### Success response (200 OK) A successful call returns 200 OK with the form's submissions. Each submission is an object like the one below, shown here in a list with a single entry: ```json [ { "country": null, "created_at": "2025-06-16T04:42:51", "domain": null, "fields": { "name": "John Doe", "email": "john.doe@example.com", "message": "This is a test message." }, "files": null, "form_id": "12891", "id": "525393", "is_read": true, "is_spam": false, "is_starred": false, "updated_at": "2025-06-16T04:42:51" } ] ``` The list may sit inside a wrapper object with other top-level keys. Log the raw JSON from your first call and check its shape before you write the parsing code. ### What's in a submission object? | Field | Type | Description | | --- | --- | --- | | id | string | The submission's unique ID. | | form_id | string | Internal ID of the form that received the submission. It's not the ID in your endpoint URL. | | fields | object | What the visitor entered, keyed by your form's input names, for example name, email and message. | | files | null or file data | Files uploaded with the submission. null when there are none. | | country | string or null | The visitor's country, when it's known. Otherwise null. | | domain | string or null | The site the form was submitted from, when it's known. Otherwise null. | | is_read | boolean | Whether the submission is marked as read. | | is_spam | boolean | Whether the submission was flagged as spam. | | is_starred | boolean | Whether the submission is starred. | | created_at | string (ISO 8601) | When the submission arrived, for example 2025-06-16T04:42:51. There's no timezone suffix. | | updated_at | string (ISO 8601) | When the submission was last updated. Same format as created_at. | ## What do the error codes mean? | HTTP code | Status | What to check | | --- | --- | --- | | 400 | Bad Request | The form ID isn't valid, or HTTP API is turned off for this form. Check the ID, then switch HTTP API on in Settings > Email Configuration. | | 401 | Unauthorized | The token is missing or revoked, or the header doesn't start with "Bearer ". | Errors come back as JSON with a message. A request without a valid token gets this: ```json { "success": false, "data": null, "message": "Unauthorized" } ``` ## Can AI assistants use the API? Yes, through the [Formbold MCP server](/docs/mcp-server). It has its own URL and takes the same API token: | Item | Value | | --- | --- | | MCP URL | https://api.formbold.com/mcp | | Authentication | Authorization: Bearer YOUR_API_TOKEN | | Tools | list_workspaces, create_form, update_form, get_form, list_forms, test_submission, get_submissions | With it, Cursor, VS Code, Claude Code, Claude Desktop or Codex can create forms, change form settings, send test submissions and check form stats from a chat. Setup for each client, the arguments for each tool and example prompts are in [MCP Server](/docs/mcp-server). ### What does the MCP server return without a valid token? HTTP 401, with a message that tells you which problem it is, repeated in a details object. No token: ```json { "success": false, "data": null, "message": "Authentication token is required for Formbold MCP access.", "details": { "message": "Authentication token is required for Formbold MCP access.", "error": "Unauthorized", "statusCode": 401 } } ``` An invalid or expired token: ```json { "success": false, "data": null, "message": "Invalid or expired Formbold MCP API token.", "details": { "message": "Invalid or expired Formbold MCP API token.", "error": "Unauthorized", "statusCode": 401 } } ``` --- # Using Formbold with AI Source: https://formbold.com/docs/ai Section: Docs / AI Let your AI assistant create forms, test them and read submissions, connect forms that AI app builders generate, and call the API from your own agents. If you're new here, Formbold is the backend your form posts to. It stores each submission, filters spam and passes entries to email, Slack, Google Sheets, webhooks and 8 other apps. This page is about the AI side of that: assistants that talk to your forms, app builders that write them, and agents that read submissions. ## What can I do with Formbold and AI? All of it works on every plan, Free included. 1. **Talk to Formbold from your AI assistant.** Connect Cursor, VS Code Copilot, Claude Code, Claude Desktop or Codex to the Formbold MCP server. Then ask it to create a form, change its settings, send a test submission or compare how your forms are doing. 1. **Connect forms that AI app builders write.** Lovable, Bolt.new, v0, Cursor and ChatGPT will all generate a contact form that has nowhere to send. Point it at Formbold, and let the dashboard write the prompt for you. 1. **Call the REST API from your own agents.** An agent or a plain script can fetch submissions over HTTPS with an API token. ## How do I let Claude or Cursor work with my forms? Create an API token under **API & MCP > API Tokens**, then add the Formbold MCP server, `https://api.formbold.com/mcp`, to your client with the token as a Bearer header. For most clients that's one config block. Once it's connected, try "Send a test submission with name and email to form to verify it works" or "Compare all my forms. Which form has the highest volume, and which one gets the most spam?" Setup for each client, the seven tools and more prompts are in [MCP Server](/docs/mcp-server). ## How do I connect a form an AI app builder made? Open your form's **Form Setup** tab and scroll to **Built with an AI Tool?**. Pick your tool, copy the prompt, and paste it into the builder's chat. It already contains your endpoint. Read what the builder wrote before you launch. The usual mistakes are a missing `name` attribute or a placeholder URL. The checklist is in [Connect AI-Built Forms](/docs/ai-form-builders). ## Can my own agent read submissions over the API? Yes. Send the token as `Authorization: Bearer YOUR_API_TOKEN` to `https://api.formbold.com/api`. `GET /api/forms/:formId/submissions` returns a form's entries once HTTP API is on for that form. Give each agent its own token. When you shut an agent down, revoke its token and nothing else is affected. Endpoints and responses are in the [REST API reference](/docs/api-reference). ## Is it safe to give an AI assistant access? It's as safe as the token you give it. The token can read every submission in your account, so treat it like a password. Keep it out of Git, use one per tool, and revoke it on the **API Tokens** tab the moment you're unsure. Submissions are personal data from real people. Before you paste them into a chat, think about whether that tool is somewhere your privacy policy says the data may go. --- # Formbold MCP Server Source: https://formbold.com/docs/mcp-server Section: Docs / AI Connect Cursor, VS Code, Claude Code, Claude Desktop or Codex to Formbold so your AI assistant can create forms, change their settings, send test submissions and check how each form is doing. Works on every plan, Free included. ## What is the Formbold MCP server? It's a Model Context Protocol server that lets AI agents work with your Formbold account. From a chat in Cursor, VS Code, Claude Code, Claude Desktop or Codex, an agent can **create forms**, **manage form settings**, **test the submission pipeline** and **check form analytics**. You ask in plain language and the agent calls the right tool. | Item | Value | | --- | --- | | Base URL | https://api.formbold.com/mcp | | Authentication | Authorization: Bearer | | Clients | Cursor, VS Code, Claude Code, Claude Desktop, Codex | | Plans | Every plan, including Free | ## How do I authenticate? Send your API token as a Bearer token in the `Authorization` header on every request: ```bash Authorization: Bearer ``` To get a token, open **API & MCP** in the dashboard sidebar, go to the **API Tokens** tab and create one. Give it a name you'll recognise later, like "Cursor on work laptop", and copy it straight away. More in [API Tokens](/docs/api-tokens). > Never commit tokens to Git. Make one token per tool or per machine, so if a laptop goes missing you revoke that one token and everything else keeps working. ## Which tools does the server give my assistant? Seven. Your assistant picks the right one from what you ask, so you rarely need to name them. | Tool | Purpose | Key arguments | | --- | --- | --- | | list_workspaces | List accessible workspaces and verified emails | None | | create_form | Create a new form endpoint | name, workspace_id, notification_email | | update_form | Update settings, redirect URL, spam filter, domains | form_id, name, redirect_url, allowed_domains, is_active | | get_form | Get form details, endpoint URL, and stats | form_id | | list_forms | List forms with submission counts | workspace_id, all_workspaces, limit | | test_submission | Send a test payload to verify ingestion | form_id, data (key-value map) | | get_submissions | View recent submissions (PII masked by default) | form_id, limit, include_content | `get_submissions` masks personal data by default. The `include_content` argument controls whether the content of each entry comes back, so only turn it on when your assistant needs to read what people wrote. ## What happens if the token is missing or wrong? The server answers with HTTP status **401 Unauthorized** and a JSON body. A request with no token gets this: ```json { "success": false, "data": null, "message": "Authentication token is required for Formbold MCP access.", "details": { "message": "Authentication token is required for Formbold MCP access.", "error": "Unauthorized", "statusCode": 401 } } ``` An invalid, expired or revoked token gets this: ```json { "success": false, "data": null, "message": "Invalid or expired Formbold MCP API token.", "details": { "message": "Invalid or expired Formbold MCP API token.", "error": "Unauthorized", "statusCode": 401 } } ``` Either way, check that the header reads `Authorization: Bearer`, then a space, then your token, and that the token is still listed on the API Tokens tab. ## How do I connect Cursor? Add Formbold to `.cursor/mcp.json` in your project, or to `~/.cursor/mcp.json` to use it in every project: ```json { "mcpServers": { "formbold": { "url": "https://api.formbold.com/mcp", "headers": { "Authorization": "Bearer " } } } } ``` Save the file. Formbold should show up in Cursor's MCP list with a green dot. If it stays red, restart Cursor once. ## How do I connect VS Code? Add Formbold to `.vscode/mcp.json` in your workspace. VS Code uses `servers` as the top-level key, not `mcpServers`, and a remote server needs `"type": "http"`: ```json { "servers": { "formbold": { "type": "http", "url": "https://api.formbold.com/mcp", "headers": { "Authorization": "Bearer " } } } } ``` Open Copilot Chat in Agent mode and check the tools list. You should see the Formbold tools there. ## How do I connect Claude Code? Run one command in your terminal: ```bash claude mcp add --transport http formbold https://api.formbold.com/mcp --header "Authorization: Bearer " ``` Or add it to `.mcp.json` in your project root. Keep `"type": "http"`, because Claude Code skips a server that has a `url` but no `type`: ```json { "mcpServers": { "formbold": { "type": "http", "url": "https://api.formbold.com/mcp", "headers": { "Authorization": "Bearer " } } } } ``` Then run `claude mcp list`. Formbold should be listed as connected. ## How do I connect Claude Desktop? Claude Desktop reaches the Formbold server through `mcp-remote`, a small bridge that runs with Node.js. Open **Settings > Developer > Edit Config**. That opens `claude_desktop_config.json`. Add Formbold under `mcpServers`: ```json { "mcpServers": { "formbold": { "command": "npx", "args": [ "-y", "mcp-remote", "https://api.formbold.com/mcp", "--header", "Authorization:${AUTH_HEADER}" ], "env": { "AUTH_HEADER": "Bearer " } } } } ``` Save the file, then quit Claude Desktop completely and open it again. Closing the window isn't enough. ## How do I connect Codex? Add Formbold to `~/.codex/config.toml`. The Codex CLI, the IDE extension and the Codex app all read this file: ```toml [mcp_servers.formbold] url = "https://api.formbold.com/mcp" http_headers = { "Authorization" = "Bearer " } ``` To keep the token out of the file, replace the `http_headers` line with `bearer_token_env_var = "FORMBOLD_API_TOKEN"` and set that variable in your shell. Start a new Codex session so it picks up the change. ## What can I ask in the AI chat? Name the form and say what you want back. Each of these prompts maps to one or two tools: | Prompt | Tools | What happens | | --- | --- | --- | | "Show my Formbold workspaces and verified notification emails." | list_workspaces | Lists your workspaces and the notification emails you can send to. | | "Create a new Formbold contact form for my workspace." | create_form | Creates the form and returns its endpoint URL. | | "Enable spam protection and restrict allowed domains to mysite.com on form ." | update_form | Changes the form's spam and domain settings. | | "Send a test submission with name and email to form to verify it works." | test_submission | Sends a test entry so you can confirm the form receives data. | | "Analyze the performance and recent feedback for form ." | get_form + get_submissions | The AI summarizes submission volume, calculates inbox vs. spam ratios, and reviews recent entries. | | "Compare all my forms. Which form has the highest volume, and which one gets the most spam?" | list_forms | The AI compares forms, ranks traffic, and highlights high-performing vs. dormant endpoints. | | "Compare recent submissions between form and form and highlight key differences." | get_submissions | The AI fetches entries from both forms and compares customer feedback themes. | Replace `` with your form's ID, the last part of its endpoint. For `https://formbold.com/s/3Vy25`, the ID is `3Vy25`. When your assistant creates a form, check it on **All Forms** before you ship. It takes ten seconds and catches a wrong name early. ## How do I test the connection with cURL? Send an `initialize` request with your token: ```bash curl -i -X POST https://api.formbold.com/mcp \ -H "Authorization: Bearer YOUR_API_TOKEN" \ -H "Content-Type: application/json" \ -H "Accept: application/json, text/event-stream" \ -d '{"jsonrpc":"2.0","method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"curl-test","version":"1.0"}},"id":1}' ``` A missing or wrong token returns one of the 401 errors above. If the response includes an `Mcp-Session-Id` header, send that header with your later requests, such as `tools/list`. ## How do I keep my token safe? Treat the token like a password. It can read every submission your account can read. - Never commit tokens to Git. If `.cursor/mcp.json`, `.vscode/mcp.json`, `.mcp.json` or `config.toml` holds a real token and lives in a repo, add it to `.gitignore`. - Use a separate token for each client, so you can revoke one without breaking the others. - If you think a token leaked, revoke it on the API Tokens tab and create a new one. Revoking takes effect straight away. ## Why isn't the Formbold MCP server connecting? Most problems come down to a few things. A 401 means the header is missing or the token is wrong. Check there's a space after Bearer and that you copied the whole token. In VS Code and Claude Code, check that the entry has `"type": "http"`. Claude Code skips a `url` entry without it. If Claude Desktop says "npx: command not found", Node.js isn't installed or the app can't see it. Install Node.js 18 or newer and restart Claude Desktop. On Windows, some clients split arguments on spaces, which breaks an `Authorization: Bearer ...` argument. The Claude Desktop example passes the header through `AUTH_HEADER` to avoid that. For calling Formbold from your own code instead, see the [REST API reference](/docs/api-reference). --- # Connect Forms Built with Lovable, Bolt.new, v0, Cursor or ChatGPT Source: https://formbold.com/docs/ai-form-builders Section: Docs / AI AI app builders write good-looking forms that don't send anywhere. This guide shows you how to point them at Formbold and check the result before launch. ## Why doesn't the form my AI tool built send anything? Because most AI builders write the front end only. The form looks right, the button clicks, and the data goes nowhere, or to a placeholder URL. Formbold gives that form a real endpoint that stores submissions and emails them to you. You'll need a Formbold form first. Create one in **All Forms** with **Create New Form**. ## How do I use the "Built with an AI Tool?" prompt builder? 1. Open your form and go to the **Form Setup** tab. 1. Scroll to **Built with an AI Tool?**. 1. Pick your tool: **Lovable**, **Bolt.new**, **v0.dev**, **Cursor**, **ChatGPT** or **General**. 1. Copy the prompt. It already contains your endpoint, `https://formbold.com/s/YOUR_FORM_ID`. The prompt asks the AI to submit your form with `fetch` and a JSON body, show a success message, and handle errors. You don't need to edit it. ## Where do I paste the prompt? Into the same chat where you built the app. In Lovable, Bolt.new and v0 that's the project chat. In Cursor, open the chat with the form's file in context. In ChatGPT, paste the prompt together with your form's code. If your app has more than one form, say which one, for example "Use this for the contact form on the Contact page only." ## What should I check after the AI updates my form? Read the code it changed. It takes two minutes and saves an afternoon. Check these: - **The URL** is your real endpoint, not `YOUR_FORM_ID` or an example domain. - **The method** is `POST`. - **Every field has a `name`**, or a matching key in the JSON body. That name is the label you'll see in Submissions and in the email. - **The headers.** A `fetch` call with a JSON body should send `Content-Type: application/json` and `Accept: application/json`. Then publish a preview and send a real submission. Check that it shows up in **Submissions** and that the email reaches your inbox, not spam. ## Should I set a redirect or spam protection? Probably both. A `fetch` form shows its own thank-you message, so a redirect is optional. If the AI wrote a plain HTML form instead, set a **Redirect URL** in **Settings > Email Configuration** so visitors land on your own thank-you page. Redirects are on Starter and higher. For spam, turn on **Basic Spam Filter** in **Settings > Spam & Security** straight away. Forms on AI-built sites often go live fast and get found by bots just as fast. Details in [Spam Protection](/docs/spam-protection). ## What mistakes do AI tools make most often? These four cover nearly every "it doesn't work" message we see: 1. **A missing `name` attribute.** The input renders, but its value never reaches Formbold. Add `name="email"` and so on to each field. 1. **`GET` instead of `POST`.** The form puts your data in the URL and Formbold ignores it. Change the method to `POST`. 1. **The wrong endpoint.** A placeholder, an old form ID, or a made-up API URL. Copy the endpoint from **Form Setup** again. 1. **No `Content-Type` or `Accept` header on `fetch`.** Without them the request may be sent as plain text, or your code can't read the response. Add both as `application/json`. If it still fails, open the browser's Network tab, submit the form, and look at the request to `formbold.com/s/...`. The status code and response usually point straight at the problem. ## Can the AI create the Formbold form for me too? Yes, if your coding tool supports MCP. Connect the [Formbold MCP server](/docs/mcp-server) and ask "Create a Formbold contact form called Website Contact and wire it into the contact page." The `create_form` tool makes the form and hands the endpoint back to the AI. Then ask "Send a test submission with name and email to the new form to verify it works." The `test_submission` tool confirms that entries arrive before you launch. ## Is there a step-by-step guide for my tool? Yes, for the three we're asked about most: [Lovable](/docs/lovable-contact-form), [Bolt.new](/docs/bolt-contact-form) and [v0](/docs/v0-contact-form). Each one has a prompt you can paste, the code you should end up with and the mistake that tool makes most often. --- # Make your Lovable contact form send Source: https://formbold.com/docs/lovable-contact-form Section: Docs / AI Lovable builds a good-looking contact form in seconds, but by default nothing receives it. Here's the prompt that connects it to Formbold, and what to check afterwards. ## Why doesn't my Lovable contact form send anything? Because Lovable writes the front end and stops there. The submit button often just shows a toast, or Lovable offers to build a Supabase table and an Edge Function for it. For a contact form you don't need either. Point the form at a Formbold endpoint and each message is stored, filtered for spam and emailed to you. ## What do I need before I start? A Formbold form. Open **All Forms**, click **Create New Form** and name it, for example "Lovable site contact". Then copy the endpoint from the **Form Setup** tab. It looks like `https://formbold.com/s/YOUR_FORM_ID`. The Free plan is enough for this: 250 submissions a month across 10 forms. ## What prompt do I paste into Lovable? The quickest route is **Form Setup > Built with an AI Tool?**. Pick **Lovable** and the dashboard writes the prompt with your endpoint already in it. If you'd rather write it yourself, this one works: ```text Update the existing contact form so it really sends. On submit, POST the form fields to https://formbold.com/s/YOUR_FORM_ID using fetch with a JSON body and these headers: Content-Type: application/json and Accept: application/json. Give every input a name attribute (name, email, message). Disable the button while sending. Show a success message only when response.ok is true, and show an error message otherwise. Do not add Supabase, Lovable Cloud, an Edge Function, an email API or any other backend for this form. Keep the current design. ``` The last line matters. Without it, Lovable may decide the form needs a database and start building one. ## What should the code look like afterwards? Open the component Lovable changed, usually something like `src/components/ContactForm.tsx`. The submit handler should look roughly like this: ```tsx async function handleSubmit(e: React.FormEvent) { e.preventDefault(); const form = e.currentTarget; setSending(true); const data = Object.fromEntries(new FormData(form)); const res = await fetch("https://formbold.com/s/YOUR_FORM_ID", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(data), }); setSending(false); if (res.ok) { form.reset(); setStatus("Thanks, we'll get back to you soon."); } else { setStatus("Something went wrong. Please try again."); } } ``` If you see a `setTimeout` that fakes a delay, a `console.log` instead of a request, or a call to `supabase.from(...)`, the prompt didn't take. Paste it again and name the file. ## How do I test it before I publish? Send one message from the Lovable preview. Within a few seconds it should appear in your form's **Submissions** tab, and the email should follow. If it doesn't: - Open the browser's Network tab, submit again and click the request to `formbold.com/s/...`. A 4xx status usually means a wrong form ID. - Check the inputs. Generated components sometimes keep values in state and leave `name` off the input. With this handler, a field without a name never reaches Formbold. - Publish, then test once more on the live URL. That's the one your visitors use. > Do the live test from your phone. It's the fastest way to catch a form that works on desktop and breaks on mobile. ## Should I turn on spam protection straight away? Yes. Lovable sites tend to go live quickly, and bots find contact forms just as quickly. In **Settings > Spam & Security**, turn on **Basic Spam Filter**. This form submits with fetch, so if you want a captcha as well, use **Custom reCAPTCHA** with your own v2 keys. The steps are in [Spam Protection](/docs/spam-protection). ## Can Lovable send the submissions to Slack or Google Sheets? Formbold can, on Starter and higher. Connect the app on the form's **Integrations** tab and leave Lovable out of it. Your Lovable code stays the same. --- # Connect a Bolt.new contact form to Formbold Source: https://formbold.com/docs/bolt-contact-form Section: Docs / AI Bolt.new can scaffold a whole site in one prompt, contact form included. This guide wires that form to Formbold so the messages actually reach you. ## Why doesn't my Bolt.new contact form work? Bolt builds the form and leaves the sending to you. In some projects the button does nothing at all. In others it logs to the console, or Bolt suggests adding Supabase. A Formbold endpoint is shorter: one URL, and every message is stored and emailed to you. ## What do I need first? A Formbold form and its endpoint. Click **Create New Form** in **All Forms**, open the **Form Setup** tab and copy the URL, which looks like `https://formbold.com/s/YOUR_FORM_ID`. Free covers 250 submissions a month, which is plenty for a new site. ## What prompt should I give Bolt? Use **Form Setup > Built with an AI Tool?** and pick **Bolt.new** to get a prompt with your endpoint filled in. Or paste this into the Bolt chat: ```text Wire up the contact form so it sends real submissions. POST the fields to https://formbold.com/s/YOUR_FORM_ID with fetch, a JSON body, and the headers Content-Type: application/json and Accept: application/json. Every input needs a name attribute: name, email, message. Show a success state only if response.ok is true, an error otherwise, and disable the button while sending. Don't add Supabase, a serverless function, Netlify Forms attributes or any other backend. Only change the contact form component. ``` ## Why mention Netlify Forms? Bolt deploys to Netlify, and it sometimes adds `data-netlify="true"` or a hidden `form-name` input to forms it builds. Those tell Netlify to capture the form itself. You don't want two services fighting over one form, so ask Bolt to leave them out, and delete them if they're already there. ## How do I check what Bolt changed? Open the form component in Bolt's code view, usually under `src/components/`. Look for three things: 1. A `fetch` call to your exact endpoint, not `YOUR_FORM_ID` or an example domain. 1. `method: "POST"` and both headers. 1. A `name` on every input, or matching keys in the JSON body. If Bolt wrapped the request in a `try` block that shows success no matter what, change it so success depends on `response.ok`. Otherwise visitors see "Thanks!" even when nothing was sent. ## How do I test it? Submit the form in Bolt's preview first. The preview runs in your browser, so the request goes straight to Formbold and the entry appears in **Submissions** within seconds. Then deploy and test once more on the live URL. If nothing arrives, open the Network tab and look at the request to `formbold.com/s/...`. The status code and response body usually tell you what's wrong. ## What should I set up in Formbold after that? Two things. Turn on **Basic Spam Filter** in **Settings > Spam & Security**, since new sites get bot traffic within days. And if you'd like messages in Slack, Telegram or Google Sheets, connect them on the **Integrations** tab. Integrations are on Starter and higher, and they don't need any change to your Bolt project. --- # Wire a v0 contact form to Formbold Source: https://formbold.com/docs/v0-contact-form Section: Docs / AI v0 generates Next.js components with shadcn/ui, and its contact forms usually end in a mock Server Action. Swap that for your Formbold endpoint and the form starts sending. ## Why doesn't my v0 contact form send? v0 tends to finish a contact form with a placeholder. You'll often see a Server Action marked `"use server"` that waits a second and returns success, or a handler that only logs the data. Nothing is sent anywhere. Replace that with a request to your Formbold endpoint and every submission is stored and emailed to you. ## What do I need from Formbold? A Formbold form. Click **Create New Form** in **All Forms**, then copy the endpoint from **Form Setup**: `https://formbold.com/s/YOUR_FORM_ID`. The Free plan gives you 250 submissions a month and 10 forms. ## What prompt do I give v0? Pick **v0.dev** under **Form Setup > Built with an AI Tool?** for a prompt with your endpoint in it, or use this: ```text Replace the mock submit logic in the contact form. Make the form a client component ("use client") and on submit POST the fields to https://formbold.com/s/YOUR_FORM_ID with fetch, a JSON body, and the headers Content-Type: application/json and Accept: application/json. Keep name attributes on every input: name, email, message. Show the success state only when response.ok is true and an error state otherwise. Remove the fake delay and any unused Server Action. Keep the existing shadcn/ui design. ``` ## Can I keep a Server Action instead? Yes, if you prefer. A Server Action can call the same endpoint with `fetch`, and the request is identical. The client version is simpler, though, and it keeps working if you later move the site to a static export. Pick one and delete the other, so there's no half-used action left behind. ## What should the component look like? Roughly this, inside the file v0 generated: ```tsx "use client"; import { useState } from "react"; export function ContactForm() { const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle"); async function onSubmit(e: React.FormEvent) { e.preventDefault(); setStatus("sending"); const form = e.currentTarget; const res = await fetch("https://formbold.com/s/YOUR_FORM_ID", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(Object.fromEntries(new FormData(form))), }); if (res.ok) form.reset(); setStatus(res.ok ? "sent" : "error"); } // keep v0's JSX, and make sure each and

has a name
}
```

shadcn/ui's `Input` and `Textarea` pass `name` through to the real element, so `<Input name="email" />` works as you'd expect.

## How do I know it's working?

Submit once in v0's preview and check **Submissions** in Formbold. Then deploy to Vercel and test on the live URL. If nothing arrives, look for the request to `formbold.com/s/...` in the Network tab. If there isn't one, the old Server Action is probably still wired to the form.

## What else should I switch on?

**Basic Spam Filter** in **Settings > Spam & Security**, right away. Because this form submits with fetch, use **Custom reCAPTCHA** if you want a captcha on top. And on Starter and higher you can send each entry to Slack, Notion or Google Sheets from the **Integrations** tab without touching the v0 code.

---

# Useful Links

Source: https://formbold.com/docs/useful-links

Section: Docs / Useful links

Links to Formbold templates, platform guides, comparisons, support and the tools you need while building.

## Official Formbold Resources

Pages on formbold.com that are useful while you build:

![Templates Showcase](#)

- [Form templates](/templates): free form templates (contact, survey, booking, feedback, multi-step) with HTML, React, Vue, Next.js, Angular and AJAX code.
- [Platform guides](/platforms): add Formbold to HTML, React, Next.js, Vue, Nuxt, Gatsby, Astro, Alpine.js, Hugo, Jekyll, Webflow or an AJAX form.
- [Comparisons](/alternatives): Formbold compared with Formspree, Getform, Web3Forms, Formcarry, Formspark, Typeform, Jotform, Tally and Fillout.
- [Integrations](/integrations): Slack, Telegram, Discord, Notion, Google Sheets, HubSpot, Mailchimp, Zendesk, Zapier, Make and webhooks.
- [Roadmap](/roadmap): what we're working on.
- [Support](/support): open a ticket with our team.
- [Discord community](https://discord.gg/AgMAnZDafr): ask questions and talk to other Formbold users.
## Code on GitHub

- [Formbold on GitHub](https://github.com/formbold): our public repositories and examples.
## Developer tools

- [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin): register your site and get the keys for custom reCAPTCHA (see Spam Protection).
- [Webhook.site](https://webhook.site): a free URL that shows you the raw requests Formbold sends, handy for testing webhooks.

---

# Form submissions in Discord

Source: https://formbold.com/integrations/discord

Post each form entry into a Discord channel through a channel webhook. You create the webhook in Discord and paste its URL into Formbold. Starter and up.

If your community or beta testers already hang out in a Discord server, there's no reason form entries should go anywhere else.

## What shows up in the channel

One message per submission, built from the fields the visitor sent. Only entries that pass your spam checks are posted.

![Formbold Integrations tab for connecting Discord](#)

| Discord | Formbold |
| --- | --- |
| Channel webhook URL | Pasted in the Connect dialog |
| Message body | All submitted fields |
| Timing | After spam checks pass |

## Typical setups

- A waitlist form that pings a private #staff channel.
- Join requests that moderators review before handing out roles.
- Creator contact forms that sit alongside the rest of your Discord admin.
## How do I get the webhook URL?

1. In Discord, open the channel's settings, go to Integrations > Webhooks and create a new webhook.
1. Copy its URL.
1. In Formbold, open the form's Integrations tab, click Connect on Discord, paste the URL and send a test.
Treat that URL like a password. Anyone who has it can post to the channel.

## Do I need a paid plan?

Discord is included from Starter up. Starter runs $8 a month, or $6 a month billed annually.

## Before you connect

### Do I have to install a bot?

No. A channel webhook is all Formbold needs.

### Can I post to more than one channel?

Each webhook points at one channel. Use one form per channel if you need to split them.

More detail, including what to do if messages stop arriving, is in the [Discord setup guide](/docs/discord).

---

# Form submissions in Google Sheets

Source: https://formbold.com/integrations/google-sheet

Every submission becomes a new row: a timestamp, then one column per field. Handy when someone on the team lives in spreadsheets. Starter ($8/mo, $6 yearly) and up.

If you're downloading a CSV every Friday to paste into a sheet, this replaces that habit. Formbold appends the row the moment the form is submitted.

## What a row looks like

The first column is the submission time. After that you get one column per field, named after the input.

![Example Google Sheet row created from a Formbold form submission](#)

| Sheet column | Source |
| --- | --- |
| timestamp | Formbold submission time |
| name | Form field name |
| email | Form field email |
| message | Form field message |

## Good uses for it

- A lead list the sales team filters and sorts without logging in to anything new.
- Event RSVPs you can pivot by date or ticket type.
- A stopgap CRM. Plenty of teams run on a sheet for months before HubSpot is worth it.
## Connecting Sheets

1. Open the form and go to Integrations.
1. Click Connect on Google Sheets and sign in with the Google account that owns the file.
1. Submit a test entry and check that the row appears.
One habit worth keeping: don't rename the header row once data is flowing. Columns are matched to field names, so a renamed header can end up out of step.

## Which plan?

Starter or higher. Starter is $8 a month ($6 a month if you pay yearly). Free accounts can pull submissions into a sheet themselves with the REST API, which is on every plan.

## Questions

### Do I need Apps Script?

No. Formbold writes the rows itself.

### What happens when I add a field to the form?

New entries carry it. Check the setup guide for how the new column gets added to an existing sheet.

For screenshots and the permission prompts, read the [Google Sheets setup guide](/docs/google-sheets).

---

# Create HubSpot contacts from forms

Source: https://formbold.com/integrations/hubspot

Create or update HubSpot contacts from the form on your own site, with fields mapped to contact properties. No HubSpot embed needed. Starter and up.

HubSpot's embedded forms work, but they rarely match the rest of a custom site. This keeps your form and still puts every lead in the CRM.

## What happens in HubSpot

Each submission creates a contact, or updates one that already exists, using the properties you mapped.

![Formbold Integrations tab for connecting HubSpot](#)

| HubSpot property | Typical field |
| --- | --- |
| Email | email |
| First / last name | name fields |
| Phone | phone |
| Company | company |

## Good fits

- Demo request forms, so sales sees the contact before the call.
- Contact forms on a marketing site built outside HubSpot.
- Partner intake forms that should refresh an existing record rather than add a new one.
## Connect HubSpot

1. Open the form's Integrations tab and click Connect on HubSpot.
1. Approve access in HubSpot, then map your fields to contact properties.
1. Submit a test entry and find the contact in HubSpot.
## Plan

HubSpot needs Starter or higher. On yearly billing Starter is $6 a month. Monthly, it is $8.

## FAQ

### Will a returning visitor create a duplicate?

HubSpot matches contacts by email address, so a second submission with the same email updates the existing contact.

### Do I need HubSpot's embed code?

No. Your form stays on your site and posts to Formbold.

The [HubSpot setup guide](/docs/hubspot) covers property mapping in detail.

---

# Add form submitters to Mailchimp

Source: https://formbold.com/integrations/mailchimp

Add people who fill in your own HTML form to a Mailchimp audience, with fields mapped to merge tags. No Mailchimp embed code on your page. Starter and up.

Mailchimp's embedded form is hard to style and heavy to load. This lets you keep the signup form you designed and still grow the audience.

## What gets created

A new audience member with their email address. Other fields map to merge tags, such as FNAME and LNAME, during setup.

![Formbold Integrations tab used to connect Mailchimp](#)

| Mailchimp | Form field |
| --- | --- |
| Email address | email |
| Merge tags | name and other mapped fields |
| Audience | The list you pick at connect |

## Where this works well

- A newsletter box on a static site.
- Webinar registration that also enrols people in the follow-up emails.
- A lead magnet download, where you only want people added after the form actually submits.
## How to connect

1. On your form, open Integrations, then click Connect on the Mailchimp card.
1. Pick the audience and match your fields to its merge tags.
1. Sign up with a test address and look for it in the audience.
## Plan and pricing

Starter and higher. Starter is $8 a month, or $6 a month billed yearly.

## Questions people ask

### Does it respect double opt-in?

That's set on the audience in Mailchimp. Formbold follows whatever the audience requires.

### Can I keep my own form markup?

Yes. Your HTML stays as it is, pointed at your Formbold endpoint.

For field mapping screenshots, see the [Mailchimp setup guide](/docs/mailchimp).

---

# Trigger Make scenarios from forms

Source: https://formbold.com/integrations/make

Start a Make scenario on every submission with a Custom webhook module. Paste the webhook address into Formbold and route the data wherever you like. Starter and up.

Make suits people who want routers, filters and a visual map of where data goes. If that's you, start the scenario with a Formbold submission.

## What Make receives

The webhook payload, which Make turns into a bundle. Each form field becomes something you can map in later modules.

![Sample JSON payload Formbold sends to Make webhooks](#)

| Make | Formbold |
| --- | --- |
| Custom webhook URL | Pasted in Integrations |
| Bundle data | Submission fields |
| Scenario | Your filters and routers |

## Scenarios that come up a lot

- Form to Airtable, then a confirmation email.
- Form to Slack with your own message formatting.
- Form to an HTTP module that calls your API.
## Connecting it

1. In Make, add a Webhooks > Custom webhook module and copy its address.
1. In Formbold, open the form's Integrations tab, click Connect on Make and paste the address.
1. Click Redetermine data structure in Make, then send a test submission so it learns your fields.
## What it costs

Make is on Starter and higher. Starter costs $8 a month, or $6 a month billed yearly.

## A couple of gotchas

### My new field isn't showing up in Make. Why?

Make remembers the structure of the first payload it saw. Run Redetermine data structure again and submit a fresh entry.

### Make or webhooks?

Make runs the scenario for you. A raw webhook sends the data to a server you run.

Click-by-click steps are in the [Make setup guide](/docs/make).

---

# Form submissions in Notion

Source: https://formbold.com/integrations/notion

Turn form entries into rows in a Notion database, with your fields mapped to its properties. Useful when your pipeline already lives in Notion. Starter and up.

Lots of small teams track leads, applications and content requests in a Notion database. This puts form entries straight into it, so nobody copies them over by hand.

## What you get in Notion

A new database row per submission. During setup you pick the database and decide which form field fills which property.

![Formbold Integrations tab where you connect Notion and other apps](#)

| Notion property | Typical form field |
| --- | --- |
| Name | name |
| Email | email |
| Notes | message |
| Created | submission time |

## Where it fits

- Guest post pitches that land as draft items for the editor.
- Partner requests stored next to your existing account notes.
- Bug reports from a public form, filed into the product team's tracker.
## Setup

1. Go to the form's Integrations tab and click Connect on Notion.
1. When Notion asks what Formbold can access, include the database you want rows in. If it isn't shared, it won't show up in the picker.
1. Map the fields, save, and send a test entry.
## Pricing

Notion is on Starter, Premium and Business. That starts at $8 a month for Starter, or $6 a month on a yearly plan.

## Things people ask

### Can I map to custom properties?

Yes. Any property in the database can be a target when you map fields.

### My database doesn't appear in the list. Why?

Almost always a sharing issue. Reconnect and tick that database when Notion asks which pages Formbold may use.

The [Notion setup guide](/docs/notion) walks through each screen.

---

# Form submissions in Slack

Source: https://formbold.com/integrations/slack

Each submission shows up as one Slack message in the channel you pick, with every field on its own line and a link back to the entry. Needs Starter or higher.

## Why put form entries in Slack?

A shared inbox is where contact form emails go to be ignored. A post in #sales gets seen by whoever is online, and someone can claim it with a thread reply before the lead goes cold.

## What the message looks like

One message per submission. Each field the visitor filled in gets a line, labelled with the input's name attribute, and there's a link to the full entry in your Formbold dashboard.

![Example of a Formbold submission posted as a Slack channel message](#)

| Field in form | What Slack shows |
| --- | --- |
| name | Line in the message body |
| email | Line in the message body |
| message | Line in the message body |
| submitted_at | Timestamp on the message |

If your inputs are called field_1 and field_2, that's what Slack will show. Rename them to email or company before you connect.

## Channels people usually point forms at

- #sales for demo and contact requests.
- #support for help forms, so the conversation sits next to the rest of the queue.
- A private #hiring channel for job applications. Keep this one private, since applications carry personal details.
## How do I connect it?

1. Open the form in Formbold and switch to the Integrations tab.
1. Click Connect on the Slack card.
1. Sign in to Slack when it asks, choose the channel, then send yourself a test submission.
## What plan is Slack on?

Slack needs Starter, Premium or Business. Starter costs $8 a month, or $6 a month billed yearly. On Free you still get the email for every entry, plus the REST API and MCP server if you'd rather build your own bot.

## Common questions

### Will I still get the email?

Yes, unless you switch it off. Slack is an extra destination, not a replacement.

### Can two forms post to different channels?

Yes. The connection is set per form, so your careers form and your contact form never have to share a channel.

Screens, permissions and fixes for the usual errors are in the [Slack setup guide](/docs/slack).

---

# Form alerts in Telegram

Source: https://formbold.com/integrations/telegram

Get a Telegram message the moment someone submits your form, in a private chat or a group. Connect the Formbold bot from the Integrations tab. Starter and up.

Email is fine until you're away from your desk. If you run a small business from your phone, a Telegram ping is harder to miss.

## What arrives

A message from the Formbold bot listing each field from the submission.

![Formbold Integrations tab used to connect Telegram](#)

| In Telegram | From the form |
| --- | --- |
| Message lines | Each submitted field |
| Chat type | Private chat or group you verified |
| Bot | Formbold bot |

## Who tends to use it

- Solo founders who answer leads from their phone.
- Shop staff sharing one Telegram group for walk-in and booking requests.
- Anyone whose customers already message them on Telegram, so replies happen in the same app.
## Connecting the bot

1. In Formbold, go to the form's Integrations tab and hit Connect on Telegram.
1. Follow the prompt to start a chat with the Formbold bot, or add it to your group.
1. Once the chat is verified, submit a test entry.
## Plan

Starter and higher. Starter is $8 a month, or $6 on yearly billing.

## Questions about the bot

### Do I need to create a bot with BotFather?

No. You use the Formbold bot, so there's no token to generate.

### Group or private chat?

Either works once the chat is verified.

Step-by-step screenshots are in the [Telegram setup guide](/docs/telegram).

---

# Form webhooks to your own URL

Source: https://formbold.com/integrations/webhooks

Formbold sends an HTTPS POST with a JSON body to your URL for every submission. Point it at your API, a queue or n8n. Starter and higher.

This is the integration for when none of the others fit. You give Formbold a URL, and it calls that URL with the submission.

## The payload

A JSON object with form_id, submission_id, created_at and a data object holding the fields.

![Sample Formbold webhook JSON payload with form_id and data fields](#)

| JSON key | Meaning |
| --- | --- |
| form_id | Your Formbold form id |
| submission_id | Unique submission id |
| created_at | ISO timestamp |
| data | Object of field values |

## What people build on it

- A small handler that writes leads into their own Postgres table.
- An n8n or Pabbly workflow, when Zapier pricing doesn't make sense.
- A sync into an internal CRM that has no off-the-shelf connector.
## Adding a webhook

1. Open Integrations on the form, then Connect on Webhooks.
1. Paste your HTTPS URL and decide whether spam-flagged entries should be sent too.
1. Submit a test entry and check your server logs for the POST.
## Cost

Webhooks start on Starter. Starter costs $8 a month, or $6 a month billed yearly. On Free, you can poll submissions with the REST API instead.

## Two things developers ask

### Are webhook requests signed?

Not today. Use HTTPS, and if you want a check, add a long random token to the URL as a query parameter and reject requests that don't carry it.

### Do spam submissions get sent?

By default only entries that pass your spam checks are sent. You can opt in to spam-flagged ones as well.

Retries, examples and testing tips are in the [Webhooks setup guide](/docs/webhooks).

---

# Start Zaps from form submissions

Source: https://formbold.com/integrations/zapier

Use a Webhooks by Zapier Catch Hook as the trigger and every Formbold submission starts your Zap. You paste the hook URL into Formbold. Starter and up.

Formbold's built-in integrations cover the common tools. Zapier covers the long tail: the CRM nobody else supports, the invoicing tool, the internal spreadsheet with three filters on it.

## How the trigger works

You create a Zap that starts with Webhooks by Zapier and the Catch Hook event. Zapier gives you a URL. Formbold sends each submission there, and the fields show up as trigger data for the next steps.

![Formbold Integrations tab where Zapier Catch Hook URLs are pasted](#)

| Zapier | Formbold |
| --- | --- |
| Catch Hook URL | Pasted into the Zapier card |
| Trigger data | Submission fields |
| Next steps | Any Zapier-supported app |

## Zaps worth building

- Form to a CRM with a find-or-create step, so repeat visitors don't become duplicates.
- Form to Google Sheets and Slack in the same Zap, when you want both.
- Form to an email tool that Formbold doesn't connect to directly.
## Setting it up

1. In Zapier, start a Zap with Webhooks by Zapier > Catch Hook and copy the URL.
1. In Formbold, open the form's Integrations tab, click Connect on Zapier and paste it.
1. Submit a test entry, then pull it in from the Zap editor's test step.
Webhooks by Zapier is a premium app on Zapier's side, so check your Zapier plan before you start.

## Formbold plan

Starter or higher. Starter is $8 a month. Pay yearly and it drops to $6 a month.

## Questions

### Is there a native Formbold app in Zapier?

The connection runs through a Catch Hook URL, which you paste in the Integrations tab.

### Zapier or a plain webhook?

If you're writing code anyway, a plain webhook skips a hop. Zapier is for when you'd rather click than code.

The [Zapier setup guide](/docs/zapier) has screenshots of both sides.

---

# Open Zendesk tickets from forms

Source: https://formbold.com/integrations/zendesk

Every valid submission opens a Zendesk ticket, with the visitor as the requester so agents can reply from Zendesk. Starter and up.

When support requests come in by email, someone has to forward them into Zendesk. With this connected, a help form on your site skips that step.

## What ends up in Zendesk

A ticket per submission. The visitor's email becomes the requester, and you choose which fields fill the subject and description.

![Formbold Integrations tab for connecting Zendesk](#)

| Zendesk | Formbold field |
| --- | --- |
| Requester | email |
| Subject | subject or a mapped field |
| Description | message |
| Ticket | Created on each valid submit |

## Where teams use it

- A public help form, instead of loading the Zendesk widget.
- Bug reports that should join the normal support queue.
- Partner escalations that need the same SLA as everything else.
## Connecting Zendesk

1. Go to Integrations on the form and click Connect next to Zendesk.
1. Enter your Zendesk details when asked and map the fields.
1. Send a test request and check that the ticket appears with the right requester.
## Which plan includes Zendesk?

Zendesk is on Starter and higher. Starter costs $8 a month, or $6 a month billed yearly.

## Quick answers

### Does it close or update tickets?

No. It only opens them. Agents take it from there in Zendesk.

### Which field becomes the requester?

The email field. Make sure your form has one, or tickets won't have anyone to reply to.

For each setup screen, see the [Zendesk setup guide](/docs/zendesk).

---

# Submit a form with Ajax and keep visitors on the page

Source: https://formbold.com/platforms/ajax

A full page reload after Send feels dated, and you don't need jQuery to avoid it. The script below catches the submit, posts to your Formbold endpoint with fetch and writes a status line under the button. You still get every entry by email.

## How do I submit a form with Ajax?

Catch the submit event, send the fields with fetch, then show the result. This snippet does all three in about 40 lines of plain JavaScript, no jQuery. Replace FORM_ID with your own.

```html
<form id="contact-form" class="flex flex-col gap-4 max-w-[452px] mx-auto">
  
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

<div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

<div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    >

Message*

</div>

{/* Submit Button */}
      <button
        type="submit"
        disabled={loading}
        className="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
      >
        {loading ? "Submitting..." : "Submit Message"}
      </button>

{/* Response Notice */}
      {responseMessage && (
        <p className="rounded-xl p-3 text-center text-sm font-medium bg-gray-50 text-gray-800">
          {responseMessage}
        </p>
      )}
    </form>
  );
}
```

## How do I connect a React form to Formbold?

1. **Create a form**: In All Forms, click Create New Form. Name it after the page it sits on, like Website Contact, so you can find it later.
2. **Paste the endpoint into fetch**: Copy https://formbold.com/s/FORM_ID from the Form Setup tab. Give every input a name attribute, because that name becomes the field label.
3. **Submit once and check**: Send a test from your dev server. The entry appears in Submissions within seconds, and the email follows.

## What do you get without writing a backend?

- **No server code**: No Express app, no Lambda and no SMTP credentials in your repo. The component is the only code you own.
- **Spam handled outside React**: Basic Spam Filter is a toggle in Settings > Spam & Security. The component submits with fetch, so Custom reCAPTCHA is the captcha to use.
- **File uploads**: From Starter: up to 5 files of 10 MB each per submission, with higher limits on Premium and Business.
- **Pipe entries to Slack or Sheets**: On Starter and higher, connect Slack, Telegram, Notion or Google Sheets, or send a webhook.

## Frequently asked questions

### Do I need Express, Node.js or a serverless function?

No. Formbold receives the request, stores it and sends the email. Your app only needs the fetch call shown above.

### Why do my submissions arrive empty?

Almost always a missing name attribute. FormData only picks up inputs that have a name, so an input with just an id sends nothing.

### Can I use React Hook Form or Formik?

Yes. Run the same fetch inside your onSubmit handler and pass the values object to JSON.stringify. Formbold doesn't care which library collected the data.

### How do I accept file uploads?

Upgrade to Starter, add an input with type="file" and a name, then send the FormData object as the body without a Content-Type header. The browser adds the multipart boundary for you.

### Is it safe to ship the endpoint in my bundle?

Yes. The endpoint can receive submissions but can't read them. Reading needs an API token, and that never belongs in front-end code.

### What's included for free?

Enough for most portfolio and small business sites: 250 submissions a month across 10 forms, plus the API. Paid plans start at $8 a month, or $6 billed yearly.

---

# Replit contact form, no Express route required

Source: https://formbold.com/platforms/replit

Ask Replit Agent for a contact form and you may get an Express route, a database table and an SMTP setup. You can skip all of it. The form posts to Formbold from the browser, the message is stored and emailed, and there's no Secret to add because the endpoint is public by design.

## What does the Formbold helper look like?

Replit apps use whatever stack Agent picked, so this helper is plain TypeScript. Call it from React, Vue, Svelte or a vanilla script. Swap FORM_ID for yours.

```typescript
// formbold.ts : a small helper that works in any browser frontend Agent builds
// (React, Vue, Svelte or plain TypeScript). The endpoint is public, so no Secret is needed.
export const FORMBOLD_ENDPOINT = "https://formbold.com/s/FORM_ID";

export type SendResult = { ok: true; message: string } | { ok: false; message: string };

export async function sendToFormbold(form: HTMLFormElement): Promise<SendResult> {
  const fields = Object.fromEntries(new FormData(form).entries());

try {
    const res = await fetch(FORMBOLD_ENDPOINT, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(fields),
    });
    const data = await res.json().catch(() => ({} as { message?: string }));
    return res.ok
      ? { ok: true, message: data.message ?? "Sent. Thanks for writing in." }
      : { ok: false, message: data.message ?? `Request failed (${res.status}).` };
  } catch {
    return { ok: false, message: "Network problem. Check your connection and try again." };
  }
}

// Usage in a React component:
// const r = await sendToFormbold(event.currentTarget);
// setStatus(r.message); if (r.ok) event.currentTarget.reset();

```

## How do I add Formbold to an app Replit Agent built?

1. **Create a Formbold form**: Open All Forms, click Create New Form and copy the https://formbold.com/s/FORM_ID endpoint from Form Setup.
2. **Ask Agent for the change**: "Add a file formbold.ts with a sendToFormbold(form) helper that POSTs the form fields as JSON to https://formbold.com/s/FORM_ID with Content-Type and Accept set to application/json, and returns ok plus a message. Use it in the contact form submit handler, show the message to the user, and reset the form on success. Do not add a backend route, email library or database table for this."
3. **Test in Preview, then publish**: Submit once in the Preview pane, check Submissions in Formbold, then publish from the Publishing tool and test again on the live URL.

## What do you save by not building the backend on Replit?

- **No SMTP credentials**: Formbold sends the notification email, so there is no mail API key sitting in your Secrets tool.
- **Nothing to rotate between environments**: Replit keeps development and production secrets separate. The Formbold endpoint is not a secret, so there is nothing to copy across.
- **Junk stays out of your inbox**: Turn on Basic Spam Filter and anything flagged goes to the Spam folder in Submissions.
- **Files on Starter and up**: Starter, Premium and Business accept uploads at 10 MB, 25 MB and 50 MB. Send FormData without a Content-Type header for those.
- **Pull entries into your app**: The REST API at https://api.formbold.com/api works on every plan. Call it from your server code with a token stored in Replit Secrets.

## Frequently asked questions

### Can I use a Static deployment?

Replit says Static deployments are not compatible with apps Agent created, because those need a backend. Use Autoscale, the default. Formbold itself works from any deployment type.

### When would I put something in Replit Secrets?

Only for a Formbold API token, if your server reads submissions back. The token belongs on the server. The form endpoint does not need hiding.

### My published app behaves differently from Preview. Why?

Replit uses separate production secrets and needs a republish after changes. The Formbold call has no secret, so check the endpoint ID and the Network tab first.

### Can my Express route forward to Formbold instead?

It can, but you lose nothing by posting from the browser and you skip a hop. If you turn on Allowed Domains, posting from the browser is the safer bet.

### Is Free enough while I'm prototyping?

Yes. You get 250 submissions a month across 10 forms, with email alerts and API access. Starter, at $8 a month or $6 billed yearly, adds file uploads and integrations.

### Can Replit Agent create the Formbold form too?

If you connect the Formbold MCP server to a tool that supports MCP, yes. MCP is on every plan and uses the same API token.

---

# Contact forms for Same.new sites

Source: https://formbold.com/platforms/same-new

Same writes Next.js apps and pushes them to Netlify when you say "Deploy my project". A cloned or generated contact page still needs somewhere to send its form. Point it at Formbold and messages are stored and emailed, with no API route or mail provider to set up.

## What does the Same.new contact component look like?

Same uses Next.js by default, so the form is a client component. It keeps a ref to reset the fields and shows the message Formbold returns.

```tsx
"use client";
// app/contact/contact-form.tsx  (Same builds on Next.js by default)
// Remove the "use client" line only if you move this into the Pages Router.
import { useRef, useState } from "react";

export function ContactForm() {
  const formRef = useRef<HTMLFormElement>(null);
  const [pending, setPending] = useState(false);
  const [flash, setFlash] = useState<{ kind: "ok" | "err"; text: string }>();

async function send(formData: FormData) {
    setPending(true);
    setFlash(undefined);
    try {
      const res = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(Object.fromEntries(formData)),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok) {
        formRef.current?.reset();
        setFlash({ kind: "ok", text: json.message ?? "Sent. Talk soon." });
      } else {
        setFlash({ kind: "err", text: json.message ?? "Formbold said no. Check the form ID." });
      }
    } catch {
      setFlash({ kind: "err", text: "Offline? The message was not sent." });
    } finally {
      setPending(false);
    }
  }

return (
    <form
      ref={formRef}
      onSubmit={(e) => {
        e.preventDefault();
        send(new FormData(e.currentTarget));
      }}
      className="flex flex-col gap-3"
    >
      <input name="email" type="email" required placeholder="Email" className="border rounded px-3 py-2" />
      <input name="subject" required placeholder="Subject" className="border rounded px-3 py-2" />
      <textarea name="message" rows={4} required placeholder="Message" className="border rounded px-3 py-2" />
      <button type="submit" disabled={pending} className="rounded bg-black py-2 text-white">
        {pending ? "Sending..." : "Send"}
      </button>
      {flash && <p className={flash.kind === "ok" ? "text-green-700" : "text-red-700"}>{flash.text}</p>}
    </form>
  );
}

```

## Wiring Same.new to Formbold

1. **Create the Formbold form**: Click Create New Form in All Forms and copy https://formbold.com/s/FORM_ID from Form Setup.
2. **Prompt Same**: "Replace the contact page submit logic with a client component that POSTs email, subject and message as JSON to https://formbold.com/s/FORM_ID using fetch with Accept: application/json. Show the reply message on success and a red error line on failure, and disable the button while it sends. Do not add an API route, database or email package for this form."
3. **Deploy and claim**: Tell Same "Deploy my project", then submit once on the live URL. Claim the Netlify deployment if you want to keep the site and add a domain.

## What does Formbold add to a Same.new site?

- **No API route**: Same can write Next.js API routes, but a contact form does not need one when the browser posts to Formbold.
- **Works after you claim the site**: Moving the deployment into your own Netlify account does not change anything for the form.
- **Spam settings that suit fetch**: Basic Spam Filter is a toggle under Settings > Spam & Security. Custom reCAPTCHA covers fetch forms that need a captcha.
- **Email and a dashboard**: Each entry is emailed and kept in Submissions, where you can star, filter and export it.
- **Webhooks and apps on Starter**: Starter and higher forward entries to Slack, Sheets, Notion or a webhook of your own.

## Frequently asked questions

### What happens if I never claim the Netlify deployment?

Same says unclaimed deployments expire after 14 days of inactivity. Your code stays in Same and you can redeploy, but claim it if the form needs to stay live.

### I cloned a site. Will its old form action still work?

Usually not. A cloned form often points at the original site's backend. Replace the action with your own Formbold endpoint.

### Do I need environment variables?

No. The endpoint is public. If you add one for a test form, use a NEXT_PUBLIC_ name so the browser can read it.

### Can I ask Same to deploy again after edits?

Yes. Tell it to deploy, or use the Deploy button. If a build fails, Same's docs suggest asking it to debug and retry.

### Will Formbold's Free plan do?

For a new site, probably. Free covers 250 submissions a month and 10 forms. Starter is $8 a month, or $6 billed yearly.

---

# Svelte contact form that posts with fetch

Source: https://formbold.com/platforms/svelte

Drop a .svelte component into SvelteKit or a Vite Svelte app. Formbold takes the POST, stores the entry and emails you. Free covers 250 submissions a month and 10 forms.

## What does a Svelte contact form look like?

The homepage example uses a plain HTML action. This one uses fetch with Accept: application/json and a loading state, which suits SvelteKit pages better. Replace FORM_ID. On Svelte 5 you can write onsubmit instead of on:submit.

```svelte

<script>
  let loading = false;
  let status = "";

async function handleSubmit(event) {
    event.preventDefault();
    loading = true;

const payload = Object.fromEntries(new FormData(event.currentTarget));

try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
      });
      const result = await response.json();

if (response.ok) {
        status = result.message || "Message sent.";
        event.currentTarget.reset();
      } else {
        status = result.message || "Something went wrong.";
      }
    } catch {
      status = "Could not reach Formbold.";
    } finally {
      loading = false;
      setTimeout(() => (status = ""), 4000);
    }
  }
</script>

<form on:submit={handleSubmit}>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Subject
    <input type="text" name="subject" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="5" required>

{#if status}

{status}

{/if} ``` ## How do I connect SvelteKit to Formbold? 1. **Create the form**: In the Formbold dashboard, create a form and copy https://formbold.com/s/FORM_ID from Form Setup. 2. **Add the component**: Save ContactForm.svelte under src/lib or a route. Give every control a name attribute so FormData keys stay readable. 3. **Test in npm run dev**: Submit once, then check Submissions and your inbox. No +page.server.js handler is required for this path. ## What Formbold covers for a Svelte app - **No +page.server required**: Browser fetch to Formbold is enough for a contact page. Keep server actions for app-specific logic. - **Spam filter in the dashboard**: Basic Spam Filter is a Settings toggle. Add Custom reCAPTCHA when traffic gets noisy. - **File size limits on paid plans**: Starter and up accept uploads at 10 MB, 25 MB or 50 MB by plan. Send FormData without setting Content-Type. - **Integrations from Starter**: Slack, Telegram, Notion, Sheets, webhooks and more sit on the Integrations tab for Starter and higher. ## Frequently asked questions ### Should I use a SvelteKit form action instead? You can, and post from the server action to Formbold if you want. The fetch example keeps everything in the component and matches how the homepage Ajax tab works. ### Why not put {form_id} in the action string? In Svelte, curly braces interpolate. The homepage snippet used that on purpose. For a fixed endpoint, paste the full URL or build it as a string so you do not surprise yourself. ### Does progressive enhancement work? A plain method="POST" action still works without JavaScript. Use fetch when you want JSON status text without a full page load. ### Can I use this from a plain Vite Svelte app? Yes. There is no Kit-only API in the snippet. Any Svelte app that can call fetch is fine. ### Do I need to pay to try it? No. Free has 250 submissions a month and 10 forms, with email notifications and API access. Starter costs $8 a month, or $6 billed yearly. ### Where do MCP and the API fit? API and MCP are available on every plan. Use tokens only in server code, never in a .svelte file shipped to the browser. --- # TanStack Start contact form, no server route Source: https://formbold.com/platforms/tanstack TanStack Start and Router already give you file routes. Point the form at a Formbold endpoint with fetch and Accept: application/json, and skip writing your own API route. Free covers 250 submissions a month and 10 forms. ## What does a TanStack Start contact form look like? Same createFileRoute pattern as the homepage tab, with loading state and a JSON POST. Replace FORM_ID. Works in TanStack Start and any TanStack Router app that can call fetch in the browser. ```tsx // src/routes/contact.tsx import { useState } from "react"; import { createFileRoute } from "@tanstack/react-router"; export const Route = createFileRoute("/contact")({ component: ContactForm, }); function ContactForm() { const [loading, setLoading] = useState(false); const [status, setStatus] = useState(""); async function onSubmit(event: React.FormEvent) { event.preventDefault(); setLoading(true); const formData = new FormData(event.currentTarget); const payload = Object.fromEntries(formData.entries()); try { const response = await fetch("https://formbold.com/s/FORM_ID", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(payload), }); const result = await response.json(); if (response.ok) { setStatus(result.message || "Message sent."); event.currentTarget.reset(); } else { setStatus(result.message || "Something went wrong."); } } catch { setStatus("Could not reach Formbold."); } finally { setLoading(false); setTimeout(() => setStatus(""), 4000); } } return (

Email Subject Message

</label>
      <button type="submit" disabled={loading}>
        {loading ? "Sending..." : "Send message"}
      </button>
      {status ? <p>{status}</p> : null}
    </form>
  );
}

```

## How do I wire Formbold into a TanStack route?

1. **Create the Formbold form**: In All Forms, create a form named after the route, for example Contact. Copy https://formbold.com/s/FORM_ID from Form Setup.
2. **Drop it into createFileRoute**: Put the component on /contact (or any path). Every input needs a name attribute so FormData keys match what you see in the dashboard.
3. **Submit once from the app**: Run the TanStack Start or Vite dev server, send a test, then open Submissions. The email arrives on the same event.

## Why use Formbold with TanStack instead of a server function?

- **No /api route of your own**: The browser talks to Formbold. You do not need a TanStack server function just to accept a contact message.
- **Spam controls in Settings**: Turn on Basic Spam Filter, or add Custom reCAPTCHA when bots show up.
- **File uploads on paid plans**: Starter and up accept files at 10 MB, 25 MB or 50 MB depending on the plan.
- **Slack, Sheets and webhooks**: Starter and higher connect Slack, Notion, Google Sheets and webhooks without another worker.

## Frequently asked questions

### Does this work with TanStack Start SSR?

Yes for the form itself. Keep the fetch in a client event handler so the POST runs in the browser. Do not put your API token in the route module.

### Can I use a plain HTML action instead of fetch?

Yes. action="https://formbold.com/s/FORM_ID" method="POST" works and matches the homepage snippet. Use fetch when you want JSON responses and inline status text.

### Why is Accept: application/json on the request?

Formbold returns JSON when Accept asks for it. That lets you read result.message and show it under the button.

### Where do file uploads fit?

On Starter and up, send FormData as the body and omit Content-Type so the browser sets the multipart boundary.

### Is the Free plan enough to try this?

Yes. You get 250 submissions a month and 10 forms, and email and API access come with it. Starter, the first paid plan, is $8 a month or $6 billed yearly.

---

# Vue 3 contact form without a backend

Source: https://formbold.com/platforms/vuejs

A <script setup> component with v-model and one fetch call is all it takes. No Express server and no serverless function, and each submission is emailed to you.

## What does the Vue component look like?

A <script setup> single-file component with v-model on each field. Save it as ContactForm.vue, use it in your page and replace FORM_ID. It works in Vite projects and on any static host.

```html
<template>
  <form @submit.prevent="submitForm" class="flex flex-col gap-4 max-w-[452px] mx-auto">
    
    <div class="flex flex-col gap-2">
      <label for="email" class="text-sm font-medium text-gray-700">
        Email Address<span class="ml-0.5 text-red-500">*</span>
      </label>
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        v-model="form.email"
        required
        class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      />
    </div>

<div class="flex flex-col gap-2">
      <label for="subject" class="text-sm font-medium text-gray-700">
        Subject<span class="ml-0.5 text-red-500">*</span>
      </label>
      <input
        type="text"
        id="subject"
        placeholder="Enter your subject"
        v-model="form.subject"
        required
        class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      />
    </div>

<div class="flex flex-col gap-2">
      <label for="message" class="text-sm font-medium text-gray-700">
        Message<span class="ml-0.5 text-red-500">*</span>
      </label>
      <textarea
        id="message"
        rows="5"
        placeholder="Type your message..."
        v-model="form.message"
        required
        class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      >