# Formspark Documentation

> Every page of https://documentation.formspark.io, in sidebar order.

Source: https://documentation.formspark.io/index.md

<div style="max-width: 350px; margin-left: auto; margin-right: auto;">
    <img src="/illustration.svg" style="max-width: 350px;">
</div>

# About

Welcome to the documentation website for [Formspark](https://formspark.io?ref=documentation).

Formspark is a simple way to save information from your website via forms without having to set up a server.

Formspark is perfect for static sites and works anywhere you can put an HTML form.

## What it's good for

Contact forms, newsletter signups, lead capture, surveys, feedback widgets, RSVPs, waitlists, and any HTML form that needs a place to send its data.

## What it isn't

Formspark is not a drag-and-drop form builder. You bring your own HTML; Formspark stores submissions, sends notifications, and forwards data to your tools.

Don't have an account yet? [Sign up for free!](https://dashboard.formspark.io).

---

Source: https://documentation.formspark.io/setup/index.md

# Installation

## Getting your form ID

Every form in Formspark has its own action URL. To get one, sign in to the [Formspark dashboard](https://dashboard.formspark.io) and create a new form. The form opens on its `How-to` tab, which shows the action URL in a setup guide for your stack. The URL ends with your form's unique ID.

## HTML

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

**1.** Set your HTML form's `action` attribute to your form's action URL.

Your form's unique action URL looks something like this: `https://submit-form.com/your-form-id`.

**2.** Ensure all input, select and textarea elements inside your form have a `name` attribute, otherwise you will not
receive the data filled in these fields.

Input names starting with an underscore are reserved for control fields such as `_redirect`. Formspark does not store them with the submission, so they never appear in the dashboard or in notification emails.

**3.** Verify that your form contains a button element with the "submit" `type`.

## Testing

You can rapidly test your form payloads by submitting to https://submit-form.com/echo.

```html
<form action="https://submit-form.com/echo" method="POST">
  <input type="text" name="message" />
  <button type="submit">Send</button>
</form>
```

![Echo](https://documentation.formspark.io/submit-echo.png)

## JavaScript

Formspark has excellent AJAX support, [learn more about it here](https://documentation.formspark.io/examples/ajax.md).

---

Source: https://documentation.formspark.io/setup/spam-protection.md

# Spam protection

Every form falls victim to spambots at some point, and how you handle them can affect your customers.

Formspark offers the following solutions to prevent spam:

- [Botpoison](https://botpoison.com/) integration
- [reCAPTCHA](https://www.google.com/recaptcha/about/) integration
- [hCaptcha](https://www.hcaptcha.com/) integration
- [Turnstile](https://www.cloudflare.com/products/turnstile/) integration
- Custom spam words
- Allowed domains
- Honeypot technique

On top of whichever of these you enable, every submission is screened by our [automatic spam filtering](#automatic-spam-filtering), unless you switch it off for that form.

![Spam protection](https://documentation.formspark.io/spam-protection.png)

Formspark will not deliver a submission to your inbox, send notifications or decrement your submission counter if any of the following conditions are true:

- The submission is empty
- The challenge verification was unsuccessful
- The submission contains a honeypot
- The submission contains one of your custom spam words
- The submission was sent from a site that is not on your allowed domains
- The automatic filter flags the submission as spam

An empty submission is discarded. Every other rejected submission is kept for you to review. See [rejected submissions](#rejected-submissions).

## Rejected submissions

A submission rejected as spam lands under `Spam` instead of `Inbox`. Open your form's `Submissions` and switch the view to `Spam` to see it. Hover its `Spam` tag to see what rejected it.

Rejected submissions stay there for up to 30 days. To recover one, use `Mark as non-spam`: it moves to your inbox and counts against your submission quota.

Your visitor sees an error for a rejected submission. A plain HTML form shows the error page, or your error redirect if you set one. An AJAX request answers `403` with `Rejected by spam protection`.

## Which should I pick?

| Provider                                                    | Visitor experience | Pricing     | Strength |
| ----------------------------------------------------------- | ------------------ | ----------- | -------- |
| [Botpoison](https://botpoison.com/)                         | Invisible          | Free / paid | Strong   |
| [Turnstile](https://www.cloudflare.com/products/turnstile/) | Invisible          | Free        | Strong   |
| [hCaptcha](https://www.hcaptcha.com/)                       | Checkbox           | Free        | Strong   |
| [reCAPTCHA](https://www.google.com/recaptcha/about/)        | Checkbox           | Free        | Strong   |
| Custom spam words                                           | Invisible          | Included    | Low      |
| Allowed domains                                             | Invisible          | Included    | Low      |
| Honeypot                                                    | Invisible          | Included    | Low      |

If you're not sure, start with **Botpoison** or **Turnstile**: both are invisible to your visitors and require no interaction.

## Botpoison

Formspark integrates with Botpoison, an invisible, user-friendly anti-spam solution.

### Getting started

1. Go to [https://botpoison.com/start/](https://botpoison.com/start/).
2. Create a new configuration.
3. Integrate the `public key` on your
   website ([instructions](https://botpoison.com/documentation/getting-started/html/)).
4. Copy the `secret key`.
5. Open Formspark.
6. In your form's settings, under `Spam protection`, open `Challenge` and select `Botpoison` as the `Provider`.
7. Paste the `secret key` into the `Botpoison secret key` field.

Your form is now protected by Botpoison ✔.

To stop using Botpoison, set the `Provider` under `Challenge` back to `None`.

### Example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@botpoison/browser" async></script>
  </head>
  <body>
    <form
      method="POST"
      action="https://submit-form.com/your-form-id"
      data-botpoison-public-key="your-botpoison-public-key"
      target="_blank"
    >
      <textarea name="message" placeholder="Message"></textarea>
      <button type="submit">Send</button>
    </form>
  </body>
</html>
```

### AJAX

If you're using AJAX, add the Botpoison response to your submission body via the `_botpoison` property.

```javascript
const body = {
  email: "john.doe@example.com",
  message: "Hello, World!",
  _botpoison: "...",
};
```

### Recommended libraries

- JavaScript: [@botpoison/browser](https://www.npmjs.com/package/@botpoison/browser)

## reCAPTCHA

Formspark integrates with Google's reCAPTCHA v2 "I'm not a robot" checkbox.

### Getting started

1. Go to [https://www.google.com/recaptcha/](https://www.google.com/recaptcha/).
2. Navigate to the admin console.
3. Create a new site.
4. Make sure you select `reCAPTCHA v2`.
5. Make sure you whitelist your website's domain.
6. Integrate the `site key` on your website ([instructions](https://developers.google.com/recaptcha/docs/display)).
7. Copy the `secret` key.
8. Open Formspark.
9. In your form's settings, under `Spam protection`, open `Challenge` and select `reCAPTCHA v2` as the `Provider`.
10. Paste the `secret key` into the `reCAPTCHA v2 secret key` field.

Your form is now protected by reCAPTCHA ✔.

To stop using reCAPTCHA, set the `Provider` under `Challenge` back to `None`.

### HTML

Make sure your form's `method` attribute is explicitly set to `POST`.

```html
<form method="POST">...</form>
```

### AJAX

If you're using AJAX, add the reCAPTCHA response to your submission body via the `g-recaptcha-response` property.

```javascript
const body = {
  email: "john.doe@example.com",
  message: "Hello, World!",
  "g-recaptcha-response": "...",
};
```

### Recommended libraries

- React: [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha)

### Articles

- [How to enable your submit button based on reCAPTCHA results](https://technotrampoline.com/articles/how-to-enable-your-submit-button-based-on-recaptcha-results/)

## hCaptcha

Formspark integrates with hCaptcha, an independent alternative to Google's reCAPTCHA.

### Getting started

1. Go to [https://www.hcaptcha.com/](https://www.hcaptcha.com/).
2. Create a new site.
3. Integrate the `site key` on your website ([instructions](https://docs.hcaptcha.com/#add-the-hcaptcha-widget-to-your-webpage)). You can find your site key [here](https://dashboard.hcaptcha.com/sites).
4. Copy the `secret key`. You can find your secret key [here](https://dashboard.hcaptcha.com/settings).
5. In your form's settings, under `Spam protection`, open `Challenge` and select `hCaptcha` as the `Provider`.
6. Paste the `secret key` into the `hCaptcha secret key` field.

Your form is now protected by hCaptcha ✔.

To stop using hCaptcha, set the `Provider` under `Challenge` back to `None`.

### HTML

Make sure your form's `method` attribute is explicitly set to `POST`.

```html
<form method="POST">...</form>
```

### AJAX

If you're using AJAX, add the hCaptcha response to your submission body via the `h-captcha-response` property.

```javascript
const body = {
  email: "john.doe@example.com",
  message: "Hello, World!",
  "h-captcha-response": "...",
};
```

### Recommended libraries

- React: [react-hcaptcha](https://github.com/hCaptcha/react-hcaptcha)

## Turnstile

Formspark integrates with Turnstile, Cloudflare's smart CAPTCHA alternative.

### Getting started

1. Go to [https://www.cloudflare.com/products/turnstile](https://www.cloudflare.com/products/turnstile/).
2. Create a new site.
3. Integrate the `site key` on your website ([instructions](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/)).
4. Copy the `secret key`.
5. In your form's settings, under `Spam protection`, open `Challenge` and select `Turnstile` as the `Provider`.
6. Paste the `secret key` into the `Turnstile secret key` field.

Your form is now protected by Turnstile ✔.

To stop using Turnstile, set the `Provider` under `Challenge` back to `None`.

### AJAX

If you're using AJAX, add the Turnstile response to your submission body via the `cf-turnstile-response` property.

```javascript
const body = {
  email: "john.doe@example.com",
  message: "Hello, World!",
  "cf-turnstile-response": "...",
};
```

### Recommended libraries

- React: [react-turnstile](https://github.com/Le0Developer/react-turnstile)

## Automatic spam filtering

On top of any provider you choose, Formspark screens every submission for spam. It is on for every new form, requires no setup, and is invisible to your visitors.

The filtering is powered by Botpoison Classify, and you do not need a Botpoison account for it. It complements the challenge you select above rather than replacing it.

### Switching it off

Under `Spam protection` in your form's settings, open `Automatic filter` and turn off `Screen submissions for spam`.

Two things change for that form when you do:

- Every submission is delivered, including the ones the filter would have held back. Each of those counts against your submission quota, where a filtered submission costs you nothing.
- Filtered submissions no longer appear under `Spam`, which is where you would otherwise recover one the filter judged wrongly.

Your honeypot, custom spam words and chosen provider are unaffected and keep running.

## Custom spam words

Custom spam words let you block submissions that contain specific words.

We scan the fields your visitor filled in for the words you specify. Matching ignores case and also finds a word inside a longer one. If a word is found, the submission is rejected as spam.

Fields your visitor did not write are skipped: control fields such as `_redirect`, challenge responses such as `g-recaptcha-response`, and tracking fields such as UTM tags (`utm_source`) and ad click ids (`gclid`, `fbclid`).

You specify the comma-separated list of words in your form's settings, under `Spam protection` in `Spam words`.

The total length of the list must not exceed 2,560 characters.

## Allowed domains

List the sites your form lives on, and submissions sent from anywhere else are rejected as spam. Set it in your form's settings, under `Spam protection` in `Allowed domains`. It is off until you add a domain.

- Each domain also covers its subdomains: `example.com` allows `www.example.com` and `shop.example.com`.
- You can paste a full address. `https://www.example.com/contact` is saved as `example.com`.
- Submissions sent from a server, or by a tool such as `curl`, are rejected, because they do not say which site they come from.
- To test on your own machine, add `localhost` to the list.

## Honeypot

::: warning
While simple to implement, this technique is not the most effective. Modern spam bots that execute JavaScript can detect hidden fields and skip them, bypassing the honeypot entirely. Pair it with another provider above for serious protection.
:::

The honeypot technique is a simple-to-implement spam prevention solution.

To enable this feature, add a field with the name `_honeypot` or `_gotcha` to your form and hide it with CSS (see example below). When a spam bot enters a value, the submission is rejected as spam.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input
    type="checkbox"
    name="_honeypot"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

## Custom honeypot

Besides `_honeypot` and `_gotcha`, you can specify your own honeypot name in your form's settings, under `Spam protection` in `Honeypot`. Enter it in the `Custom field name` field. The name must match your field's `name` exactly, including case.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input
    type="checkbox"
    name="Paste your custom honeypot here"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

---

Source: https://documentation.formspark.io/setup/file-uploads.md

# File uploads

::: tip
Formspark stores a link to your uploaded file, not the file itself. You upload the file to a third-party storage provider and Formspark records the resulting URL with the submission. A submission that carries the file itself is rejected with a `400` error.
:::

The examples below use Uploadcare and Cloudinary. Any provider that returns a public URL after upload will work the same way.

## Uploadcare

Create an Uploadcare account at [https://uploadcare.com/](https://uploadcare.com/).

::: warning
Uploadcare's free plan is metered in operations, not uploads, and an operation covers uploading,
image transformations, video processing and document conversion alike. The allowance is small enough
that a busy form will pass it, and the cheapest paid plan is a significant step up. Check
[their pricing](https://uploadcare.com/pricing/) against your expected volume before you commit, and
see [Cloudinary](#cloudinary) below for another option.
:::

### Steps

Start with a simple Formspark form.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <!-- Name -->
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Name" required="" />

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

Add the Uploadcare widget to the `head` of your HTML file.

```html
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
```

Add an input of type `hidden`, set its role to `uploadcare-uploader`, add your Uploadcare public key as
the `data-public-key` attribute.

```html
<!-- Photo -->
<label for="photo">Photo</label>
<input
  type="hidden"
  id="photo"
  name="photo"
  role="uploadcare-uploader"
  data-public-key="your-public-uploadcare-id"
/>
```

Links to the uploaded files will now automatically be attached to your submissions.

![Uploadcare submission](https://documentation.formspark.io/uploadcare-submission.png)

Final code:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Formspark with Uploadcare</title>
    <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
  </head>
  <body>
    <form action="https://submit-form.com/your-form-id" method="POST">
      <!-- Name -->
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Name" required="" />

      <!-- Photo -->
      <label for="photo">Photo</label>
      <input
        type="hidden"
        id="photo"
        name="photo"
        role="uploadcare-uploader"
        data-public-key="your-public-uploadcare-id"
      />

      <button type="submit">Send</button>
    </form>
  </body>
</html>
```

## Cloudinary

[Cloudinary](https://cloudinary.com/) offers an upload widget that works the same way: the visitor
uploads, and you put the resulting URL into a hidden field that Formspark records.

### Steps

Create an [unsigned upload preset](https://cloudinary.com/documentation/upload_presets) in your
Cloudinary console. Unsigned is what lets the browser upload without a server-side signature, so the
preset should restrict what it accepts.

Add the widget script to the `head` of your HTML file.

```html
<script
  src="https://upload-widget.cloudinary.com/latest/global/all.js"
  type="text/javascript"
></script>
```

Add a hidden input to hold the URL, and a button that opens the widget.

```html
<!-- Photo -->
<input type="hidden" id="photo" name="photo" />
<button type="button" id="upload-widget">Upload a photo</button>
```

Wire the widget up so a successful upload writes its URL into that input.

```html
<script type="text/javascript">
  var widget = cloudinary.createUploadWidget(
    {
      cloudName: "your-cloud-name",
      uploadPreset: "your-unsigned-upload-preset",
    },
    function (error, result) {
      if (!error && result && result.event === "success") {
        document.getElementById("photo").value = result.info.secure_url;
      }
    },
  );

  document
    .getElementById("upload-widget")
    .addEventListener("click", function () {
      widget.open();
    });
</script>
```

The submitted `photo` field now carries the uploaded file's URL.

::: tip
Give the button `type="button"`. A button inside a form defaults to `type="submit"`, so without it
opening the widget submits the form instead.
:::

## Alternatives

- [Filestack](https://www.filestack.com/): drop-in widget similar to Uploadcare.
- [Bunny Storage](https://bunny.net/storage/): cheap edge storage with a simple HTTP API.
- [Amazon S3 pre-signed URLs](https://docs.aws.amazon.com/AmazonS3/latest/userguide/using-presigned-url.html): generate an upload URL from your own backend, then submit the resulting file URL to Formspark.

---

Source: https://documentation.formspark.io/setup/arrays-and-objects.md

# Working with arrays and objects

## Arrays

> An array is a collection of similar data elements.

### HTML

You can submit an array by using the `name[index]` syntax:

```html
<form action="https://submit-form.com/your-form-id">
  <input type="text" name="ingredients[0]" placeholder="Ingredient 1" />
  <input type="text" name="ingredients[1]" placeholder="Ingredient 2" />
  <input type="text" name="ingredients[2]" placeholder="Ingredient 3" />
  <input type="text" name="ingredients[3]" placeholder="Ingredient 4" />
  <button type="submit">Send</button>
</form>
```

### AJAX

```javascript
axios.post("https://submit-form.com/your-form-id", {
  ingredients: ["anchovies", "cheese", "flour", "tomato", "water"],
});
```

## Objects

> An object is a standalone entity with properties.

### HTML

You can submit an object by using the `name.property` syntax:

```html
<form action="https://submit-form.com/your-form-id">
  <input type="text" name="car.manufacturer" />
  <input type="text" name="car.color" />
  <button type="submit">Send</button>
</form>
```

To submit an array of objects:

```html
<form action="https://submit-form.com/your-form-id">
  <input type="text" name="car[0].manufacturer" />
  <input type="text" name="car[0].color" />

  <input type="text" name="car[1].manufacturer" />
  <input type="text" name="car[1].color" />

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

### AJAX

To submit an object:

```javascript
axios.post("https://submit-form.com/your-form-id", {
  car: {
    manufacturer: "Ferrari",
    color: "Red",
  },
});
```

To submit an array of objects:

```javascript
axios.post("https://submit-form.com/your-form-id", {
  cars: [
    {
      manufacturer: "Ferrari",
      color: "Red",
    },
  ],
});
```

---

Source: https://documentation.formspark.io/customization/redirection.md

# Redirection

After submitting a form, the user will be redirected to a generic [feedback page](https://documentation.formspark.io/customization/feedback-page.md) hosted by Formspark.

This default behavior can be overridden in multiple ways.

## Specifying a custom redirect URL

1. Add an input of type `hidden`.
2. Set the input's name to `_redirect`.
3. Set the value to the URL you want to redirect users to.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input
    type="hidden"
    name="_redirect"
    value="https://your-website.com/thanks"
  />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

The value can also be a path, such as `/thanks`. Formspark resolves it against the page the form was submitted from, the way a link on that page would. Only `http` and `https` addresses are followed; anything else sends the visitor to the default feedback page.

By default, Formspark appends the submission's entries to the custom redirect URL (to its search string).
This enables you to personalize your page with user-submitted data.

The above form's submissions would redirect to `https://your-website.com/thanks?email=example%40email.com`.

You can toggle off this behavior by adding a hidden input with the name `_append` and the value `false`.

```html
<input type="hidden" name="_append" value="false" />
```

## Specifying a custom error redirect URL

Note: If you don't specify a custom error redirect URL then the configuration from `_redirect` (if present) will
automatically be inherited.

1. Add an input of type `hidden`.
2. Set the input's name to `_error`.
3. Set the value to the URL you want to redirect users to.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="hidden" name="_error" value="https://your-website.com/error" />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

::: tip
`_redirect` is only used for full-page form submissions. When you submit via AJAX with `Accept: application/json`, Formspark returns a JSON response instead and `_redirect` is silently ignored. Handle the post-submission UX yourself in JavaScript.
:::

## Preventing the redirect

### Staying on the same page (without leaving it)

This is only possible with JavaScript/AJAX.

Formspark has excellent AJAX support, [learn more about it here](https://documentation.formspark.io/examples/ajax.md).

### Returning to the same page (after leaving it)

```html
<!--
1. If your form is hosted at "https://my-website.com/newsletter.html"
-->
<form action="https://submit-form.com/your-form-id" method="POST">
  <!-- 2. Then you would set the "_redirect" to "https://my-website.com/newsletter.html" -->
  <input
    type="hidden"
    name="_redirect"
    value="https://my-website.com/newsletter.html"
  />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

This method is based on illusion. Technically, you are not preventing the redirection.

---

Source: https://documentation.formspark.io/customization/feedback-page.md

# Feedback page

After submitting a form, the user will be [redirected](https://documentation.formspark.io/customization/redirection.md) to a generic feedback page hosted by Formspark.

![Feedback OK](https://documentation.formspark.io/feedback-ok.png)

You can customize the look-and-feel and content of the default feedback page with the following reserved input names.

### `_feedback.whitelabel`

Removes all Formspark branding from the feedback page.
You need an [upgraded workspace](https://documentation.formspark.io/troubleshooting/limits-and-plans.md) to unlock this feature; on a free workspace the flag is ignored.

Default value: false

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="hidden" name="_feedback.whitelabel" value="true" />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

### `_feedback.dark`

Toggles dark mode.

Default value: false

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="hidden" name="_feedback.dark" value="true" />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

![Feedback dark mode](https://documentation.formspark.io/feedback-dark-mode.png)

### `_feedback.language`

Customizes the language of the feedback page.

Default value: the value of [`_language`](https://documentation.formspark.io/customization/language.md) when set, otherwise "en"

See [Language](https://documentation.formspark.io/customization/language.md#supported-values) for the supported values. Prefer `_language`, which also translates the autoresponder.

### `_feedback.success.title`

Customizes the title of the success feedback page.

Default value: "Your form has been submitted."

### `_feedback.success.message`

Customizes the message of the success feedback page.

Default value: _none_

### `_feedback.error.title`

Customizes the title of the error feedback page.

Default value: "An error has occurred."

### `_feedback.error.message`

Customizes the message of the error feedback page.

Default value: "Please try again."

### Example

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input
    type="hidden"
    name="_feedback.success.title"
    value="I'm a custom title!"
  />
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

![Feedback OK custom title](https://documentation.formspark.io/feedback-ok-custom-title.png)

---

Source: https://documentation.formspark.io/customization/language.md

# Language

Formspark writes a few things to your visitors itself: the feedback page they see after submitting, and the default subject and the footer of the [autoresponder](https://documentation.formspark.io/dashboard/autoresponder.md). By default these are in English.

Add a hidden `_language` field to show them in your visitor's language:

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="hidden" name="_language" value="de" />
  <input type="email" name="email" />
  <button type="submit">Send</button>
</form>
```

A multilingual site can set the value per page, so each visitor gets their own language.

## What `_language` translates

| Where                                         | What                                                          |
| --------------------------------------------- | ------------------------------------------------------------- |
| [Feedback page](https://documentation.formspark.io/customization/feedback-page.md) | The default title and message                                 |
| [Autoresponder](https://documentation.formspark.io/dashboard/autoresponder.md)     | The default subject, and the footer with its unsubscribe link |

It does not translate:

- Text you write yourself, such as a custom feedback title or the body of your autoresponder template. Write those in the language you want.
- Your own [notification emails](https://documentation.formspark.io/customization/notification-email.md). Those are for you, not your visitors.

## Supported values

| Value | Language           |
| ----- | ------------------ |
| "de"  | German             |
| "en"  | English            |
| "es"  | Spanish            |
| "fr"  | French             |
| "it"  | Italian            |
| "ja"  | Japanese           |
| "ko"  | Korean             |
| "nl"  | Dutch              |
| "pl"  | Polish             |
| "pt"  | Portuguese         |
| "ru"  | Russian            |
| "uk"  | Ukrainian          |
| "zh"  | Simplified Chinese |

Any other value falls back to English.

## The feedback page only

`_feedback.language` sets the language of the feedback page alone. When a form sends both fields, the feedback page follows `_feedback.language` and the autoresponder follows `_language`.

---

Source: https://documentation.formspark.io/customization/notification-email.md

# Notification email

## Subject

You can change the subject of the notification email.

Create a hidden input with the name `_email.subject`.

```html
<input type="hidden" name="_email.subject" value="You have a new message!" />
```

A [custom template](#custom-templates) can carry its own subject line instead. When
the submission also has an `_email.subject` field, that field takes precedence.

## Sender name

You can change the name of the sender of the notification email.

Create a hidden input with the name `_email.from`.

```html
<input type="hidden" name="_email.from" value="John Doe" />
```

The value cannot contain `@`, `<` or `>`. A value that breaks this rule is ignored, and the email is sent as "Formspark Notifications".

It is currently not possible to change the sender address.

## Template title

You can change the title of the notification email template.

Create a hidden input with the name `_email.template.title`.

```html
<input type="hidden" name="_email.template.title" value="My Custom Title" />
```

You can remove the title and the Formspark logo by setting the value to `false`.

```html
<input type="hidden" name="_email.template.title" value="false" />
```

## Dashboard button

Team members get a "View submission" button that opens the submission in the dashboard. You can remove it.

Create a hidden input with the name `_email.template.button` and the value `false`.

```html
<input type="hidden" name="_email.template.button" value="false" />
```

Guests never get this button, since they cannot open the dashboard.

## Template footer

You can remove the footer from the notification email template.

Create a hidden input with the name `_email.template.footer` and the value `false`.

```html
<input type="hidden" name="_email.template.footer" value="false" />
```

Guests get no footer. Their mail client offers an unsubscribe button beside the sender instead.

The title, button and footer options shape the default template. A [custom template](#custom-templates) is sent exactly as you designed it, with no footer for anyone.

## Custom templates

You can go beyond these options and design the notification email in a visual template editor, built in partnership with [Postcraft](https://postcraft.io/).

[Check this page](https://documentation.formspark.io/dashboard/email-notification-settings.md#custom-templates) to learn more about custom email
templates.

You can write the same template from your own code instead. See [templates](https://documentation.formspark.io/api/reference.md#templates) in the API reference.

## Autoresponder

Notification emails go to you; the [autoresponder](https://documentation.formspark.io/dashboard/autoresponder.md) sends a confirmation email to the person who submitted your form.

---

Source: https://documentation.formspark.io/customization/direct-replies.md

# Direct replies

From your email inbox, you can directly reply to the person who submitted the form.

![Direct replies](https://documentation.formspark.io/direct-replies.png)

To activate this feature, create an input with any of the following names:

- `mail`
- `email`
- `_replyto`
- `_email.replyto`

`mail` and `email` match in any case, so a field named `Email` works too. The underscore names must be spelled exactly as shown.

::: tip
Use `type="email"` so the browser validates the address before submission.
:::

```html
<input type="email" name="mail" placeholder="your@email.example" />
```

```html
<input type="email" name="email" placeholder="your@email.example" />
```

```html
<input type="text" name="_replyto" placeholder="your@email.example" />
```

```html
<input type="text" name="_email.replyto" placeholder="your@email.example" />
```

::: warning
Input names starting with an underscore will be hidden from the dashboard and notification emails.
:::

---

Source: https://documentation.formspark.io/customization/custom-routing.md

# Custom routing

You can use JavaScript to dynamically select a form endpoint.

Using this technique, you can use a drop-down to dynamically route submissions to a specific team, department, inbox,
webhook, etc.

Each option points at a form of its own, so create one form per destination and swap in its action URL below.

```html
<form
  id="my-form"
  action="https://submit-form.com/your-sales-form-id"
  method="POST"
>
  <label for="department">Department</label>
  <select id="department" onchange="onChange(this)">
    <option value="sales" selected>Sales</option>
    <option value="marketing">Marketing</option>
    <option value="hr">HR</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<script>
  const FORM_IDS = {
    sales: "your-sales-form-id",
    marketing: "your-marketing-form-id",
    hr: "your-hr-form-id",
  };

  function onChange(select) {
    const formId = FORM_IDS[select.value];
    if (!formId) return;
    document.getElementById("my-form").action =
      "https://submit-form.com/" + formId;
  }
</script>
```

---

Source: https://documentation.formspark.io/dashboard/inviting-team-members.md

# Inviting team members

You can invite members to your workspace to create forms and view submissions as a team. Each member has a role that decides what they can change.

When you invite team members to join your Formspark workspace, they will receive an invitation email. The link in it works once and expires after 7 days.

Free workspaces include 5 team members. Upgraded workspaces hold up to 50. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

:::tip
You can send invitations to users who still need to create a Formspark account or to those who already have one.
:::

## Steps

1. Open the `Members` screen
2. Fill in their email
3. Choose their role
4. Press `Send invitation`

![Invite a member form](https://documentation.formspark.io/invite-team-member.png)

## Pending invitations

Invitations nobody has accepted yet are listed under `Pending invitations` on the `Members` screen, with the number of days before each one expires.

- Press `Resend` to email a fresh link. The old link stops working.
- Press `Revoke` to take an invitation back. Its link stops working.

An expired invitation stays in the list, so you can resend it.

## Roles

Every member is an _admin_, an _editor_ or a _viewer_.

|                                     | Admin | Editor | Viewer |
| ----------------------------------- | ----- | ------ | ------ |
| Read submissions and analytics      | Yes   | Yes    | Yes    |
| Export submissions                  | Yes   | Yes    | Yes    |
| Create and change forms             | Yes   | Yes    | No     |
| Delete forms and submissions        | Yes   | Yes    | No     |
| Connect and disconnect integrations | Yes   | Yes    | No     |
| Change spam protection              | Yes   | Yes    | No     |
| Redeem a voucher                    | Yes   | Yes    | No     |
| Invite a member                     | Yes   | Yes    | No     |
| Resend or revoke an invitation      | Yes   | Yes    | No     |
| Change a member's role              | Yes   | No     | No     |
| Remove a member                     | Yes   | No     | No     |
| Leave the workspace                 | Yes   | Yes    | Yes    |
| See purchases and invoices          | Yes   | No     | No     |
| Delete the workspace                | Yes   | No     | No     |

A _viewer_ reads and nothing else. They cannot change a setting, break an
integration or delete anything, so you can give a client access to their own
submissions without giving them the rest of the workspace.

An _editor_ builds and maintains forms.

Only an _admin_ can invite another admin, or resend and revoke an admin
invitation. A workspace always keeps at least one admin.

An admin cannot be removed from the workspace. To remove one, change their role
first.

:::tip
Choose the role when you send the invitation. You can change it later from the
`Members` screen, next to the member's name.
:::

## Leaving a workspace

1. Open the `Members` screen
2. Press `Leave workspace`

You lose access to its forms and submissions. To come back, someone in the
workspace has to invite you again.

The last admin cannot leave. Make another member an admin first, or delete the
workspace instead.

---

Source: https://documentation.formspark.io/dashboard/additional-workspaces.md

# Additional workspaces

A workspace is a group of forms and can have one or several team members.

Workspaces enable you to create isolated environments for your customers, companies, departments, products, etc.

Note that additional user-created workspaces start with 0 submissions. All upgrades, bundles, and deals are per
workspace. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md). Each workspace lists its own
[purchases and invoices](https://documentation.formspark.io/dashboard/purchases.md).

## Steps

1. Press the switch button to the right of your workspace's name
2. Press `Create workspace`
3. Fill in a name and press `Create`

![New workspace](https://documentation.formspark.io/new-workspace.png)

## Moving a form to another workspace

Forms cannot be moved between workspaces from the dashboard. If you need to transfer a form, [contact support](mailto:support@formspark.io) and we'll move it for you.

## Deleting a workspace

Only an admin can delete a workspace. See
[roles](https://documentation.formspark.io/dashboard/inviting-team-members.md#roles).

1. Open the workspace's `Settings` screen
2. Under `Danger zone`, press `Delete` on the `Delete workspace` row
3. Type the workspace's name to confirm, then press `Delete workspace`

Deletion cannot be undone, so export anything you want to keep first. See
[exporting submissions](https://documentation.formspark.io/dashboard/exporting-submissions.md).

- Its forms, submissions, notification settings and integrations are removed
  for everyone in it. Forms posting to it stop accepting submissions.
- Its members lose access, and links in its pending invitations stop working.
- Submissions bought for it are not refunded, since bundles belong to the
  workspace.

You can delete a workspace that other people use, and your last workspace too.
A workspace you create afterwards starts with 0 submissions.

---

Source: https://documentation.formspark.io/dashboard/purchases.md

# Purchases and invoices

Workspace admins find every purchase, with its invoice, in the workspace's
`Settings`, under `Billing` in `Purchases`. Press `View`, then `Invoice` next to
the purchase. Older purchases offer a `Receipt` instead.

To get a business invoice, add your company name, address and VAT number at
checkout. If you missed it, press `Billing details` on the purchase, or add
them on the receipt.

---

Source: https://documentation.formspark.io/dashboard/redeeming-vouchers.md

# Redeeming vouchers

A voucher adds submissions to a workspace. Admins and editors can redeem one.

## Steps

1. Open the workspace's `Settings` screen
2. Under `Billing`, press `Redeem` on the `Voucher` row
3. Enter your voucher and press `Redeem`

![redeeming a voucher](https://documentation.formspark.io/redeem-voucher.png)

---

Source: https://documentation.formspark.io/dashboard/email-notification-settings.md

# Email notification settings

To manage your form's email notification settings, open its `Settings` section and expand `Notifications` under `Emails`.

## Recipients

- You can enable/disable email notifications for your workspace's team members.
- You can add guests to send email notifications to people outside your workspace/organization.

A guest receives a confirmation email first, and nothing else until they accept it. The recipient list shows a guest who has not accepted yet as pending.

![Email notification settings](https://documentation.formspark.io/email-notification-settings.png)

## Threading

Email threading is on by default, so your mail client groups a form's notifications into one conversation.

Turn it off to receive each submission as a separate email.

## Custom templates

You can customize the notification email template of a form.

Templates are designed in a visual editor, built in partnership with [Postcraft](https://postcraft.io/).

A custom template goes out exactly as you designed it to every recipient, team member or guest. Formspark adds no footer and no unsubscribe link, so when a guest asks to stop receiving it, remove them from the recipients.

Every custom template passes a content check. If the check pauses yours, the form sends no notifications and its settings say so. Contact support to have it reviewed, or press `Revert to default` to go back to the default template.

Dynamic values in a template use the [Handlebars](https://handlebarsjs.com/) templating language.

A template can also set the email's subject line, with the same dynamic values as the body. An `_email.subject` field in the submission takes precedence over it.

```handlebars
<div style="text-align: left;">
  <strong>New submission:</strong>
  <div style="margin: 16px 0;">
    <strong>First name</strong>:
    {{data.firstName}}
  </div>
  <strong>Last name</strong>:
  {{data.lastName}}
</div>
```

### Custom Handlebars helpers

The following custom Handlebars helpers have been registered for you:

| Name                          | Description                                                                                                                                                                                                                                | Example usage                                                                                                                                                                               |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `capitalize`                  | Capitalizes the first character of a string and lowercases the rest.                                                                                                                                                                       | <span v-pre>`{{capitalize "hello world"}}`</span> → `Hello world`                                                                                                                           |
| `nl2br`                       | Converts newlines in a string into `<br>` HTML tags, so line breaks display correctly in HTML.                                                                                                                                             | <span v-pre>`{{nl2br user.comment}}`</span> → `Line one<br>Line two`                                                                                                                        |
| `pluralize`                   | Returns the singular or plural form of a word based on a count. Optionally accepts a custom plural form.                                                                                                                                   | <span v-pre>`{{pluralize 1 "item"}}`</span> → `1 item`<br><span v-pre>`{{pluralize 3 "item"}}`</span> → `3 items`<br><span v-pre>`{{pluralize 2 "child" "children"}}`</span> → `2 children` |
| `sanitizeUrl`                 | Returns the given URL only if it uses a safe scheme (`http(s)`, `mailto`, `tel`, a relative path, or an anchor); otherwise returns `#`. Use it around links built from submitted data so an unsafe value can't render a clickable exploit. | <span v-pre>`{{sanitizeUrl viewLink}}`</span> → `https://example.com` (or `#` if unsafe)                                                                                                    |
| `stringify`                   | Serializes a value to a JSON string. Supports optional indentation for pretty-printing.                                                                                                                                                    | <span v-pre>`{{stringify data}}`</span> → `{"name":"Alice","age":30}`<br><span v-pre>`{{stringify data indent=2}}`</span> → pretty-printed JSON                                             |
| `switch` / `case` / `default` | Block helper for matching a value against multiple cases. Renders the content of the matching `case` block, or the `default` block if no case matches.                                                                                     | <span v-pre>`{{#switch type}}{{#case "a"}}A{{/case}}{{#case "b"}}B{{/case}}{{#default}}Other{{/default}}{{/switch}}`</span>                                                                 |
| `titleCase`                   | Capitalizes the first letter of every word in a string.                                                                                                                                                                                    | <span v-pre>`{{titleCase "hello world from the team"}}`</span> → `Hello World From The Team`                                                                                                |

---

Source: https://documentation.formspark.io/dashboard/autoresponder.md

# Autoresponder

The autoresponder automatically sends a confirmation email to the person who submitted your form.

The autoresponder is available on [upgraded workspaces](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## Enabling the autoresponder

To enable the autoresponder for a form, open its `Settings` section, expand `Autoresponder` under `Emails` and press `Create template`. Creating the template turns replies on, and deleting it turns them off.

The template is designed in a visual editor, built in partnership with [Postcraft](https://postcraft.io/). Add your own copy and imagery, and include a recap of the submitted data.

You can also write the template from your own code, without opening the dashboard at all. See [templates](https://documentation.formspark.io/api/reference.md#templates) in the API reference.

## Who receives the autoresponse

Formspark determines the recipient from your form's submission data. It reads the first of the following fields that the submission fills in:

1. `_replyto`
2. `mail`
3. `email`
4. `_email.replyto`

`mail` and `email` match in any case, so a field named `Email` works too.

```html
<input type="email" name="email" />
```

If none of these fields is filled in, or the value found is not a valid email address, no autoresponse is sent.

::: tip
The same fields also set the reply-to address of your own notification emails, so a form that supports direct replies already works with the autoresponder.
:::

## Replies

Replies to an autoresponse go to your form's first notification recipient, so a submitter who answers the confirmation email reaches you, not Formspark.

## Footer and unsubscribe

Every autoresponse ends with a footer you cannot remove. It tells the recipient they received the confirmation because they submitted a form on your site, and names that site (or the form, when the site is unknown). It also offers an unsubscribe link to anyone who did not submit it.

Recipients who unsubscribe stop receiving autoresponses.

## Subject

Set a subject line in the template to replace the default one. It can include the submitted data, such as the visitor's name. A subject that comes out empty, because the fields it names were not filled in, falls back to the default.

## Language

The default subject and the footer are in English. Add a hidden `_language` field to send them in your visitor's language. See [Language](https://documentation.formspark.io/customization/language.md) for the supported values. A subject you set in the template is sent as you wrote it, whatever the language.

The body is your own template, so write it in the language you want.

## Content policy

Use the autoresponder for transactional confirmations, not for marketing or bulk email.

::: warning
Spam-flagged submissions never trigger an autoresponse.
:::

Every autoresponder template passes a content check. If the check pauses yours, the `Autoresponder` row says so and no replies are sent. Submissions are still stored. Contact support to have the template reviewed.

---

Source: https://documentation.formspark.io/dashboard/exporting-submissions.md

# Exporting submissions

You can easily export your data as JSON or CSV documents.

## Steps

1. Navigate to your form's `Submissions` section
2. Select the submissions you want to export
3. Press `Export` and choose `JSON` or `CSV`

![Export submissions](https://documentation.formspark.io/export-submissions.png)

## Exporting a whole form

To export everything a form received over a period, without selecting
submissions one by one, use its `Exports` section.

1. Navigate to your form's `Exports` section
2. Choose a format and a period, such as `Last 30 days`, `All time` or a
   custom range
3. Press `Create export`

The export appears in the list below once it is ready. Press `Download` to
save it.

Exports cover the submissions in your inbox. Deleted and spam submissions are
not included.

---

Source: https://documentation.formspark.io/dashboard/account-settings.md

# Account settings

Settings that belong to you rather than to one of your workspaces. Open them
from the avatar menu in the dashboard, or go straight to
[your settings](https://dashboard.formspark.io/account/api-tokens).

Workspace settings, including billing, team members and
[deleting a single workspace](https://documentation.formspark.io/dashboard/additional-workspaces.md#deleting-a-workspace),
live with the workspace instead.

## API tokens

Tokens let scripts and tools use Formspark on your behalf. A token belongs to
you and reaches every workspace you are a member of, limited to the scopes you
give it. The API itself is available on paid workspaces.

A token is shown once, when you create it. If you lose it, revoke it and create
another. Revoking takes effect immediately.

See [API tokens](https://documentation.formspark.io/api/api-tokens.md) for the scopes, expiry and usage.

## Deleting your account

Go to **Settings → Delete account**. You will be shown exactly what is about to
be removed and asked to type your email address to confirm.

Deletion cannot be undone. Nothing is archived and nothing can be restored
afterwards, so export anything you want to keep first. See
[exporting submissions](https://documentation.formspark.io/dashboard/exporting-submissions.md).

### What is removed

- Every workspace you are the only member of, along with its forms,
  submissions, notification settings and integrations.
- Your membership of workspaces shared with other people. Those workspaces
  themselves are left alone, together with everything in them.
- Your API tokens. Anything still using one stops working immediately.
- Your email address, on every form that notifies it.

### What is kept

Your sign-in is kept, so you can come back later with the same address rather
than registering again. You will arrive with no workspaces.

The free submissions included with your original signup are not granted a
second time. Any workspace you create after deleting starts empty, and you can
add submissions to it with a bundle. See
[limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

Records we are required to retain for accounting, such as payment records for
bundles you have bought, are held by our payment provider and are unaffected.

### Your address is removed from other people's forms too

Deleting your account takes your address off every form that sends
notifications to it, not only the forms in your own workspaces. That includes
forms belonging to people you have never shared a workspace with, if someone
added you as a recipient.

Aliases of the same mailbox go with it. Deleting an account on
`you@gmail.com` also clears `you+forms@gmail.com` and `y.o.u@gmail.com`,
because they all deliver to you.

If you were the only recipient on someone else's form, that form will no longer
notify anyone until its owner adds a new recipient. Tell them before you delete
if that matters.

### If you are the only administrator of a shared workspace

Deletion is refused while you are the only administrator of a workspace that
other people are members of. Removing you would leave that workspace with
nobody able to manage it.

The dashboard lists the workspaces holding you up. For each one, either:

- Promote another member to administrator, then delete your account. The
  workspace and its data stay with them. See
  [inviting team members](https://documentation.formspark.io/dashboard/inviting-team-members.md).
- Or remove the other members, which turns it into a workspace you are alone
  in, and it will then be deleted along with everything in it.

### Purchased submissions are not refunded

If a workspace being deleted still holds submissions from a bundle, those are
lost with it. Bundles belong to a workspace rather than to you, so if you want
to preserve one, hand that workspace to another administrator instead of
deleting it.

---

Source: https://documentation.formspark.io/html-form/form-validation.md

# Form validation

We recommend using HTML5's built-in validation. It is rich and has good browser support.

::: warning
Formspark performs no server-side validation. Validate your inputs client-side before submission to avoid storing malformed data.
:::

## Resources

- [MDN: Form data validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation)
- [HTML5 validation browser support](https://caniuse.com/#search=validation)
- [MDN: the input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)

## Required fields

The `required` attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>
```

## Length constraints

Use `minlength` and `maxlength` to constrain text inputs.

```html
<input type="text" name="username" minlength="3" maxlength="20" required />
<textarea name="message" minlength="10" maxlength="500" required></textarea>
```

## Pattern matching

Use `pattern` with a regular expression to enforce a specific format.

```html
<!-- US zip code -->
<input
  type="text"
  name="zip"
  pattern="\d{5}(-\d{4})?"
  title="A 5-digit ZIP code (optionally followed by -4 digits)"
  required
/>
```

The `title` attribute is shown by the browser when the pattern fails.

## Custom validation messages

Use `setCustomValidity` to replace the default browser message.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" id="email" required />
  <button type="submit">Send</button>
</form>

<script>
  const email = document.getElementById("email");
  email.addEventListener("invalid", () => {
    email.setCustomValidity("Please enter a valid work email address.");
  });
  email.addEventListener("input", () => {
    email.setCustomValidity("");
  });
</script>
```

## Styling invalid fields

CSS pseudo-classes let you style validation state without JavaScript.

```css
/* Applies as soon as the field is invalid */
input:invalid {
  border-color: red;
}

/* Applies only after the user has interacted with the field */
input:user-invalid {
  border-color: red;
}

input:user-valid {
  border-color: green;
}
```

Prefer `:user-invalid` / `:user-valid` over `:invalid` / `:valid` so empty required fields don't appear red on page load.

---

Source: https://documentation.formspark.io/html-form/form-styling.md

# Form styling

With Formspark you get to bring your own HTML and CSS.

On this page you'll find tips, tricks and links to help you style your forms.

## Simple vertical layout

![Simple vertical layout](https://documentation.formspark.io/simple-vertical-layout.png)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .vertical-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 500px;
      }
    </style>
  </head>
  <body>
    <form
      class="vertical-form"
      action="https://submit-form.com/your-form-id"
      method="POST"
    >
      <label for="first-name">First name</label>
      <input id="first-name" name="first-name" type="text" />
      <label for="last-name">Last name</label>
      <input id="last-name" name="last-name" type="text" />
      <label for="message">Message</label>
      <textarea id="message" name="message" cols="15" rows="5"></textarea>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

## Accessible form

Pair every input with a `<label for>`, give focused fields a visible outline, and never rely on placeholder text as a label.

```html
<style>
  .accessible-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 500px;
    font-family: system-ui, sans-serif;
  }
  .accessible-form label {
    font-weight: 600;
  }
  .accessible-form :is(input, textarea) {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .accessible-form :is(input, textarea):focus-visible {
    outline: 3px solid #707ee7;
    outline-offset: 2px;
  }
</style>

<form
  class="accessible-form"
  action="https://submit-form.com/your-form-id"
  method="POST"
>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

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

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

## Tailwind CSS

```html
<form
  class="mx-auto flex max-w-md flex-col gap-3"
  action="https://submit-form.com/your-form-id"
  method="POST"
>
  <label for="email" class="font-semibold">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    required
    class="rounded border border-gray-300 p-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500"
  />

  <label for="message" class="font-semibold">Message</label>
  <textarea
    id="message"
    name="message"
    rows="5"
    required
    class="rounded border border-gray-300 p-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500"
  ></textarea>

  <button
    type="submit"
    class="rounded bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-700"
  >
    Send
  </button>
</form>
```

## Add an asterisk to required field labels

![Required field label asterisk](https://documentation.formspark.io/required-field-label-asterisk.png)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      label.required:after {
        content: "*";
        color: red;
      }
    </style>
  </head>
  <body>
    <form action="https://submit-form.com/your-form-id" method="POST">
      <label for="first-name" class="required">First name</label>
      <input id="first-name" name="first-name" type="text" required />
      <label for="last-name">Last name</label>
      <input id="last-name" name="last-name" type="text" />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

## Success and error states (AJAX)

When you submit via AJAX, you control the post-submission UI yourself. A common pattern is to swap the form for a thank-you message on success and show an inline error on failure.

```html
<form id="contact" action="https://submit-form.com/your-form-id" method="POST">
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
  <p id="error" hidden>Something went wrong. Please try again.</p>
</form>

<div id="thanks" hidden>Thanks! We received your message.</div>

<script>
  const form = document.getElementById("contact");
  const error = document.getElementById("error");
  const thanks = document.getElementById("thanks");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    error.hidden = true;
    const button = form.querySelector("button");
    button.disabled = true;
    button.textContent = "Sending...";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(Object.fromEntries(new FormData(form))),
      });
      if (!response.ok) throw new Error();
      form.hidden = true;
      thanks.hidden = false;
    } catch {
      error.hidden = false;
      button.disabled = false;
      button.textContent = "Send";
    }
  });
</script>
```

## CSS frameworks

- [Bootstrap](https://getbootstrap.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Pico CSS](https://picocss.com/): minimal, semantic, no classes required.

---

Source: https://documentation.formspark.io/html-form/special-input-types.md

# Special input types

## Radio

Radio buttons let a user select ONLY ONE of a limited number of choices.

Only the value of the checked choice will be forwarded.

All choices should share the SAME `name` attribute.

```html
<form action="https://submit-form.com/your-form-id">
  <input type="radio" name="color" value="blue" checked /> Blue
  <input type="radio" name="color" value="red" /> Red
  <input type="radio" name="color" value="green" /> Green
  <button type="submit">Submit</button>
</form>
```

## Checkbox

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

The value of each checked choice will be forwarded.

When unchecked, the browser does not send the input in the request, so a checkbox value will either be true, or the key
will not exist at all.

All choices should have a UNIQUE `name` attribute.

```html
<form action="https://submit-form.com/your-form-id">
  <input type="checkbox" name="has-bike" value="Bike" /> I have a bike
  <input type="checkbox" name="has-car" value="Car" /> I have a car
  <button type="submit">Submit</button>
</form>
```

## Hidden field

A hidden field lets you include data that cannot be seen or modified by users when a form is submitted.

```html
<form action="https://submit-form.com/your-form-id">
  <input type="hidden" name="website-version" value="1.0.0" />
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>
```

## Email, telephone, and URL

These types are stored as plain strings on Formspark's side. Their value is that browsers validate the format and mobile keyboards switch to the appropriate layout.

```html
<input type="email" name="email" required />
<input type="tel" name="phone" />
<input type="url" name="website" />
```

## Number and range

```html
<input type="number" name="quantity" min="1" max="10" step="1" />
<input type="range" name="satisfaction" min="0" max="10" />
```

## Date and color

```html
<input type="date" name="birthday" />
<input type="color" name="brand-color" value="#707ee7" />
```

## File uploads

::: warning
`<input type="file">` does not work with Formspark directly. Formspark accepts `multipart/form-data` submissions, but only their text fields: a submission that carries a file is rejected with a `400` error.

To accept file uploads, use a storage provider such as Uploadcare and submit the resulting URL to Formspark. See [File uploads](https://documentation.formspark.io/setup/file-uploads.md).
:::

---

Source: https://documentation.formspark.io/html-form/drop-down-list.md

# Drop-down list

The `<select>` element is used to create a drop-down list.

Only the value(s) of the selected option(s) will be forwarded.

Use the `multiple` attribute to specify whether multiple options can be selected at once.

```html
<!-- Single option (selection persisted as a string) -->
<form action="https://submit-form.com/your-form-id" method="POST">
  <select name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <button type="submit">Submit</button>
</form>
```

```html
<!-- Multiple options (selection persisted as an array)-->
<form action="https://submit-form.com/your-form-id" method="POST">
  <select name="vegetables" multiple>
    <option value="tomato">Tomato</option>
    <option value="carrot">Carrot</option>
    <option value="potato">Potato</option>
    <option value="kale">Kale</option>
  </select>
  <button type="submit">Submit</button>
</form>
```

::: tip
When a `multiple` select has nothing selected, the field is omitted from the submission entirely, so the key will not appear in your data.
:::

## Grouped options

Use `<optgroup>` to organize related options under a heading.

```html
<select name="car">
  <optgroup label="European">
    <option value="volvo">Volvo</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="American">
    <option value="ford">Ford</option>
    <option value="tesla">Tesla</option>
  </optgroup>
</select>
```

## Autocomplete suggestions

A `<datalist>` provides suggestions for a plain text input. Unlike `<select>`, the user can still type any value.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <label for="country">Country</label>
  <input list="countries" id="country" name="country" />
  <datalist id="countries">
    <option value="Belgium"></option>
    <option value="France"></option>
    <option value="Germany"></option>
    <option value="Netherlands"></option>
  </datalist>
  <button type="submit">Submit</button>
</form>
```

---

Source: https://documentation.formspark.io/html-form/submit-in-different-tab.md

# Submit in different tab

When setting the `target` attribute to `_blank`, the form will be submitted in a new tab.

```html
<form action="https://submit-form.com/your-form-id" target="_blank">
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

::: warning
Browsers may block the new tab if the submission isn't triggered by a direct user gesture (for example, a programmatic `form.submit()` call). On mobile, opening a new tab can interrupt the flow and feels broken to many users. Prefer staying on the same page with [AJAX](https://documentation.formspark.io/examples/ajax.md) for a better experience.
:::

---

Source: https://documentation.formspark.io/examples/ajax.md

# AJAX submissions

You can use AJAX to submit your forms.

To do so, make a `POST` request to your form endpoint (https://submit-form.com/your-form-id).

Ensure that both the `Content-Type` and `Accept` headers are set to `application/json` (some HTTP libraries do this
automatically).

If you wish to include special fields and customizations, which require hidden fields such as `_email.subject`
and `_email.from`, include them as a nested object in the payload:

```javascript
fetch("https://submit-form.com/your-form-id", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    message: "Hello, World",
    _email: {
      from: "A Human Being",
      subject: "A message awaits.",
      template: {
        title: false,
        footer: false,
      },
    },
  }),
});
```

## Response

With `Accept: application/json`, Formspark answers an accepted submission with a `200` status and the submitted
fields as a JSON object. It answers a rejected submission with an error status and a short plain-text
message: `403` when spam protection rejects it, and `402` when the workspace is out of submissions.

Without that `Accept` header, Formspark treats the request as a browser form post and answers with a redirect
to the feedback page or to your `_redirect` URL.

## Fetch

The modern, dependency-free way to submit a form.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Fetch</title>
  </head>
  <body>
    <script>
      async function submit() {
        try {
          const response = await fetch("https://submit-form.com/your-form-id", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
            },
            body: JSON.stringify({
              message: "Hello, World",
            }),
          });
          if (!response.ok) throw new Error(`HTTP ${response.status}`);
          console.log("Submitted");
        } catch (error) {
          console.error(error);
        }
      }

      submit();
    </script>
  </body>
</html>
```

## Fetch with Botpoison

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Fetch and Botpoison</title>
    <script src="https://unpkg.com/@botpoison/browser" async></script>
  </head>
  <body>
    <script>
      async function submit() {
        const botpoison = new Botpoison({
          publicKey: "your-public-key",
        });
        const { solution } = await botpoison.challenge();
        await fetch("https://submit-form.com/your-form-id", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify({
            message: "Hello, World",
            _botpoison: solution,
          }),
        });
      }

      submit();
    </script>
  </body>
</html>
```

## Fetch with reCAPTCHA v2

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Fetch and reCAPTCHA v2</title>
    <script src="https://www.google.com/recaptcha/api.js" async></script>
  </head>
  <body>
    <div class="g-recaptcha" data-sitekey="your-site-key"></div>
    <button id="send-button" type="button">Send</button>
    <script>
      document
        .getElementById("send-button")
        .addEventListener("click", async () => {
          await fetch("https://submit-form.com/your-form-id", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
            },
            body: JSON.stringify({
              message: "Hello, World",
              "g-recaptcha-response": grecaptcha.getResponse(),
            }),
          });
        });
    </script>
  </body>
</html>
```

## Axios

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js" async></script>
  </head>
  <body>
    <script>
      axios
        .post("https://submit-form.com/your-form-id", {
          message: "Hello, World",
        })
        .then((response) => console.log(response))
        .catch((error) => console.error(error));
    </script>
  </body>
</html>
```

## Axios with Botpoison

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Axios and Botpoison</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js" async></script>
    <script src="https://unpkg.com/@botpoison/browser" async></script>
  </head>
  <body>
    <script>
      const botpoison = new Botpoison({
        publicKey: "your-public-key",
      });
      botpoison.challenge().then(({ solution }) => {
        axios
          .post("https://submit-form.com/your-form-id", {
            message: "Hello, World",
            _botpoison: solution,
          })
          .then((response) => console.log(response))
          .catch((error) => console.error(error));
      });
    </script>
  </body>
</html>
```

## Axios with reCAPTCHA v2

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with Axios and reCAPTCHA v2</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js" async></script>
    <script src="https://www.google.com/recaptcha/api.js" async></script>
  </head>
  <body>
    <div class="g-recaptcha" data-sitekey="your-site-key"></div>
    <button id="send-button" type="button">Send</button>
    <script>
      document.getElementById("send-button").addEventListener("click", () => {
        axios.post("https://submit-form.com/your-form-id", {
          message: "Hello, World",
          "g-recaptcha-response": grecaptcha.getResponse(),
        });
      });
    </script>
  </body>
</html>
```

## Legacy

The patterns below still work, but we recommend Fetch for new code.

### JavaScript XHR

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with JavaScript XHR</title>
  </head>
  <body>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "https://submit-form.com/your-form-id");
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Accept", "application/json");
      xhr.send(
        JSON.stringify({
          message: "Hello, World!",
        }),
      );
    </script>
  </body>
</html>
```

### jQuery

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | AJAX with jQuery</title>
    <script src="https://unpkg.com/jquery/dist/jquery.js"></script>
  </head>
  <body>
    <script>
      $.post(
        "https://submit-form.com/your-form-id",
        {
          message: "Hello, World",
        },
        null,
        "json", // dataType must be set to json
      )
        .then((response) => console.log(response))
        .catch((error) => console.error(error));
    </script>
  </body>
</html>
```

---

Source: https://documentation.formspark.io/examples/alpinejs.md

# Alpine.js

## Fetch

Featured
article: [Building an AJAX form with Alpine.js](https://technotrampoline.com/articles/building-an-ajax-form-with-alpinejs/)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | Alpine.js with Fetch</title>
    <script
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
      defer
    ></script>
  </head>
  <body>
    <form x-data="contactForm()" @submit.prevent="submit">
      <label>
        <span>Message</span>
        <textarea name="message" x-model="data.message"></textarea>
      </label>
      <button type="submit" x-text="buttonText" :disabled="loading">
        Submit
      </button>
    </form>

    <script>
      const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

      function contactForm() {
        return {
          data: {
            message: "",
          },
          buttonText: "Submit",
          loading: false,
          submit() {
            this.buttonText = "Submitting...";
            this.loading = true;
            fetch(FORMSPARK_ACTION_URL, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
              },
              body: JSON.stringify(this.data),
            })
              .then(() => {
                alert("Form submitted");
              })
              .catch(() => {
                alert("Something went wrong");
              })
              .finally(() => {
                this.data.message = "";
                this.buttonText = "Submit";
                this.loading = false;
              });
          },
        };
      }
    </script>
  </body>
</html>
```

## With success and error states

Tracks the submission state (`idle`, `loading`, `success`, `error`) so you can show a thank-you message on success or an inline error on failure without leaving the page.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | Alpine.js with states</title>
    <script
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
      defer
    ></script>
  </head>
  <body>
    <div x-data="contactForm()">
      <form x-show="state !== 'success'" @submit.prevent="submit">
        <label>
          <span>Message</span>
          <textarea name="message" x-model="data.message" required></textarea>
        </label>
        <button type="submit" :disabled="state === 'loading'">
          <span x-show="state !== 'loading'">Submit</span>
          <span x-show="state === 'loading'">Sending...</span>
        </button>
        <p x-show="state === 'error'" style="color: red">
          Something went wrong. Please try again.
        </p>
      </form>

      <p x-show="state === 'success'">Thanks! We received your message.</p>
    </div>

    <script>
      const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

      function contactForm() {
        return {
          state: "idle",
          data: {
            message: "",
          },
          async submit() {
            this.state = "loading";
            try {
              const response = await fetch(FORMSPARK_ACTION_URL, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                  Accept: "application/json",
                },
                body: JSON.stringify(this.data),
              });
              if (!response.ok) throw new Error();
              this.state = "success";
            } catch {
              this.state = "error";
            }
          },
        };
      }
    </script>
  </body>
</html>
```

---

Source: https://documentation.formspark.io/examples/analog.md

# Analog

Analog is the full-stack meta-framework for Angular. Its pages are ordinary
standalone Angular components, so the [Angular](https://documentation.formspark.io/examples/angular.md) patterns
apply here too.

## HTML form

The action URL can be used directly, so a page that only needs to collect a
submission needs no component logic.

```ts
// src/app/pages/contact.page.ts
import { Component } from "@angular/core";

@Component({
  standalone: true,
  template: `
    <form method="POST" action="https://submit-form.com/your-form-id">
      <label>
        <span>Message</span>
        <textarea name="message"></textarea>
      </label>
      <button type="submit">Send</button>
    </form>
  `,
})
export default class ContactPage {}
```

A page component is exported as `default`, which is how Analog's file-based
router picks it up.

## Fetch

Keeps the submission on the page so you can disable the form while it is in
flight and show your own confirmation.

```ts
// src/app/pages/contact.page.ts
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

@Component({
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="onSubmit()">
      <label>
        <span>Message</span>
        <textarea name="message" [(ngModel)]="message"></textarea>
      </label>
      <button type="submit" [disabled]="submitting">Send</button>
    </form>
  `,
})
export default class ContactPage {
  message = "";
  submitting = false;

  async onSubmit() {
    this.submitting = true;
    try {
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ message: this.message }),
      });
      this.message = "";
    } finally {
      this.submitting = false;
    }
  }
}
```

`[(ngModel)]` requires the control to carry a `name` attribute when it sits
inside a form.

---

Source: https://documentation.formspark.io/examples/angular.md

# Angular

## HTML form

The action URL can be used directly, so a plain template-driven form needs no
component logic at all.

```html
<form method="POST" action="https://submit-form.com/your-form-id">
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
```

## Reactive form with HttpClient

Keeps the submission on the page so you can disable the form while it is in
flight and show your own confirmation.

```ts
import { Component, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { finalize } from "rxjs";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

@Component({
  selector: "app-contact-form",
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label>
        <span>Message</span>
        <textarea formControlName="message"></textarea>
      </label>
      <button type="submit" [disabled]="form.disabled">Send</button>
    </form>
  `,
})
export class ContactFormComponent {
  private formBuilder = inject(FormBuilder);
  private http = inject(HttpClient);

  form = this.formBuilder.group({ message: "" });

  onSubmit() {
    this.form.disable();
    this.http
      .post(FORMSPARK_ACTION_URL, this.form.value, {
        headers: { Accept: "application/json" },
      })
      .pipe(finalize(() => this.form.enable()))
      .subscribe({
        next: () => this.form.reset(),
      });
  }
}
```

`HttpClient` sets `Content-Type: application/json` for an object body. The
explicit `Accept: application/json` header makes Formspark answer with JSON.
A request that asks for HTML instead gets a redirect to the feedback page,
which `HttpClient` cannot parse.

`finalize` re-enables the form whether the request succeeds or fails. A plain
`complete` callback never runs on error, which would leave the form disabled for
good.

Remember to provide `HttpClient` in your application bootstrap:

```ts
import { provideHttpClient } from "@angular/common/http";
import { bootstrapApplication } from "@angular/platform-browser";

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
});
```

---

Source: https://documentation.formspark.io/examples/astro.md

# Astro

## HTML

Astro ships zero JavaScript by default, so a plain HTML form inside a `.astro` page is the recommended approach.

```astro
---
const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
---

<form action={FORMSPARK_ACTION_URL} method="POST">
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
```

## Fetch

Add a `<script>` block to your `.astro` page to submit the form without a page reload.

```astro
---
const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
---

<form id="contact" data-action={FORMSPARK_ACTION_URL}>
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>

<script>
  const form = document.getElementById("contact") as HTMLFormElement;
  const action = form.dataset.action!;

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button")!;
    button.disabled = true;
    try {
      await fetch(action, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(Object.fromEntries(new FormData(form))),
      });
      form.reset();
      alert("Form submitted");
    } finally {
      button.disabled = false;
    }
  });
</script>
```

---

Source: https://documentation.formspark.io/examples/eleventy.md

# Eleventy

## Inline

Eleventy templates are plain HTML, so a form can point straight at your action
URL.

```html
---
layout: base.njk
title: Contact
---

<form action="https://submit-form.com/your-form-id" method="POST">
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
```

## Reusable include

Keeping the form id in a global data file means one edit when it changes, and
no id duplicated across templates.

Add `src/_data/formspark.json`:

```json
{
  "formId": "your-form-id"
}
```

Add `src/_includes/contact-form.njk`:

```html
<form action="https://submit-form.com/{{ formspark.formId }}" method="POST">
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
```

Then include it from any template:

```html
{% include "contact-form.njk" %}
```

---

Source: https://documentation.formspark.io/examples/framer.md

# Framer

Check out [this official Framer guide](https://www.framer.com/help/articles/how-to-add-formspark-to-your-website/).

![Framer](https://documentation.formspark.io/formspark-framer.png)

---

Source: https://documentation.formspark.io/examples/gatsby.md

# Gatsby

## HTML

```jsx
import React from "react";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default function ContactPage() {
  return (
    <form method="POST" action={FORMSPARK_ACTION_URL}>
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </form>
  );
}
```

## use-formspark

:::tip
Check out our official React hooks: [use-formspark](https://github.com/formspark/use-formspark).
:::

```jsx
import React, { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export default function ContactPage() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

## Fetch

```jsx
import React, { useState } from "react";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default function ContactPage() {
  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({ message }),
    });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}
```

---

Source: https://documentation.formspark.io/examples/ghost.md

# Ghost

Ghost has no form builder of its own, so a form is plain HTML posted to
Formspark. Add it to a single post or page with an HTML card, or build it into
your theme.

## HTML card

1. In the Ghost editor, type `/html` and press Enter to add an HTML card.
2. Paste the HTML of your form.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>
```

## Theme template

If you can upload a custom theme, give the form a page template of its own.
Ghost uses `page-{slug}.hbs` for the page with that slug.

1. Save this as `page-contact.hbs` in your theme.
2. Upload the theme, then create a page with the `contact` slug.

```handlebars
{{!< default}}

<section class="post-full-content">
  <h1>{{title}}</h1>

  <form action="https://submit-form.com/your-form-id" method="POST">
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Send</button>
  </form>
</section>
```

To send visitors back to your own site after they submit, see
[redirection](https://documentation.formspark.io/customization/redirection.md).

---

Source: https://documentation.formspark.io/examples/htmx.md

# htmx

Formspark returns a JSON response (when `Accept: application/json` is set), so we use `hx-swap="none"` to prevent htmx from replacing the form with the response, and show a thank-you message via `hx-on::after-request`.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | htmx</title>
    <script src="https://unpkg.com/htmx.org@2"></script>
    <script src="https://unpkg.com/htmx-ext-json-enc@2"></script>
  </head>
  <body>
    <form
      hx-post="https://submit-form.com/your-form-id"
      hx-ext="json-enc"
      hx-headers='{"Accept": "application/json"}'
      hx-swap="none"
      hx-on::after-request="if(event.detail.successful){this.reset();document.getElementById('thanks').hidden=false}"
    >
      <label>
        <span>Message</span>
        <textarea name="message"></textarea>
      </label>
      <button type="submit">Send</button>
    </form>

    <div id="thanks" hidden>Thanks! We received your message.</div>
  </body>
</html>
```

---

Source: https://documentation.formspark.io/examples/hugo.md

# Hugo

## Inline

```html
<html>
  <head>
    <title>{{ .Title }}</title>
  </head>
  <body>
    <h1>{{ .Title }}</h1>
    <form
      action="https://submit-form.com/{{ .Site.Params.formspark_form_id }}"
      method="POST"
    >
      <textarea name="message"></textarea>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

## Reusable partial

Store the form ID once in your site config and render the form from a partial wherever you need it.

```toml
# hugo.toml
[params]
formspark_form_id = "your-form-id"
```

```html
<!-- layouts/partials/contact-form.html -->
<form
  action="https://submit-form.com/{{ .Site.Params.formspark_form_id }}"
  method="POST"
>
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>
```

Use it from any layout or page:

```html
{{ partial "contact-form.html" . }}
```

---

Source: https://documentation.formspark.io/examples/jekyll.md

# Jekyll

## Inline

```html
---
layout: default
---

<form
  action="https://submit-form.com/{{ site.formspark_form_id }}"
  method="POST"
>
  <textarea name="message"></textarea>
  <button type="submit">Submit</button>
</form>
```

## Reusable include

Store the form ID once in your site config and render the form from an include wherever you need it.

```yaml
# _config.yml
formspark_form_id: your-form-id
```

```html
<!-- _includes/contact-form.html -->
<form
  action="https://submit-form.com/{{ site.formspark_form_id }}"
  method="POST"
>
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>
```

Use it from any page or layout:

```liquid
{% include contact-form.html %}
```

---

Source: https://documentation.formspark.io/examples/nextjs.md

# Next.js

## App Router (Server Action)

Keeps the form ID server-side and redirects after submission. No client JavaScript required.

```jsx
// app/contact/page.jsx
import { redirect } from "next/navigation";

async function submitForm(formData) {
  "use server";
  const body = Object.fromEntries(formData);
  await fetch("https://submit-form.com/your-form-id", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(body),
  });
  redirect("/thanks");
}

export default function ContactPage() {
  return (
    <form action={submitForm}>
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}
```

## App Router (client component)

When you want a loading state or to stay on the same page after submission.

```jsx
// app/contact/page.jsx
"use client";

import { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export default function ContactPage() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

## Pages Router (use-formspark)

:::tip
Check out our official React hooks: [use-formspark](https://github.com/formspark/use-formspark).
:::

```jsx
import React, { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

function ContactPage() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}

export default ContactPage;
```

## Pages Router (Fetch)

```jsx
import React, { useState } from "react";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

function ContactPage() {
  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        message,
      }),
    });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

export default ContactPage;
```

---

Source: https://documentation.formspark.io/examples/nuxtjs.md

# Nuxt

## vue-use-formspark

:::tip
Check out our official Vue composition API
functions: [vue-use-formspark](https://github.com/formspark/vue-use-formspark).
:::

```vue
<script setup>
import { ref } from "vue";
import { useFormspark } from "@formspark/vue-use-formspark";

const message = ref("");

const [submit, submitting] = useFormspark({
  formId: "your-form-id",
});

const onSubmit = async () => {
  await submit({ message: message.value });
  message.value = "";
  alert("Form submitted");
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <label>
      <span>Message</span>
      <textarea v-model="message" />
    </label>
    <button type="submit" :disabled="submitting">Send</button>
  </form>
</template>
```

## Fetch

`$fetch` is Nuxt's built-in HTTP client, so the body is passed as an object rather than a JSON string.

```vue
<script setup>
import { ref } from "vue";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

const message = ref("");

const submitForm = async () => {
  await $fetch(FORMSPARK_ACTION_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: {
      message: message.value,
    },
  });
  alert("Form submitted");
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <label>
      <span>Message</span>
      <textarea name="message" v-model="message"></textarea>
    </label>
    <button type="submit">Submit</button>
  </form>
</template>
```

---

Source: https://documentation.formspark.io/examples/preact.md

# Preact

## Fetch

Preact's hooks live in `preact/hooks`, and text inputs report changes through
`onInput` rather than `onChange`.

```jsx
import { useState } from "preact/hooks";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export function ContactForm() {
  const [message, setMessage] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ message }),
      });
      setMessage("");
      alert("Form submitted");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <label>
        <span>Message</span>
        <textarea
          value={message}
          onInput={(e) => setMessage(e.currentTarget.value)}
        />
      </label>
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

## use-formspark

[use-formspark](https://github.com/formspark/use-formspark) is built on the
React hooks API, so it works under `preact/compat`.

```jsx
import { useState } from "preact/hooks";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export function ContactForm() {
  const [submit, submitting] = useFormspark({ formId: FORMSPARK_FORM_ID });
  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea
        value={message}
        onInput={(e) => setMessage(e.currentTarget.value)}
      />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

---

Source: https://documentation.formspark.io/examples/qwik.md

# Qwik

## routeAction$

`routeAction$` runs on the server, so the submission works before the page has
hydrated and keeps working with JavaScript disabled.

```tsx
import { component$ } from "@builder.io/qwik";
import { Form, routeAction$ } from "@builder.io/qwik-city";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export const useContactAction = routeAction$(async (data) => {
  await fetch(FORMSPARK_ACTION_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(data),
  });
  return { success: true };
});

export default component$(() => {
  const action = useContactAction();

  return (
    <div>
      <Form action={action}>
        <label>
          <span>Message</span>
          <textarea name="message" />
        </label>
        <button type="submit" disabled={action.isRunning}>
          Send
        </button>
      </Form>

      {action.value?.success && <p>Thanks! We received your message.</p>}
    </div>
  );
});
```

## Fetch

If you would rather submit from the browser, use a `$` handler and a signal. The
action URL ends up in the client bundle here, which is no different from a plain
HTML form: a form id identifies a form, it does not authorize anything, so it is
safe to ship to the browser.

```tsx
import { component$, useSignal, $ } from "@builder.io/qwik";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default component$(() => {
  const message = useSignal("");
  const submitting = useSignal(false);

  const onSubmit = $(async () => {
    submitting.value = true;
    try {
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ message: message.value }),
      });
      message.value = "";
    } finally {
      submitting.value = false;
    }
  });

  return (
    <form preventdefault:submit onSubmit$={onSubmit}>
      <textarea bind:value={message} />
      <button type="submit" disabled={submitting.value}>
        Send
      </button>
    </form>
  );
});
```

---

Source: https://documentation.formspark.io/examples/react.md

# React

## use-formspark

:::tip
Check out our official React hooks: [use-formspark](https://github.com/formspark/use-formspark).
:::

```jsx
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

const Application = () => {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
};

createRoot(document.getElementById("root")).render(<Application />);
```

## Fetch

```jsx
import { useState } from "react";
import { createRoot } from "react-dom/client";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

const Application = () => {
  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        message,
      }),
    });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
};

createRoot(document.getElementById("root")).render(<Application />);
```

## React Hook Form

[React Hook Form](https://react-hook-form.com/) pairs nicely with `use-formspark` for validation and field state.

```jsx
import { useForm } from "react-hook-form";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export default function ContactForm() {
  const [submit, submitting] = useFormspark({ formId: FORMSPARK_FORM_ID });
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm();

  const onSubmit = async (data) => {
    await submit(data);
    reset();
    alert("Form submitted");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        <span>Email</span>
        <input type="email" {...register("email", { required: true })} />
      </label>
      {errors.email && <p>An email address is required.</p>}

      <label>
        <span>Message</span>
        <textarea {...register("message", { required: true, minLength: 10 })} />
      </label>
      {errors.message && <p>Please write at least 10 characters.</p>}

      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

---

Source: https://documentation.formspark.io/examples/react-native.md

# React Native

## use-formspark

:::tip
Check out our official React hooks: [use-formspark](https://github.com/formspark/use-formspark).
:::

```jsx
import React, { useState } from "react";
import { Alert, Button, Text, TextInput, View } from "react-native";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

function ContactScreen() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onPress = async () => {
    await submit({ message });
    Alert.alert("Form submitted");
  };

  return (
    <View>
      <View>
        <Text>Message</Text>
        <TextInput
          value={message}
          onChangeText={(message) => setMessage(message)}
          multiline={true}
        />
      </View>
      <View>
        <Button title="Send" onPress={onPress} disabled={submitting} />
      </View>
    </View>
  );
}

export default ContactScreen;
```

## Fetch

```jsx
import React, { useState } from "react";
import { Alert, Button, Text, TextInput, View } from "react-native";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

function ContactScreen() {
  const [message, setMessage] = useState("");

  const onPress = async () => {
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        message,
      }),
    });
    Alert.alert("Form submitted");
  };

  return (
    <View>
      <View>
        <Text>Message</Text>
        <TextInput
          value={message}
          onChangeText={(message) => setMessage(message)}
          multiline={true}
        />
      </View>
      <View>
        <Button title="Send" onPress={onPress} />
      </View>
    </View>
  );
}

export default ContactScreen;
```

---

Source: https://documentation.formspark.io/examples/remix.md

# React Router (Remix)

Remix v2 continues as React Router in framework mode. Remix v2 apps upgrade to
React Router v7 with the [official upgrade guide](https://reactrouter.com/upgrading/remix).
The examples below work on React Router v7 and later.

## Route action

An `action` runs on the server, so the submission works before the page has
hydrated and keeps working with JavaScript disabled.

```jsx
// app/routes/contact.jsx
import { Form, redirect } from "react-router";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export async function action({ request }) {
  const formData = await request.formData();
  await fetch(FORMSPARK_ACTION_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(Object.fromEntries(formData)),
  });
  return redirect("/thanks");
}

export default function ContactPage() {
  return (
    <Form method="post">
      <label>
        <span>Message</span>
        <textarea name="message" required />
      </label>
      <button type="submit">Send</button>
    </Form>
  );
}
```

React Router's `<Form>` submits without a full page load once hydrated, and falls back
to a normal browser submission before that.

### Registering the route

Framework mode reads its routes from `app/routes.ts`. Add the contact route
there, or use `flatRoutes()` from `@react-router/fs-routes` to keep file-based
routing.

```ts
// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.jsx"),
  route("contact", "routes/contact.jsx"),
] satisfies RouteConfig;
```

### Disabling the button while submitting

`useNavigation` reports the state of the in-flight submission.

```jsx
// app/routes/contact.jsx
import { Form, useNavigation } from "react-router";

export default function ContactPage() {
  const navigation = useNavigation();
  const submitting = navigation.state === "submitting";

  return (
    <Form method="post">
      <label>
        <span>Message</span>
        <textarea name="message" required />
      </label>
      <button type="submit" disabled={submitting}>
        {submitting ? "Sending..." : "Send"}
      </button>
    </Form>
  );
}
```

## use-formspark

:::tip
Check out our official React hooks: [use-formspark](https://github.com/formspark/use-formspark).
:::

Submits from the browser instead, so you can stay on the page and render your
own confirmation.

```jsx
// app/routes/contact.jsx
import { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export default function ContactPage() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");
  const [sent, setSent] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    setMessage("");
    setSent(true);
  };

  if (sent) {
    return <p>Thanks! We received your message.</p>;
  }

  return (
    <form onSubmit={onSubmit}>
      <label>
        <span>Message</span>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
      </label>
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}
```

---

Source: https://documentation.formspark.io/examples/solidstart.md

# SolidStart

## HTML form

A plain form posts straight to your action URL, so it needs no client
JavaScript and works before the page has hydrated.

```jsx
// src/routes/contact.jsx
const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default function ContactPage() {
  return (
    <form method="post" action={FORMSPARK_ACTION_URL}>
      <label>
        <span>Message</span>
        <textarea name="message" required />
      </label>
      <button type="submit">Send</button>
    </form>
  );
}
```

## Fetch

Solid's signals are read as functions, and text inputs report changes through
`onInput` rather than `onChange`.

```jsx
// src/routes/contact.jsx
import { createSignal } from "solid-js";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default function ContactPage() {
  const [message, setMessage] = createSignal("");
  const [submitting, setSubmitting] = createSignal(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ message: message() }),
      });
      setMessage("");
      alert("Form submitted");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <label>
        <span>Message</span>
        <textarea
          value={message()}
          onInput={(e) => setMessage(e.currentTarget.value)}
        />
      </label>
      <button type="submit" disabled={submitting()}>
        Send
      </button>
    </form>
  );
}
```

---

Source: https://documentation.formspark.io/examples/svelte.md

# Svelte

## Fetch

```svelte
<script>
  const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

  let message = $state("");
  let submitting = $state(false);

  async function onSubmit(event) {
    event.preventDefault();
    try {
      submitting = true;
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          message,
        }),
      });
      message = "";
      alert("Form submitted");
    } finally {
      submitting = false;
    }
  }
</script>

<form onsubmit={onSubmit}>
  <textarea bind:value={message}></textarea>
  <button type="submit" disabled={submitting}>Send</button>
</form>
```

---

Source: https://documentation.formspark.io/examples/sveltekit.md

# SvelteKit

## HTML form

The simplest integration is a plain HTML form that posts directly to Formspark.
No JavaScript is required.

```svelte
<!-- src/routes/contact/+page.svelte -->
<form method="POST" action="https://submit-form.com/your-form-id">
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>
```

## Fetch

```svelte
<!-- src/routes/contact/+page.svelte -->
<script>
  const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

  let message = $state("");
  let submitting = $state(false);

  async function onSubmit(event) {
    event.preventDefault();
    try {
      submitting = true;
      await fetch(FORMSPARK_ACTION_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          message,
        }),
      });
      message = "";
      alert("Form submitted");
    } finally {
      submitting = false;
    }
  }
</script>

<form onsubmit={onSubmit}>
  <textarea bind:value={message}></textarea>
  <button type="submit" disabled={submitting}>Send</button>
</form>
```

---

Source: https://documentation.formspark.io/examples/vitepress.md

# VitePress

VitePress renders pages at build time and hydrates them in the browser. A form
whose markup does not depend on anything browser-specific renders the same in
both passes, so it needs no special handling. The `fetch` only runs once the
visitor submits.

Reach for `<ClientOnly>` only when a component reads something that exists in
the browser alone, such as `window`, `localStorage` or the current URL, while it
is setting up or rendering.

## Theme component

Add `.vitepress/theme/components/ContactForm.vue`:

```vue
<script setup>
import { ref } from "vue";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

const message = ref("");
const submitting = ref(false);

const onSubmit = async () => {
  submitting.value = true;
  try {
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({ message: message.value }),
    });
    message.value = "";
  } finally {
    submitting.value = false;
  }
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <label>
      <span>Message</span>
      <textarea v-model="message"></textarea>
    </label>
    <button type="submit" :disabled="submitting">Send</button>
  </form>
</template>
```

Register it globally in `.vitepress/theme/index.js`:

```js
import DefaultTheme from "vitepress/theme";
import ContactForm from "./components/ContactForm.vue";

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component("ContactForm", ContactForm);
  },
};
```

Then use it in any markdown page:

```md
# Contact

<ContactForm />
```

## HTML form

A plain form needs no component and no client JavaScript, so it works in
markdown as-is.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <label>
    <span>Message</span>
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
```

---

Source: https://documentation.formspark.io/examples/vue.md

# Vue

## vue-use-formspark

:::tip
Check out our official Vue composition API
functions: [vue-use-formspark](https://github.com/formspark/vue-use-formspark).
:::

```vue
<script setup>
import { ref } from "vue";
import { useFormspark } from "@formspark/vue-use-formspark";

const message = ref("");

const [submit, submitting] = useFormspark({
  formId: "your-form-id",
});

const onSubmit = async () => {
  await submit({ message: message.value });
  message.value = "";
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <textarea v-model="message" />
    <button type="submit" :disabled="submitting">Send</button>
  </form>
</template>
```

## Fetch

```vue
<script setup>
import { ref } from "vue";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

const message = ref("");

const submitForm = async () => {
  await fetch(FORMSPARK_ACTION_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      message: message.value,
    }),
  });
  alert("Form submitted");
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <label>
      <span>Message</span>
      <textarea name="message" v-model="message"></textarea>
    </label>
    <button type="submit">Submit</button>
  </form>
</template>
```

## petite-vue and Fetch

Featured
article: [Building an AJAX form with petite-vue](https://technotrampoline.com/articles/building-an-ajax-form-with-petite-vue/)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Formspark | Vue with petite-vue and Fetch</title>
    <script src="https://unpkg.com/petite-vue" defer init></script>
  </head>
  <body>
    <form v-scope="ContactForm()" @submit.prevent="submit">
      <label>
        <span>Message</span>
        <textarea name="message" v-model="data.message"></textarea>
      </label>
      <button type="submit" :disabled="loading">{{ buttonText }}</button>
    </form>

    <script>
      const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

      function ContactForm() {
        return {
          data: {
            message: "",
          },
          buttonText: "Submit",
          loading: false,
          submit() {
            this.buttonText = "Submitting...";
            this.loading = true;
            fetch(FORMSPARK_ACTION_URL, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
              },
              body: JSON.stringify(this.data),
            })
              .then(() => {
                alert("Form submitted");
              })
              .catch(() => {
                alert("Something went wrong");
              })
              .finally(() => {
                this.data.message = "";
                this.buttonText = "Submit";
                this.loading = false;
              });
          },
        };
      }
    </script>
  </body>
</html>
```

---

Source: https://documentation.formspark.io/examples/webflow.md

# Webflow

1. Copy your form's action URL.
2. Paste the action URL into Webflow's `action` field in the form element’s settings in the Designer.
3. Copy-paste one of the code blocks below into `Project Settings > Custom Code > Footer Code`.

![Webflow action](https://documentation.formspark.io/webflow-action.jpeg)

```html
<!-- Project Settings > Custom Code > Footer Code -->

<script src="https://unpkg.com/@formspark/formson"></script>

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");
      var data = Formson.toJSON(new FormData(e.target));
      $.ajax({
        url: action,
        method: "POST",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        success: function () {
          var parent = $(form.parent());
          parent.children("form").css("display", "none");
          parent.children(".w-form-done").css("display", "block");
        },
        error: function () {
          var parent = $(form.parent());
          parent.find(".w-form-fail").css("display", "block");
        },
      });
    });
  });
</script>
```

## Redirect after submission

Replaces the first code block on this page: it redirects instead of showing Webflow's success and
error states.

```html
<!-- Project Settings > Custom Code > Footer Code -->

<script src="https://unpkg.com/@formspark/formson"></script>

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");
      var data = Formson.toJSON(new FormData(e.target));
      $.ajax({
        url: action,
        method: "POST",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        success: function () {
          window.location.href = "https://your-website.com/thanks"; // Replace with your success URL
        },
        error: function () {
          window.location.href = "https://your-website.com/error"; // Replace with your error URL
        },
      });
    });
  });
</script>
```

## Botpoison spam protection

Replaces the first code block on this page. Use this one on its own when the form has Botpoison
enabled.

```html
<!-- Project Settings > Custom Code > Footer Code -->

<script src="https://unpkg.com/@formspark/formson"></script>
<script src="https://unpkg.com/@botpoison/browser" async></script>

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");
      var botpoison = new Botpoison({
        publicKey: "your-public-key",
      });
      botpoison
        .challenge()
        .then(function (result) {
          var data = Formson.toJSON(new FormData(e.target));
          data["_botpoison"] = result.solution;
          $.ajax({
            url: action,
            method: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            success: function () {
              var parent = $(form.parent());
              parent.children("form").css("display", "none");
              parent.children(".w-form-done").css("display", "block");
            },
            error: function () {
              var parent = $(form.parent());
              parent.find(".w-form-fail").css("display", "block");
            },
          });
        })
        .catch(function () {
          var parent = $(form.parent());
          parent.find(".w-form-fail").css("display", "block");
        });
    });
  });
</script>
```

## Turnstile spam protection

Replaces the first code block on this page. Use this one on its own when the form has Turnstile
enabled.

1. First, add a Turnstile widget element to your form:

```html
<div class="cf-turnstile" data-sitekey="your-site-key"></div>
```

2. Then add this code to `Project Settings > Custom Code > Footer Code`:

```html
<!-- Project Settings > Custom Code > Footer Code -->

<script src="https://unpkg.com/@formspark/formson"></script>
<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  defer
></script>

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");

      // Get Turnstile response token
      var turnstileResponse = turnstile.getResponse();
      if (!turnstileResponse) {
        // Show error if Turnstile not completed
        var parent = $(form.parent());
        parent.find(".w-form-fail").css("display", "block");
        return;
      }

      var data = Formson.toJSON(new FormData(e.target));
      data["cf-turnstile-response"] = turnstileResponse;

      $.ajax({
        url: action,
        method: "POST",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        success: function () {
          var parent = $(form.parent());
          parent.children("form").css("display", "none");
          parent.children(".w-form-done").css("display", "block");
        },
        error: function () {
          var parent = $(form.parent());
          parent.find(".w-form-fail").css("display", "block");
          // Reset Turnstile on error
          turnstile.reset();
        },
      });
    });
  });
</script>
```

## Tips and tricks

:::tip

- [How to submit Webflow forms to your own backend](https://technotrampoline.com/articles/how-to-submit-webflow-forms-to-your-own-backend/)
- [How to disable the submit button while a form is submitting in Webflow](https://technotrampoline.com/articles/how-to-disable-the-submit-button-while-a-form-is-submitting-in-webflow/)
- [How to pre-fill Webflow form input fields at page load](https://technotrampoline.com/articles/how-to-pre-fill-webflow-form-input-fields-at-page-load/)
- [How to clear all fields of a Webflow form](https://technotrampoline.com/articles/how-to-clear-all-fields-of-a-webflow-form/)
- [How to automatically disable a Webflow button or input](https://technotrampoline.com/articles/how-to-automatically-disable-a-webflow-button-or-input/)
  :::

---

Source: https://documentation.formspark.io/examples/wordpress.md

# WordPress

WordPress integration is possible
via [Custom HTML blocks](https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/).

1. Create a Custom HTML block.

![WordPress Custom HTML block](https://documentation.formspark.io/wordpress-custom-html-block.png)

2. Add the HTML of your form.

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>
```

---

Source: https://documentation.formspark.io/integration/index.md

# Integrations

An integration sends every submission your form receives somewhere else, as
well as to your Formspark dashboard. Connect as many as you like on the same
form: they all run on each submission and none of them replaces your
submissions list.

Connect them from the **Integrations** section of your form's settings in the
[dashboard](https://dashboard.formspark.io).

## Collect submissions in a document

Formspark creates the document for you and keeps appending to it.

- [Google Sheets](https://documentation.formspark.io/integration/google-sheets.md): a spreadsheet, one row per submission
- [Notion](https://documentation.formspark.io/integration/notion.md): a database, one page per submission

Both need an [upgraded workspace](https://documentation.formspark.io/troubleshooting/limits-and-plans.md). If the
workspace goes back to the free plan, they pause and keep their settings, and
they resume once the workspace is upgraded again.

## Get notified in chat

- [Slack](https://documentation.formspark.io/integration/slack.md): post every submission to a channel

## Send submissions to your own code

- [Webhooks](https://documentation.formspark.io/integration/webhooks.md): an HTTP request to a URL of your choice
- [Zapier](https://documentation.formspark.io/integration/zapier.md): thousands of apps, no code needed
- [Make](https://documentation.formspark.io/integration/make.md): visual scenarios, no code needed

## Reach a tool Formspark does not connect to directly

Zapier and Make bridge submissions to anything they support, so a tool without
its own Formspark integration is usually still reachable.

- [Airtable](https://documentation.formspark.io/integration/airtable.md): a base, through Zapier or Make

## Enrich what you collect

- [UTM parameters](https://documentation.formspark.io/integration/utm-parameters.md): record the campaign a submitter came
  from

## Related

Email is not an integration: notifications to you and automatic replies to the
submitter are configured in the **Emails** section instead. See
[email notification settings](https://documentation.formspark.io/dashboard/email-notification-settings.md) and the
[autoresponder](https://documentation.formspark.io/dashboard/autoresponder.md).

---

Source: https://documentation.formspark.io/integration/airtable.md

# Airtable

Formspark does not connect to Airtable directly. The recommended path is to use Zapier or Make as a bridge.

## Via Zapier

1. Set up the Formspark [Zapier integration](https://documentation.formspark.io/integration/zapier.md).
2. In your Zap, select `New Submission` as the trigger.
3. Add `Airtable` as the action and choose `Create Record`.
4. Map your form fields to the matching Airtable columns.

Zapier transparently handles Airtable's API rate limit (5 requests per second), so this is the safest option for higher-volume forms.

## Via Make

1. Set up the Formspark [Make integration](https://documentation.formspark.io/integration/make.md).
2. In your scenario, select `Formspark` → `New Submission` as the trigger.
3. Add an `Airtable` → `Create a Record` module.
4. Map your form fields to the matching Airtable columns.

## Tips

- The names of your form's input fields should be easy to identify so you can confidently map them to Airtable columns.
- Test your form before going live to verify records are being created as expected.

---

Source: https://documentation.formspark.io/integration/google-sheets.md

# Google Sheets

Formspark can send every submission from your form straight into a Google Sheets spreadsheet, created automatically and kept up to date.

Google Sheets is available on [upgraded workspaces](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## Connecting

1. Open your form's settings and find the `Google Sheets` row under `Integrations`.
2. Click `Connect` and sign in with the Google account that should own the spreadsheet.
3. Approve the requested access. Formspark only requests permission to the spreadsheets it creates itself, not the rest of your Google Drive.
4. Formspark creates a new spreadsheet named after your form and starts sending submissions to it.

You do not pick an existing spreadsheet: Formspark always creates a new one. Once connected, open the row with `Configure` and click `Open spreadsheet` to find it.

## What gets sent

Each submission is appended as a new row. The header row starts with `Submitted at`, followed by one column per field name your form submits. If a later submission includes a field the sheet has not seen before, Formspark adds a new column for it; existing columns and rows are never reordered or rewritten.

## If a submission does not arrive

Submissions are never lost when Google Sheets is unreachable. Formspark retries every 5 minutes, in order, and the `Google Sheets` row shows `Retrying` until it catches up.

::: warning
After about a day of failures, for example because the spreadsheet was deleted or access was revoked, the row shows `Paused`, Formspark stops trying, and your workspace admins get an email. Open the row with `Configure` and use `Retry now` once the cause is fixed. Delivery resumes from the first submission that did not arrive. Reconnect instead if the spreadsheet itself is gone.
:::

## If your workspace goes back to the free plan

Formspark pauses sending submissions to the spreadsheet and keeps the connection as it is. Once the workspace is upgraded again, the submissions that arrived meanwhile are sent on their own.

## Disconnecting

Open the `Google Sheets` row with `Configure`, click `Disconnect`, and confirm with `Disconnect Google Sheets`. Disconnecting does not delete the spreadsheet. It stays in your Google Drive with whatever rows were already added; Formspark simply stops writing to it.

To send submissions to a different spreadsheet, disconnect and connect again. This creates a new spreadsheet, it does not reuse the old one. A new connection receives only submissions that arrive after it is made.

---

Source: https://documentation.formspark.io/integration/make.md

# Make

Connecting Formspark and Make takes only seconds.

1. Add the Formspark integration to your Make account
   via [this link](https://www.make.com/en/hq/app-invitation/e24b1114d4ac44bb0dbdb918a85b286a).
2. Open Make.
3. Inside the scenario editor, create a new module and select `Formspark`.
4. Select the `New Submission` trigger.
5. Select or create a webhook.
6. Copy the webhook URL (example: `https://hook.region.make.com/0123456789`).
7. Open your form's settings in Formspark and find the `Webhook` row under `Integrations`.
8. Click `Connect`, paste the webhook URL into the `URL` field, and click `Save`.
9. Send a test submission to your form.

[Check this page](https://documentation.formspark.io/integration/webhooks.md) to learn more about webhooks.

![Formspark with Make](https://documentation.formspark.io/formspark-make-example.png)

---

Source: https://documentation.formspark.io/integration/notion.md

# Notion

Formspark can send every submission from your form straight into a Notion database, created automatically inside a page you share during setup.

Notion is available on [upgraded workspaces](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## Connecting

1. Open your form's settings and find the `Notion` row under `Integrations`.
2. Click `Connect` and sign in to the Notion workspace you want to use.
3. On Notion's own consent screen, select the page you want to share with Formspark, then confirm access.
4. Formspark creates a new database named after your form, as a child of the page you shared, and starts sending submissions to it.

You do not pick an existing database: Formspark always creates a new one, as a child of whichever page you shared. Once connected, open the row with `Configure` and click `Open database` to find it.

Notion's consent screen lets you share more than one page. If you do, Formspark uses the one you edited most recently as the parent, so share only the page you want the database to live in.

## What gets sent

Each submission becomes a new entry in the database, with one property per field name your form submits. A field your form has not sent before is added to the database the first time it appears, so the database keeps up as a form changes.

Alongside your own fields, every database carries two properties Formspark fills in: `Submission`, the entry's title, and `Submitted at`, the submission time as a date you can sort and filter on.

Formspark adds each new property as text, so Notion never tries to interpret a submitted value. Very long values are truncated.

You can change a property's type in Notion afterwards. Formspark then writes each value in the shape that type expects: a number, a checkbox, a date, a select or multi-select option, a URL, an email address or a phone number. A value that is not a valid number or date leaves a number or date property empty, and a checkbox is ticked only by values such as `true`, `on` or `yes`. Properties Notion computes or links, such as formulas, rollups, people, relations and files, are left alone.

## If no page is shared

::: warning
Sharing a page happens on Notion's own consent screen, not in a Formspark setting: Formspark cannot create a database anywhere you have not explicitly shared with it. If you get through the consent screen without selecting a page, the connection fails. Reconnect from your form's settings and make sure you select a page to share before confirming.
:::

## If a submission does not arrive

Submissions are never lost when Notion is unreachable. Formspark retries every 5 minutes, in order, and the `Notion` row shows `Retrying` until it catches up.

After about a day of failures, or if the Notion workspace has revoked access, the row shows `Paused`, Formspark stops trying, and your workspace admins get an email. Open the row with `Configure` and use `Retry now` once the cause is fixed. Delivery resumes from the first submission that did not arrive. Reconnect instead if access was revoked.

## If your workspace goes back to the free plan

Formspark pauses sending submissions to the database and keeps the connection as it is. Once the workspace is upgraded again, the submissions that arrived meanwhile are sent on their own.

## Disconnecting

Open the `Notion` row with `Configure`, click `Disconnect`, and confirm with `Disconnect Notion`. Disconnecting does not delete the database or the page it lives in. They stay in your Notion workspace with whatever entries were already added; Formspark simply stops writing to them.

To send submissions to a different page, disconnect and connect again, and share a different page this time. A new connection receives only submissions that arrive after it is made.

---

Source: https://documentation.formspark.io/integration/slack.md

# Slack

Connecting Formspark and Slack takes only seconds and is the easiest way to post form submissions from a website to
Slack.

1. Open your form's settings, find the `Slack` row under `Integrations`, and click `Connect`.
2. Allow Formspark to access your Slack workspace.

   ![Connect with Slack](https://documentation.formspark.io/allow-slack.png)

3. Back in your form's settings, open the `Slack` row with `Configure` and enter the channel name in the `Channel` field, for example `marketing-notifications`. A leading `#` is fine.
4. Click `Save`.

To stop posting submissions, open the `Slack` row with `Configure`, click `Disconnect`, and confirm with `Disconnect Slack`.

## Private channels

Formspark can post to any public channel without being added to it. Connecting Formspark to a private channel requires 2 extra steps.

1. Click the `Connect an app` link found in your private channel.

   ![Connect slack app to private channel](https://documentation.formspark.io/connect-slack-app-to-private-channel.png)

2. Search for `Formspark` and press add.

   ![Add Slack app to private channel](https://documentation.formspark.io/add-slack-app-to-private-channel.png)

---

Source: https://documentation.formspark.io/integration/utm-parameters.md

# UTM parameters

Marketers use UTM parameters to track the effectiveness of online campaigns across traffic sources and publishing media.
The parameters identify the campaign that refers traffic to a specific website and can be parsed by analytics tools and used to populate reports.

Copying these parameters and injecting them into your form submissions manually is tedious and error-prone, so we built Formtrack to automate this process.

## Installation & usage

Add the Formtrack script.

```html
<script src="https://unpkg.com/@formspark/formtrack" async></script>
```

Add a `data-formtrack` attribute to your form element.

```html
<form
  action="https://submit-form.com/your-form-id"
  method="POST"
  data-formtrack
>
  <input type="text" name="message" />
  <button type="submit">Send</button>
</form>
```

Formtrack will now automatically inject the supported parameters into your HTML form submissions.

## Supported parameters

| Parameter    | Purpose                                                                                                                                                                | Example                                      |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| ref          | Identifies which site sent the traffic, not an official parameter.                                                                                                     | ref=producthunt                              |
| referrer     | Identifies which site sent the traffic, not an official parameter.                                                                                                     | referrer=producthunt                         |
| utm_source   | Identifies which site sent the traffic, and is a required parameter.                                                                                                   | utm_source=google                            |
| utm_medium   | Identifies what type of link was used, such as cost per click or email.                                                                                                | utm_medium=cpc                               |
| utm_campaign | Identifies a specific product promotion or strategic campaign.                                                                                                         | utm_campaign=spring_sale                     |
| utm_term     | Identifies search terms.                                                                                                                                               | utm_term=running+shoes                       |
| utm_content  | Identifies what specifically was clicked to bring the user to the site, such as a banner ad or a text link. It is often used for A/B testing and content-targeted ads. | utm_content=logolink or utm_content=textlink |

## Custom parameters

You have the flexibility to define a list of custom parameters.

Include a `data-formtrack-params` attribute within your form element, and populate it with a comma-separated list of the desired parameters.

```html
<form
  action="https://submit-form.com/your-form-id"
  method="POST"
  data-formtrack
  data-formtrack-params="custom_param_1,custom_param_2"
>
  ...
</form>
```

---

Source: https://documentation.formspark.io/integration/webhooks.md

# Webhooks

Formspark can send webhook events that notify your application any time you receive a form submission.

## Setup

1. Define an endpoint on your server for receiving events. This route should listen for `POST` requests and answer with a `2xx` status code.
2. Open your form's settings and find the `Webhook` row under `Integrations`.
3. Click `Connect`, paste the endpoint into the `URL` field, and click `Save`.
4. Submit to your form and verify your endpoint is receiving submissions successfully.

## Payload format

Given the following form:

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="text" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>
```

The body of the POST request will look as follows:

```json
{
  "email": "kramer@nineties.sitcom",
  "message": "Who turns down a Junior Mint?"
}
```

The request carries a `Content-Type: application/json` header. The body holds the fields your form submitted. Control fields, the ones whose name starts with an underscore such as `_redirect` or `_email.subject`, are left out, and so are spam protection tokens.

Formspark only calls your webhook for submissions it accepts. A submission rejected as spam, or one that arrives while your workspace is out of submissions, does not trigger it.

## Delivery

A delivery fails when your endpoint:

- answers with a status code outside the `2xx` range,
- does not answer within 5 seconds, or
- cannot be reached.

Formspark does not follow redirects, so a `3xx` answer counts as a failure. Use the final URL of your endpoint.

The URL must be a public `http` or `https` address. Your webhook receives only submissions that arrive after its URL is saved.

## Retries

A failed delivery is retried every 5 minutes, in order, until it gets through. Submissions that arrive meanwhile wait behind it, so your endpoint always receives them in the order they were sent.

A retry can deliver a submission your endpoint already handled. Every request carries two headers to help with that:

- `Formspark-Submission-Id`: the same for every attempt at one submission. Skip one you have already seen.
- `Formspark-Timestamp`: when the request was sent, in Unix seconds.

A submission rescued from `Spam` is not delivered.

## Delivery status

The `Webhook` row in your form's settings shows how delivery is going:

- `Never called`: Formspark has not called the webhook yet.
- `Active`: the last delivery succeeded.
- `Retrying`: a delivery failed and is being retried. The row shows the reason next to the URL.
- `Paused`: deliveries failed for about a day, so Formspark stopped trying and emailed your workspace admins. Fix your endpoint, then use `Retry now`. Delivery resumes from the first submission that did not arrive.

## Testing and troubleshooting

- Your endpoint should accept POST requests.
- Your endpoint should be able to parse a JSON object.
- Your endpoint's URL should not exceed 512 characters.

To preview what the webhook requests look like before pointing them at your own server, use a public inspection service such as [httphq.com](https://httphq.com). Paste the temporary URL it gives you into the `URL` field and submit your form once.

## Signature verification

Turn on `Sign deliveries` in the `Webhook` row to prove each request comes from Formspark. Copy the secret it shows into your endpoint.

Every request then carries a `Formspark-Signature` header: `v1=` followed by a hex HMAC-SHA256 of the `Formspark-Timestamp` header, a dot, and the raw request body, keyed with your secret. Compute the same value and compare. Reject a request whose timestamp is more than a few minutes old.

```js
import crypto from "node:crypto";

const verify = (secret, timestamp, rawBody, signature) => {
  const expected =
    "v1=" +
    crypto
      .createHmac("sha256", secret)
      .update(`${timestamp}.${rawBody}`)
      .digest("hex");
  return (
    signature.length === expected.length &&
    crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
  );
};
```

```python
import hashlib, hmac

def verify(secret, timestamp, raw_body, signature):
    digest = hmac.new(secret.encode(), f"{timestamp}.{raw_body}".encode(), hashlib.sha256)
    return hmac.compare_digest(signature, "v1=" + digest.hexdigest())
```

Use the body exactly as received, before any JSON parsing.

`Rotate secret` replaces the secret at once. Deliveries fail until your endpoint uses the new one, then the queued ones arrive.

## Removal

To stop using webhooks, clear the `URL` field in the `Webhook` row and click `Save`.

---

Source: https://documentation.formspark.io/integration/zapier.md

# Zapier

Connecting Formspark and Zapier takes only seconds.

1. Open your form's settings, find the `Zapier` row under `Integrations`, click `Connect`, and copy the key.
2. Create a Formspark connection in Zapier via [this link](https://zapier.com/apps/formspark/integrations).
3. Paste your copied key when prompted.

![Formspark with Zapier](https://documentation.formspark.io/formspark-zapier-example.png)

## How often Zapier checks for submissions

Zapier does not wait for Formspark to push a submission. It asks Formspark for new submissions on a schedule of its own, and how often it asks depends on your Zapier plan.

On [upgraded workspaces](https://documentation.formspark.io/troubleshooting/limits-and-plans.md), Formspark answers every one of those checks, so submissions reach your Zap as quickly as Zapier asks for them.

On free workspaces, Formspark answers at most one check every 15 minutes. Checks that arrive sooner are told to try again shortly, and Zapier reschedules them on its own. A submission can therefore take up to 15 minutes to reach your Zap.

## Waiting runs in Zap history

When Formspark asks Zapier to try again, the run appears in [Zap history](https://help.zapier.com/hc/en-us/articles/20505304170637-Review-Zap-run-statuses) as waiting or scheduled rather than as an error. Nothing has gone wrong and there is nothing to fix: Zapier picks the run back up once the wait is over.

::: tip
No submission is lost while a check is waiting. Submissions that arrive during the wait are still there for the next check, so the only difference on a free workspace is how soon your Zap sees them, never whether it sees them.
:::

## If your key stops working

Regenerating a form's Zapier key with `Regenerate key` takes effect immediately, and the old key stops being accepted. If your Zap starts failing to connect after you regenerate, paste the new key into the Formspark connection in Zapier.

---

Source: https://documentation.formspark.io/api/index.md

# API

The Formspark API lets you create forms, change their settings, and read their submissions from your own code.

The API is available on upgraded workspaces. Listing your workspaces and reading your own token stay open on any plan, so a client can always discover which workspace qualifies. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## Base URL

```
https://api.formspark.io/public/v1
```

## Authentication

Create an API token in your [dashboard](https://dashboard.formspark.io/account/api-tokens) and send it as a bearer token:

```sh
curl https://api.formspark.io/public/v1/me \
  -H "Authorization: Bearer fsk_live_..."
```

A token reaches every workspace you are a member of, limited to its [scopes](https://documentation.formspark.io/api/api-tokens.md).

`GET /me` describes the token you are using:

```json
{
  "name": "CI",
  "scopes": ["forms:read", "submissions:read"],
  "expiresAt": "2027-01-14T00:00:00.000Z",
  "lastUsedAt": "2026-07-29T09:12:44.000Z",
  "createdAt": "2026-07-01T08:30:00.000Z"
}
```

## OpenAPI

The API is described by an OpenAPI 3.1 document, which you can use to generate a client:

```
https://api.formspark.io/public/v1/openapi.json
```

## Using the API from an AI agent

An agent such as Claude or Cursor can use the API the same way your code does. Give it two things:

1. An API token with only the [scopes](https://documentation.formspark.io/api/api-tokens.md) it needs, for example `forms:read` and `submissions:read` to answer questions about your submissions.
2. The OpenAPI document above, which describes every endpoint it can call.

For example, to list a workspace's forms and read one form's latest submissions:

```sh
curl "https://api.formspark.io/public/v1/forms?workspaceId=<workspace-id>" \
  -H "Authorization: Bearer fsk_live_..."

curl "https://api.formspark.io/public/v1/forms/<form-id>/submissions" \
  -H "Authorization: Bearer fsk_live_..."
```

Treat the token like a password. Revoke it from the dashboard once the agent no longer needs it.

## Versioning

The version is in the path. Within `v1`, new optional fields and new endpoints can appear at any time, so ignore fields you do not recognize. Changes that would break a working integration ship as a new version.

## Retries

`GET` requests are safe to retry.

Retry a write only after checking whether it landed: a repeated `POST` creates a second form or workspace.

## Rate limits

Requests are limited per IP address. Sustained bursts from one address are blocked for a period. If you are planning something high-volume, [get in touch](https://dashboard.formspark.io/support/contact) first.

---

Source: https://documentation.formspark.io/api/api-tokens.md

# API tokens

Create a token in the dashboard under [API tokens](https://dashboard.formspark.io/account/api-tokens).

The token is shown once, when you create it. Store it somewhere safe. If you lose it, revoke it and create another.

## Scopes

A token belongs to you and reaches every workspace you are a member of. Its scopes decide what it may do there. Give a token the least it needs.

A token never does more than your [role](https://documentation.formspark.io/dashboard/inviting-team-members.md#roles) allows. In a workspace where you are a viewer, it can read but not change anything.

| Scope               | Allows                                 |
| ------------------- | -------------------------------------- |
| `workspaces:read`   | List workspaces and read their details |
| `workspaces:write`  | Create and rename workspaces           |
| `forms:read`        | List forms and read their settings     |
| `forms:write`       | Create, update and delete forms        |
| `submissions:read`  | Read submissions                       |
| `submissions:write` | Delete submissions                     |

`GET /me` works with any token, so a token can always describe itself.

Billing, team management, workspace deletion and token management stay in the dashboard.

## Expiry

Tokens expire after 90 days by default. You can also choose 30 days, 1 year, or `Never` for something unattended, which you then rotate yourself.

## Revocation

Revoking takes effect immediately.

## Using a token

Read it from the environment:

```sh
export FORMSPARK_TOKEN="fsk_live_..."
curl https://api.formspark.io/public/v1/me \
  -H "Authorization: Bearer $FORMSPARK_TOKEN"
```

Keep it out of command-line arguments, which are visible to other processes and stored in your shell history.

---

Source: https://documentation.formspark.io/api/reference.md

# Reference

Base URL `https://api.formspark.io/public/v1`. Every request needs an `Authorization: Bearer` header. The machine-readable description is at [`/openapi.json`](https://api.formspark.io/public/v1/openapi.json).

Responses contain a form's settings and its notification emails. Captcha secret keys, the Slack token and the Zapier key are never returned; they stay in the dashboard.

## Token

### `GET /me`

Describes the current token. Works with any token.

## Workspaces

### `GET /workspaces`

Every workspace you are a member of, [cursor paginated](https://documentation.formspark.io/api/pagination.md). Scope: `workspaces:read`.

Query parameters: `limit` (1 to 100, default 25), `startingAfter`.

### `POST /workspaces`

Scope: `workspaces:write`.

```sh
curl -X POST https://api.formspark.io/public/v1/workspaces \
  -H "Authorization: Bearer $FORMSPARK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"Acme"}'
```

### `PATCH /workspaces/{workspaceId}`

Renames a workspace. Scope: `workspaces:write`.

## Forms

### `GET /forms?workspaceId=...`

Forms in a workspace, [cursor paginated](https://documentation.formspark.io/api/pagination.md). Scope: `forms:read`.

Query parameters: `limit` (1 to 100, default 25), `startingAfter`.

### `GET /forms/{formId}`

Scope: `forms:read`.

### `POST /forms`

Creates a form, applying any settings sent with it. `workspaceId` and `name` are required. Scope: `forms:write`.

```sh
curl -X POST https://api.formspark.io/public/v1/forms \
  -H "Authorization: Bearer $FORMSPARK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "workspaceId": "your-workspace-id",
    "name": "Contact",
    "notificationEmails": ["you@example.com"]
  }'
```

The response contains the form's `id`, which is what your HTML form posts to:

```html
<form action="https://submit-form.com/your-form-id" method="POST">
  <input type="email" name="email" />
  <button type="submit">Send</button>
</form>
```

### `PATCH /forms/{formId}`

Applies the fields present in the body. Fields you leave out keep their current value. Scope: `forms:write`.

```sh
curl -X PATCH https://api.formspark.io/public/v1/forms/your-form-id \
  -H "Authorization: Bearer $FORMSPARK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"Contact us"}'
```

Send `null` to clear a field. Send `notificationEmails` as the complete list you want, since it replaces the existing one.

### `DELETE /forms/{formId}`

Deletes the form and its submissions. Scope: `forms:write`.

### Form settings

`POST /forms` and `PATCH /forms/{formId}` accept a form's settings, with a few restrictions. Anything the API rejects comes back as a [`validation_error`](https://documentation.formspark.io/api/errors.md#validation-error).

Beyond the three settings described below, a form carries these fields. The strings accept `null` to clear them, except `name`, which a form always has. The booleans take `true` or `false`.

| Field                 | Type                    |
| --------------------- | ----------------------- |
| `name`                | string, 128 characters  |
| `description`         | string, 512 characters  |
| `technology`          | string, 128 characters  |
| `slackChannel`        | string, 128 characters  |
| `customHoneypot`      | string, 128 characters  |
| `customSpamWords`     | string, 2560 characters |
| `emailThreading`      | boolean                 |
| `automaticSpamFilter` | boolean                 |

`customHoneypot` and `customSpamWords` are the API side of the settings described under [spam protection](https://documentation.formspark.io/setup/spam-protection.md#custom-spam-words).

`automaticSpamFilter` is on unless you switch it off. Switched off, the form stores every submission the filter would have held back, and each one counts against the workspace's quota. See [automatic spam filtering](https://documentation.formspark.io/setup/spam-protection.md#automatic-spam-filtering).

#### `spamProtection`

Accepts one of four providers, or `null` to require no challenge at all:

| Value                 | Provider     |
| --------------------- | ------------ |
| `BOTPOISON`           | Botpoison    |
| `GOOGLE_RECAPTCHA_V2` | reCAPTCHA v2 |
| `HCAPTCHA`            | hCaptcha     |
| `TURNSTILE`           | Turnstile    |

No other value is accepted. The automatic spam filtering is switched separately, with `automaticSpamFilter`.

The provider's secret key is not part of the API. Store it in the dashboard first, then switch the form over: selecting a provider whose secret key is not already stored is rejected. See [spam protection](https://documentation.formspark.io/setup/spam-protection.md).

#### `webhookUrl`

Must be an `http` or `https` URL of at most 512 characters, and must resolve to a public address when Formspark calls it, so an endpoint on `localhost` or a private network is rejected. See [webhooks](https://documentation.formspark.io/integration/webhooks.md).

#### `notificationEmails`

A form accepts at most 100 notification emails, each at most 128 characters. Since the list you send replaces the existing one, read the current list back first if you are adding to it rather than replacing it.

## Templates

A form carries two email templates: the `notification` template lays out the email
your recipients get, and the `autoresponder` template is the reply sent to whoever
submitted the form. Both are addressed by the form and the kind.

A form without a template uses the default layout, and reading one returns
[`not_found`](https://documentation.formspark.io/api/errors.md#not-found).

### `GET /forms/{formId}/templates/{kind}`

Scope: `forms:read`.

```json
{
  "kind": "autoresponder",
  "mode": "code",
  "code": "<p>Thanks {{data.firstName}}</p>",
  "subject": "Thanks for writing, {{data.firstName}}",
  "updatedAt": "2026-09-17T10:04:00.000Z",
  "paused": false
}
```

### `PUT /forms/{formId}/templates/{kind}`

Writes the body, the [subject line](#subject-line) or both, creating the template
if the form has none. A field you leave out keeps its current value, and creating a
template needs `code`. Scope: `forms:write`.

```sh
curl -X PUT https://api.formspark.io/public/v1/forms/your-form-id/templates/autoresponder \
  -H "Authorization: Bearer $FORMSPARK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code":"<p style=\"font-size:16px\">Thanks {{data.firstName}}</p>"}'
```

### `DELETE /forms/{formId}/templates/{kind}`

Scope: `forms:write`. Deleting the `notification` template sends notifications in the default layout again. Deleting the `autoresponder` template turns replies off.

### `POST /forms/{formId}/templates/{kind}/preview`

Renders the template the way the delivered email is rendered, and sends nothing.
Scope: `forms:read`.

```sh
curl -X POST https://api.formspark.io/public/v1/forms/your-form-id/templates/autoresponder/preview \
  -H "Authorization: Bearer $FORMSPARK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"data":{"firstName":"Ada","email":"ada@example.com"}}'
```

The response holds the `html`, the `text` alternative and the rendered `subject`,
which is `null` when the template has none. Send `data` to choose
what it renders against. Leave it out and the form's own example data is used.

### Writing a template

`code` is HTML with [Handlebars](https://handlebarsjs.com/) placeholders. The
submission is reachable under `data`, so a field named `firstName` is
<code v-pre>{{data.firstName}}</code>. It accepts at most 262144 characters.

Style it with inline `style` attributes. The API sends no separate stylesheet, and
mail clients treat a `<style>` block inconsistently.

A template that did not compile comes back as
[`template_invalid`](https://documentation.formspark.io/api/errors.md#template-invalid), with an `errors` array naming
what is wrong. The check runs before anything is stored, so a form that already
had a working template keeps it.

### Subject line

`subject` sets the email's subject line, with the same placeholders as the body:
<code v-pre>"Thanks for writing, {{data.firstName}}"</code>. It accepts at most 998
characters. Send `null` or an empty string to clear it.

A template without a subject uses the default one. So does a subject that renders
empty, for example when every field it names is missing from the submission. A
subject longer than 200 characters once rendered is cut short.

On the `notification` template, an [`_email.subject`](https://documentation.formspark.io/customization/notification-email.md#subject)
field in the submission takes precedence over the template's subject. On the
`autoresponder` template, the subject replaces the default in every
[language](https://documentation.formspark.io/customization/language.md).

Send `subject` without `code` to change only the subject. The body stays as it is,
so a template built in the visual editor keeps its layout.

### Templates built in the visual editor

`mode` tells you how a template is laid out. `visual` means someone built it in the
template editor, and `code` means it was written as code.

::: warning
Writing code to a `visual` template replaces its layout, and the template editor
cannot rebuild it afterwards. Read the template first if you are not sure which one
you are pointing at.
:::

### Switching the autoresponder on

The autoresponder has no separate switch. Writing an `autoresponder` template turns
it on, and deleting that template turns it off. It is available on
[upgraded workspaces](https://documentation.formspark.io/troubleshooting/limits-and-plans.md), so writing one for a free
workspace returns [`upgrade_required`](https://documentation.formspark.io/api/errors.md#upgrade-required).

### Paused templates

`paused` reports whether our content check has stopped the template sending. Both
kinds are checked.

::: warning
A paused `autoresponder` template sends no replies, and a paused `notification`
template sends no notifications at all. Submissions are still stored. The write that
paused it still answers `200`, so check `paused` after every write.
:::

Writing the template checks the new version before the response returns. If it stays
paused, [get in touch](https://dashboard.formspark.io/support/contact).

## Submissions

### `GET /forms/{formId}/submissions`

Newest first, [cursor paginated](https://documentation.formspark.io/api/pagination.md). Spam and deleted submissions are not included. Scope: `submissions:read`.

Query parameters: `limit` (1 to 100, default 25), `startingAfter`, `search` (at most 256 characters).

```sh
curl "https://api.formspark.io/public/v1/forms/your-form-id/submissions?limit=50" \
  -H "Authorization: Bearer $FORMSPARK_TOKEN"
```

### `GET /workspaces/{workspaceId}/submissions`

The same, across every form in the workspace. Scope: `submissions:read`.

### `DELETE /submissions/{submissionId}`

Scope: `submissions:write`.

Submissions quarantined as spam expire on their own and cannot be deleted early. Deleting one returns a [`conflict`](https://documentation.formspark.io/api/errors.md#conflict).

---

Source: https://documentation.formspark.io/api/pagination.md

# Pagination

List endpoints return a page and a cursor:

```json
{
  "data": [
    { "id": "sub_1", "formId": "your-form-id", "data": {}, "createdAt": "..." }
  ],
  "hasMore": true,
  "nextCursor": "MjAyNi0wNy0yOVQwOTo..."
}
```

Branch on `hasMore`. While it is `true`, pass `nextCursor` back as `startingAfter`:

```sh
curl "https://api.formspark.io/public/v1/forms/your-form-id/submissions?limit=50&startingAfter=$CURSOR" \
  -H "Authorization: Bearer $FORMSPARK_TOKEN"
```

`limit` accepts 1 to 100 and defaults to 25.

## Cursors are opaque

A cursor is a string to hand back untouched. Do not build one, decode one, or derive one from a submission's `id` or `createdAt`: what a cursor encodes is an implementation detail and it will change. A cursor this API did not issue, or one that has been modified, comes back as a `400` [`validation_error`](https://documentation.formspark.io/api/errors.md#validation-error).

## Walking every submission

```sh
CURSOR=""
while : ; do
  RESPONSE=$(curl -s \
    "https://api.formspark.io/public/v1/forms/your-form-id/submissions?limit=100${CURSOR:+&startingAfter=$CURSOR}" \
    -H "Authorization: Bearer $FORMSPARK_TOKEN")
  echo "$RESPONSE" | jq -c '.data[]'
  [ "$(echo "$RESPONSE" | jq -r '.hasMore')" = "true" ] || break
  CURSOR=$(echo "$RESPONSE" | jq -r '.nextCursor')
done
```

Workspaces and forms use the same envelope, so branching on `hasMore` works everywhere.

---

Source: https://documentation.formspark.io/api/errors.md

# Errors

Failures are returned as [RFC 9457](https://www.rfc-editor.org/rfc/rfc9457) problem details, with the content type `application/problem+json`:

```json
{
  "type": "https://documentation.formspark.io/api/errors.html#insufficient-scope",
  "title": "Insufficient scope",
  "status": 403,
  "detail": "This token has forms:read; forms:write is required.",
  "code": "insufficient_scope",
  "requiredScope": "forms:write"
}
```

Branch on `code`. It is stable, while `detail` is written for a human reading a log and its wording can change. Some errors add fields of their own, such as `requiredScope` above.

`type` points at the section for that code on this page: the code with its underscores replaced by hyphens, as an anchor.

## Invalid token

`401` · `invalid_token`

The `Authorization` header is missing or malformed, or the token is unknown, revoked or expired.

## Insufficient scope

`403` · `insufficient_scope`

The token is valid but lacks the scope this operation needs. `requiredScope` names it. Create a token with that scope, or check `GET /me` for what the current one holds.

## Not found

`404` · `not_found`

The resource does not exist, or it belongs to another account. A change your [role](https://documentation.formspark.io/dashboard/inviting-team-members.md#roles) does not allow, such as a viewer updating a form, is answered the same way.

## Validation error

`400` · `validation_error`

The request body or query string is invalid. An `errors` array names the fields:

```json
{
  "code": "validation_error",
  "detail": "The request is invalid.",
  "errors": ["name: Name must be 128 characters or fewer"]
}
```

Also returned for a `startingAfter` cursor this API did not issue.

## Template invalid

`400` · `template_invalid`

An [email template](https://documentation.formspark.io/api/reference.md#templates) you sent could not be compiled. An
`errors` array names what is wrong, one entry per problem:

```json
{
  "code": "template_invalid",
  "detail": "The template could not be compiled.",
  "errors": ["syntax-error: {{#if}} was never closed"]
}
```

Nothing was stored, so a form that already had a template still has it.

## Quota exceeded

`403` · `quota_exceeded`

A limit stopped the request, such as the number of forms a workspace holds or the recipients a form notifies. Free workspaces hold 10 forms, paid ones hold 100.

## Upgrade required

`403` · `upgrade_required`

The API is available on upgraded workspaces, and the request touched a free one. The `workspaceId` extension names it. Upgrade that workspace, or point the request at an upgraded one. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## Conflict

`409` · `conflict`

The resource cannot be changed that way. Deleting a submission that was quarantined as spam returns this: quarantined submissions expire on their own and cannot be deleted early.

## Upstream unavailable

`503` · `upstream_unavailable`

A service this operation depends on could not be reached. Only the
[template endpoints](https://documentation.formspark.io/api/reference.md#templates) return this, because only they call one.
Nothing was changed, and the request is safe to retry after a pause.

## Internal error

`500` · `internal_error`

Something broke on our side. These are reported to us automatically. If one is reproducible, [let us know](https://dashboard.formspark.io/support/contact).

---

Source: https://documentation.formspark.io/troubleshooting/common-issues.md

# Common issues

## My submissions are not showing up

- Ensure all input, select and textarea elements inside your form have a `name` attribute, otherwise you will not
  receive the data filled in these fields.
- Keep in mind that empty submissions are ignored by Formspark.
- Are you using some form of spam protection? Temporarily disable the protection, if you are able to submit without it
  then you probably need to double-check your integration.
  Step-by-step instructions can be found [here](https://documentation.formspark.io/setup/spam-protection.md).
- Check the `Spam` view of your form's submissions. A submission rejected by your spam protection or the
  automatic filter lands there instead of your inbox. See [rejected submissions](https://documentation.formspark.io/setup/spam-protection.md#rejected-submissions).
- Have you set [allowed domains](https://documentation.formspark.io/setup/spam-protection.md#allowed-domains)? Submissions from any other site, from
  `localhost`, or from a server land in `Spam`.
- Has your workspace run out of submissions? See
  [running out of submissions](https://documentation.formspark.io/troubleshooting/limits-and-plans.md#running-out-of-submissions).

## I cannot find my forms

1. Ensure that you are signed in with the correct email address.
2. Ensure that you are connected to the right workspace:
   [View My Workspaces](https://dashboard.formspark.io/workspaces).

## I cannot find my workspace

Ensure that you are signed in with the correct email address.

## I want to delete my account

You can do this yourself, under
[Settings → Delete account](https://dashboard.formspark.io/account/delete).

It removes the workspaces you are the only member of, along with their forms
and submissions, and takes your address off every form that notifies it. Your
sign-in is kept so you can come back later, and it cannot be undone. See
[account settings](https://documentation.formspark.io/dashboard/account-settings.md#deleting-your-account) for what
is removed, what is kept, and what to do if you are the only administrator of a
shared workspace.

To delete a single workspace rather than your whole account, see
[deleting a workspace](https://documentation.formspark.io/dashboard/additional-workspaces.md#deleting-a-workspace).

## My workspace suddenly seems to be out of submissions

Ensure that you are connected to the right workspace: [View My Workspaces](https://dashboard.formspark.io/workspaces).

Note that additional user-created workspaces start with 0 submissions. All upgrades, bundles, and deals are per
workspace. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

## My AJAX request returns 200 but no submission shows up

This is almost always a `Content-Type` / `Accept` header mismatch. When submitting JSON, both headers must be set to `application/json`:

```javascript
fetch("https://submit-form.com/your-form-id", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({ message: "Hello" }),
});
```

Without those headers Formspark may treat the body as something other than JSON and silently discard it.

## My request returns an error status

These are the statuses an AJAX request with `Accept: application/json` can receive, with the text Formspark sends back:

- `400` with `Send form data to this URL to submit a form`: the request carried no data. This is what you see when you
  open your form's URL in a browser. Submit your form instead, or test with the [echo endpoint](https://documentation.formspark.io/setup/index.md#testing).
- `400` with `file uploads are not supported, only text fields`: the submission carried a file. See
  [file uploads](https://documentation.formspark.io/setup/file-uploads.md).
- `400` with `invalid JSON, only supports object and array`: the body is not a JSON object or array.
- `402` with `Workspace is out of submissions`: see
  [running out of submissions](https://documentation.formspark.io/troubleshooting/limits-and-plans.md#running-out-of-submissions).
- `403` with `Rejected by spam protection`: see [rejected submissions](https://documentation.formspark.io/setup/spam-protection.md#rejected-submissions).
- `404` with `This form does not exist anymore`: the form ID in your URL does not match a form. Copy the action URL
  again from your form's `How-to` tab.

## I'm receiving the same notification several times

Formspark sends one notification per accepted submission. Several identical
emails therefore means the form was submitted several times, not that one
notification was sent again.

Open the form in your dashboard and compare the timestamps. Duplicate
submissions appear as separate entries, often only seconds apart. Once you know
how many arrived, see
[duplicate submissions](#i-m-receiving-duplicate-submissions) for the causes.

## I'm receiving duplicate submissions

Duplicates come from one of two places, and they need different fixes. Check the
submitted content first: a real visitor sending twice looks like a genuine
enquiry, while a burst of many identical copies seconds apart is almost always a
bot.

### Duplicates from a real visitor

Common causes:

- The submit button was clicked multiple times before the request completed.
- The visitor pressed the back button after submitting and resubmitted the form on refresh.
- Browser autofill / form-restore replayed the submission after a page reload.

Guard the submit button while the request is in flight. Reset it in a `finally`
block so a failed request does not leave the form permanently disabled:

```html
<form id="form">
  <input type="email" name="email" required />
  <button id="button" type="submit">Send</button>
</form>

<script>
  const form = document.getElementById("form");
  const button = document.getElementById("button");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    if (button.disabled) return;
    button.disabled = true;
    try {
      const response = await fetch("https://submit-form.com/your-form-id", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(Object.fromEntries(new FormData(form))),
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      form.reset();
    } catch (error) {
      console.error(error);
    } finally {
      button.disabled = false;
    }
  });
</script>
```

Most of the [framework examples](https://documentation.formspark.io/examples/react.md) already wire this up through a
`submitting` flag. For full-page submissions without AJAX, redirect away from the
form on success so a refresh cannot resubmit it.

### Duplicates from a bot

A bot posts straight to your form endpoint and never loads your page, so
disabling the button, resetting the form, and redirecting on success have no
effect on it. Those guards only stop a real visitor submitting twice.

Enable [spam protection](https://documentation.formspark.io/setup/spam-protection.md) instead. Every accepted copy
spends one submission from your workspace, so bot bursts eat into your allowance
as well as your inbox, and submissions rejected as spam do not count against
your total. See [limits and plans](https://documentation.formspark.io/troubleshooting/limits-and-plans.md).

---

Source: https://documentation.formspark.io/troubleshooting/limits-and-plans.md

# Limits and plans

Every Formspark account starts with one free workspace. Upgrading is a one-time payment per workspace, not a subscription: a bundle of submissions plus the paid features, valid until you have spent them.

## What each plan includes

|                             | Free      | Upgraded                                                     |
| --------------------------- | --------- | ------------------------------------------------------------ |
| Submissions                 | 250       | 50,000 per bundle                                            |
| Forms                       | 10        | 100                                                          |
| Team members                | 5         | 50                                                           |
| Submission archive          | Forever   | Forever                                                      |
| Spam protection             | Included  | Included                                                     |
| Webhooks, Slack and Zapier  | Included  | Included                                                     |
| Exports                     | Included  | Included                                                     |
| Autoresponder               | No        | [Included](https://documentation.formspark.io/dashboard/autoresponder.md)                         |
| Removing Formspark branding | No        | [Included](https://documentation.formspark.io/customization/feedback-page.md#feedback-whitelabel) |
| REST API                    | No        | [Included](https://documentation.formspark.io/api/index.md)                                            |
| Google Sheets               | No        | [Included](https://documentation.formspark.io/integration/google-sheets.md)                       |
| Notion                      | No        | [Included](https://documentation.formspark.io/integration/notion.md)                              |
| Support                     | Community | Customer assistance team                                     |

## How submissions are counted

Every accepted submission spends one submission from its workspace. Submissions rejected as spam do not count against your total.

Submission bundles do not expire. Buy one when you need it, spend it at your pace, and buy another when it runs out. There are no automatic payments.

## Running out of submissions

Formspark does not cut you off at exactly zero. There is a small buffer past the end of your submissions, and recent submissions that arrive beyond it are held back rather than discarded. You find them under `Overflow` in your form's submissions. Purchasing a new bundle releases the held submissions straight into your inbox. Past a further limit, new submissions are discarded rather than held.

## Everything is per workspace

Upgrades, bundles, and deals apply to a single workspace. Additional user-created workspaces start with 0 submissions and can be upgraded separately. See [additional workspaces](https://documentation.formspark.io/dashboard/additional-workspaces.md).

## Team members

Free workspaces include 5 team members, and upgraded workspaces include 50. Members who joined before a limit applied always keep their access; limits only affect new invitations. See [inviting team members](https://documentation.formspark.io/dashboard/inviting-team-members.md).

## How quickly Zapier sees a submission

Zapier checks Formspark for new submissions on a schedule of its own. Upgraded workspaces are answered every time, so a submission reaches your Zap as quickly as Zapier asks for it. Free workspaces are answered at most once every 15 minutes, so a submission can take that long to arrive. No submission is lost either way. See [Zapier](https://documentation.formspark.io/integration/zapier.md#how-often-zapier-checks-for-submissions).

---

Source: https://documentation.formspark.io/troubleshooting/email-reception.md

# Troubleshooting email reception issues

Having problems receiving our emails?

## Check your spam/junk folders

If the mail is in one of these folders, you should open the email and click the "This Is Not Spam" button.

## Add us to your white list/safe sender list

Whitelisting us will make sure that messages from our addresses are always accepted by your email inbox.

Our sending email addresses are:

- `autoresponder@formspark.io`
- `noreply@formspark.io`
- `notifications@formspark.io`
- `support@formspark.io`

---

Source: https://documentation.formspark.io/integration/integromat.md

# Integromat

Integromat is now [Make](https://www.make.com). See the [Make integration guide](https://documentation.formspark.io/integration/make.md) for current setup instructions.