# Formclick Docs (full)

Generated from https://docs.formclick.io. Index: https://docs.formclick.io/llms.txt

---

# Introduction

> Formclick HTML Forms gives any HTML form a backend. Point your form at Formclick and every submission lands in your inbox and dashboard.

Source: https://docs.formclick.io/html-forms/introduction

Formclick HTML Forms is a form backend for websites. You keep writing the form in plain HTML; Formclick receives the submission, filters spam, stores it, emails you and forwards it to your tools. There is no server to run, no database to set up and no backend code to write.

_Diagram: a visitor submits the HTML form → Formclick validates the access key, checks for spam and saves the submission → an email notification, a dashboard entry and integrations follow. A visitor submits your form → Formclick checks it → you get an email, a dashboard entry and your integrations fire._

It works anywhere HTML works: static sites, GitHub Pages, Netlify, Vercel, WordPress, Webflow, React, Next.js, Vue, or a single `index.html` file.

## The whole integration

Set the form’s `action` to the Formclick endpoint and add your access key as a hidden field. That is all a basic form needs.

```html title="contact.html"
<form action="https://api.formclick.io/submit" method="POST">
  <!-- Replace with the key from your form's Connect tab -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Your message" required></textarea>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## What you get

- **Email notifications** for every submission, with your own subject line and sender name.
- **A submissions dashboard** with search, a separate Spam tab and every field you sent.
- **Spam protection** built in: honeypot field, content scoring, rate limiting and duplicate detection, plus optional [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Turnstile](https://docs.formclick.io/html-forms/turnstile) and [domain restriction](https://docs.formclick.io/html-forms/restrict-domain).
- **File uploads** with drag and drop, progress bars and secure storage (Pro and Business).
- **AJAX submits** with `formclick.min.js`: loading state, inline success and error messages, no page reload.
- **Redirects** to your own thank-you page after a submit.
- **Autoresponder** emails that confirm receipt to the person who filled in the form.
- **Integrations** with Google Sheets, Notion, Airtable, Discord, databases, CRMs, email tools and webhooks.

## Where to next

- [Quick start](https://docs.formclick.io/html-forms/quick-start): Get a working contact form in three minutes.
- [Special fields](https://docs.formclick.io/html-forms/special-fields): subject, from_name, redirect, botcheck and more.
- [formclick.min.js](https://docs.formclick.io/html-forms/formclick-js): Submit without reloading the page.
- [API reference](https://docs.formclick.io/api-reference/api-reference): Endpoint, content types, responses and errors.
- [Pro features](https://docs.formclick.io/html-forms/pro-features): Captcha, autoresponder, file uploads, webhooks and more.

---

# Quick start

> Create a form, copy your access key and paste one HTML snippet. Your form is live in about three minutes.

Source: https://docs.formclick.io/html-forms/quick-start

This guide takes you from nothing to a working contact form. You need a Formclick account and any web page you can edit.

### Step 1: Create a form in your dashboard

Sign up or log in and create a new HTML form. Give it a name such as “Website contact”. Notifications go to your account email until you change the recipients.

### Step 2: Copy your access key

Open the form’s **Connect** tab and copy the access key. It is a UUID that tells Formclick which form a submission belongs to.

### Step 3: Paste the form into your page

Replace `YOUR_ACCESS_KEY` with the key you copied, and keep the `formclick.min.js` script below the form. Keep the field names; add as many extra fields as you like.

```html title="index.html"
<form action="https://api.formclick.io/submit" method="POST">
  <!-- Replace with the key from your form's Connect tab -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Your message" required></textarea>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

### Step 4: Submit a test

Open the page, fill in the form and press **Send**. The submission appears in your dashboard straight away and the notification email follows within seconds.

## Always include the Formclick script

Every Formclick form sample ends with the same two lines. Paste them once, just before `</body>`. The script submits the form in the background, uploads files, shows a loading state on the button and displays the success or error message inline.

```html
<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

_Animation: with formclick.min.js the form submits in the background, the button shows "Sending…", then an inline success message appears and the form resets. With formclick.min.js: no reload, a loading button and an inline success message._

> **Note:** Forms with `<input type="file">` only work with the script. Without it, other forms still submit and show the Formclick confirmation page.

> **Testing locally:** Forms work from `localhost` and `file://` pages, so you can test before deploying. Autoresponder emails are only sent for submissions from a public website.

## Next steps

- [Customise the email](https://docs.formclick.io/html-forms/email-notifications): Set the subject line and sender name.
- [Redirect after submit](https://docs.formclick.io/html-forms/redirects): Send people to your own thank-you page.
- [Stop spam](https://docs.formclick.io/html-forms/spam-protection): Add the honeypot field in one line.

---

# Access key

> The access key identifies your form. It is safe to publish in your page’s HTML.

Source: https://docs.formclick.io/html-forms/access-key

Every Formclick form has an access key, a UUID such as `21e56b6c-55b5-4c8d-ab3b-83222682465f`. Formclick uses it to decide which form, inbox and integrations a submission belongs to.

## Where to find it

Open the form in your dashboard and go to the **Connect** tab. The key is shown there along with ready-to-copy snippets.

## Two ways to send it

Send the key as a hidden field named `access_key`, or put it in the endpoint path. Both work the same way; the hidden field is the most common.

**Hidden field**

```html
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <!-- your fields -->
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**In the URL**

```html
<form action="https://api.formclick.io/submit/YOUR_ACCESS_KEY" method="POST">
  <!-- With the script, keep the hidden access_key field as well -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <!-- your fields -->
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

> **Note:** Using `formclick.min.js`? Use the hidden field. The script needs it for its key check and for file uploads.

## Is it safe to put in public HTML?

Yes. The access key can only **create** submissions for that one form. It cannot read submissions, change settings, see your email address or access your account. Treat it like a public form address, not a password.

Abuse is handled on the server: honeypot checks, spam scoring, per-IP rate limits and duplicate detection all apply no matter who has the key. See [Spam protection](https://docs.formclick.io/html-forms/spam-protection).

> **Invalid keys are rejected:** The key must be a valid UUID. A missing or malformed key returns `400`, an unknown key returns `404`, and a form you have disabled returns `403`. `formclick.min.js` checks the key before submitting and shows a configuration message if it is missing.

---

# How it works

> What happens between your visitor pressing Send and the email arriving in your inbox.

Source: https://docs.formclick.io/html-forms/how-it-works

A submission takes the same path whether it comes from a plain HTML post, `formclick.min.js` or your own `fetch` call.

_Diagram: a visitor submits the HTML form → Formclick validates the access key, checks for spam and saves the submission → an email notification, a dashboard entry and integrations follow._

1. **Receive.** Formclick accepts `application/x-www-form-urlencoded`, `multipart/form-data` and `application/json` bodies at `https://api.formclick.io/submit`.
2. **Validate.** The access key is checked, the honeypot field is inspected and empty submissions are rejected.
3. **Protect.** Per-IP rate limits and duplicate detection run, then the content is scored for spam.
4. **Store.** The submission is saved to your dashboard. Suspected spam goes to the Spam tab instead of your inbox.
5. **Notify.** Your notification email and, if enabled, the autoresponder are queued and sent within seconds.
6. **Forward.** Integrations and webhooks run in the background, with automatic retries.
7. **Respond.** The visitor gets a confirmation page, a JSON response, or is redirected to your thank-you page.

## Responses depend on how you submit

| Submitted by | Formclick responds with |
| --- | --- |
| Plain HTML form (browser post) | A hosted confirmation page with a link back to your site, or a `302` redirect if one is set. |
| `formclick.min.js` | JSON. The script shows your success message inline or follows the redirect. |
| `fetch` / Axios / cURL with JSON | JSON: `{ "success": true, "message": "…" }`, plus `redirect_url` when a redirect applies. |

> **Note:** Notifications and integrations never slow down the response. The submission is saved first, so a slow third-party service cannot lose it.

---

# Pro features

> Captcha, autoresponders, file uploads, webhooks, domain restriction and more on the Starter, Pro and Business plans.

Source: https://docs.formclick.io/html-forms/pro-features

Every plan includes unlimited forms, email notifications, the submissions dashboard and built-in spam filtering. Paid plans add the features below. Each one is set up in your form’s settings in the dashboard, and takes effect as soon as your plan includes it.

> **Plans:** **Starter** (yearly) adds captcha, webhooks, domain restriction and redirects to any website. **Pro** adds the autoresponder, file uploads and Google Sheets. **Business** has everything in Pro with the highest submission limit. See [Plans & limits](https://docs.formclick.io/help/plans-and-limits).

## Spam protection

| Feature | What it does | Plans |
| --- | --- | --- |
| [reCAPTCHA integration](https://docs.formclick.io/html-forms/recaptcha) | Google reCAPTCHA v2 (checkbox) or v3 (invisible), verified by Formclick on every submission. | Starter, Pro, Business |
| [Cloudflare Turnstile captcha](https://docs.formclick.io/html-forms/turnstile) | A privacy-friendly captcha most visitors never have to click. | Starter, Pro, Business |
| [Restrict to domain](https://docs.formclick.io/html-forms/restrict-domain) | Only accept submissions sent from your own websites. | Starter, Pro, Business |

## Email features

| Feature | What it does | Plans |
| --- | --- | --- |
| [Autoresponder (Auto-Reply)](https://docs.formclick.io/html-forms/autoresponder) | A branded confirmation email to the person who filled in the form. | Pro, Business |
| [Intro text](https://docs.formclick.io/html-forms/autoresponder#intro-text) | Your own message at the top of the auto-reply, up to 2,000 characters. | Pro, Business |
| [Add CC email](https://docs.formclick.io/html-forms/cc-email) | Send notifications to up to 5 To, 10 CC and 10 BCC addresses. | Every plan |

## File uploads

| Feature | What it does | Plans |
| --- | --- | --- |
| [File attachments](https://docs.formclick.io/html-forms/file-attachments) | Accept files up to 5 MB each, delivered as secure links in your email and dashboard. | Pro, Business |
| [Advanced file uploader](https://docs.formclick.io/html-forms/advanced-file-uploader) | Drag and drop, multiple files, progress bars, retries and size limits, with no extra code. | Pro, Business |

## Integrations & redirects

| Feature | What it does | Plans |
| --- | --- | --- |
| [Webhooks](https://docs.formclick.io/html-forms/webhooks) | Send every submission as JSON to your own endpoint, Zapier, Make or n8n. | Starter, Pro, Business |
| [Discord](https://formclick.io/integrations/discord) | Post new submissions to a Discord channel. | Starter, Pro, Business |
| [Google Sheets](https://docs.formclick.io/help/google-sheets-integration) | Add every submission as a row in a spreadsheet. | Pro, Business |
| [Redirect to any website](https://docs.formclick.io/html-forms/redirects) | Send visitors to a thank-you page on another domain (Free plans can redirect within their own site). | Starter, Pro, Business |

## Upgrade

Compare plans and prices on the [pricing page](https://formclick.io/pricing). To upgrade, open **Settings → Billing & Usage** in your dashboard; the new features are available straight away. See [Upgrade to Pro](https://docs.formclick.io/help/upgrade-to-pro).

- [See pricing](https://formclick.io/pricing): Plans in USD and INR, monthly or yearly.
- [Compare plans](https://docs.formclick.io/help/free-vs-pro): Every limit and feature, side by side.

---

# Form fields

> Use any field names and input types. Every named field is saved and included in your email.

Source: https://docs.formclick.io/html-forms/form-fields

Formclick saves every form control that has a `name` attribute. There is no schema to configure: add a field to your HTML and it shows up in the next submission.

## Supported inputs

| Input | What gets saved |
| --- | --- |
| `text`, `email`, `tel`, `url`, `number`, `date`, `textarea`… | The value as text. |
| `select` | The selected option’s `value` (or its text when there is no value). |
| `radio` | The value of the checked radio. |
| `checkbox` | The value when ticked (default `on`). Unticked boxes are left out. |
| Several fields with the same name | A list of values, e.g. `interests` → `["Design", "SEO"]`. |
| `file` | A link to the uploaded file. Needs `formclick.min.js`. See [File uploads](https://docs.formclick.io/html-forms/file-uploads). |
| `hidden` | Saved like any other field, unless it is a [special field](https://docs.formclick.io/html-forms/special-fields). |

## Example with every type

```html title="signup.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <input type="text"  name="name"  required>
  <input type="email" name="email" required>
  <input type="tel"   name="phone">

  <select name="budget">
    <option value="">Choose a budget…</option>
    <option>Under $1,000</option>
    <option>$1,000 – $5,000</option>
  </select>

  <!-- Same name → saved as a list -->
  <label><input type="checkbox" name="interests" value="Design"> Design</label>
  <label><input type="checkbox" name="interests" value="SEO"> SEO</label>

  <label><input type="radio" name="contact_by" value="Email" checked> Email</label>
  <label><input type="radio" name="contact_by" value="Phone"> Phone</label>

  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Sender name and email

Formclick looks for the person’s name and email so submissions are easy to scan in the dashboard and you can reply straight from your inbox.

- **Name** is read from the first non-empty field called `name`, `full_name`, `fullname` or `your_name`.
- **Email** is read from `email` (or `Email`). It becomes the **Reply-To** of your notification, so pressing Reply answers the visitor.

> **Tip:** Use `type="email"` for the email field. Browsers validate it before submit, and an invalid address also counts towards the spam score.

## Field names

Use short, readable names: they appear as labels in your email and dashboard. `company_name` reads better than `field_7`. Avoid starting names with an underscore; a few such names are reserved.

## Size limit

A submission body can be up to **100 KB** of text, which is far more than any normal form. Files never count towards this, because they upload separately.

---

# Special fields

> Hidden fields that control Formclick: access key, email subject, sender name, redirect and spam checks.

Source: https://docs.formclick.io/html-forms/special-fields

These field names have a special meaning. Most are control fields: Formclick uses them and then removes them, so they are not stored with the submission or shown in your email.

| Field | Purpose | Stored? |
| --- | --- | --- |
| `access_key` | **Required.** Your form’s access key. See [Access key](https://docs.formclick.io/html-forms/access-key). | No |
| `subject` | Subject line of your notification email. Can be hidden or a visible field. | Yes |
| `from_name` | Display name the notification email comes from, e.g. “Website Contact Form”. Max 100 characters. | No |
| `redirect` | Full `https://` URL to send the visitor to after submitting. See [Redirects](https://docs.formclick.io/html-forms/redirects). | No |
| `botcheck` | Honeypot checkbox. If it is ticked the submission is silently dropped. | No |
| `_honeypot` | Alternative honeypot text field. Any value drops the submission. | No |
| `_page` / `page_url` | The page the form was submitted from, shown with the submission. | As metadata |
| `g-recaptcha-response` | reCAPTCHA token, added by the widget (or by `formclick.min.js` for v3). See [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha). | No |
| `cf-turnstile-response` | Cloudflare Turnstile token, added by the widget. See [Turnstile](https://docs.formclick.io/html-forms/turnstile). | No |
| `name`, `email` | Regular fields, also used as the sender name and Reply-To address. | Yes |

## Full example

```html title="contact.html"
<form action="https://api.formclick.io/submit" method="POST"
      data-success-msg="Thanks! Your message has been sent.">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <!-- Email subject and sender name for your notification -->
  <input type="hidden" name="subject" value="New message from your website">
  <input type="hidden" name="from_name" value="Website Contact Form">

  <!-- Honeypot: hidden from people, bots tick it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <label>Name    <input type="text" name="name" required></label>
  <label>Email   <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>

  <button type="submit">Send message</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## subject

Use a hidden field for a fixed subject, or a visible input to let the visitor write it. The subject is also saved with the submission so you can see it in the dashboard.

```html
<!-- Fixed subject -->
<input type="hidden" name="subject" value="New enquiry from the pricing page">

<!-- Or let the visitor choose -->
<input type="text" name="subject" placeholder="How can we help?">
```

> **Note:** A subject template set in the dashboard takes priority over the `subject` field. Line breaks are removed and long subjects are shortened.

## from_name

Sets the name your notification appears to come from. The sending address itself always stays a Formclick address so the email reaches your inbox; replies go to the visitor via Reply-To.

```html
<input type="hidden" name="from_name" value="Acme Careers Page">
```

## Page URL

Formclick records the referring page automatically. If you have one form on many pages and want the exact URL, send it yourself:

```html
<input type="hidden" name="page_url" id="page_url">
<script>document.getElementById('page_url').value = location.href;</script>
```

---

# Success & error messages

> Control what visitors see after they submit: the hosted page, an inline message, or your own UI.

Source: https://docs.formclick.io/html-forms/success-messages

What the visitor sees after pressing Send depends on how the form is submitted.

## Plain HTML form

Without JavaScript, the browser navigates to a clean Formclick confirmation page that shows your success message and a **Go back** link to the page the visitor came from. Errors use the same page with the reason.

## Inline messages with formclick.min.js

With `formclick.min.js` the page never reloads. The submit button is disabled while sending, then a message appears at the end of the form. Set your own text with `data-success-msg`:

_Animation: with formclick.min.js the form submits in the background, the button shows "Sending…", then an inline success message appears and the form resets._

```html
<form action="https://api.formclick.io/submit" method="POST"
      data-success-msg="Thanks! We'll reply within one business day.">
  ...
</form>
<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

The message text is chosen in this order: the form’s `data-success-msg`, then the form’s default success message (“Thank you! Your message has been received.”, which can be changed with the MCP `update_form_settings` tool). Error messages come from the server, e.g. “Too many submissions. Please try again later.”

## Styling the messages

The script adds a `div.fc-form-msg` inside the form, with `fc-msg-success` or `fc-msg-error`. The submit button gets `fc-btn-loading` while sending. Override them with your own CSS:

```html
<style>
  .fc-form-msg   { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
  .fc-msg-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .fc-msg-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  button.fc-btn-loading { opacity: .7; cursor: wait; }
</style>
```

## Your own UI

To show a modal, confetti or anything else, listen for the `fc:success` and `fc:error` events, or skip the script and use [fetch](https://docs.formclick.io/html-forms/javascript-fetch).

```js
const form = document.querySelector('#contact');

form.addEventListener('fc:success', (e) => {
  console.log('Saved!', e.detail);       // { success: true, message: "…" }
  showThankYouModal();
});

form.addEventListener('fc:error', (e) => {
  console.error('Failed:', e.detail.message);
});
```

---

# Redirect after submit

> Send visitors to your own thank-you page with a hidden redirect field or a dashboard setting.

Source: https://docs.formclick.io/html-forms/redirects

Instead of the Formclick confirmation page, you can send people to any page you like, for example a thank-you page that fires your analytics conversion.

_Animation: after submitting on /contact the visitor is redirected (302) to the site’s own /thanks page._

## Using a hidden field

```html
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="redirect" value="https://yourwebsite.com/thanks.html">
  ...
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

Plain HTML forms get a `302` redirect. With `formclick.min.js` or `fetch` the JSON response contains `redirect_url`, and the script navigates there for you.

## A default redirect for the form

A form can also have a default redirect URL, used for every submission that does not send its own `redirect` field, so you can change it without editing your site. Set it with the [MCP](https://docs.formclick.io/mcp/mcp-tools) `update_form_settings` or `create_html_form` tools.

## Rules

| Rule | Details |
| --- | --- |
| Full URL | Must be an absolute `http://` or `https://` URL, up to 2,000 characters. `/thanks` on its own is ignored. |
| Free plan | Redirects must stay on the same website the form was submitted from (subdomains and `www.` count as the same site). |
| Paid plans | Redirect to any domain, e.g. a booking page or a separate landing site. |
| Invalid redirect | Ignored. The submission still succeeds and the form’s default redirect or the normal confirmation is used. |

> **Tip:** Same-site redirects on the Free plan stop your form being misused to bounce visitors to other websites.

---

# File uploads

> Accept resumes, images and documents. Files upload straight to secure storage with drag and drop and progress bars.

Source: https://docs.formclick.io/html-forms/file-uploads

> **Pro and Business plans:** File uploads are available on the Pro and Business plans and need `formclick.min.js`.

Add a normal `<input type="file">` and include the script. Formclick turns each file input into a drag-and-drop zone with a file list, progress bars and remove buttons.

_Animation: a file input becomes a drag-and-drop zone; each file shows its own progress bar and a check mark when uploaded. Each file input becomes a drop zone. Files upload in parallel, with a progress bar each._

```html title="apply.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="text"  name="name"  required>
  <input type="email" name="email" required>

  <!-- One file, PDF or Word only -->
  <input type="file" name="resume" accept=".pdf,.doc,.docx">

  <!-- Several files, images or PDF -->
  <input type="file" name="work_samples" accept="image/*,.pdf" multiple>

  <button type="submit">Submit application</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Attributes

| Attribute | Effect |
| --- | --- |
| `name` | The field name the file (or list of files) is saved under. |
| `multiple` | Allow several files in one field. |
| `accept` | Limit file types, e.g. `.pdf,.docx` or `image/*`. Checked in the browser before uploading. |

## Limits

- **5 MB per file.** Larger files are rejected in the browser with a clear message, and the server enforces the same limit.
- Duplicate files (same name and size) are only added once.
- Uploads retry automatically up to 3 times with back-off if the connection drops.

## How it works

1. When the visitor submits, the script asks Formclick for a one-time upload URL for each file.
2. Each file uploads **directly** to secure storage in parallel, so large files never pass through the form endpoint.
3. The submission is sent with a link and details for every file.

In the saved submission a single file looks like this (a `multiple` field holds a list of these):

```json
{
  "name": "Jane Smith",
  "resume": {
    "name": "jane-smith-cv.pdf",
    "size": 248133,
    "type": "application/pdf",
    "url": "https://…"
  }
}
```

> **Warning:** A plain HTML form without the script cannot send files. The browser would post the file name only, so always include `formclick.min.js` on forms with file inputs.

Next: [Advanced file uploader](https://docs.formclick.io/html-forms/advanced-file-uploader) for size limits and styling, and [File attachments](https://docs.formclick.io/html-forms/file-attachments) for how files reach you.

---

# Advanced file uploader

> The drag-and-drop uploader formclick.min.js builds from every file input: multiple files, progress bars, retries, size and type limits, and styling.

Source: https://docs.formclick.io/html-forms/advanced-file-uploader

> **Pro and Business plans:** File uploads are available on the Pro and Business plans.

You don’t need an upload widget or a third-party service. Add a normal `<input type="file">` and `formclick.min.js` turns it into a full uploader.

_Animation: a file input becomes a drag-and-drop zone; each file shows its own progress bar and a check mark when uploaded. Drop files or browse, see each file’s progress, remove mistakes before sending._

## What it does

- **Drag and drop** onto the zone, or click **Browse files**.
- **One or many files:** add `multiple` to accept several files in one field. Without it, a new file replaces the previous one.
- **Checks before uploading:** files over the size limit or not matching `accept` are rejected straight away with a clear message.
- **Skips duplicates:** the same file (same name and size) is only added once.
- **Remove button** on each file until the form is sent.
- **Parallel uploads** with a progress bar for every file.
- **Automatic retries:** up to 3 attempts with increasing delays if the connection drops.
- **Direct to storage:** files go straight to secure storage, not through the form endpoint, so large files don’t slow down the submission.
- **Resets** after a successful submit, ready for the next visitor.

## Options

| Attribute | Example | Effect |
| --- | --- | --- |
| `name` | `name="resume"` | Field the file (or list of files) is saved under. |
| `multiple` | `multiple` | Allow several files in this field. |
| `accept` | `accept=".pdf,.docx"` or `accept="image/*"` | Allowed extensions or MIME types. |
| `data-max-size` | `data-max-size="2097152"` | A lower size limit, in bytes (here 2 MB). The limit can’t go above 5 MB. |

```html title="apply.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>

  <!-- One PDF, max 2 MB -->
  <input type="file" name="cover_letter" accept=".pdf" data-max-size="2097152">

  <!-- Up to many images, 5 MB each -->
  <input type="file" name="photos" accept="image/*" multiple>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Allowed file types

Whatever you set in `accept`, the server only stores these types: images (JPEG, PNG, GIF, WebP, SVG, TIFF), PDF, Word, Excel, PowerPoint, plain text, CSV and ZIP.

## Styling

The uploader injects light default styles. Override any of these classes in your own CSS:

| Class | Element |
| --- | --- |
| `.fc-upload-zone` | The drop zone. Adds `.fc-drag-over` while dragging, `.fc-has-files` with files, `.fc-error-zone` on an error. |
| `.fc-upload-hint`, `.fc-upload-meta`, `.fc-upload-browse` | Hint text, limits text and the Browse button. |
| `.fc-file-item` | One file row. Has `.fc-file-name`, `.fc-file-size`, `.fc-file-status` and `.fc-file-remove`. |
| `.fc-progress-wrap`, `.fc-progress-bar` | The progress track and bar. |
| `.fc-zone-error` | Error message under the zone. |

```html
<style>
  .fc-upload-zone { border-radius: 14px; border-color: #c7d2fe; }
  .fc-upload-zone.fc-drag-over { border-color: #645cec; background: #f6f5ff; }
  .fc-progress-bar { background: #645cec; }
</style>
```

How files reach you after upload is covered in [File attachments](https://docs.formclick.io/html-forms/file-attachments).

---

# File attachments

> How uploaded files reach you: secure links in your email, in the dashboard and in webhooks.

Source: https://docs.formclick.io/html-forms/file-attachments

Files uploaded through your form are stored securely and linked to the submission. They are not attached to the notification email itself, which keeps emails small, avoids attachment size limits and stops files being forwarded around by accident.

## In your notification email

Each file field lists the file name and size with a link. The link is secure:

- It opens only for the signed-in owner of the form. Anyone else is asked to log in.
- It creates a fresh download link that works for 5 minutes, so links can’t be shared and reused.
- Images, PDFs and plain text open in the browser; other types (including SVG) download.
- A link can’t be edited to reach another form’s files.

## In the dashboard

Open the submission in **Submissions** to see and open its files.

## In webhooks and integrations

File fields are sent as objects with the file’s details. A field with `multiple` sends a list.

```json
"resume": {
  "id": "file_9c1e…",
  "key": "uploads/…/jane-smith-cv.pdf",
  "name": "jane-smith-cv.pdf",
  "size": 248133,
  "type": "application/pdf"
}
```

## Limits

| Limit | Value |
| --- | --- |
| File size | 5 MB per file |
| Plans | Pro and Business |
| Types | Images, PDF, Office documents, text, CSV, ZIP |

Set up uploads in [File uploads](https://docs.formclick.io/html-forms/file-uploads) and customise the uploader in [Advanced file uploader](https://docs.formclick.io/html-forms/advanced-file-uploader).

---

# formclick.min.js

> A tiny drop-in script that adds AJAX submits, loading states, inline messages and file uploads to your forms.

Source: https://docs.formclick.io/html-forms/formclick-js

`formclick.min.js` upgrades every form whose `action` points at Formclick. Your HTML stays the same and still works if JavaScript is off.

```html
<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## What it does

- **Submits in the background**, so visitors stay on your page.
- **Disables the submit button** while sending and adds the `fc-btn-loading` class.
- **Shows success and error messages** inside the form, then resets it.
- **Follows redirects** set with the `redirect` field or in the dashboard.
- **Turns file inputs into upload zones** with drag and drop and progress bars.
- **Checks your access key** and shows a clear configuration message if it is missing or malformed.
- **Watches the page** for forms added later (modals, SPA routes) and enhances them automatically.
- **Works with captchas:** checks that a reCAPTCHA or Turnstile widget is completed before sending, fetches reCAPTCHA v3 tokens, and resets the widget after each attempt.

_Animation: with formclick.min.js the form submits in the background, the button shows "Sending…", then an inline success message appears and the form resets._

## Which forms are enhanced

Any `<form>` whose `action` starts with `https://api.formclick.io/submit`. Other forms on the page are left alone. Each form is enhanced once, even if the script is included twice.

> **Warning:** The script reads the key from the hidden `access_key` field, so keep that field in the form even if you also put the key in the URL.

## Form attributes

| Attribute | Description |
| --- | --- |
| `data-success-msg` | Message shown after a successful submit. Overrides the default message. |
| `data-recaptcha-v3` | Your reCAPTCHA v3 site key. The script gets a fresh token right before each submit. See [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha). |

## Events

Both events bubble, so you can listen on the form or on `document`.

| Event | When | `event.detail` |
| --- | --- | --- |
| `fc:success` | The submission was saved. | The JSON response, e.g. `{ success, message }` |
| `fc:error` | Validation, upload or network failure. | An `Error` with a readable `message` |

```js
document.addEventListener('fc:success', (e) => {
  // e.target is the form that was submitted
  gtag('event', 'generate_lead', { form: e.target.id });
});
```

## JavaScript API

| Method | Description |
| --- | --- |
| `Formclick.enhance(form)` | Enhance one form element right away. |
| `Formclick.reinit()` | Scan the page again for Formclick forms. |
| `Formclick.version` | The loaded version, e.g. `"2.1.0"`. |

> **Tip:** You rarely need these: new forms are picked up automatically. They help when you build a form in memory before attaching it to the page.

## CSS classes

| Class | Element |
| --- | --- |
| `.fc-form-msg` | The message box added to the form. |
| `.fc-msg-success` / `.fc-msg-error` | Success or error variant of the message. |
| `.fc-btn-loading` | Submit button while the form is sending. |
| `.fc-upload-zone` | File drop zone. Gets `.fc-drag-over`, `.fc-has-files` and `.fc-error-zone`. |

---

# JavaScript & fetch

> Post JSON to the endpoint from fetch, Axios or any HTTP client and handle the response yourself.

Source: https://docs.formclick.io/html-forms/javascript-fetch

If you want full control of the UI, skip the script and call the endpoint yourself. Send JSON with an `Accept: application/json` header and you get JSON back.

**fetch**

```js title="contact.js"
const form = document.querySelector('#contact');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));

  const res = await fetch('https://api.formclick.io/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ access_key: 'YOUR_ACCESS_KEY', ...data }),
  });
  const result = await res.json();

  if (result.success) {
    form.reset();
    alert(result.message);
  } else {
    alert(result.message || 'Something went wrong');
  }
});
```

**FormData**

```js
// Send the form as-is (no JSON). Formclick parses multipart/form-data too.
const res = await fetch('https://api.formclick.io/submit', {
  method: 'POST',
  headers: { Accept: 'application/json' },
  body: new FormData(document.querySelector('#contact')),
});
const result = await res.json();
```

**Axios**

```js
import axios from 'axios';

const { data } = await axios.post('https://api.formclick.io/submit', {
  access_key: 'YOUR_ACCESS_KEY',
  name: 'Jane Smith',
  email: 'jane@example.com',
  message: 'Hello!',
});
// data → { success: true, message: "Thank you! Your message has been received." }
```

**cURL**

```bash
curl -X POST https://api.formclick.io/submit \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -d '{"access_key":"YOUR_ACCESS_KEY","name":"Jane","email":"jane@example.com","message":"Hi"}'
```

## Response

```json
{
  "success": true,
  "message": "Thank you! Your message has been received.",
  "redirect_url": "https://yourwebsite.com/thanks"   // only when a redirect applies
}
```

Errors use the same shape with `success: false` and a readable `message`. Always check `success` rather than only the HTTP status. The full list is in [Errors](https://docs.formclick.io/api-reference/errors).

> **Note:** CORS is open (`Access-Control-Allow-Origin: *`), so you can call the endpoint from any website or local development server.

---

# React, Next.js & Vue

> Copy-paste contact forms for React, Next.js and Vue.

Source: https://docs.formclick.io/html-forms/frameworks

Formclick has no SDK to install. In a framework you either render a plain HTML form, or post JSON with `fetch` and keep the state in your component.

**React**

```jsx title="ContactForm.jsx"
import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('idle'); // idle | sending | sent | error
  const [error, setError] = useState('');

  async function onSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://api.formclick.io/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ access_key: process.env.NEXT_PUBLIC_FORMCLICK_KEY, ...data }),
    });
    const result = await res.json();

    if (result.success) {
      setStatus('sent');
      e.target.reset();
    } else {
      setStatus('error');
      setError(result.message);
    }
  }

  if (status === 'sent') return <p>Thanks! We'll be in touch soon.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex={-1} />
      <button disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>
      {status === 'error' && <p role="alert">{error}</p>}
    </form>
  );
}
```

**Next.js**

```jsx title="app/contact/page.tsx"
// app/contact/page.tsx — a plain HTML form works in a Server Component
export default function ContactPage() {
  return (
    <form action="https://api.formclick.io/submit" method="POST">
      <input type="hidden" name="access_key" value={process.env.NEXT_PUBLIC_FORMCLICK_KEY} />
      <input type="hidden" name="redirect" value="https://yourwebsite.com/thanks" />
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {/* formclick.min.js is loaded once in app/layout.tsx (see below) */}
    </form>
  );
}
```

**Vue**

```vue title="ContactForm.vue"
<script setup>
import { ref } from 'vue';

const form = ref({ name: '', email: '', message: '' });
const status = ref('idle');

async function submit() {
  status.value = 'sending';
  const res = await fetch('https://api.formclick.io/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ access_key: 'YOUR_ACCESS_KEY', ...form.value }),
  });
  const result = await res.json();
  status.value = result.success ? 'sent' : 'error';
}
</script>

<template>
  <p v-if="status === 'sent'">Thanks! Your message has been sent.</p>
  <form v-else @submit.prevent="submit">
    <input v-model="form.name" placeholder="Name" required />
    <input v-model="form.email" type="email" placeholder="Email" required />
    <textarea v-model="form.message" placeholder="Message" required />
    <button :disabled="status === 'sending'">Send</button>
  </form>
</template>
```

## Keeping the key in an environment variable

The access key is public, so an env variable is about convenience rather than secrecy: one key per environment, nothing hard-coded. Next.js exposes variables prefixed with `NEXT_PUBLIC_`; Vite uses `VITE_`.

```bash title=".env.local"
NEXT_PUBLIC_FORMCLICK_KEY=YOUR_ACCESS_KEY
```

## Using formclick.min.js in a framework

Plain HTML forms in a framework (like the Next.js example above) should load the script too. Load it once in your root layout and it enhances forms as they are rendered, including on client-side navigation.

```jsx title="app/layout.tsx"
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Handles submit, file upload, loading state and success/error messages. */}
        <Script src="https://cdn.formclick.io/formclick.min.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}
```

---

# Static sites & site builders

> Use Formclick on GitHub Pages, Netlify, Vercel, WordPress, Webflow and any builder that accepts custom HTML.

Source: https://docs.formclick.io/html-forms/site-builders

Anywhere you can paste HTML, you can use Formclick. The form posts straight to Formclick, so the host does not need to run any server code.

| Platform | Where to paste the form |
| --- | --- |
| GitHub Pages, Netlify, Vercel, Cloudflare Pages | Directly in your `.html` file or template. |
| WordPress | A **Custom HTML** block in the editor. |
| Webflow | An **Embed** element. |
| Wix, Squarespace, Framer, Carrd | Their custom code or embed block. |
| Hugo, Jekyll, Eleventy, Astro | Any layout or partial. |

```html
<form action="https://api.formclick.io/submit" method="POST">
  <!-- Replace with the key from your form's Connect tab -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Your message" required></textarea>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

> **Tip:** Some builders strip `<script>` tags from embeds. The form still works without the script, using the hosted confirmation page or your redirect.

Browse ready-made, styled forms in the [HTML form templates](https://formclick.io/templates/html-templates) gallery.

---

# Spam protection

> Honeypot fields, content scoring, rate limiting and duplicate detection keep bots out of your inbox.

Source: https://docs.formclick.io/html-forms/spam-protection

Every form gets several layers of protection on the server. You only need to add one line of HTML for the honeypot; everything else is automatic.

_Diagram: a real message goes to the inbox, a bot that ticks the honeypot is dropped, and a spammy message goes to the Spam tab. Bots that fill the honeypot are dropped, spammy messages go to the Spam tab, real people reach your inbox._

## Honeypot field

A honeypot is a field people never see. Bots fill in every field they find, so if the honeypot has a value, Formclick drops the submission. The bot still gets a normal success response, so it has no reason to try again.

```html
<!-- Option 1: checkbox (recommended) -->
<input type="checkbox" name="botcheck" class="fc-hp" tabindex="-1" autocomplete="off">

<!-- Option 2: text field -->
<input type="text" name="_honeypot" class="fc-hp" tabindex="-1" autocomplete="off">

<style>
  /* Hide from people but keep it in the page for bots */
  .fc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
</style>
```

> **Tip:** Moving the field off-screen works better than `display:none`, which some bots detect. `tabindex="-1"` and `autocomplete="off"` stop keyboard users and password managers from filling it by accident.

## Captcha

For forms that attract determined bots, add a captcha. Formclick verifies the token on every submission and rejects the ones that fail, so bots can’t skip it. Supported: [Google reCAPTCHA v2 and v3](https://docs.formclick.io/html-forms/recaptcha) and [Cloudflare Turnstile](https://docs.formclick.io/html-forms/turnstile), on the Starter, Pro and Business plans.

## Restrict to your websites

On paid plans you can [restrict a form to your own domains](https://docs.formclick.io/html-forms/restrict-domain), so it rejects submissions sent from any other website.

## Content scoring

Each submission is scored on signals that show up almost only in spam, for example:

- A link inside a name field.
- Many links in one message, or HTML/BBCode link markup.
- Well-known spam phrases (SEO offers, crypto schemes, “buy followers”…).
- An email field that is not a valid address.

Suspected spam is **never deleted**. It is saved to the **Spam** tab of your dashboard and skips your notification email, integrations and monthly submission count. If a real message lands there, mark it **Not spam**.

## Rate limiting

Each IP address can send **5 submissions per form every 10 minutes**. Further attempts get a `429` response with “Too many submissions. Please try again later.”

## Duplicate detection

If the same visitor sends exactly the same data twice within **2 minutes**, for example by double-clicking Send, the second copy is ignored but still answered with success. You get one email, not two.

## Empty submissions

Submissions where every field is blank are rejected with `400 Submission is empty`.

---

# Security & privacy

> How Formclick protects your submissions, files and email delivery.

Source: https://docs.formclick.io/html-forms/security

- **HTTPS everywhere.** The endpoint, the script and file uploads only use encrypted connections.
- **Public access key, private data.** The key can create submissions but cannot read them. See [Access key](https://docs.formclick.io/html-forms/access-key).
- **Recipients come from your dashboard only.** A form cannot choose who receives the notification, so it cannot be turned into a spam relay.
- **Safe email headers.** `subject` and `from_name` are cleaned to a single line and length-limited. The sending address is always Formclick’s; the visitor’s email is only used as Reply-To.
- **Direct file uploads.** Files go straight to secure storage through one-time upload URLs and are linked in your submission.
- **Redirect checks.** Redirect URLs must be absolute `http(s)` links, and Free plans can only redirect within the same site.
- **Captcha verification (paid plans).** [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) and [Turnstile](https://docs.formclick.io/html-forms/turnstile) tokens are checked with Google or Cloudflare on the server; captcha secret keys are stored encrypted.
- **Domain restriction.** [Restrict a form](https://docs.formclick.io/html-forms/restrict-domain) to your own websites on paid plans.
- **Disable any time.** Turn a form off in the dashboard and new submissions are refused with `403`.

## What is stored

For each submission Formclick stores the fields you sent (minus control fields such as `access_key`, `botcheck` and `redirect`), the submission time, the referring page, the IP address and browser user agent. The IP is used for rate limiting and abuse prevention.

---

# reCAPTCHA integration

> Add Google reCAPTCHA v2 (checkbox) or v3 (invisible) to your form. Formclick verifies every token on the server.

Source: https://docs.formclick.io/html-forms/recaptcha

> **Starter, Pro and Business plans:** reCAPTCHA is a paid feature. You also need your own reCAPTCHA keys from Google; they’re free.

reCAPTCHA stops automated submissions. Your visitor’s browser gets a token from Google, the token is sent with the form, and Formclick checks it with Google before saving the submission. Submissions without a valid token are rejected.

## 1. Create your keys

1. Open the [reCAPTCHA admin console](https://www.google.com/recaptcha/admin/create).
2. Choose **reCAPTCHA v2 → “I’m not a robot” Checkbox**, or **reCAPTCHA v3** for an invisible check.
3. Add your website’s domain (and `localhost` if you test locally).
4. Copy the **site key** and the **secret key**.

## 2. Turn it on in Formclick

Open your form → **Settings → Security**, choose **Google reCAPTCHA v2** or **v3**, paste both keys and save. The secret key is stored encrypted and never shown again.

> **Warning:** From the moment you save, submissions without a valid captcha are rejected. Add the widget to your form first, then save the setting.

## 3. Add it to your form

**reCAPTCHA v2 (checkbox)**

```html title="contact.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <!-- The checkbox. Google adds the token to the form for you. -->
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

  <button type="submit">Send</button>
</form>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**reCAPTCHA v3 (invisible)**

```html title="contact.html"
<!-- Put your site key on the form tag -->
<form action="https://api.formclick.io/submit" method="POST" data-recaptcha-v3="YOUR_SITE_KEY">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<!-- Handles submit, file upload, loading state and success/error messages. -->
<!-- Also fetches a fresh reCAPTCHA v3 token right before each submit. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## reCAPTCHA v3 score

reCAPTCHA v3 doesn’t show a challenge. Google scores each visitor from 0.0 (likely a bot) to 1.0 (likely a person), and Formclick rejects submissions below your **minimum score** (default 0.5, set in **Settings → Security**). Lower it if real visitors are being blocked; raise it if spam gets through.

> **Note:** reCAPTCHA v3 needs `formclick.min.js`, which asks Google for a token when the visitor presses Submit. reCAPTCHA v2 also works on plain HTML forms without the script.

## What visitors see when it fails

| Situation | Message |
| --- | --- |
| Checkbox not ticked (v2) | “Please complete the captcha.” (shown before sending, with `formclick.min.js`) |
| Token missing on the server | `400` “Please complete the captcha.” |
| Token invalid, expired, reused or v3 score too low | `400` “Captcha verification failed. Please try again.” |
| Google couldn’t be reached | `503` “We couldn’t verify the captcha. Please try again.” |

Tokens work once and expire after about two minutes. `formclick.min.js` resets the widget after every attempt, so visitors can try again straight away.

## If your plan changes

Captcha is checked only while your plan includes it. If your account moves to the Free plan, Formclick stops checking tokens so your form keeps working; upgrade again and the saved settings apply straight away.

## Using fetch or your own JavaScript

Send the token in a field named `g-recaptcha-response`. It is used for verification and never stored with the submission.

```js
const token = grecaptcha.getResponse(); // v2
// const token = await grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit' }); // v3

await fetch('https://api.formclick.io/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
  body: JSON.stringify({ access_key: 'YOUR_ACCESS_KEY', email, message, 'g-recaptcha-response': token }),
});
```

---

# Cloudflare Turnstile captcha

> Add Cloudflare Turnstile, a privacy-friendly captcha that most visitors never have to click. Formclick verifies every token.

Source: https://docs.formclick.io/html-forms/turnstile

> **Starter, Pro and Business plans:** Turnstile is a paid Formclick feature. Turnstile itself is free; you need a Cloudflare account to create a widget.

Turnstile checks visitors in the background and rarely asks them to do anything. Like reCAPTCHA, the token is sent with the form and Formclick verifies it with Cloudflare before saving. It doesn’t use cookies for tracking, which makes it a good fit for privacy-conscious sites.

## 1. Create a widget

1. In the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/turnstile), open **Turnstile** and add a widget.
2. Add your website’s domain (and `localhost` for local testing).
3. Choose the **Managed** widget mode (recommended).
4. Copy the **site key** and **secret key**.

## 2. Turn it on in Formclick

Open your form → **Settings → Security**, choose **Cloudflare Turnstile**, paste both keys and save. The secret key is stored encrypted and never shown again.

> **Warning:** Once saved, submissions without a valid Turnstile token are rejected. Add the widget to your form before saving.

## 3. Add it to your form

```html title="contact.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <!-- The widget. Cloudflare adds the token to the form for you. -->
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

  <button type="submit">Send</button>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

The widget adds a hidden `cf-turnstile-response` field to your form. It works with plain HTML forms and with `formclick.min.js`, which also resets the widget after each attempt so visitors can retry.

## Testing

Cloudflare provides [test keys](https://developers.cloudflare.com/turnstile/troubleshooting/testing/): the site key `1x00000000000000000000AA` with the secret `1x0000000000000000000000000000000AA` always passes, so you can try your form before using real keys. Switch to your own keys before going live.

## If your plan changes

Turnstile is checked only while your plan includes captcha. On the Free plan Formclick stops checking tokens so your form keeps working; upgrade again and the saved settings apply straight away.

## Errors

| Situation | Message |
| --- | --- |
| Widget not completed | “Please complete the captcha.” |
| Token invalid, expired or already used | `400` “Captcha verification failed. Please try again.” |
| Cloudflare couldn’t be reached | `503` “We couldn’t verify the captcha. Please try again.” |

Using `fetch`? Send the token as `cf-turnstile-response`, e.g. from `turnstile.getResponse()`.

---

# Restrict to domain

> Only accept submissions sent from your own websites. Submissions from anywhere else are rejected.

Source: https://docs.formclick.io/html-forms/restrict-domain

> **Starter, Pro and Business plans:** Domain restriction is available on every paid plan.

Your access key is public, so anyone could copy your form onto another website. A domain allow-list makes Formclick accept submissions only when they come from pages on your own domains.

## Set it up

1. Open your form → **Settings → Security**.
2. Under **Restrict to domains**, type a domain such as `example.com` and press Enter. Add up to 20.
3. Add `localhost` as well if you test the form on your computer.
4. Save. Leave the list empty to accept submissions from any website again.

## How domains are matched

| Allowed | Accepted | Rejected |
| --- | --- | --- |
| `example.com` | `example.com`, `www.example.com`, `shop.example.com` | `example.org`, `myexample.com`, `example.com.evil.net` |
| `app.example.com` | `app.example.com`, `eu.app.example.com` | `example.com`, `www.example.com` |

Paste a full URL if you like; `https://www.example.com/contact` is saved as `example.com`. Each domain includes all its subdomains.

## What gets checked

Browsers tell Formclick which page a form was sent from (the `Origin` header, or `Referer`). If it isn’t one of your domains, or if it’s missing, the submission is rejected with `403` “This form doesn’t accept submissions from this website.” File uploads are checked the same way.

> **Combine it with a captcha:** Domain restriction stops other websites from using your form. Scripts and bots outside a browser can fake those headers, so pair it with [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Turnstile](https://docs.formclick.io/html-forms/turnstile) if bots are a problem.

## Things to know

- Calls from servers, cURL or mobile apps usually send no `Origin`, so they are rejected while a list is set. Leave the list empty for forms used that way.
- Browsers send the page’s `Origin` with every form post. The exception is a site that sets `Referrer-Policy: no-referrer`: the browser then hides where the form came from and submissions are rejected. Use the default policy (`strict-origin-when-cross-origin`) on pages with your form.
- Pages opened as local files (`file://`) have no domain, so test on `localhost` instead.
- The restriction applies while your plan includes it. On the Free plan the saved domains are kept but not checked.

---

# Email notifications

> Get every submission by email, with your own recipients, subject line and sender name.

Source: https://docs.formclick.io/html-forms/email-notifications

Each new submission sends a notification email with every field, the page it came from and a link to view it in your dashboard. Emails go out within seconds and are retried automatically if delivery fails.

## Recipients

By default the notification goes to the form’s email address. In the form’s notification settings you can add more recipients, including **CC** and **BCC**, or turn notifications off.

> **Note:** Recipients can only be set in the dashboard. Fields in your HTML can never change who receives the email.

## Subject line

The subject is chosen in this order:

1. The **subject template** in your notification settings.
2. The form’s `subject` field.
3. The default: `New submission: {{form_name}}`.

Templates can include any submitted field in double curly braces, plus `{{form_name}}`:

```
New {{plan}} enquiry from {{name}} ({{form_name}})
→ New Pro enquiry from Jane Smith (Website contact)
```

## Sender name

Set the display name in your notification settings, or per form with a hidden `from_name` field. The From address is always a Formclick address so your emails pass SPF and DMARC checks.

## Reply-To

When the form has a valid `email` field, it becomes the Reply-To of the notification. Press **Reply** in your inbox and you are writing to the visitor.

## Emails going to spam?

- Add the Formclick sending address to your contacts or a safe-senders list.
- In Gmail, open the email and choose **Report not spam**; future notifications learn from it.
- Check the dashboard: every submission is saved there even if an email is filtered.

---

# Add CC email

> Send each notification to more people with To, CC and BCC recipients.

Source: https://docs.formclick.io/html-forms/cc-email

Every form can email several people at once. Add them as **To**, **CC** or **BCC** recipients in the form’s notification settings; there is nothing to change in your HTML.

### Step 1: Open notification settings

Open your form and go to **Settings → Email Notifications**.

### Step 2: Add recipients

Under **Recipients**, type an address and press Enter. Use the **CC** and **BCC** boxes the same way.

### Step 3: Save and test

Save, send a test submission and check **Recent deliveries** to see the email went to everyone.

## Limits

| Field | Up to | Who sees the address |
| --- | --- | --- |
| To | 5 addresses | Everyone who receives the email |
| CC | 10 addresses | Everyone who receives the email |
| BCC | 10 addresses | Only that recipient |

Duplicates are removed automatically: an address that is already in **To** is not sent a second copy as CC or BCC. Invalid addresses are skipped.

## Why CC isn’t a form field

> **Note:** Some form services let you add a hidden `ccemail` field to your HTML. Formclick doesn’t: recipients can only be set in the dashboard, so nobody can edit your page’s HTML and use your form to send email to other people.

To reply to the visitor, use the **Reply-To** that Formclick sets from the form’s `email` field. See [Email notifications](https://docs.formclick.io/html-forms/email-notifications).

---

# Autoresponder (Auto-Reply)

> Automatically email the person who filled in your form to confirm you received their message.

Source: https://docs.formclick.io/html-forms/autoresponder

> **Pro and Business plans:** The autoresponder is available on the Pro and Business plans.

With the autoresponder on, every visitor gets a confirmation email from you a few seconds after they submit. It is a simple, branded message: your name, your logo, a short intro text and, if you like, a copy of what they sent.

### Step 1: Open autoresponder settings

Open your form and go to **Settings → Autoresponder**.

### Step 2: Turn it on

Switch on **Enable autoresponder**.

### Step 3: Write the email

Set the **From name**, **Subject**, **Intro text** and, optionally, a **Logo URL**. The preview updates as you type.

### Step 4: Make sure your form has an email field

The reply goes to the address in the field named `email`.

```html
<input type="text"  name="name"  required>
<!-- Required for the autoresponder -->
<input type="email" name="email" required>
```

### Step 5: Test from your live website

Submit the form on your published site. Tests from `localhost` don’t send an auto-reply (see below).

## Settings

| Setting | Details | Default |
| --- | --- | --- |
| From name | Your company or website name, up to 100 characters. The email is sent from `noreply@formclick.io` with this name. | The form name |
| Subject | Up to 200 characters, one line. | “We received your submission” |
| Intro text | The message at the top of the email, up to 2,000 characters. Line breaks are kept. | See below |
| Include a copy of their submission | Lists the fields they submitted below your intro text. | On |
| Logo URL | An `https://` link to your logo image, up to 500 characters. | No logo |

## Intro text

The intro text is the main message of the auto-reply. Thank the visitor, tell them what happens next and when to expect an answer. If you leave it empty, Formclick uses:

```
Thank you for getting in touch. We have received your submission and will get back to you soon.
```

An example that sets clear expectations:

```
Hi there,

Thanks for contacting Acme Studio! We've received your message and a member
of our team will reply within one business day.

In the meantime, you can browse our case studies at acme.studio/work.
```

## When an auto-reply is sent

- The submission has a valid address in the `email` field.
- It comes from a public website. Submissions from `localhost`, private IP addresses or scripts without an origin are saved but don’t get an auto-reply.
- It isn’t flagged as spam.
- The same address hasn’t already had 3 auto-replies from this form today. This stops anyone using your form to flood someone’s inbox.

## Replies

When a visitor replies to the auto-reply, the reply goes to your notification address, not to Formclick.

Recent auto-replies and their delivery status are listed at the bottom of the autoresponder settings page.

---

# Integrations

> Send submissions to Google Sheets, Notion, Airtable, Discord, n8n, databases, CRMs and email tools.

Source: https://docs.formclick.io/html-forms/integrations

Integrations run after a submission is saved, in the background with automatic retries. Connect them from the form’s **Integrations** tab and map form fields to the other app. Nothing changes in your HTML.

| Category | Integrations |
| --- | --- |
| Productivity | [Google Sheets](https://formclick.io/integrations/google-sheets), [Notion](https://formclick.io/integrations/notion), [Airtable](https://formclick.io/integrations/airtable), [monday.com](https://formclick.io/integrations/monday) |
| Databases | [PostgreSQL](https://formclick.io/integrations/postgresql), [MySQL](https://formclick.io/integrations/mysql), [SQL Server](https://formclick.io/integrations/sql-server), [MongoDB](https://formclick.io/integrations/mongodb), [Supabase](https://formclick.io/integrations/supabase-db), [Neon](https://formclick.io/integrations/neon-db) |
| Email & CRM | [Zoho CRM](https://docs.formclick.io/html-forms/zoho-crm), [Brevo](https://formclick.io/integrations/brevo), [MailerLite](https://formclick.io/integrations/mailerlite), [ActiveCampaign](https://formclick.io/integrations/activecampaign), [SMTP Email](https://formclick.io/integrations/smtp-email) |
| Messaging | [Discord](https://formclick.io/integrations/discord) |
| Automation | [n8n](https://docs.formclick.io/html-forms/n8n), [Make](https://docs.formclick.io/html-forms/make) (coming soon) |
| Developer | [Webhook](https://docs.formclick.io/html-forms/webhooks) |

Spam-flagged submissions never reach your integrations. Availability depends on your plan; see [Plans & limits](https://docs.formclick.io/help/plans-and-limits).

See setup guides for each one in the [integrations directory](https://formclick.io/integrations).

---

# Zoho CRM

> Create or update Zoho CRM leads, contacts, accounts and deals from submissions, and add notes and tasks.

Source: https://docs.formclick.io/html-forms/zoho-crm

The Zoho CRM integration turns each new submission into CRM records. You sign in with Zoho (OAuth 2.0). No API keys. Every Zoho data center is supported (US, EU, IN, AU, JP, CA, SA, CN).

## Actions

| Action | What it does |
| --- | --- |
| Create Lead / Contact / Account / Deal | Creates a new record in that module |
| Update Lead / Contact / Account / Deal | Finds the record by a field you choose (e.g. Email) and updates it. Optionally creates it when there is no match |
| Create Note | Adds a note to a record created by another action |
| Create Task | Creates a task, optionally related to a record created by another action |

Actions run in this order: accounts, contacts, leads, deals, then notes and tasks. A contact is linked to the account, and a deal to the contact and account, created from the same submission.

## Setup

### Step 1: Open the integration

Open your form → **Integrations** → filter **CRM** → **Zoho CRM**.

### Step 2: Connect

Click **Connect Zoho CRM**, sign in to Zoho and approve access. You return to Formclick connected, with your organization name and data center shown.

### Step 3: Add an action

Click **Add action** and pick one, e.g. **Create Lead**. Formclick loads that module’s fields from your CRM, including custom fields.

### Step 4: Map fields

For each Zoho field choose a **form field** or a **fixed value**. Fields Zoho requires (such as Last Name) are added automatically and must be filled. Use **+ Add a Zoho field** for more.

### Step 5: Test

**Test Field Mapping** shows the records that would be sent, without sending. **Send Test Submission** creates them in Zoho for real.

### Step 6: Activate

Leave **Active for this form** on and click **Save & Activate**.

## Field mapping

- Values are converted to the Zoho field type: numbers (“$1,250” → 1250), dates, date-times, checkboxes, pick lists (matched by label or value) and multi-select lists.
- Fixed values can include submission fields: `{{field_id}}`, plus `{{all_fields}}`, `{{form_name}}` and `{{submission_id}}`. Handy for note content.
- A warning appears when a form field’s type doesn’t fit the Zoho field (e.g. a text field into a number field).
- Lookup, file, formula and read-only Zoho fields can’t be set from a form and aren’t listed.

## Delivery & retries

- Submissions are always saved first. Zoho runs in the background and a Zoho error never affects the submission.
- Rate limits (`429`) and Zoho server errors are retried automatically with exponential backoff.
- Each submission creates a record at most once per action, even if a delivery is repeated.
- **Recent deliveries** in the integration lists each run with the Zoho record IDs. Failed ones have a **Retry** button that re-sends only the actions that didn’t succeed.
- Spam-flagged submissions are never sent.

## Permissions & security

Formclick asks to create, read and update leads, contacts, accounts and deals; create notes and tasks; read module and field settings; and read your organization name. Tokens are encrypted at rest and never shown in the browser. **Disconnect** revokes Formclick’s access in Zoho immediately.

## Troubleshooting

| Message | What to do |
| --- | --- |
| Reconnect needed | The authorization was revoked or expired. Click **Reconnect**. |
| Zoho CRM requires a field | Map that field to a form field or a fixed value. |
| Zoho CRM rejected the value for a field | The answer doesn’t fit the field (e.g. an invalid email or a pick-list value that doesn’t exist). |
| A record with the same … already exists | A unique field (often Email) is taken. Use an **Update** action instead of **Create**. |
| Formclick lacks permission | Reconnect and approve every requested permission. Your Zoho role must also allow the action. |

---

# n8n

> Trigger an n8n workflow on every submission and automate form processing across thousands of apps.

Source: https://docs.formclick.io/html-forms/n8n

The n8n integration sends each new submission to an n8n workflow as JSON. From there you can route it to a CRM, Slack, a database, an AI step or any of the apps n8n connects to. It is a native webhook integration: you paste your n8n Production Webhook URL, with no OAuth app or API key needed. It works with n8n Cloud and self-hosted n8n.

## Before you start

- An n8n workflow that starts with a **Webhook** trigger node.
- Set the node’s **HTTP Method** to `POST`.
- Activate the workflow and copy the **Production URL** (it contains `/webhook/`). The **Test URL** (`/webhook-test/`) only listens while you click “Listen for test event” in the editor.
- Your n8n instance must be reachable on the public internet. Private and internal addresses are rejected.

## Setup

### Step 1: Open the integration

Open your form → **Integrations**, filter by **Automation** and click **Connect** on **n8n**.

### Step 2: Paste the webhook URL

Paste your n8n **Production Webhook URL**.

### Step 3: Add authentication (optional)

If the Webhook node uses authentication, pick the same type and enter its credentials (see below).

### Step 4: Test the connection

Click **Test Connection**. Formclick sends a small `formclick.connection_test` event and shows n8n’s response.

### Step 5: Send a test submission

Click **Send Test Submission**. It uses the form’s latest submission (or sample data) in the live format, so you can map fields in the next n8n nodes.

### Step 6: Save

Leave **Enable for this form** on and click **Save & Connect**. Every new submission now runs your workflow.

## Authentication

Choose the option that matches the **Authentication** setting of your n8n Webhook node.

| Option | What Formclick sends |
| --- | --- |
| None | No auth header. Anyone with the URL can trigger the workflow, so keep it private. |
| Header Auth | Your header name and value, e.g. `X-N8N-Key: …`. |
| Basic Auth | `Authorization: Basic …` built from your username and password. |
| JWT / Bearer token | `Authorization: Bearer <token>`. |

> **Tip:** Your webhook URL and credentials are encrypted at rest. After saving they are only shown masked; leave a masked field as it is to keep the saved value.

## Payload

Each new, non-spam submission is sent once as a `POST` with `Content-Type: application/json` and `User-Agent: Formclick-n8n/1.0`.

```json
{
  "event": "submission.created",
  "submissionId": "7f6c2b8e-…",
  "formId": "0d1a4f3c-…",
  "formName": "Contact form",
  "submittedAt": "2026-11-09T10:24:31.000Z",
  "fromName": "Jane Smith",
  "fromEmail": "jane@example.com",
  "data": {
    "name": "Jane Smith",
    "email": "jane@example.com",
    "message": "Hi! Could we book a demo next week?"
  }
}
```

In n8n the fields are under `body`, for example `{{ $json.body.data.email }}`. Test events also include `"test": true`, so you can filter them out with an **If** node.

## Manage the connection

- **Enable or disable** it per form with **Enable for this form**.
- **Edit** the URL or authentication at any time from the same screen.
- **Disconnect** to stop sending submissions to n8n.
- Failed deliveries (for example if the workflow is inactive) are retried automatically.

## Troubleshooting

| Response | What to do |
| --- | --- |
| `404` | The workflow isn’t active, or you used the Test URL. Activate the workflow and use the Production URL. |
| `401` / `403` | The authentication doesn’t match the Webhook node. Check the type, header name and secret. |
| Redirect (`3xx`) | Use the final webhook URL. Formclick doesn’t follow redirects. |
| Timeout | Set the Webhook node to respond **Immediately** so n8n replies before running long steps. |

---

# Make

> Coming soon: use the Formclick app on Make to trigger scenarios from new submissions and manage forms.

Source: https://docs.formclick.io/html-forms/make

> **Coming soon:** The Formclick app on Make is in testing. Until it launches, connect Make with a [webhook](https://docs.formclick.io/html-forms/webhooks) pointed at a Make **Custom webhook** trigger.

The Formclick app on Make (formerly Integromat) connects your forms to thousands of apps with no code. You sign in with your Formclick account. There are no API keys to copy.

## Modules

| Module | Type | What it does |
| --- | --- | --- |
| Watch New Submissions | Instant trigger | Starts the scenario the moment a form gets a new, non-spam submission |
| Search Submissions | Search | Finds submissions by text, date range or filter (unread, starred…) |
| Get a Submission | Action | Returns one submission with all its fields |
| List Forms | Search | Returns your forms |
| Get a Form | Action | Returns a form’s settings, endpoint, access key and webhooks |
| Create a Form | Action | Creates an HTML form and returns its endpoint and access key |
| Update a Form | Action | Changes name, notification emails, redirect URL, success message or pauses the form |
| Get Usage | Action | Returns your plan and submission usage |
| Make an API Call | Universal | Calls any [REST API](https://docs.formclick.io/api-reference/rest-api) endpoint with your connection |

## Connect Formclick

### Step 1: Add a Formclick module

In a Make scenario, add a **Formclick** module, for example **Watch New Submissions**.

### Step 2: Create a connection

Click **Create a connection**, then **Save**. A Formclick window opens.

### Step 3: Approve access

Sign in to Formclick and approve the permissions Make asks for. You return to Make, connected.

### Step 4: Pick a form

Choose the form from the list. For the trigger, Make registers a webhook on that form when you turn the scenario on.

## What the trigger receives

Each submission arrives with `submissionId`, `formId`, `submittedAt`, `fromName`, `fromEmail` and `data` (every field, e.g. `data.email`). Map them into the next modules.

## Good to know

- The trigger’s webhook appears in the form’s **Webhooks** tab as **Make scenario**. Make removes it when you turn the scenario off. Don’t delete it by hand while the scenario is on.
- Spam-flagged submissions never start a scenario.
- Revoke Make’s access any time in **Settings → API & MCP**. Its recent calls are listed there too.
- Limits: 60 requests and 20 changes per minute for each connection.

---

# Webhooks

> POST every submission as JSON to your own endpoint, Zapier, Make or n8n.

Source: https://docs.formclick.io/html-forms/webhooks

A webhook sends each new submission to a URL you choose. Use it to trigger automations in Zapier, Make or n8n, or to save submissions in your own backend.

> **Starter, Pro and Business plans:** Webhooks are available on all paid plans.

## Setup

1. Open your form → **Integrations** → **Webhooks**.
2. Enter your endpoint URL and a name, and choose the HTTP method.
3. Optionally add custom headers, e.g. an `Authorization` token your endpoint checks.
4. Send a test submission and check your endpoint receives it.

You can add several webhooks to one form; each one receives every new submission. AI assistants can also add and remove webhooks with the [MCP](https://docs.formclick.io/mcp/mcp-tools) `add_webhook` and `remove_webhook` tools.

## Options

| Option | Values |
| --- | --- |
| URL | Any public `https://` or `http://` address. Private and internal addresses are rejected. |
| Method | `POST` (default), `PUT`, `PATCH` or `GET`. `GET` sends no body. |
| Headers | Any custom headers, e.g. `Authorization: Bearer …` or an API key your endpoint expects. |
| Events | `submission.created`: sent once for each new, non-spam submission. |

## Payload

```json
{
  "submissionId": "7f6c2b8e-…",
  "formId": "0d1a4f3c-…",
  "data": {
    "name": "Jane Smith",
    "email": "jane@example.com",
    "message": "Hi! Could we book a demo next week?"
  },
  "fromName": "Jane Smith",
  "fromEmail": "jane@example.com",
  "submittedAt": "2026-11-08T10:24:31.000Z"
}
```

Requests are sent with `Content-Type: application/json` and `User-Agent: Formclick-Webhook/1.0`, plus any custom headers you set.

## Receiving it

**Node.js (Express)**

```js
app.post('/formclick', express.json(), (req, res) => {
  if (req.get('Authorization') !== 'Bearer ' + process.env.WEBHOOK_TOKEN) {
    return res.sendStatus(401);
  }
  const { submissionId, data } = req.body;
  console.log('New submission', submissionId, data.email);
  res.sendStatus(200);
});
```

**Next.js route**

```js title="app/api/formclick/route.ts"
export async function POST(req) {
  const { submissionId, data } = await req.json();
  await db.leads.insert({ id: submissionId, ...data });
  return Response.json({ ok: true });
}
```

> **Tip:** Respond with any `2xx` status quickly. Failed deliveries are retried automatically.

---

# Embed hosted forms

> Show a Formclick hosted form inline, in a popup, a floating button or a slide-in panel with one HTML attribute.

Source: https://docs.formclick.io/html-forms/embed-forms

Forms built in the Formclick form builder have a public link (`/f/…`, `/c/…` for chat forms, `/v/…` for video forms). The same `formclick.min.js` script can embed them on your site. Add the script once, then mark an element with `data-fc-embed`.

_Preview: the same hosted form shown inline, as a popup, behind a floating button and as a slide-in panel. Pick a mode to preview it. Every embed is responsive, keyboard accessible and closes with Escape._

## Embed modes

**Inline**

```html
<div data-fc-embed="inline" data-fc-src="https://formclick.io/f/your-form"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Popup**

```html
<button data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form" data-fc-size="medium">
  Contact us
</button>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Floating button**

```html
<div data-fc-embed="floating"
     data-fc-src="https://formclick.io/f/your-form"
     data-fc-label="Talk to us"
     data-fc-position="bottom-right"
     data-fc-color="#645cec"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Slide-in**

```html
<div data-fc-embed="slider"
     data-fc-src="https://formclick.io/f/your-form"
     data-fc-side="right"
     data-fc-color="#645cec"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Full page**

```html
<div data-fc-embed="fullpage" data-fc-src="https://formclick.io/f/your-form" style="height:100vh"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Load / exit popup**

```html
<!-- Opens 5 seconds after the page loads, once per visitor -->
<div data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form"
     data-fc-open="load" data-fc-delay="5" data-fc-once="true"></div>

<!-- Opens when the visitor moves to leave the page -->
<div data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form"
     data-fc-open="exit" data-fc-once="true"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Attributes

| Attribute | Values | Used by |
| --- | --- | --- |
| `data-fc-embed` | `inline` · `popup` · `button` · `floating` · `slider` · `fullpage` | All |
| `data-fc-src` | Public form URL (`/f/…`, `/c/…`, `/v/…`) | All |
| `data-fc-height` | Height in px (default `600`) | Inline |
| `data-fc-auto-resize` | `false` to keep a fixed height (default: grows with the form) | Inline |
| `data-fc-size` | `small` · `medium` · `large` | Popup, button |
| `data-fc-open` | `click` (default) · `load` · `exit` | Popup |
| `data-fc-delay` | Seconds before a `load` popup opens | Popup |
| `data-fc-once` | `true` to show a load/exit popup only once per visitor | Popup |
| `data-fc-label` | Button text (default “Talk to us”) | Floating |
| `data-fc-position` | `bottom-right` · `bottom-left` | Floating |
| `data-fc-side` | `right` · `left` · `bottom` | Slide-in |
| `data-fc-color` | Hex colour for the button or launcher, e.g. `#645cec` | Floating, slide-in |

---

# Embed JavaScript API

> Create and control embeds from your own code: open popups on any event, react to submits.

Source: https://docs.formclick.io/html-forms/embed-javascript-api

Every embed mode is also available as a function on `window.Formclick`, for when you want to open a form from your own code.

```js
// Inline, inside an element
Formclick.inline('https://formclick.io/f/your-form', { container: '#form', height: 640, autoResize: true });

// Popup opened from your own code
const popup = Formclick.popup('https://formclick.io/f/your-form', {
  size: 'medium',          // small | medium | large
  openOn: 'click',         // click | load | exit
  trigger: '#cta',         // element that opens it on click
  closeOnSubmit: true,     // close 2.5s after a successful submit
  onSubmit: () => gtag('event', 'form_submit'),
});
document.querySelector('#pricing-cta').addEventListener('click', () => popup.open());

// Floating button, slide-in panel, full page, button
Formclick.floatingButton('https://formclick.io/f/your-form', { label: 'Feedback', position: 'bottom-left', color: '#645cec' });
Formclick.slider('https://formclick.io/f/your-form', { side: 'right', width: 420 });
Formclick.fullPage('https://formclick.io/f/your-form', { container: '#app' });
Formclick.button('https://formclick.io/f/your-form', { container: '#cta-slot', text: 'Get a quote', opens: 'popup' });
```

## Methods

| Method | Options |
| --- | --- |
| `Formclick.inline(url, opts)` | `container`, `height`, `autoResize`, `onReady`, `onSubmit` |
| `Formclick.popup(url, opts)` | `size`, `openOn`, `delay`, `oncePerVisitor`, `trigger`, `closeOnSubmit`, `onSubmit` |
| `Formclick.floatingButton(url, opts)` | `label`, `position`, `color` |
| `Formclick.slider(url, opts)` | `side`, `width`, `color` |
| `Formclick.fullPage(url, opts)` | `container` |
| `Formclick.button(url, opts)` | `container`, `text`, `opens` (`popup` or `new-tab`), `color` |
| `Formclick.scan(root?)` | Set up any new `data-fc-embed` elements, e.g. after rendering HTML. |

Popup, button, floating and slide-in embeds return `{ open(), close(), destroy() }` (floating buttons also have `toggle()`). Inline and full-page embeds return `{ iframe, destroy() }`.

---

# API overview

> Everything a Formclick form does goes through a small, public HTTP API. Use it directly from any language.

Source: https://docs.formclick.io/api-reference/overview

The Formclick Submission API accepts form submissions from browsers, mobile apps and servers. It is the same API that plain HTML forms and `formclick.min.js` use, so anything a form can do, your code can do.

| Endpoint | Purpose |
| --- | --- |
| `POST https://api.formclick.io/submit` | Create a submission. See [Submit endpoint](https://docs.formclick.io/api-reference/api-reference). |
| `POST https://api.formclick.io/preupload` | Get a one-time upload URL for a file. See [File upload API](https://docs.formclick.io/api-reference/file-upload-api). |
| Your webhook URL | Formclick calls you with each new submission. See [Webhook events](https://docs.formclick.io/api-reference/webhook-events). |

## Base URL

```
https://api.formclick.io
```

## Quick example

```bash
curl -X POST https://api.formclick.io/submit \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -d '{"access_key":"YOUR_ACCESS_KEY","name":"Jane","email":"jane@example.com","message":"Hello"}'
```

```json
{ "success": true, "message": "Thank you! Your message has been received." }
```

## Conventions

- All endpoints use HTTPS. Plain HTTP is not supported.
- Requests and responses are JSON unless noted. The submit endpoint also accepts form-encoded bodies.
- Every response carries `success: true` or `success: false`. Errors include a readable `message`.
- CORS is open to every origin, so you can call the API straight from the browser.

> **Managing forms programmatically:** Need to list forms, read submissions or create forms? Use the OAuth-based [REST API](https://docs.formclick.io/api-reference/rest-api), the [Make app](https://docs.formclick.io/html-forms/make) (coming soon) or, for AI assistants, the [MCP server](https://docs.formclick.io/mcp/mcp-overview).

---

# Authentication

> Submissions are authenticated with your form’s public access key.

Source: https://docs.formclick.io/api-reference/authentication

The Submission API uses the form’s **access key**, a UUID shown in the form’s **Connect** tab. It identifies the form and can only create submissions, so it is safe to ship in browser code.

**In the body**

```json
{
  "access_key": "YOUR_ACCESS_KEY",
  "email": "jane@example.com"
}
```

**In the path**

```bash
curl -X POST https://api.formclick.io/submit/YOUR_ACCESS_KEY \
  -H "Content-Type: application/json" \
  -d '{"email":"jane@example.com"}'
```

If both are present, the key in the path wins.

## What the key cannot do

- Read submissions, forms or account details.
- Change notification recipients or any setting.
- Submit to a form that is disabled (`403`).

## Account-level access

Reading submissions and managing forms needs a signed-in user. AI assistants and tools get that access through the [MCP server](https://docs.formclick.io/mcp/mcp-authentication) with OAuth 2.1 and per-scope consent.

---

# Submit endpoint

> The submission endpoint: URL, methods, content types, fields and responses.

Source: https://docs.formclick.io/api-reference/api-reference

## Endpoint

| Method | URL | Notes |
| --- | --- | --- |
| `POST` | `https://api.formclick.io/submit` | Access key in the `access_key` field. |
| `POST` | `https://api.formclick.io/submit/{access_key}` | Access key in the path. |
| `OPTIONS` | Both of the above | CORS preflight. Returns `204`. |

## Request body

| Content-Type | Sent by |
| --- | --- |
| `application/x-www-form-urlencoded` | A plain HTML form (the browser default). |
| `multipart/form-data` | An HTML form with `enctype="multipart/form-data"`, or `fetch` with `FormData`. File parts are ignored; use [file uploads](https://docs.formclick.io/html-forms/file-uploads). |
| `application/json` | `formclick.min.js`, `fetch`, Axios, server code. |

The body can be up to 100 KB. Repeated field names become lists. Control fields are described in [Special fields](https://docs.formclick.io/html-forms/special-fields).

## Response format

The format follows the request:

- **JSON** for requests sent as JSON, or without `text/html` in the `Accept` header.
- **An HTML confirmation page** for normal browser form posts.
- **A `302` redirect** for browser form posts when a redirect applies.

**Success**

```json
{
  "success": true,
  "message": "Thank you! Your message has been received."
}
```

**Success + redirect**

```json
{
  "success": true,
  "message": "Thank you! Your message has been received.",
  "redirect_url": "https://yourwebsite.com/thanks"
}
```

**Error**

```json
{
  "success": false,
  "error": "Too many submissions. Please try again later.",
  "message": "Too many submissions. Please try again later."
}
```

## CORS

Every response includes `Access-Control-Allow-Origin: *` and allows the `Content-Type` and `Accept` headers, so browsers can call the endpoint from any origin.

---

# REST API (forms & submissions)

> Read and manage forms, submissions and webhooks with an OAuth access token. Powers the Formclick app on Make.

Source: https://docs.formclick.io/api-reference/rest-api

The REST API gives OAuth apps account-level access: list and manage forms, search submissions and subscribe to new submissions. It is the API behind the [Formclick app on Make](https://docs.formclick.io/html-forms/make).

## Base URL

```
https://app.formclick.io/api/v1
```

## Authentication

Send an OAuth 2.1 access token as `Authorization: Bearer <token>`. Tokens come from Formclick’s authorization server (authorization code + PKCE, discovery at `/.well-known/oauth-authorization-server`), the same one the [MCP server](https://docs.formclick.io/mcp/mcp-authentication) uses. Access tokens last 1 hour; refresh tokens rotate on every use.

| Scope | Allows |
| --- | --- |
| `forms:read` | List forms and read their settings |
| `forms:write` | Create forms and change their settings |
| `submissions:read` | List, search and read submissions |
| `webhooks:write` | Subscribe and unsubscribe webhooks |
| `usage:read` | Read plan usage |

## Endpoints

| Method & path | Scope | Description |
| --- | --- | --- |
| `GET /me` | — | The account behind the token |
| `GET /forms` | `forms:read` | List your HTML Forms |
| `POST /forms` | `forms:write` | Create a form: `name`, `description`, `notification_emails`, `redirect_url` |
| `GET /forms/:id` | `forms:read` | Form settings, endpoint, access key and webhooks |
| `PATCH /forms/:id` | `forms:write` | Change `name`, `notification_emails`, `redirect_url` (empty removes it), `success_message`, `is_active` |
| `GET /forms/:id/submissions` | `submissions:read` | Newest first. Query: `page`, `limit` (max 50), `search`, `from`, `to`, `filter` (`all`, `unread`, `read`, `starred`, `spam`, `archived`) |
| `GET /forms/:id/submissions/:submissionId` | `submissions:read` | One submission |
| `POST /forms/:id/hooks` | `webhooks:write` | Subscribe an `https://` `url` to new submissions |
| `DELETE /forms/:id/hooks/:hookId` | `webhooks:write` | Unsubscribe (idempotent) |
| `GET /usage` | `usage:read` | Plan, usage this period and form count |

## Example

```bash
curl https://app.formclick.io/api/v1/forms/FORM_ID/submissions?limit=10 \
  -H "Authorization: Bearer $FORMCLICK_TOKEN"
```

```json
{
  "total": 42, "page": 1, "limit": 10, "has_more": true,
  "submissions": [{
    "submission_id": "7f6c2b8e-…",
    "submitted_at": "2026-11-09T10:24:31.000Z",
    "from_name": "Jane Smith",
    "from_email": "jane@example.com",
    "is_spam": false,
    "fields": { "name": "Jane Smith", "message": "Hi!" }
  }]
}
```

Field values that look like passwords, tokens or card numbers are returned as `[redacted]`. Webhooks you subscribe receive the [webhook event](https://docs.formclick.io/api-reference/webhook-events) payload.

## Errors & limits

Errors are JSON `{ "error": "<code>", "message": "…" }` with `401` (missing or invalid token), `403` (missing scope or no access), `404`, `400` (invalid input) or `429` (rate limited, with `Retry-After`). Limits: 60 requests and 20 writes per minute for each user and app.

---

# File upload API

> Upload files directly to storage with one-time URLs, then reference them in a submission.

Source: https://docs.formclick.io/api-reference/file-upload-api

`formclick.min.js` handles uploads for you. If you build your own client (a mobile app, a custom uploader), follow the same three steps.

> **Note:** File uploads are available on the Pro and Business plans. Each file can be up to 5 MB.

## 1. Request an upload URL

```bash
curl -X POST https://api.formclick.io/preupload \
  -H "Content-Type: application/json" \
  -d '{
    "accessKey": "YOUR_ACCESS_KEY",
    "fileName": "jane-smith-cv.pdf",
    "contentType": "application/pdf",
    "fileSize": 248133
  }'
```

```json
{
  "success": true,
  "fileId": "f_9c1e…",
  "key": "uploads/…/jane-smith-cv.pdf",
  "uploadUrl": "https://…"
}
```

The upload URL is valid for **5 minutes** and works once.

## 2. Upload the file

Send the raw file bytes with `PUT`, using the same `Content-Type` you declared.

```js
await fetch(uploadUrl, {
  method: 'PUT',
  headers: { 'Content-Type': file.type },
  body: file,
});
```

## 3. Submit with the file reference

```json
{
  "access_key": "YOUR_ACCESS_KEY",
  "name": "Jane Smith",
  "resume": {
    "id": "f_9c1e…",
    "key": "uploads/…/jane-smith-cv.pdf",
    "name": "jane-smith-cv.pdf",
    "size": 248133,
    "type": "application/pdf"
  }
}
```

For a field with several files, send a list of these objects.

## Allowed file types

| Group | Types |
| --- | --- |
| Images | JPEG, PNG, GIF, WebP, SVG, TIFF |
| Documents | PDF, Word (`.doc`, `.docx`), Excel (`.xls`, `.xlsx`), PowerPoint (`.ppt`, `.pptx`) |
| Text & data | Plain text, CSV |
| Archives | ZIP |

---

# Webhook events

> The JSON Formclick sends to your webhook for each new submission.

Source: https://docs.formclick.io/api-reference/webhook-events

Webhooks are set up per form in the dashboard (see [Webhooks](https://docs.formclick.io/html-forms/webhooks)) or with the MCP `add_webhook` tool. Formclick calls your URL in the background after each submission is saved.

## Event: submission.created

| Field | Type | Description |
| --- | --- | --- |
| `submissionId` | string | Unique ID of the submission. |
| `formId` | string | The form it belongs to. |
| `data` | object | Submitted fields (control fields like `access_key` removed). Files appear as objects with a link. |
| `fromName` | string \| null | Sender name, from `name`, `full_name`, `fullname` or `your_name`. |
| `fromEmail` | string \| null | Sender email, from the `email` field. |
| `submittedAt` | string | ISO 8601 timestamp. |

```json
{
  "submissionId": "7f6c2b8e-…",
  "formId": "0d1a4f3c-…",
  "data": { "name": "Jane Smith", "email": "jane@example.com", "message": "Hi!" },
  "fromName": "Jane Smith",
  "fromEmail": "jane@example.com",
  "submittedAt": "2026-11-08T10:24:31.000Z"
}
```

## Request details

| Item | Value |
| --- | --- |
| Methods | `POST` (default), `PUT`, `PATCH` or `GET` (no body) |
| Headers | `Content-Type: application/json`, `User-Agent: Formclick-Webhook/1.0`, plus your custom headers |
| Retries | Failed deliveries are retried automatically |
| Spam | Submissions flagged as spam are never sent |

> **Tip:** Add a secret header such as `Authorization: Bearer …` when you create the webhook, and reject requests without it.

---

# Errors

> Every error the endpoint can return, what causes it and how to fix it.

Source: https://docs.formclick.io/api-reference/errors

| Status | Message | Cause and fix |
| --- | --- | --- |
| `400` | Missing access key | No `access_key` field and no key in the URL. Add the hidden field. |
| `400` | Invalid access key | The key is not a valid UUID. Copy it again from the Connect tab. |
| `400` | Submission is empty | Every field was blank. Check your inputs have `name` attributes. |
| `400` | Please complete the captcha. | The form has a captcha but no token was sent. See [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Turnstile](https://docs.formclick.io/html-forms/turnstile). |
| `400` | Captcha verification failed. Please try again. | The token was invalid, expired, already used, or the reCAPTCHA v3 score was too low. |
| `403` | Form is disabled | The form is turned off in your dashboard. |
| `403` | This form doesn’t accept submissions from this website. | The form is [restricted to other domains](https://docs.formclick.io/html-forms/restrict-domain), or the request had no `Origin`/`Referer`. |
| `404` | Form not found | No form uses this key. It may have been deleted. |
| `413` | Submission is too large | The body is over 100 KB. Send files with [file uploads](https://docs.formclick.io/html-forms/file-uploads), not in text fields. |
| `429` | Too many submissions. Please try again later. | More than 5 submissions from one IP to this form in 10 minutes. |
| `500` | Internal server error | Something went wrong on our side. Try again; contact support if it continues. |
| `503` | We couldn’t verify the captcha. Please try again. | Google or Cloudflare didn’t respond in time. The visitor can simply resubmit. |

## Script-only errors

| Message | Cause |
| --- | --- |
| Configuration error: a valid Formclick access key is required… | `formclick.min.js` found no hidden `access_key` field, or the value is not a UUID. |
| “cv.pdf” exceeds the 5 MB size limit. | A file is larger than 5 MB. |
| “photo.heic” is not an accepted file type. | The file does not match the input’s `accept` attribute. |

> **Note:** Honeypot hits and duplicate submissions return success on purpose, so bots and double-clicks get no signal.

---

# Rate limits & quotas

> Per-IP limits, duplicate detection, size limits and monthly plan quotas.

Source: https://docs.formclick.io/api-reference/rate-limits

| Limit | Value | When exceeded |
| --- | --- | --- |
| Submissions per IP, per form | 5 every 10 minutes | `429 Too many submissions` |
| Duplicate submissions | Identical data from the same IP within 2 minutes | Ignored, answered with success |
| Request body | 100 KB | `413 Submission is too large` |
| File size | 5 MB per file | Upload URL refused |
| Upload URL lifetime | 5 minutes | Request a new one |
| Monthly submissions | Depends on plan | See [Plans & limits](https://docs.formclick.io/help/plans-and-limits) |

Spam-flagged submissions do not count towards your monthly quota.

## MCP limits

The MCP server has its own limits: 60 requests and 20 write tool calls per minute for each user and app. See [MCP security & limits](https://docs.formclick.io/mcp/mcp-security).

---

# MCP overview

> Let AI assistants create forms, read submissions and set up webhooks on your behalf, with your approval.

Source: https://docs.formclick.io/mcp/mcp-overview

> **Beta:** The Formclick MCP server is in beta and works with **HTML Forms**. Tools and limits may change as we add more form types.

The [Model Context Protocol](https://modelcontextprotocol.io) (MCP) is an open standard that lets AI assistants use tools. The Formclick MCP server gives assistants such as **Claude**, **ChatGPT**, **Cursor** and **Claude Code** safe access to your HTML Forms.

_Animation: a user asks an AI assistant about their forms; the assistant calls Formclick MCP tools and answers with real data. Ask in plain language; the assistant calls Formclick tools and answers with real data from your account._

## What you can do

- “Create a contact form for my portfolio and give me the HTML.”
- “Summarise this week’s submissions on the Pricing enquiry form.”
- “Which leads mentioned an enterprise plan?”
- “Send new submissions on my waitlist form to this webhook.”
- “How many submissions do I have left this month?”

## Server URL

```
https://app.formclick.io/api/mcp
```

It is a remote MCP server using Streamable HTTP. There is nothing to install: add the URL to your assistant and sign in to Formclick when asked.

- [Connect your assistant](https://docs.formclick.io/mcp/mcp-connect): Claude, ChatGPT, Cursor, Claude Code, VS Code.
- [Tools reference](https://docs.formclick.io/mcp/mcp-tools): All 10 tools and their arguments.
- [Authentication & scopes](https://docs.formclick.io/mcp/mcp-authentication): OAuth 2.1, consent and revoking access.
- [Example prompts](https://docs.formclick.io/mcp/mcp-prompts): Copy-ready prompts to try first.

---

# Connect your assistant

> Add the Formclick MCP server to Claude, ChatGPT, Cursor, Claude Code or any remote MCP client.

Source: https://docs.formclick.io/mcp/mcp-connect

> **Beta:** The Formclick MCP server is in beta and works with **HTML Forms**. Tools and limits may change as we add more form types.

Every client follows the same pattern: add the server URL, then approve access on the Formclick consent screen. You never paste an API key.

## Claude Code

```bash
claude mcp add --transport http formclick https://app.formclick.io/api/mcp
```

Then run `/mcp` inside Claude Code and choose **formclick** to sign in.

## Claude (web & desktop)

1. Open **Settings → Connectors**.
2. Choose **Add custom connector**.
3. Name it “Formclick” and paste `https://app.formclick.io/api/mcp`.
4. Click **Connect** and approve access in the Formclick window.

## ChatGPT

1. Open **Settings → Connectors** (developer mode may need to be enabled for custom connectors).
2. Add a custom connector with the URL `https://app.formclick.io/api/mcp`.
3. Sign in to Formclick and approve access.

## Cursor

```json title="~/.cursor/mcp.json"
{
  "mcpServers": {
    "formclick": { "url": "https://app.formclick.io/api/mcp" }
  }
}
```

## VS Code

```json title=".vscode/mcp.json"
{
  "servers": {
    "formclick": { "type": "http", "url": "https://app.formclick.io/api/mcp" }
  }
}
```

## Other clients

Any client that supports remote MCP servers with OAuth works. Point it at the server URL; it discovers the authorization server automatically from the `401` challenge and `/.well-known/oauth-protected-resource`.

> **Testing:** Explore the tools interactively with the MCP Inspector: `npx @modelcontextprotocol/inspector`, then connect to the server URL.

---

# Example prompts

> Prompts to try once your assistant is connected.

Source: https://docs.formclick.io/mcp/mcp-prompts

## Build a form

```
Create a Formclick HTML form called "Portfolio contact" with name, email, budget
(select: Under $1k, $1k–5k, $5k+) and message. Send notifications to
me@studio.com and redirect to https://studio.com/thanks. Give me the HTML.
```

## Review submissions

```
Summarise the submissions my "Pricing enquiry" form received in the last 7 days.
Group them by company size and list anyone who asked for a demo.
```

## Find specific leads

```
Search my "Waitlist" form for submissions that mention "agency" and show
name, email and date as a table.
```

## Automate

```
Add a webhook to my "Job applications" form that POSTs to
https://hooks.example.com/formclick with the header Authorization: Bearer abc123.
```

## Check usage

```
Which plan am I on, and how many submissions have I used this month?
```

> **Note:** Assistants ask for confirmation before write actions in most clients. Review the tool call before approving.

---

# Tools reference

> The 10 tools the Formclick MCP server provides, the scope each needs, and their arguments.

Source: https://docs.formclick.io/mcp/mcp-tools

Your assistant only sees the tools your approval allows. Read-only access shows the first six; read + write access adds the rest.

| Tool | Scope | What it does |
| --- | --- | --- |
| `list_forms` | `forms:read` | List your HTML Forms with IDs, status, submission counts and dashboard links. |
| `get_form` | `forms:read` | One form’s endpoint, access key, notification emails, redirect URL, success message and webhooks. |
| `get_embed_snippet` | `forms:read` | Ready-to-paste HTML `<form>` and `fetch()` code for a form. |
| `list_submissions` | `submissions:read` | Submissions, newest first, with search, date range and filters. |
| `get_submission` | `submissions:read` | One submission with all its field values. |
| `get_usage` | `usage:read` | Your plan, submissions used this period and number of forms. |
| `create_html_form` | `forms:write` | Create a form and return its endpoint, access key and snippets. |
| `update_form_settings` | `forms:write` | Change name, notification emails, redirect URL, success message or active status. |
| `add_webhook` | `webhooks:write` | Send each new submission to a URL as JSON. |
| `remove_webhook` | `webhooks:write` | Remove a webhook from a form. |

## list_submissions

| Argument | Type | Description |
| --- | --- | --- |
| `form_id` | uuid | **Required.** From `list_forms`. |
| `page` | integer | Page number, from 1. |
| `limit` | integer | Results per page, default 20, max 50. |
| `search` | string | Case-insensitive text matched in any field. |
| `from` / `to` | ISO 8601 | Only submissions in this time range. |
| `filter` | enum | `all`, `unread`, `read`, `starred`, `spam` or `archived`. |

## create_html_form

| Argument | Type | Description |
| --- | --- | --- |
| `name` | string | **Required.** Up to 120 characters. |
| `description` | string | Optional internal description. |
| `fields` | field[] | Up to 30 inputs for the generated snippet (see below). |
| `submit_text` | string | Submit button label. |
| `notification_emails` | string[] | Up to 5 recipients. Default: your account email. |
| `redirect_url` | url | Where visitors go after submitting. |

A **field** has `name` (required), `label`, `type` (`text`, `email`, `tel`, `url`, `number`, `date`, `textarea`, `select`, `checkbox`), `required`, `placeholder` and `options` (for selects).

## update_form_settings

| Argument | Type | Description |
| --- | --- | --- |
| `form_id` | uuid | **Required.** |
| `name` | string | New name. |
| `notification_emails` | string[] | 1–5 recipients. |
| `redirect_url` | url \| null | `null` removes the redirect. |
| `success_message` | string | Up to 500 characters. |
| `is_active` | boolean | `false` pauses the form. |

Only the arguments you pass are changed.

## add_webhook

| Argument | Type | Description |
| --- | --- | --- |
| `form_id` | uuid | **Required.** |
| `url` | url | **Required.** Must be a public internet address. |
| `name` | string | Label shown in the dashboard. |
| `method` | enum | `POST`, `PUT`, `PATCH` or `GET`. |
| `headers` | object | Custom headers, e.g. `Authorization`. |
| `events` | enum[] | `submission.created`. |

The payload is described in [Webhook events](https://docs.formclick.io/api-reference/webhook-events). `remove_webhook` takes `form_id` and `webhook_id` (from `get_form`).

## Other tools

- `list_forms` and `get_usage` take no arguments.
- `get_form` takes `form_id`.
- `get_embed_snippet` takes `form_id`, optional `fields` and `submit_text`.
- `get_submission` takes `form_id` and `submission_id`.

---

# Authentication & scopes

> How assistants get access through Formclick OAuth 2.1, what each scope allows and how to revoke access.

Source: https://docs.formclick.io/mcp/mcp-authentication

The MCP server uses Formclick’s own OAuth 2.1 server. Your assistant never sees your password, and you can revoke it at any time.

## The sign-in flow

1. The assistant calls the server and gets a `401` pointing to Formclick’s authorization server.
2. It registers itself automatically (dynamic client registration or a Client ID Metadata Document).
3. You are sent to the Formclick **consent screen**, where you choose **read-only** or **read + write** access.
4. The assistant receives a short-lived access token and calls tools on your behalf.

## Scopes

| Scope | Access | Allows |
| --- | --- | --- |
| `forms:read` | Read | List your HTML Forms and read their settings, endpoint and embed code. |
| `submissions:read` | Read | Read and search the submissions your forms have received. |
| `usage:read` | Read | See your plan limits and usage. |
| `forms:write` | Write | Create forms and change their name, notification emails and redirect URL. |
| `webhooks:write` | Write | Add and remove webhooks. |

Team members with view-only permission can only grant read access. Every tool call also goes through the same ownership and team-permission checks as the dashboard.

## Tokens

- Authorization code flow with PKCE (S256). No implicit or password grants.
- Access tokens last **1 hour** and only work for the Formclick MCP server.
- Refresh tokens last **30 days** and rotate on every use; reusing an old one revokes the whole chain.
- Codes and tokens are stored only as hashes.

## Revoking access

Go to **Settings → API & MCP** in your Formclick dashboard to see every connected app and revoke any of them. Revoked apps lose access immediately.

## Discovery endpoints

| Endpoint | Purpose |
| --- | --- |
| `/.well-known/oauth-protected-resource` | Tells clients which authorization server protects the MCP endpoint. |
| `/.well-known/oauth-authorization-server` | Authorization server metadata. |
| `/api/oauth/register` | Dynamic client registration. |
| `/api/oauth/authorize`, `/api/oauth/token`, `/api/oauth/revoke` | Standard OAuth endpoints. |

All paths are on `https://app.formclick.io`.

---

# Security & limits

> How the MCP server protects your data, and the rate limits that apply.

Source: https://docs.formclick.io/mcp/mcp-security

## Your data

- Submission contents are returned as **untrusted data**. Assistants are told never to follow instructions found inside submissions, which protects against prompt injection from form spam.
- Long values are shortened, and password- and card-like fields are redacted.
- Nothing from submissions or tool arguments is written to logs.
- Webhook and redirect URLs must point to public internet addresses.

## Rate limits

| Limit | Value |
| --- | --- |
| Requests | 60 per minute, per user and app |
| Write tool calls | 20 per minute, per user and app |

## Good practice

- Grant **read-only** access unless the assistant needs to create or change forms.
- Review write tool calls before approving them in your client.
- Revoke apps you no longer use in **Settings → API & MCP**.

---

# Create your first form endpoint

> Create a form in your dashboard, copy its access key and connect your HTML form in a few minutes.

Source: https://docs.formclick.io/help/create-first-form-endpoint

A Formclick “form endpoint” is a form in your dashboard plus its access key. Your HTML form sends submissions to Formclick and the key tells us which form, inbox and integrations they belong to.

### Step 1: Sign up or log in

Create a free account. No credit card is needed for the Free plan.

### Step 2: Create an HTML form

From the dashboard, create a new HTML form and give it a name you will recognise, such as “Website contact”.

### Step 3: Copy the access key

Open the form’s **Connect** tab. Copy the **Form Access Key**, or copy one of the ready-made code samples with the key already filled in.

### Step 4: Paste the form into your site

Use the sample below, replacing `YOUR_ACCESS_KEY`.

```html title="contact.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

### Step 5: Send a test

Submit the form once. It appears in **Submissions** straight away and the notification email follows. See [Test your form before going live](https://docs.formclick.io/help/test-form-submission).

> **Tip:** You can create as many forms as you like on every plan. Use one form per purpose (contact, careers, newsletter) so each has its own inbox, notifications and integrations.

Next: [customise the notification email](https://docs.formclick.io/help/configure-notification-email) and [turn on spam protection](https://docs.formclick.io/help/honeypot-spam-protection).

---

# Understanding your access key

> What the access key is, where to find it, and how to use it in your form.

Source: https://docs.formclick.io/help/access-key-guide

Every form has its own access key, a long ID such as `21e56b6c-55b5-4c8d-ab3b-83222682465f`. It is the only thing that links your HTML to your Formclick form.

## Where to find it

Open the form in your dashboard and go to the **Connect** tab. The key is shown at the top, and every code sample on that page already includes it.

## How to use it

```html
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
```

Add it as a hidden field inside the form. For JavaScript and API calls, send it as `access_key` in the JSON body. See [Access key](https://docs.formclick.io/html-forms/access-key) for every option.

## Common questions

### Can I use the same key on several pages?

Yes. Every page using the key sends to the same form. Formclick records which page each submission came from.

### Do I need a new key for each website?

Only if you want separate inboxes, notifications or integrations. Otherwise one form is fine.

### Is it safe to publish?

Yes. See [Is my access key safe in public HTML?](https://docs.formclick.io/help/access-key-security)

---

# Required and optional form fields

> The one field every form needs, the optional fields that customise behaviour, and how your own fields are saved.

Source: https://docs.formclick.io/help/form-fields-reference

## Required

| Field | Why |
| --- | --- |
| `access_key` | Identifies your form. Without it the submission is rejected. |
| At least one filled-in field | Completely empty submissions are rejected. |

## Recommended

| Field | Why |
| --- | --- |
| `name` | Shown as the sender in your dashboard and email. |
| `email` | Becomes the Reply-To of your notification, so you can reply directly. Also needed for the autoresponder. |
| `botcheck` | Hidden honeypot that stops simple bots. See [Enable honeypot spam protection](https://docs.formclick.io/help/honeypot-spam-protection). |

## Optional control fields

| Field | What it does |
| --- | --- |
| `subject` | Subject line of your notification email. |
| `from_name` | Sender name shown on your notification email. |
| `redirect` | Thank-you page to send visitors to after submitting. |
| `page_url` | Records the exact page the form was sent from. |

## Your own fields

Any input with a `name` attribute is saved, such as `company`, `phone` or `budget`. Unticked checkboxes and inputs without a `name` are not sent by the browser.

```html
<form action="https://api.formclick.io/submit" method="POST">
  <!-- Required -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <!-- Optional control fields -->
  <input type="hidden" name="subject" value="New enquiry from the website">
  <input type="hidden" name="from_name" value="Acme Website">
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <!-- Your fields -->
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="text" name="company">
  <textarea name="message" required></textarea>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

The full list is in [Special fields](https://docs.formclick.io/html-forms/special-fields) and [Form fields](https://docs.formclick.io/html-forms/form-fields).

---

# Test your form before going live

> A quick checklist to confirm submissions, emails and redirects work before you publish.

Source: https://docs.formclick.io/help/test-form-submission

You can test a Formclick form anywhere, including `localhost` and a file opened straight from your computer. Run through these checks before you share the page.

### Step 1: Send a realistic test

Fill in every field with real-looking data and your own email address, then press Send. Avoid placeholder text full of links; it can trip the spam filter.

### Step 2: Check the dashboard

The submission should appear in **Submissions** within seconds. If it is in the **Spam** tab instead, mark it **Not spam** and see [Spam tab & false positives](https://docs.formclick.io/help/spam-tab).

### Step 3: Check your inbox

The notification email should arrive shortly after. Nothing there? Follow [Emails going to spam?](https://docs.formclick.io/help/email-spam-fix).

### Step 4: Check the visitor experience

With `formclick.min.js` you should see the success message inline; without it, the Formclick confirmation page. If you set a [redirect](https://docs.formclick.io/help/custom-redirect), make sure it lands on the right page.

### Step 5: Try a file (if your form has uploads)

Attach a small file and confirm it is linked in the submission. Files must be under 5 MB. See [File uploads](https://docs.formclick.io/html-forms/file-uploads).

## Things that look like bugs while testing

| What you see | Why |
| --- | --- |
| The second identical test never arrives | Identical data from the same visitor within 2 minutes is treated as a duplicate. Change a field and try again. |
| “Too many submissions. Please try again later.” | Each IP can send 5 submissions per form every 10 minutes. Wait a few minutes. |
| No autoresponder email | Autoresponders are only sent for submissions from a public website, not from `localhost`. |
| Redirect ignored on the Free plan | Free plans can only redirect within the same website the form is on. |
| “Configuration error: a valid Formclick access key is required…” | The hidden `access_key` field is missing or wrong. Copy it again from the Connect tab. |

---

# Frequently asked questions

> Quick answers to the questions we hear most.

Source: https://docs.formclick.io/help/faq

### Do I need a server or backend code?

No. Your form posts directly to Formclick, which stores the submission and emails you. It works on fully static sites.

### Do I need to write JavaScript?

You don’t write any. Every sample includes the [formclick.min.js](https://docs.formclick.io/html-forms/formclick-js) script, which handles submit, file uploads, the loading state and success/error messages. Keep it in your page; without it a form still submits, but file uploads won’t work.

### How many forms can I create?

Unlimited, on every plan. Plans differ by monthly submissions and features. See [Compare Free vs Pro plans](https://docs.formclick.io/help/free-vs-pro).

### Is my access key a secret?

No. It only lets someone submit to that form; it cannot read data or change settings. See [Is my access key safe in public HTML?](https://docs.formclick.io/help/access-key-security).

### Can I use one form on several pages or websites?

Yes. Use the same access key everywhere. Add a hidden `page_url` field if you want to know which page each submission came from.

### Does it work with React, Next.js, Vue, WordPress or Webflow?

Yes. See [React, Next.js & Vue](https://docs.formclick.io/html-forms/frameworks) and [Static sites & site builders](https://docs.formclick.io/html-forms/site-builders).

### How do I stop spam?

Spam filtering is on for every form. Add the one-line honeypot field for extra protection, and on paid plans a [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Turnstile](https://docs.formclick.io/html-forms/turnstile) captcha if bots still get through. See [Enable honeypot spam protection](https://docs.formclick.io/help/honeypot-spam-protection).

### Can AI assistants manage my forms?

Yes, with the [Formclick MCP server](https://docs.formclick.io/mcp/mcp-overview), which is in beta. You approve each assistant and can revoke it any time.

---

# Configure notification email address

> Choose who receives an email for each new submission, including CC and BCC.

Source: https://docs.formclick.io/help/configure-notification-email

By default, notifications go to the email address of the form (your account email). You can send them to anyone else, or to several people.

### Step 1: Open notification settings

Open your form, go to **Settings → Email Notifications**.

### Step 2: Keep notifications on

Make sure **Email me on every submission** is enabled.

### Step 3: Add recipients

Under **Recipients**, type an address and press Enter. Add **CC** and **BCC** addresses the same way.

### Step 4: Save and test

Save, then send a test submission. Check **Recent deliveries** at the bottom of the page to see where each email went.

## Recent deliveries

The last 20 notification emails are listed with their status, so you can tell whether a missing email was never sent or was filtered by the receiving mailbox.

| Status | Meaning |
| --- | --- |
| Queued / Sending / Retrying | On its way. Retries happen automatically. |
| Sent | Accepted by our mail service. |
| Delivered | Accepted by the recipient’s mail server. If you can’t find it, check spam. |
| Bounced | The address doesn’t exist or rejected the email. Check the spelling. |
| Complaint | The recipient marked a notification as spam. |
| Skipped | Not sent, for example because notifications are off. |
| Failed | Could not be sent. Contact support if this repeats. |

> **Why can’t my form choose the recipient?:** Recipients are set only in the dashboard. A field in your HTML can never change who gets the email, which stops spammers using your form to send mail to other people.

---

# Customize the notification subject line

> Set a fixed subject, use a template with submitted values, or let the visitor write it.

Source: https://docs.formclick.io/help/custom-email-subject

The default subject is `New submission: {{form_name}}`. There are three ways to change it.

## 1. Subject template in the dashboard

In **Settings → Email Notifications**, set the **Subject**. Put any field name in double curly braces to include its value, plus `{{form_name}}`.

```
New {{budget}} enquiry from {{name}}
→ New $5k+ enquiry from Jane Smith
```

## 2. A hidden field in your form

```html
<input type="hidden" name="subject" value="New enquiry from the pricing page">
```

Handy when one account has several forms or pages and you want each to have its own subject without changing settings.

## 3. Let the visitor choose

```html
<input type="text" name="subject" placeholder="What is this about?">
```

## Which one wins?

The dashboard template is used first. If it is empty, the form’s `subject` field is used, then the default. Subjects are kept to a single line.

## Sender name

To change the name the email appears to come from, set **Sender** in the same settings page, or add a hidden `from_name` field.

---

# Daily or weekly email digests

> How to get a summary of submissions instead of one email each time.

Source: https://docs.formclick.io/help/email-digest-settings

> **Note:** Formclick sends one notification per submission. Built-in daily or weekly digest emails are not available yet.

If one email per submission is too much, here are three ways to get a calmer inbox today.

## Turn off instant emails and use the dashboard

Switch off **Email me on every submission** in **Settings → Email Notifications**. Every submission is still saved, and you can review, search and [export them as CSV](https://docs.formclick.io/help/managing-submissions) whenever you like.

## Collect submissions in Google Sheets

Connect [Google Sheets](https://docs.formclick.io/help/google-sheets-integration) so every submission becomes a row. Check the sheet once a day, filter, sort and share it with your team.

## Build your own digest

Send submissions to Zapier, Make or n8n with a [webhook](https://docs.formclick.io/help/webhook-setup), then use their scheduling or digest tools to email a daily or weekly summary.

---

# Emails going to spam? Fix it here

> Step-by-step checks when submissions are saved but notification emails are missing or land in spam.

Source: https://docs.formclick.io/help/email-spam-fix

### Step 1: Check the dashboard

If the submission is in **Submissions**, the form works. If it is in **Spam**, mark it **Not spam**; spam is never emailed.

### Step 2: Check Recent deliveries

In **Settings → Email Notifications**, look at the status of the email. **Delivered** means your mail server accepted it, so it is in your mailbox somewhere. **Bounced** usually means a typo in the address.

### Step 3: Search your spam folder

Search for the form name. If you find it, mark it **Not spam** and add `noreply@formclick.io` to your contacts.

### Step 4: Create a filter

In Gmail or Outlook, create a rule for mail from `noreply@formclick.io` that never sends it to spam and, optionally, applies a label.

### Step 5: Ask your IT team

Company mail servers sometimes quarantine automated mail. Ask them to allow mail from `formclick.io`.

### Step 6: Rule out duplicates

Sending exactly the same test twice within 2 minutes saves one submission and sends one email.

> **Tip:** Every notification is sent from a Formclick address that passes SPF and DMARC checks, and replies go straight to your visitor through Reply-To.

Still missing? [Contact support](https://docs.formclick.io/help/contact-support) with the form name and submission time.

---

# Custom redirect after submission

> Send visitors to your own thank-you page after they submit.

Source: https://docs.formclick.io/help/custom-redirect

Add a hidden `redirect` field with the full address of your thank-you page.

```html
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="redirect" value="https://yourwebsite.com/thanks.html">
  <!-- your fields -->
  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Rules

- Use the full URL, starting with `https://`. A path like `/thanks` on its own is ignored.
- **Free plan:** the page must be on the same website as the form (subdomains count).
- **Starter, Pro and Business:** redirect to any website.
- If the redirect breaks a rule, it is ignored and the visitor sees the normal success message; the submission is still saved.

> **Tip:** A thank-you page is the easiest place to fire Google Ads or Meta conversion tracking.

More detail in [Redirect after submit](https://docs.formclick.io/html-forms/redirects).

---

# Enable honeypot spam protection

> Add one hidden field that stops most spam bots, on top of Formclick’s built-in filtering.

Source: https://docs.formclick.io/help/honeypot-spam-protection

A honeypot is a field that people never see but bots fill in. When it has a value, Formclick quietly drops the submission. Bots still get a success response, so they don’t try again.

## Add it to your form

```html
<input type="checkbox" name="botcheck" class="fc-hp" tabindex="-1" autocomplete="off">

<style>
  .fc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
</style>
```

Place it anywhere inside the `<form>`. All Formclick templates already include it.

## What else protects your form

- **Spam scoring:** messages with link spam or common spam phrases go to the **Spam** tab instead of your inbox.
- **Rate limits:** 5 submissions per form, per visitor, every 10 minutes.
- **Duplicate detection:** the same submission twice within 2 minutes is only saved once.
- **Captcha (paid plans):** add [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Cloudflare Turnstile](https://docs.formclick.io/html-forms/turnstile) for forms that attract bots.
- **Domain restriction (paid plans):** only accept submissions from [your own websites](https://docs.formclick.io/help/allowed-domains).

All of this is on for every form, on every plan. See [Spam protection](https://docs.formclick.io/html-forms/spam-protection).

---

# Restrict submissions to specific domains

> Make a form accept submissions only from your own websites.

Source: https://docs.formclick.io/help/allowed-domains

> **Note:** Domain restriction is available on the Starter, Pro and Business plans.

### Step 1: Open Security settings

Open your form and go to **Settings → Security**.

### Step 2: Add your domains

Under **Restrict to domains**, type `example.com` and press Enter. Each domain includes its subdomains, so `example.com` also covers `www.example.com` and `shop.example.com`.

### Step 3: Add localhost for testing

If you test the form on your computer, add `localhost` too.

### Step 4: Save

From now on, submissions from any other website are rejected.

## Good to know

- Leave the list empty to accept submissions from any website.
- Server-side calls (cURL, your backend, mobile apps) usually don’t say which website they come from, so they are rejected while the list is set.
- Bots outside a browser can fake where they come from. For stronger protection, add [reCAPTCHA](https://docs.formclick.io/html-forms/recaptcha) or [Turnstile](https://docs.formclick.io/html-forms/turnstile) as well.

Full details: [Restrict to domain](https://docs.formclick.io/html-forms/restrict-domain).

---

# Add custom response messages

> Change the message visitors see after submitting, or show your own design.

Source: https://docs.formclick.io/help/custom-response-message

With `formclick.min.js` on the page, set the success message with `data-success-msg` on the form:

```html
<form action="https://api.formclick.io/submit" method="POST"
      data-success-msg="Thanks, Jane will reply within one business day.">
  ...
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

The message appears inside the form after a successful submit, and the form is cleared. Errors (for example a rate limit) appear in the same place in red.

## Style it

```html
<style>
  .fc-msg-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .fc-msg-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
</style>
```

## Use a whole page instead

To show a full thank-you page, use a [custom redirect](https://docs.formclick.io/help/custom-redirect). To run your own code (open a modal, track a conversion), listen for the `fc:success` event; see [Success & error messages](https://docs.formclick.io/html-forms/success-messages).

---

# Connect Google Sheets integration

> Add every submission as a new row in a Google Sheet.

Source: https://docs.formclick.io/help/google-sheets-integration

> **Note:** Google Sheets is available on the Pro and Business plans.

### Step 1: Open Integrations

Open your form and go to **Integrations**, then choose **Google Sheets**.

### Step 2: Sign in with Google

Approve access so Formclick can add rows to the spreadsheets you use. You can revoke it from your Google account at any time.

### Step 3: Pick or create a spreadsheet

Choose an existing spreadsheet and tab, or create a new one from Formclick.

### Step 4: Map your columns

Choose which form field goes in which column, and in what order.

### Step 5: Go live

Send a test submission. A new row appears within seconds.

## Good to know

- Only new submissions are added. Earlier ones can be [exported as CSV](https://docs.formclick.io/help/managing-submissions) and pasted in.
- Spam-flagged submissions are never sent.
- Failed deliveries (for example if the sheet was deleted) are retried automatically.

See the [Google Sheets integration page](https://formclick.io/integrations/google-sheets) for more.

---

# Connect n8n

> Run an n8n workflow every time your form gets a new submission.

Source: https://docs.formclick.io/help/n8n-integration

### Step 1: Create the workflow in n8n

Add a **Webhook** trigger node, set the method to `POST`, activate the workflow and copy its **Production URL**.

### Step 2: Connect it in Formclick

Open your form → **Integrations** → **Automation** → **n8n** and paste the URL. Add Header, Basic or JWT authentication if your node uses it.

### Step 3: Test

Click **Test Connection**, then **Send Test Submission** to see the fields in n8n.

### Step 4: Save

Click **Save & Connect**. New submissions now trigger the workflow.

> **Tip:** Getting a `404`? The workflow isn’t active or you pasted the Test URL. Use the Production URL with the workflow active.

Full guide, payload and troubleshooting: [n8n](https://docs.formclick.io/html-forms/n8n).

---

# Send Slack notifications

> Get a Slack message for every new submission using an automation tool.

Source: https://docs.formclick.io/help/slack-notifications

> **Note:** Slack isn’t a built-in integration yet. Connect it through a webhook and an automation tool, or use our built-in [Discord](https://formclick.io/integrations/discord) integration for chat alerts.

Formclick webhooks send JSON in their own format, which Slack’s incoming webhooks don’t accept directly. An automation tool sits in between and turns it into a Slack message.

### Step 1: Create a catch hook

In Zapier (“Webhooks by Zapier → Catch Hook”), Make (“Custom webhook”) or n8n (“Webhook” node), create a trigger and copy its URL.

### Step 2: Add it to Formclick

Open your form → **Integrations** → **Webhooks**, paste the URL and save. See [Configure a custom webhook](https://docs.formclick.io/help/webhook-setup).

### Step 3: Send a test submission

The automation tool receives the fields: `data.name`, `data.email`, `data.message` and so on.

### Step 4: Post to Slack

Add a “Send channel message” step and build the message from those fields, for example *New lead: {{data.name}} ({{data.email}})*.

The payload is documented in [Webhook events](https://docs.formclick.io/api-reference/webhook-events).

---

# Set up Telegram notifications

> Receive new submissions in a Telegram chat through a webhook.

Source: https://docs.formclick.io/help/telegram-notifications

> **Note:** Telegram isn’t a built-in integration. You can connect it in a few minutes with a webhook and an automation tool.

### Step 1: Create a Telegram bot

Message **@BotFather** in Telegram, send `/newbot` and copy the bot token. Add the bot to your chat or group.

### Step 2: Create a catch hook

In Zapier, Make or n8n, create a webhook trigger and copy its URL.

### Step 3: Add the webhook in Formclick

Open your form → **Integrations** → **Webhooks** and paste the URL. See [Configure a custom webhook](https://docs.formclick.io/help/webhook-setup).

### Step 4: Send to Telegram

Add a Telegram “Send message” step with your bot, and write the message using the submission fields, e.g. `data.name` and `data.message`.

### Step 5: Test it

Submit your form; the message should appear in Telegram within seconds.

Prefer a built-in chat integration? [Discord](https://formclick.io/integrations/discord) is supported natively.

---

# Configure a custom webhook

> Send each new submission as JSON to your own URL, Zapier, Make or n8n.

Source: https://docs.formclick.io/help/webhook-setup

> **Note:** Webhooks are available on the Starter, Pro and Business plans.

### Step 1: Open Webhooks

Open your form → **Integrations** → **Webhooks**.

### Step 2: Add the URL

Paste the address that should receive submissions, and give the webhook a name (for example “CRM” or “Slack relay”).

### Step 3: Choose the method

`POST` is the default and what most tools expect. `PUT`, `PATCH` and `GET` are also available.

### Step 4: Add headers (optional)

Add an `Authorization` header or a secret your endpoint checks.

### Step 5: Test

Send a test submission and confirm your endpoint received it.

## What your endpoint receives

```json
{
  "submissionId": "7f6c2b8e-…",
  "formId": "0d1a4f3c-…",
  "data": { "name": "Jane Smith", "email": "jane@example.com", "message": "Hi!" },
  "fromName": "Jane Smith",
  "fromEmail": "jane@example.com",
  "submittedAt": "2026-11-08T10:24:31.000Z"
}
```

Reply with any `2xx` status. Failed deliveries are retried. Code examples for receiving webhooks are in [Webhooks](https://docs.formclick.io/html-forms/webhooks).

---

# Managing submissions

> Find, read, star, archive, export and delete submissions in your dashboard.

Source: https://docs.formclick.io/help/managing-submissions

Open a form and go to **Submissions** to see everything it has received, newest first. Each submission shows every field, the time and the page it came from.

## Filters

| View | Shows |
| --- | --- |
| All | Every submission except spam. |
| Unread / Read | Whether you have opened it. |
| Starred | Submissions you starred to follow up. |
| Spam | Submissions flagged by the spam filter. |
| Archived | Submissions you have archived. |

## Search

Search matches text in any field, so you can find a person by name, email or a phrase from their message.

## Export as CSV

Use **Export CSV** to download submissions as a spreadsheet file that opens in Excel, Numbers or Google Sheets.

## Delete a submission

Open the submission and choose **Delete Submission**, then confirm. Deleting is permanent. See [Delete your submission data](https://docs.formclick.io/help/delete-submission-data).

## Pause a form

Turn off the form in its settings (**Form Status**) to stop new submissions; visitors get a “Form is disabled” message. Turn it back on any time.

## Files

Uploaded files appear as links on the submission. See [File uploads](https://docs.formclick.io/html-forms/file-uploads).

---

# Spam tab & false positives

> Why a submission landed in Spam and how to recover it.

Source: https://docs.formclick.io/help/spam-tab

Submissions that look like spam are saved in the **Spam** tab instead of your inbox. They are not emailed, not sent to integrations and do not count towards your monthly limit.

## Recovering a real message

Open the submission in the Spam tab and choose **Not spam**. It moves back to your submissions.

## Why it was flagged

- A link in a name field.
- Three or more links in the message, or HTML link markup.
- Common spam phrases.
- An invalid email address.

Honeypot hits are dropped completely and never appear, even in Spam. See [Enable honeypot spam protection](https://docs.formclick.io/help/honeypot-spam-protection).

---

# Is my access key safe in public HTML?

> Why it’s fine for anyone to see your access key, and what happens if it’s misused.

Source: https://docs.formclick.io/help/access-key-security

**Yes, it’s safe.** The access key works like a mailbox address: anyone who knows it can send a submission to your form, and that’s all.

| Someone with your key can… | Someone with your key cannot… |
| --- | --- |
| Submit to that one form | Read your submissions |
|  | Change settings, recipients or integrations |
|  | See your email address or account |
|  | Use it on other forms in your account |

## What stops abuse

- Honeypot checks and spam scoring.
- Rate limits of 5 submissions per form, per visitor, every 10 minutes.
- Duplicate detection.
- Notification recipients that only you can change.

## If a key is being abused

Turn on a [captcha](https://docs.formclick.io/html-forms/recaptcha) and [restrict the form to your domains](https://docs.formclick.io/help/allowed-domains) in **Settings → Security**. If that isn’t enough, pause the form, create a new one (which has a new key) and update your website. Contact [support@formclick.io](mailto:support@formclick.io) if you see heavy abuse; we can help.

---

# GDPR compliance and data handling

> What Formclick stores, how it is protected, and what you need to do as the form owner.

Source: https://docs.formclick.io/help/gdpr-compliance

When you collect personal data with a Formclick form, you are the data controller and Formclick processes the data on your behalf to deliver the service.

## What is stored

- The fields your visitor submits (control fields like `access_key` and `botcheck` are removed).
- Submission time, the page it came from, IP address and browser user agent (used for spam and abuse prevention).
- Files uploaded through your forms. Our privacy policy states these are kept for 30 days.

## How it is protected

- TLS encryption for every request, and encryption at rest for sensitive data such as integration credentials.
- Access to data limited to authorised personnel.
- If you close your account, personal data is deleted within 30 days, except where the law requires us to keep it.

## Your checklist

- Tell visitors how you use their data, and link to your privacy policy near the form.
- Only collect the fields you need.
- Add a consent checkbox when you need explicit consent, e.g. for marketing emails.
- Delete submissions you no longer need. See [Delete your submission data](https://docs.formclick.io/help/delete-submission-data).

```html
<label>
  <input type="checkbox" name="marketing_consent" value="yes" required>
  I agree to receive emails. See our <a href="/privacy">privacy policy</a>.
</label>
```

Read the full [Privacy Policy](https://formclick.io/privacy). Data requests (access, correction, erasure) go to [support@formclick.io](mailto:support@formclick.io); we respond within 30 days.

---

# Delete your submission data

> Remove single submissions, respond to a visitor’s deletion request, or delete everything.

Source: https://docs.formclick.io/help/delete-submission-data

## Delete a single submission

Open the form → **Submissions**, open the submission and choose **Delete Submission**, then confirm. It is removed permanently and cannot be restored.

## When a visitor asks you to delete their data

1. Search **Submissions** for their email address.
2. Delete every matching submission (check the **Spam** and **Archived** views too).
3. Remove their data from any connected tools (Google Sheets, CRM, webhook targets). Formclick can’t delete data that has already been sent to other services.

## Delete all your data

Email [support@formclick.io](mailto:support@formclick.io) from your account email to close your account. Personal data is deleted within 30 days, except where we must keep it by law.

> **Tip:** Export a CSV before deleting if you need to keep your own records. See [Managing submissions](https://docs.formclick.io/help/managing-submissions).

---

# Request a Data Processing Agreement

> How to get a DPA for your company’s GDPR records.

Source: https://docs.formclick.io/help/data-processing-agreement

If your organisation needs a Data Processing Agreement (DPA) with Formclick as a processor, email [support@formclick.io](mailto:support@formclick.io) from your account email.

## Include in your request

- Your company’s legal name and registered address.
- The name and email of the person who will sign.
- Your Formclick account email.
- Any template or specific clauses your legal team requires.

For background on what Formclick stores and how, see [GDPR compliance and data handling](https://docs.formclick.io/help/gdpr-compliance).

---

# Compare Free vs Pro plans

> What each HTML Forms plan includes and how to choose.

Source: https://docs.formclick.io/help/free-vs-pro

|  | Free | Starter | Pro | Business |
| --- | --- | --- | --- | --- |
| Monthly submissions | 250 | 5,000 | 10,000 | 20,000 |
| Forms | Unlimited | Unlimited | Unlimited | Unlimited |
| Email notifications & spam filter | ✓ | ✓ | ✓ | ✓ |
| reCAPTCHA & Turnstile | — | ✓ | ✓ | ✓ |
| Domain restriction | — | ✓ | ✓ | ✓ |
| Redirect to any website | Same site only | ✓ | ✓ | ✓ |
| Webhooks, Discord | — | ✓ | ✓ | ✓ |
| Autoresponder | — | — | ✓ | ✓ |
| Google Sheets | — | — | ✓ | ✓ |
| File uploads | — | — | ✓ | ✓ |
| Priority support | — | — | ✓ | ✓ |

## Which plan is right for you?

- **Free:** a personal site or side project with a contact form.
- **Starter (yearly):** students, early startups and non-profits that need more submissions, webhooks, captcha and domain restriction.
- **Pro:** businesses that rely on leads and want autoresponders, Google Sheets and file uploads.
- **Business:** agencies and high-volume sites.

Prices in USD and INR are on the [Pricing](https://formclick.io/pricing) page. Limits on every plan are in [Plans & limits](https://docs.formclick.io/help/plans-and-limits).

---

# Upgrade to Pro

> Upgrade your plan from the dashboard; the new limits apply straight away.

Source: https://docs.formclick.io/help/upgrade-to-pro

### Step 1: Open Billing & Usage

In the dashboard, go to **Settings → Billing & Usage**. You’ll see your current plan and how much of it you have used.

### Step 2: Choose a plan

Pick Starter, Pro or Business, and monthly or yearly billing where available.

### Step 3: Pay securely

Complete checkout. Prices are shown in USD, or INR for India.

Upgrades take effect immediately. If you upgrade part-way through a billing period, the price difference is charged pro-rata for the rest of the period.

> **Tip:** We email you as you approach your monthly submission limit, so you can upgrade before it matters.

---

# Cancel your subscription

> Cancel any time without fees; your paid features last until the end of the period.

Source: https://docs.formclick.io/help/cancel-subscription

You can cancel at any time from **Settings → Billing & Usage**, with no fees or penalties. If you need a hand, email [support@formclick.io](mailto:support@formclick.io) and we’ll do it for you within one business day.

## What happens next

- You keep your paid features until the end of the period you have paid for.
- Your account then moves to the Free plan automatically.
- Your forms and submissions stay; Free plan limits apply from then on.
- You won’t be charged again unless you subscribe again.

## Downgrading instead

Moving to a lower paid plan takes effect at the end of the current billing period.

Full terms: [Refunds & Cancellations policy](https://formclick.io/refunds).

---

# Refunds & money-back

> When Formclick can and can’t refund a payment, and how to ask.

Source: https://docs.formclick.io/help/money-back-guarantee

> **Note:** Formclick doesn’t offer a general money-back guarantee or refunds for partial billing periods. When you cancel, you keep paid features until the end of the period you paid for.

## When we do refund

| Situation | What happens |
| --- | --- |
| Charged twice for the same period | The duplicate charge is refunded within 5 business days. |
| Billing error | Contact us within 14 days of the charge with the details. |
| Service outage over 72 hours in one period | A refund or credit may be given for the affected time. |
| Bought yearly by mistake instead of monthly | Contact us within 48 hours and we’ll review it. |

Starter plans are sold at a special discounted price and are non-refundable once active.

## How to ask

Email [support@formclick.io](mailto:support@formclick.io) with your account email, the transaction ID and a short description. Approved refunds go back to your original payment method within 7–10 business days.

Full terms: [Refunds & Cancellations policy](https://formclick.io/refunds).

---

# Plans & limits

> Monthly submissions and features on each HTML Forms plan.

Source: https://docs.formclick.io/help/plans-and-limits

|  | Free | Starter | Pro | Business |
| --- | --- | --- | --- | --- |
| Submissions / month | 250 | 5,000 | 10,000 | 20,000 |
| Forms | Unlimited | Unlimited | Unlimited | Unlimited |
| Email notifications | ✓ | ✓ | ✓ | ✓ |
| Spam filter & honeypot | ✓ | ✓ | ✓ | ✓ |
| reCAPTCHA & Turnstile | — | ✓ | ✓ | ✓ |
| Domain restriction | — | ✓ | ✓ | ✓ |
| Redirect after submit | Same site | Any domain | Any domain | Any domain |
| Webhooks | — | ✓ | ✓ | ✓ |
| Slack & Discord | — | ✓ | ✓ | ✓ |
| Autoresponder | — | — | ✓ | ✓ |
| Google Sheets | — | — | ✓ | ✓ |
| File uploads (5 MB / file) | — | — | ✓ | ✓ |

Spam-flagged submissions do not count towards your monthly limit. We email you as you get close to it, and you can upgrade at any time. See [Pricing](https://formclick.io/pricing) for prices.

## Limits on every plan

| Limit | Value |
| --- | --- |
| Submission body size | 100 KB |
| Rate limit | 5 submissions per IP, per form, per 10 minutes |
| Duplicate window | Identical submissions within 2 minutes are ignored |
| File size | 5 MB per file |
| Redirect URL length | 2,000 characters |

---

# Troubleshooting

> Fixes for the most common problems: no email, missing fields, CORS and more.

Source: https://docs.formclick.io/help/troubleshooting

### I submitted the form but got no email

- Check the dashboard first. If the submission is there, the form works and the email is being delayed or filtered.
- Look in your spam folder and in the dashboard’s **Spam** tab.
- Check notifications are on and the recipient address is right in the form’s notification settings.
- Sending the same test twice within 2 minutes? The second one is treated as a duplicate.

### Some fields are missing from the submission

Only inputs with a `name` attribute are sent. Unticked checkboxes and disabled fields are left out by the browser.

### The page reloads instead of showing a message

Make sure `formclick.min.js` is loaded, and that the form’s `action` is exactly `https://api.formclick.io/submit`. Check the browser console for errors from other scripts.

### My redirect is ignored

The URL must be a full `https://…` link. On the Free plan it must be on the same website as the form. See [Redirects](https://docs.formclick.io/html-forms/redirects).

### “Too many submissions” while testing

The rate limit allows 5 submissions per form from one IP every 10 minutes. Wait a few minutes, or test from another network.

### CORS error in the console

Formclick allows all origins. A CORS error usually means the URL is wrong (check for typos) or a custom header other than `Content-Type`/`Accept` was added.

### File uploads do not work

Uploads need `formclick.min.js`, a Pro or Business plan, and files under 5 MB that match the `accept` attribute.

> **Still stuck?:** Email [support@formclick.io](mailto:support@formclick.io) with your form name and what you see. We reply within one business day.

---

# Contact support

> How to reach the Formclick team and what to include so we can help quickly.

Source: https://docs.formclick.io/help/contact-support

Email [support@formclick.io](mailto:support@formclick.io). We reply within one business day; Pro and Business plans get priority support.

## What to include

- The email address of your Formclick account.
- The form name (never send passwords).
- The page URL where the form lives.
- What you expected and what happened, with any error message.
- A screenshot of the browser console if the form shows an error.

Privacy, data, billing and legal requests all go to the same address, [support@formclick.io](mailto:support@formclick.io).

> **Tip:** Many issues are solved in minutes with the [Troubleshooting](https://docs.formclick.io/help/troubleshooting) guide.