# API Keys
Source: https://docs.formbox.app/api-reference/api-keys

Learn how to get your Formbox API key.

API keys on Formbox allow other apps to access your organization programmatically. This is useful for integrating Formbox with other tools and services.

Each API key is tied to a specific organization - meaning you can use it to access that organization's resources without having to worry about "leaking" access to other organizations. You also dont need to pass your organization ID in your API requests.

<Note>Formbox API keys are prefixed with `fbsk_` for easy identification.</Note>

## API key permissions

You can create 2 types of API keys on Formbox:

1. **Full access** - This API key will have full access to all resources.
2. **Read only** - This API key will have read-only access to all resources.

Depending on your use case, you might want to use one of these 2 options to limit the scope of the API key and improve security.

## How to create an API key

You can create an API key by following these steps:

<Steps>
  <Step title="Go to your organization">
    Go to **Settings** > **API Keys** in your organization.

    <Frame>
      <img alt="Formbox API keys on Dub" />
    </Frame>
  </Step>

  <Step title="Create an API Key">
    Click on the "Create" button, name your API key, and select permissions you want to grant to the API key.

    <Frame>
      <img alt="Add new API key on Formbox" />
    </Frame>

    When making API calls, if your API key has insufficient permissions, the error should tell you which permissions you need.

    The UI allows you to copy your API key and store it in a safe place. If you lose your API key or it becomes compromised, you can regenerate a new one.
  </Step>

  <Step title="Use your API Key">
    Now that you have your API key, you can use it to access your organzations's resources programmatically via any API request as a header token.

    ```
    api-key: fbsk_xxxxxxxx
    ```
  </Step>
</Steps>

<Tip>
  We recommend creating API keys with the least privilege necessary to perform the required tasks.
  This helps to reduce the risk of unauthorized access to your organization.
</Tip>


# Create a new form
Source: https://docs.formbox.app/api-reference/endpoint/create-a-new-form

post /forms
Create a new form for the authenticated organization.



# Delete a form
Source: https://docs.formbox.app/api-reference/endpoint/delete-a-form

delete /forms/{formId}
Delete a specific form for the authenticated organization.



# Delete a submission
Source: https://docs.formbox.app/api-reference/endpoint/delete-a-submission

delete /submissions/{submissionId}
Delete a specific submission for a given form for the authenticated organization.



# Retrieve a form
Source: https://docs.formbox.app/api-reference/endpoint/retrieve-a-form

get /forms/{formId}
Retrieve a specific form for the authenticated organization.



# Retrieve a list of forms
Source: https://docs.formbox.app/api-reference/endpoint/retrieve-a-list-of-forms

get /forms
Retrieve a paginated list of forms for the authenticated organization.



# Retrieve a list of submissions
Source: https://docs.formbox.app/api-reference/endpoint/retrieve-a-list-of-submissions

get /submissions
Retrieve a paginated list of submissions for a given form for the authenticated organization.



# Retrieve a submission
Source: https://docs.formbox.app/api-reference/endpoint/retrieve-a-submission

get /submissions/{submissionId}
Retrieve a specific submission for a given form for the authenticated organization.



# Update a form
Source: https://docs.formbox.app/api-reference/endpoint/update-a-form

patch /forms/{formId}
Update a form for the authenticated organization.



# Errors
Source: https://docs.formbox.app/api-reference/errors

Troubleshoot problems with this comprehensive breakdown of all error codes.

Formbox API returns machine readable error codes, human readable error messages.

Here is how an error response looks like:

```json theme={null}
{
  "error": {
    "code": "not_found",
    "message": "The requested resource was not found."
  }
}
```

## Error Codes

Here is a list of all error codes the Formbox API returns:

### `bad_request`

* **Status:** 400
* **Problem:** The request is malformed, either missing required fields, using wrong datatypes, or being syntactically incorrect.
* **Solution:** Check the request and make sure it is properly formatted.

### `unauthorized`

* **Status:** 401
* **Problem:** The request has not been applied because it lacks valid authentication credentials for the target resource.
* **Solution:** Make sure you are using the correct API key or access token.

### `forbidden`

* **Status:** 403
* **Problem:** The server understood the request, but is refusing to fulfill it because the client lacks proper permission.
* **Solution:** Make sure you have the necessary permissions to access the resource.

### `not_found`

* **Status:** 404
* **Problem:** The server has not found anything matching the request URI.
* **Solution:** Check the request and make sure the resource exists.

### `conflict`

* **Status:** 409
* **Problem:** Another resource already uses the same identifier. For example, workspace slug must be unique.
* **Solution:** Change the identifier to a unique value.

### `invite_expired`

* **Status:** 410
* **Problem:** The invite has expired.
* **Solution:** Generate a new invite.

### `unprocessable_entity`

* **Status:** 422
* **Problem:** The server was unable to process the request because it contains invalid data.
* **Solution:** Check the request and make sure input data is valid.

### `rate_limit_exceeded`

* **Status:** 429
* **Problem:** The request has been rate limited.
* **Solution:** Wait for a while and try again.

### `internal_server_error`

* **Status:** 500
* **Problem:** The server encountered an unexpected condition that prevented it from fulfilling the request.
* **Solution:** Try again later. If the problem persists, contact support.


# Introduction
Source: https://docs.formbox.app/api-reference/introduction

Fundamental concepts of Formbox's API.

## Base URL

Formbox's API is built on REST principles and is served over HTTPS. To ensure data privacy, unencrypted HTTP is not supported.

The Base URL for all API endpoints is:

```bash Terminal theme={null}
https://app.formbox.app/api/v1
```

## Authentication

Authentication to Formbox's API is performed via `api-key`. To authenticate, you need to include the `api-key` header with your API key in your requests like so:

```bash Terminal theme={null}
api-key: <YOUR_API_KEY>
```

Learn more about [how to get your API key](/api-reference/api-keys).

## Response Codes

The API returns standard HTTP response codes to indicate the success or failure of an API request. Here are a few examples:

| Code  | Description                                                                                    |
| ----- | ---------------------------------------------------------------------------------------------- |
| `200` | The request was successful.                                                                    |
| `400` | The request was invalid or cannot be served.                                                   |
| `401` | The request requires user authentication.                                                      |
| `403` | The server understood the request, but refuses to authorize it.                                |
| `404` | The requested resource could not be found.                                                     |
| `429` | Too many requests.                                                                             |
| `500` | The server encountered an unexpected condition which prevented it from fulfilling the request. |

## Caveats

* Formbox's API is currently in public beta and is subject to change. However, we will do our best to keep breaking changes to a minimum.


# Rate limits
Source: https://docs.formbox.app/api-reference/rate-limits

Learn about Formbox's API rate limits.

Formbox's API rate limiting is in conformance with the [IETF standard](https://datatracker.ietf.org/doc/html/draft-ietf-httpapi-ratelimit-headers):

| Header Name             | Description                                                                     |
| ----------------------- | ------------------------------------------------------------------------------- |
| `X-RateLimit-Limit`     | The maximum number of requests that the consumer is permitted to make per hour. |
| `X-RateLimit-Remaining` | The number of requests remaining in the current rate limit window.              |
| `X-RateLimit-Reset`     | The time at which the current rate limit window resets in UTC epoch seconds.    |
| `Retry-After`           | The number of seconds to wait before retrying the request again.                |

Formbox's API is capped at **600 requests per minute** per key on all plans. This could could change in the future as we continue to improve the API.

This is implemented to ensure a fair usage policy so that excessive use by a single user does not adversely affect the performance and usage of the API by others.

You'll receive a `429 Too Many Requests` response code if the rate limit is exceeded.


# AJAX support
Source: https://docs.formbox.app/features/ajax-support

Learn how to use AJAX with the **fetch** API in your handle submissions on your form.

## What is AJAX?

AJAX or <a href="https://developer.mozilla.org/en-US/docs/Glossary/AJAX">Asynchronous JavaScript and XML</a> is described by MDN as a web development technique in which a web app fetches content from the server by making asynchronous HTTP requests, and uses the new content to update the relevant parts of the page without requiring a full page load.

### Using the Fetch API

The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global `fetch()` method that provides an easy, logical way to fetch resources asynchronously across the network. It is a more powerful and flexible replacement for <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.

We will use the it to send your form data to Formbox's server to handle the submissions.

Lets start with a simple example:

```html theme={null}
<script>
  fetch("https://api.formbox.app/s/{your_form_id}", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({
      name: "Jason",
      email: "jason@example.com",
      message: "Hello World",
    }),
  })
    .then((response) => console.log(response))
    .catch((error) => console.log(error));
</script>
```

Example output:

```json theme={null}
{ "success": true, "status": 200 }
```

This will work for any tech stack you are using, such as with React, Vue, Angular, or even vanilla JavaScript.


# Country restrictions
Source: https://docs.formbox.app/features/country-restrictions

Setup your forms to only accept form submissions from specific countries.

<Tip>Country restrictions are only available on the **Business** plan.</Tip>

## Configuring your forms country restrictions

Go to your form settings and scroll down to the **Security** section. Here you can add the countries you want to restrict your form submissions to.

<Frame>
  <img />
</Frame>


# Custom domains
Source: https://docs.formbox.app/features/custom-domains

Serve your hosted forms from your own domain for a fully branded experience.

<Tip>Custom domains are only available on the **Professional** and **Business** plans.</Tip>

## Overview

Custom domains let you share your forms on your own web address instead of a Formbox link. That makes your forms feel more polished, easier to remember, and more on-brand.

A single domain can show **multiple forms** at different addresses. For example, one form can live at your domain root and another can live at a simple path like `/contact`.

Only published forms can use custom domains.

You can manage custom domains from the **Domains** page in your dashboard. Anyone with Admin or Member access can add a domain, verify it, and connect forms.

## Adding a custom domain

1. Navigate to **Domains** in your organization's dashboard sidebar.
2. Click **Add domain**.
3. Enter your domain name. This can be a subdomain like `forms.example.com` or your main domain like `example.com`.
4. Click **Add domain**.

<Frame>
  <img />
</Frame>

The domain will appear in your list with a **Misconfigured** status until you complete the DNS setup below.

## Verifying your domain

After adding your domain, click on it in the Domains list to open the domain detail page. From here you can see its current status and add your DNS records.

### Check your status

The **Overview** tab shows the current verification status of your domain.

<Frame>
  <img />
</Frame>

| Status            | Meaning                                                                  |
| ----------------- | ------------------------------------------------------------------------ |
| **Verifying**     | DNS records were detected and verification is in progress.               |
| **Verified**      | Your domain is active and your form is live.                             |
| **Misconfigured** | The DNS records are missing or incorrect. Check them and try again.      |
| **Error**         | Something went wrong during verification. Check the error message shown. |

### Add DNS records

Open the **DNS Records** tab to see exactly which records to add. You'll need to log in to wherever you manage your domain (such as GoDaddy, Namecheap, Cloudflare, or similar) and add the records shown.

<Frame>
  <img />
</Frame>

* **Subdomains** (e.g. `forms.example.com`): Add a **CNAME** record with the value shown in Formbox.
* **Root domains** (e.g. `example.com`): Add an **A** record with the IP address shown in Formbox.

Some domains also require a **TXT** record for verification. If one is needed, it will appear alongside the other records.

Once you've added the records, click **Refresh verification** in the top right corner to check whether everything is set up correctly. If the records are not showing yet, wait a few minutes and try again.

<Note>
  DNS changes can take anywhere from a few minutes to 48 hours to take effect, depending on your
  domain provider. Most changes go through within a few minutes.
</Note>

## Set up where your forms live

Once your domain is verified, you can connect forms to it from the domain's **Configuration** tab. Each connection maps a web address on your domain to a specific form.

1. Go to the **Domains** page and click on your verified domain.

<Frame>
  <img />
</Frame>

2. Open the **Configuration** tab.

<Frame>
  <img />
</Frame>

You'll see two starter rows: one for your domain's root and one for a custom path. You can set up either one first.

### Show a form at your domain root

Click **Assign form** next to your domain name. Pick a form from the dropdown and click the checkmark to save.

### Show a form at a custom path

Click **Add custom path** (or the **Add path** button in the top right) and enter a short path like `contact`. Pick a form from the dropdown and click the checkmark to save.

<Frame>
  <img />
</Frame>

The form picker only shows forms that can be connected to a custom domain.

<Frame>
  <img />
</Frame>

You can add as many paths as you need. Each form can only be connected to one address at a time.

<Note>
  Keep paths short and simple. Multi-level addresses like `/events/spring-registration` are not
  supported yet.
</Note>

### Connecting from within a form

You can also start the setup from inside a form:

1. Open the form and go to the **Settings** tab.
2. Scroll down to the **Custom domain** section.
3. Click **Connect domain**. This takes you to the Domains page where you can set up a path for this form.

<Frame>
  <img />
</Frame>

Once connected, the **Custom domain** section will show the domain name and a **Manage domain** link that takes you back to its settings.

<Frame>
  <img />
</Frame>

<Note>Custom domains only work with forms that are meant to be shared publicly.</Note>

## Sharing your form

Once a path is set up for your form, the **Share** tab will show your custom domain URL as the main link to share. Your original Formbox URL will still work as a backup.

<Frame>
  <img />
</Frame>

QR codes for your form will also use the custom domain URL.

## Changing a path

If you update the address for a form (for example, changing `/signup` to `/register`), the old address keeps working automatically. Anyone who saved or shared the old link will still reach the form. Old addresses are cleaned up when the form is fully disconnected from the domain.

## Removing a custom domain

1. Go to the **Domains** page in your organization dashboard.
2. Click the **more options** menu (three dots) on the domain you want to remove.
3. Select **Remove** and confirm.

<Frame>
  <img />
</Frame>

Removing a domain disconnects it from all forms. Each form will go back to using its default Formbox URL.

## Troubleshooting

### Domain is stuck on "Misconfigured"

* Double-check that the DNS records in your domain provider match exactly what Formbox shows.
* Make sure you're updating the right domain if you manage several.
* Wait a few minutes and click **Refresh**. DNS changes can take time to take effect.
* Check that you used the correct record type: subdomains need a CNAME record, root domains need an A record.

### Visiting my domain shows a "not found" page

* A path only works if you have explicitly set it up in the **Configuration** tab. Formbox does not create any paths automatically.
* If you want your domain root to show a form, click **Assign form** next to your domain name in the **Configuration** tab.

### The TXT verification record is not being detected

* Make sure the TXT record is added to the exact hostname shown in Formbox (it often starts with `_vercel`).
* Some domain providers want you to leave out your domain name from the record name field. Check your provider's help docs if you are unsure.


# Custom redirects
Source: https://docs.formbox.app/features/custom-redirects

Direct users to a custom URL after successful submissions.

<Tip>This feature is not available in the **Free** plan.</Tip>

## Configuring the custom redirect

1. Go to the form settings of the form you want to configure the redirect for.
2. Scroll down to the **Custom Redirect** section.
3. Switch the toggle to enable the custom redirect.
4. Enter the URL you want to redirect users to after successful submissions.

<Frame>
  <img />
</Frame>


# Customize thank you page
Source: https://docs.formbox.app/features/customize-thank-you-page

Customize the thank you page after successful submissions.

<Tip>This feature is not available in the **Free** plan.</Tip>

The thank you page is the page that users are redirected to after they successfully submit a form. By default, the thank you page has the Formbox branding. You can customize the thank you page to match your branding.

## Enabling the custom thank you page

1. Go to the form settings of the form you want to edit the thank you page for.
2. Scroll down to the **Custom thank you page** section.
3. Switch the toggle to enable the custom thank you page.
4. Fill out the inputs for the thank you page with the content you want to display.

<Frame>
  <img />
</Frame>

<br />

<Frame>
  <img />
</Frame>


# Domain restrictions
Source: https://docs.formbox.app/features/domain-restrictions

Setup your forms to only accept form submissions from a specific domain and all it's subdomains.

<Tip>Domain restrictions are only available on the **Professional** and **Business** plans.</Tip>

## Configuring your forms domain restrictions

Go to your form settings and scroll down to the **Security** section. Here you can add the domains and subdomains you want to restrict your form to.

<Frame>
  <img />
</Frame>

<Note>
  In order to use Formbox's domain restrictions you must ensure your site's `Referrer-Policy` sends your site's origin information to Formbox.

  By default, sites usually have the `Referrer-Policy` set to `strict-origin-when-cross-origin` which is compatible with Formbox. Learn more about referrer policy <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy">here</a>.
</Note>


# Exporting submissions
Source: https://docs.formbox.app/features/exporting-submissions

In case you need to do something with your form submissions data, Formbox allows you to export your submissions in CSV or JSON file formats.

## How to export your submissions

1. Go to the form you want to export submissions from.
2. Click on the **Submissions** tab.
3. Click on the **Export** button.
4. Choose the format you want to export your submissions to.

This can be done for both spam and non-spam submissions.

<Frame>
  <img />
</Frame>


# File Uploads
Source: https://docs.formbox.app/features/file-uploads

Store, download, and share files collected with your Formbox forms.

## Accepting Files

You can upload files from your HTML form using Formbox. Each file can be up to 5MB in size.

Enabling your Formbox forms to accept file uploads is easy. Just add `enctype="multipart/form-data"` to your form tag, and your ready to start collecting files on your submissions.

<Note>We only allow one file per submission right now.</Note>

### Single input example

```html theme={null}
<form
  accept-charset="UTF-8"
  action="https://api.formbox.app/s/{your_form_id}"
  enctype="multipart/form-data"
  method="POST"
>
  ...
  <input type="file" name="resume" />
  ...
</form>
```


# IP address blacklist
Source: https://docs.formbox.app/features/ip-blacklist

Setup your forms to block form submissions from a specific IP address.

<Tip>IP blacklist is only available on the **Business** plan.</Tip>

## Configuring your forms IP blacklist

Go to your form settings and scroll down to the **Security** section. Here you can add the IP addresses you want to blacklist your form from.

<Frame>
  <img />
</Frame>


# Organizations
Source: https://docs.formbox.app/features/organizations

Looking for a way to organize your Formbox forms based on a company or client? Organizations lets you group your forms, invite team members, and manage access rights for every organization.

## How to create an organization

First start by creating an account on Formbox. Once you have an account, you will end up on the organizations page. Click on the `Create Organization` button to create a new organization.

<Frame>
  <img />
</Frame>

Give the organization a name and click on the `Create organization` button in the modal.

Once the organization is created, you will be redirected to the organization page. Here you can see the organization settings, members, and forms.

<Frame>
  <img />
</Frame>

## Adding members to an organization

To add members to an organization, click on the `Members` tab in the organization settings page. Here you can see the list of members in the organization and invite new members.

<Frame>
  <img />
</Frame>

To invite a new member, click on the `Invite member` button. Enter the email address of the member you want to invite and click on the `Send member invite` button.

<Frame>
  <img />
</Frame>

You can view the status of the invitation in the `Invites` tab.

<Frame>
  <img />
</Frame>

The member will receive an email with an invitation to join the organization. Once they accept the invitation, they will be added to the organization.

<Frame>
  <img />
</Frame>

From here you will be able to see the newly added member in the `Members` tab.

<Frame>
  <img />
</Frame>

## Managing member access rights

When you add a member to an organization, the default role assigned to them is `Member`.

To change the role of a member, click on the action button with three dots. You will then be presented with a dropdown menu where you can change the role of the member.

<Frame>
  <img />
</Frame>

Click on the `Change role` option in the dropdown menu. You will then be presented with a modal where you can change the role of the member.

<Frame>
  <img />
</Frame>

The modal will show the current role of the member and the available roles and their capabilities that you can change to. Select the role you want to change to and click on the `Change role` button.


# Features overview
Source: https://docs.formbox.app/features/overview

Formbox offers a wide range off features to help you manage your forms and submissions. Familiarize yourself with Formbox's features with our comprehensive set of guides.

<CardGroup>
  <Card title="Organizations" href="/features/organizations">
    Group forms per team, project, or department and manage who has access.
  </Card>

  <Card title="Self email notifications" href="/features/self-email-notifications">
    Recieve email notifications every time your form gets a new submission.
  </Card>

  <Card title="Respondent email notifications" href="/features/respondent-email-notifications">
    Send auto-responses to your form respondants when they fill out your form.
  </Card>

  <Card title="Custom domains" href="/features/custom-domains">
    Serve your hosted forms from your own domain for a fully branded experience.
  </Card>

  <Card title="Custom redirects" href="/features/custom-redirects">
    Redirect your form respondants to a custom URL after submission.
  </Card>

  <Card title="Spam protection" href="/features/spam-protection">
    Our spam protection AI handles spam submissions and keeps your inbox safe and sound.
  </Card>

  <Card title="Domain restrictions" href="/features/domain-restrictions">
    Only allow form submissions your from the approved domains you trust.
  </Card>

  <Card title="Country restrictions" href="/features/country-restrictions">
    Only allow form submissions your from the countries you trust.
  </Card>

  <Card title="Exporting submissions" href="/features/exporting-submissions">
    Download all your form submission data to a CSV or JSON file.
  </Card>

  <Card title="AJAX support" href="/features/ajax-support">
    Use the fetch api to submit your form submissions without a page reload.
  </Card>

  <Card title="Webhooks" href="/features/webhooks">
    Send a webhook request on successful submissions.
  </Card>
</CardGroup>


# Password protection
Source: https://docs.formbox.app/features/password-protection

Require visitors to enter a password before they can view or submit a hosted form.

<Tip>Password protection is only available on the **Professional** and **Business** plans.</Tip>

## Protecting a hosted form with a password

Password protection lets you keep a hosted form private while still sharing the form link with the people who need access. Visitors must enter the password before they can view or submit the form.

<Frame>
  <img />
</Frame>

Go to your form settings and scroll down to the **Access** section. Turn on **Password protection**, enter a password, and click **Save changes**.

<Frame>
  <img />
</Frame>

## Changing the password

To change an existing password, go back to **Access**, click **Change password**, enter the new password, and save your changes.

For security reasons, Formbox does not show saved passwords after they are added or updated. If you forget the password, set a new one and share the new password with your recipients.

<Note>
  Changing the password clears existing saved access. Anyone who previously unlocked the form will
  need to enter the new password.
</Note>

## Removing password protection

To remove password protection, turn off **Password protection** in the **Access** section and save your changes. Once removed, visitors can open the hosted form without entering a password.

## Embedded forms

Password protection also works with embedded hosted forms. If the form is embedded on another site, visitors will see the password screen before the embedded form is displayed.


# Respondent email notifications
Source: https://docs.formbox.app/features/respondent-email-notifications

Respondent email notifications will send an email to the person who submits your form. It's the same thing as Auto-Responses.

<Tip>
  Respondent email notifications are only available on the **Professional** and **Business** plans.
</Tip>

## How to enable respondant email notifications

Go to the form you want to enable self email notifications for and navigate to the `Settings` tab.

<Frame>
  <img />
</Frame>

Navigate to `Email configuration` section, and enable the toggle.

<Frame>
  <img />
</Frame>

From there, you can customize the email that will be sent to the respondent. Click on the `Edit template` button to customize the email.

<Frame>
  <img />
</Frame>

You can use variables in the `From name`, `Subject`, and `Message` fields.

Type `@` to insert a variable.

* `@Form name` inserts the form name.
* `@Submitted at` inserts the submission timestamp.
* Hosted form fields appear as variables using their field labels. For example,
  a `First Name` field appears as `@First Name`.
* Endpoint form field variables appear after the form has received its first
  processed submission.

Example subject:

```txt theme={null}
Thanks for contacting @Form name, @First Name
```

<Frame>
  <img />
</Frame>

<Note>
  The input you collect your users email from must be named as <strong>email</strong>, otherwise
  this feature won’t work.
</Note>

```html theme={null}
<form>
  ...
  <input type="email" name="email" />
  ...
</form>
```

Done, now every time a customer submits a message to your form, they will get an auto response email notification.


# Self email notifications
Source: https://docs.formbox.app/features/self-email-notifications

With self email notifications, you will receive an email each time there is a new successful submittion to your form.

<Tip>Self email notifications are available on every plan.</Tip>

<Tip>
  Formbox does not currently send email notifications for submissions that are marked as spam.
</Tip>

## How to enable self email notifications

Go to the form you want to enable self email notifications for and navigate to the `Settings` tab.

<Frame>
  <img />
</Frame>

Navigate to `Email notifications` section, and enable the toggle, after that add your email address. You will notice that your email address is automatically added to the list of recipients as the person who creates the form automatically gets added.

You can add more email addresses if you want by seperating them by a comma. These email addresses will receive an email each time there is a new successful submission to your form. They can be any email address, not just the ones that are in your organization.

<Frame>
  <img />
</Frame>


# SMTP custom email domain
Source: https://docs.formbox.app/features/smtp-custom-email-domain

Send auto-response emails from your custom email domain using SMTP

<Tip>Custom email domains are only available on the **Professional** and **Business** plans.</Tip>

## How to enable custom email domain

Go to the form you want to enable the custom email domain for and navigate to the `Settings` tab.

<Frame>
  <img />
</Frame>

Navigate to `Email configuration` section, and enable the toggle. The `Respondent email notifications` toggle will need to be enabled as well.

<Frame>
  <img />
</Frame>

From there, you can update the SMTP settings by clicking on the `Edit configuration` button.

<Frame>
  <img />
</Frame>

Done, now every time a customer submits a message to your form, they will get an auto response email notification from your custom email domain.


# Spam protection
Source: https://docs.formbox.app/features/spam-protection

Formbox offers a variety of spam filtering options you can add to your forms to ensure only legitimate submissions are sent to your inbox.

## Spam filtering

Spam filtering is the one the hardest parts of operating a form service. Everyone has a different tolerance for spam they expect to be filtered for them. There will always be some percentage of false positives with any spam filtering solution. We filter spam in order to protect our email sending reputation, this is what enables us to land emails in your inbox instead of your spam folder.

Please keep in mind that we don't delete a submission if we think it's a spam, we only mark it as a spam. Therefore we filter out the spam submissions when you check the submissions inside the dashboard. We also don't send email notifications for spam submissions.

<Warning>
  Formbox retains spam for **30 days** before it is permanently deleted. Be sure to review your spam
  folder frequently.
</Warning>

## Formbox spam protection options

### Honeypots

A honeypot is a simple spam filtering technique that adds a hidden field to your form that only bots can see. If the field is filled out, the submission is marked as spam. This is the easiest spam filtering option to implement and is available in your form's settings.

You can also configure a custom honeypot field for your form. This is useful if you want to use a different field name or if you want to use it in addition our our default honeypot.

<Frame>
  <img />
</Frame>

In your HTML code you need to add a hidden input field with the name you've configured in the form settings. For example:

```html theme={null}
<form>
  ...
  <input type="hidden" name="_customhoneypot" />
  ...
</form>
```

<Tip>The custom honeypot feature is not available on the **Free** plan.</Tip>

### AI spam filtering

We use <a href="https://spamcheck.ai">Spamcheck.ai</a> to accurately assess the legitimacy of your form's submission content. It is an intelligent API solution that provides automatic protection and stops spam content from reaching your inbox. It uses machine learning to constanly and evolve to be better at what it does.

### Google reCAPTCHA v3

ReCaptcha v3 is a service provided by Google that protects your forms from spam and abuse for free. It uses advanced risk analysis techniques to tell humans and bots apart. It is invisible to users and works in the background.

#### Configuring Google reCAPTCHA v3 in Formbox

First, you will need to create a new site from the reCAPTCHA console. You can do so by <a href="https://www.google.com/recaptcha/admin">clicking here</a>.

<Frame>
  <img />
</Frame>

Fill in the required fields and click on the **Submit** button. You will be redirected to a page where you can find your site key and secret key.

<Frame>
  <img />
</Frame>

Copy the site key and secret key and enable the recaptcha setting, then paste the secret key into the reCAPTCHA settings in your form settings and click **Save changes**.

<Frame>
  <img />
</Frame>

#### Adding reCAPTCHA to your HTML form

Now that we have the reCAPTCHA keys configured in Formbox, we need to implement it in your HTML form.

Lets start by adding the reCAPTCHA script to the head of your HTML document:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Example</title>
    <!-- Google reCAPTCHA script -->
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
  </head>
  <body>
    <form action="https://api.formbox.app/s/{your_form_id}" method="POST">
      <label for="email">Your E-mail:</label>
      <input type="email" name="name" placeholder="email" id="email" />
      <button type="submit">Subscribe</button>
    </form>
  </body>
</html>
```

Replace `YOUR_SITE_KEY` with the site key you copied from the reCAPTCHA console.

Next we need to add the reCAPTCHA token to the form submission. We can do this by adding a script tag to the bottom of the form:

```html theme={null}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Example</title>
    <!-- Google reCAPTCHA script -->
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
  </head>
  <body>
    <form action="https://api.formbox.app/s/{your_form_id}" method="POST">
      <label for="email">Your E-mail:</label>
      <input type="email" name="name" placeholder="email" id="email" />
      <button type="submit">Subscribe</button>
    </form>

    <script>
      grecaptcha.ready(function () {
        grecaptcha.execute("YOUR_SITE_KEY", { action: "homepage" }).then(function (token) {});
      });
    </script>
  </body>
</html>
```

The `grecaptcha.ready` function will make a request to Google and return a token. Normally you would send this token to your server and verify it with Google. However, since Formbox handles the form submissions, we will take a different approach.

Lets start by adding a hidden input field to the form:

```html theme={null}
<form action="https://api.formbox.app/s/{your_form_id}" method="POST">
  <label for="email">Your E-mail:</label>
  <input type="email" name="name" placeholder="email" id="email" />

  <input type="hidden" id="captchaResponse" name="g-recaptcha-response" />

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

Next we need to update the script to set the token as the value to the hidden input field:

```html theme={null}
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute("YOUR_SITE_KEY", { action: "homepage" }).then(function (token) {
      document.getElementById("captchaResponse").value = token;
    });
  });
</script>
```

Now when the form is submitted, the reCAPTCHA token will be sent along with the form data. Formbox will verify the token with Google and if it's valid, the submission will be successful, otherwise it will be marked as spam.


# Angular
Source: https://docs.formbox.app/guides/angular

Learn how to integrate your Formbox form with <a href="https://angular.io" target="_blank" rel="noopener noreferrer">Angular</a>.

## What is Angular?

Angular is a development platform, built on <a href="https://www.typescriptlang.org">TypeScript</a>.

As a platform, Angular includes:

* A component-based framework for building scalable web applications
* A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
* A suite of developer tools to help you develop, build, test, and update your code

With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Angular project

If you don't have the Angular CLI installed, you can install it by running the following command:

```bash theme={null}
npm install -g @angular/cli
```

To get up and running quickly, we will follow the official Angular <a href="https://angular.io/guide/setup-local#install-the-angular-cli">installation</a> guide to create a new Angular project. In your terminal, run the following command:

```bash theme={null}
ng new angular-with-formbox
```

After the prompts, the Angular CLI will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd angular-with-formbox
```

Start the development server:

```bash theme={null}
npm run start
```

Open your browser and navigate to `http://localhost:4200`. You should see a new Astro application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Angular project

Now that we have a new Angular project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Angular <a href="https://tailwindcss.com/docs/guides/angular">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `app.component.html` file within the root of the `src/app` directory and replace everything in the file with the following code block:

```html app.component.html theme={null}
<main>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2"> Name </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2"> Email </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2"> Message </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        ></textarea>
      </div>
      <button
        type="submit"
        class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
      >
        Send Message
      </button>
    </form>
  </div>
</main>

<router-outlet />
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:4200` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Astro
Source: https://docs.formbox.app/guides/astro

Learn how to integrate your Formbox form with <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a>.

## What is Astro?

Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Astro project

To get up and running quickly, we will follow the official Astro <a href="https://docs.astro.build/en/install/auto">installation</a> guide to create a new Astro project. In your terminal, run the following command:

```bash theme={null}
npm create astro@latest
```

After the prompts, the create astro command will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd astro-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:4321`. You should see a new Astro application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Astro project

Now that we have a new Astro project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Astro <a href="https://tailwindcss.com/docs/guides/astro">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `index.astro` file within the root of the `pages` directory and replace everything in the file with the following code block:

```jsx index.astro theme={null}
<main>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          placeholder="How can we help you?"
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        ></textarea>
      </div>
      <button
        type="submit"
        class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
      >
        Send Message
      </button>
    </form>
  </div>
</main>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:4321` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>

Comming soon...


# Embed
Source: https://docs.formbox.app/guides/embed

Learn how to embed a Formbox form inline, as a full-page form, or inside a popup on your website.

The Formbox embed script lets you render a form inline on a page, open it in a popup, or mount it as a full-page experience, all without rebuilding any form UI yourself.

## Install the script

Add the script once on any page where you want to embed a form:

```html theme={null}
<script async src="https://app.formbox.app/scripts/embed.js"></script>
```

Once loaded, the script initializes any iframes with `data-formbox-src`, wires up popup triggers marked with `data-formbox-open`, handles iframe height syncing for inline embeds, and exposes `window.Formbox` for programmatic control.

## Inline embed

Place an iframe with `data-formbox-src` wherever you want the form to appear. The script will set the `src` for you and inject the metadata it needs.

```html theme={null}
<script async src="https://app.formbox.app/scripts/embed.js"></script>

<iframe
  data-formbox-src="https://app.formbox.app/embed/your-form-id?dynamicHeight=1"
  loading="lazy"
  width="100%"
  title="Contact form"
></iframe>
```

Adding `dynamicHeight=1` tells the embedded form to report its content height back to the parent page. The script listens for those messages and resizes the iframe automatically, so it grows naturally with multi-page forms, validation messages, or conditional content. This is the recommended setup for any inline embed placed inside flowing page content.

You can render the same form more than once on a single page — each iframe gets a unique instance ID internally, so height events and lifecycle messages never collide. Just make sure every iframe has a meaningful `title` for accessibility.

Inline embeds can also use the same presentation-style data attributes as popup embeds, so you do not have to switch to query parameters just to hide the title or apply color overrides.

```html theme={null}
<iframe
  data-formbox-src="https://app.formbox.app/embed/your-form-id"
  data-formbox-hide-title="1"
  data-formbox-align-left="1"
  data-formbox-background-color="#ffffff"
  data-formbox-text-color="#111827"
  data-formbox-button-background-color="#111827"
  data-formbox-button-text-color="#ffffff"
  loading="lazy"
  width="100%"
  title="Contact form"
></iframe>
```

## Full-page embed

If the form should take over an entire page, wrap the iframe in a minimal HTML shell that fills the viewport:

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>Contact form</title>
    <script async src="https://app.formbox.app/scripts/embed.js"></script>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        overflow: hidden;
      }

      iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    </style>
  </head>
  <body>
    <iframe
      data-formbox-src="https://app.formbox.app/embed/your-form-id?dynamicHeight=1"
      title="Contact form"
    ></iframe>
  </body>
</html>
```

This gives the form its own dedicated page rather than embedding it inside surrounding content.

## Popup embed

Popups can be opened declaratively with data attributes on any clickable element, or programmatically with JavaScript if you need callbacks or more control.

### Using data attributes

The simplest approach — no extra JavaScript required. Set `data-formbox-open` to your form ID and the script handles the rest:

```html theme={null}
<script async src="https://app.formbox.app/scripts/embed.js"></script>

<button
  type="button"
  data-formbox-open="your-form-id"
  data-formbox-layout="modal"
  data-formbox-width="560"
>
  Open form
</button>
```

The value of `data-formbox-open` accepts a form ID, a full embed URL like `https://app.formbox.app/embed/your-form-id`, or a relative path like `/embed/your-form-id`.

You can configure the popup further with additional data attributes on the same element:

| Attribute                             | Description                                                      |
| ------------------------------------- | ---------------------------------------------------------------- |
| `data-formbox-layout`                 | `modal` or `popup`                                               |
| `data-formbox-width`                  | Width in pixels or a valid CSS size string                       |
| `data-formbox-title`                  | Accessible dialog title (defaults to "Formbox popup form")       |
| `data-formbox-hide-title`             | Hide the form title inside the popup                             |
| `data-formbox-align-left`             | Left-align the form content                                      |
| `data-formbox-transparent-background` | Make the form background transparent                             |
| `data-formbox-overlay-opacity`        | Number from `0` to `1`                                           |
| `data-formbox-close-on-overlay`       | Set to `0`, `false`, or `no` to prevent closing on overlay click |

### Using JavaScript

Use `Formbox.openPopup()` when you want programmatic control or lifecycle callbacks:

```html theme={null}
<script async src="https://app.formbox.app/scripts/embed.js"></script>

<button id="open-formbox-popup" type="button">Open popup</button>

<script>
  document.getElementById("open-formbox-popup")?.addEventListener("click", () => {
    Formbox.openPopup("your-form-id", {
      width: 560,
      onOpen: ({ instanceId, formId }) => {
        console.log("opened", instanceId, formId);
      },
      onClose: ({ instanceId, formId }) => {
        console.log("closed", instanceId, formId);
      },
      onPageView: (page, { formId, totalPages }) => {
        console.log("page", page, "of", totalPages);
      },
      onError: ({ reason, message }) => {
        console.log(reason, message);
      },
      onSubmit: (payload, detail) => {
        console.log("submitted", payload, detail);
      },
    });
  });
</script>
```

The popup supports keyboard close with `Escape`, optional overlay-click-to-close, scroll locking while open, and automatic height syncing with internal scrolling when content exceeds the viewport.

To close a popup programmatically, call `Formbox.closePopup()`.

## Styling and appearance

By default, the embed inherits the form's saved appearance from the Formbox dashboard — background color, text color, accent color, and button colors all carry over automatically.

If you need to override those styles for a specific embed, you can pass color values through data attributes, the JavaScript API, or query parameters. All three approaches support the same set of overrides:

| Override          | Data attribute                         | JS option               | Query parameter         |
| ----------------- | -------------------------------------- | ----------------------- | ----------------------- |
| Accent color      | `data-formbox-accent-color`            | `accentColor`           | `accentColor`           |
| Background color  | `data-formbox-background-color`        | `backgroundColor`       | `backgroundColor`       |
| Text color        | `data-formbox-text-color`              | `textColor`             | `textColor`             |
| Button background | `data-formbox-button-background-color` | `buttonBackgroundColor` | `buttonBackgroundColor` |
| Button text       | `data-formbox-button-text-color`       | `buttonTextColor`       | `buttonTextColor`       |

Here's what a fully customized popup trigger looks like using data attributes:

```html theme={null}
<button
  type="button"
  data-formbox-open="your-form-id"
  data-formbox-layout="modal"
  data-formbox-accent-color="#7c3aed"
  data-formbox-background-color="#faf5ff"
  data-formbox-text-color="#4c1d95"
  data-formbox-button-background-color="#4c1d95"
  data-formbox-button-text-color="#faf5ff"
>
  Open customized form
</button>
```

You only need to pass overrides when you want an embed-specific look. Otherwise the form's saved styling is used.

### Query parameters

For inline embeds or manually constructed URLs, you can also pass layout options as query parameters:

```text theme={null}
https://app.formbox.app/embed/your-form-id?dynamicHeight=1&hideTitle=1&alignLeft=1&accentColor=%23111827
```

Additional layout parameters include `hideTitle=1`, `alignLeft=1`, and `transparentBackground=1`.

## Dynamically inserted embeds

The script watches the DOM for newly inserted iframes that contain `data-formbox-src`, so in most cases you don't need to do anything special after injecting new markup.

If you want to explicitly trigger initialization after a manual DOM update:

```js theme={null}
window.Formbox?.loadEmbeds();
```

## Events

The embed script dispatches lifecycle events on `document` that you can listen for:

```js theme={null}
document.addEventListener("formbox:submit", (event) => {
  console.log(event.detail.payload);
});

document.addEventListener("formbox:popup-open", (event) => {
  console.log(event.detail);
});

document.addEventListener("formbox:error", (event) => {
  console.log(event.detail.reason);
});
```

The available events are `formbox:loaded`, `formbox:resized`, `formbox:page-view`, `formbox:submit`, `formbox:popup-open`, `formbox:popup-close`, and `formbox:error`. Each event's `detail` object includes the relevant `formId` and `instanceId`, plus event-specific data like `height`, `page`, `totalPages`, `payload`, or an error `reason`.

If an embed fails to initialize, Formbox dispatches `formbox:error` and shows a basic fallback error state instead of leaving the embed stuck indefinitely.

## JavaScript API

The script exposes `window.Formbox` with a handful of methods:

**`Formbox.loadEmbeds()`** — Scans the page for uninitialized `data-formbox-src` iframes and sets them up. Useful after dynamically inserting embed markup.

**`Formbox.openPopup(formId, options)`** — Opens a popup for the given form ID. Returns the popup instance ID. The options object supports:

| Option                  | Description                                                                           |
| ----------------------- | ------------------------------------------------------------------------------------- |
| `width`                 | Popup width in pixels or a CSS size string                                            |
| `overlayOpacity`        | Backdrop opacity from `0` to `1`                                                      |
| `closeOnOverlayClick`   | Whether clicking the overlay closes the popup (default `true`)                        |
| `hideTitle`             | Hide the form title inside the popup                                                  |
| `alignLeft`             | Left-align the form content                                                           |
| `transparentBackground` | Make the form background transparent                                                  |
| `accentColor`           | Override the form's accent color                                                      |
| `backgroundColor`       | Override the form's background color                                                  |
| `textColor`             | Override the form's text color                                                        |
| `buttonBackgroundColor` | Override the form's button background color                                           |
| `buttonTextColor`       | Override the form's button text color                                                 |
| `onOpen`                | Called when the popup opens. Receives `{ instanceId, formId }`                        |
| `onClose`               | Called when the popup closes. Receives `{ instanceId, formId }`                       |
| `onPageView`            | Called on page changes. Receives `(page, { formId, instanceId, totalPages })`         |
| `onError`               | Called when the popup embed fails. Receives `{ formId, instanceId, reason, message }` |
| `onSubmit`              | Called on form submission. Receives `(payload, { formId, instanceId })`               |

**`Formbox.closePopup()`** — Closes the active popup, or pass a specific instance ID or form ID to close a particular one.

## Tips

Always use `data-formbox-src` instead of setting `src` directly — this lets the script inject the routing metadata it needs. For inline embeds inside flowing content, include `dynamicHeight=1` so the iframe resizes with the form.

For popups, use data attributes when you want a simple no-JavaScript integration, and the JavaScript API when you need lifecycle callbacks. The popup and inline modes share the same hosted embed URL and runtime, so everything from page-view tracking to submit events works the same way regardless of how the form is displayed.


# Next
Source: https://docs.formbox.app/guides/next

Learn how to integrate your Formbox form with <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next</a>.

## What is Next.js?

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Next project

To get up and running quickly, we will follow the official Next <a href="https://nextjs.org/docs/getting-started/installation">installation</a> guide to create a new Next project. In your terminal, run the following command:

```bash theme={null}
npx create-next-app@latest
```

On installation, you'll see the following prompts:

Make sure to select `Yes` for `Tailwind CSS` and `App Router`.

```bash theme={null}
What is your project named? next-with-formbox
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd next-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:3000`. You should see a new Next application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Next project

Now that we have a new Next project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Next <a href="https://tailwindcss.com/docs/guides/nextjs">installation guide</a>.

When running create-next-app, we selected `Yes` for `Tailwind CSS`, so it should already be set up in your project. If not, you can add it by following the guide linked above.

Once you have Tailwind CSS set up, let's add our form.

Open up the `page.tsx` file within the root of the `app` directory and replace everything in the file with the following code block:

```jsx page.tsx theme={null}
export default function Home() {
  return (
    <div className="max-w-md mx-auto py-20 bg-white">
      <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
      <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="John Doe"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="john@example.com"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-6">
          <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            placeholder="How can we help you?"
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
        >
          Send Message
        </button>
      </form>
    </div>
  );
}
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:3000` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Nuxt
Source: https://docs.formbox.app/guides/nuxt

Learn how to integrate your Formbox form with <a href="https://nuxt.com" target="_blank" rel="noopener noreferrer">Nuxt</a>.

## What is Nuxt?

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Nuxt project

To get up and running quickly, we will follow the official Nuxt <a href="https://nuxt.com/docs/getting-started/installation#new-project">installation</a> guide to create a new Nuxt project. In your terminal, run the following command:

```bash theme={null}
npx nuxi@latest init nuxt-with-formbox
```

After the prompts, the nuxi command will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd nuxt-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:3000`. You should see a new Nuxt application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Nuxt project

Now that we have a new Nuxt project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Nuxt <a href="https://tailwindcss.com/docs/guides/nuxtjs#modules">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `app.vue` file within the root of the `root` directory and replace everything in the file with the following code block:

```jsx app.vue theme={null}
<template>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        ></textarea>
      </div>
      <button
        type="submit"
        class="
          bg-blue-500
          text-white
          px-4
          py-2
          rounded-md
          hover:bg-blue-600
          focus:outline-none focus:shadow-outline-blue
        "
      >
        Send Message
      </button>
    </form>
  </div>
</template>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:3000` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# React
Source: https://docs.formbox.app/guides/react

Learn how to integrate your Formbox form with <a href="https://react.dev" target="_blank" rel="noopener noreferrer">React</a>.

## What is React?

React is a popular open-source JavaScript library used for building user interfaces.
It provides a declarative and component-based architecture that makes creating user
interfaces simple and intuitive.

In this guide, we'll show you how to integrate your Formbox form with React.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new React project

o get up and running quickly, let's use <a href="https://vitejs.dev/">Vite</a> to bootstrap a single-page React application. In your terminal, run the following command to create a new project:

```bash theme={null}
npm create vite@latest react-with-formbox -- --template react
```

Once everything is installed you will see a terminal message with instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

```bash theme={null}
cd react-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5173`. You should see a new React application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your React project

Now that we have a new React project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the React <a href="https://tailwindcss.com/docs/guides/vite#react">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `App.js` file within the `src` directory and replace everything in the file with the following code block:

```jsx App.js theme={null}
import "./App.css";

export default function App() {
  return (
    <div className="max-w-md mx-auto py-20 bg-white">
      <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
      <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="John Doe"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="john@example.com"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-6">
          <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            placeholder="How can we help you?"
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
        >
          Send Message
        </button>
      </form>
    </div>
  );
}
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5173` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Remix
Source: https://docs.formbox.app/guides/remix

Learn how to integrate your Formbox form with <a href="https://remix.run" target="_blank" rel="noopener noreferrer">Remix</a>.

## What is Remix?

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Remix project

To get up and running quickly, we will follow the official Remix <a href="https://nextjs.org/docs/getting-started/installation">Quick Start</a> guide to create a new Remix project. In your terminal, run the following command:

```bash theme={null}
npx create-remix@latest
```

After the prompts, create-remix will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd remix-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5174`. You should see a new Remix application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Remix project

Now that we have a new Remix project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Remix <a href="https://tailwindcss.com/docs/guides/remix">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `_index.tsx` file within the root of the `app/routes` directory and replace everything in the file with the following code block:

```jsx _index.tsx theme={null}
import type { MetaFunction } from '@remix-run/node';

export const meta: MetaFunction = () => {
  return [{ title: 'Remix with Formbox' }];
};

export default function Index() {
  return (
    <div className="max-w-md mx-auto py-20 bg-white">
      <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
      <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
        <div className="mb-4">
          <label
            htmlFor="name"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="John Doe"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-4">
          <label
            htmlFor="email"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="john@example.com"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-6">
          <label
            htmlFor="message"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            placeholder="How can we help you?"
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
        >
          Send Message
        </button>
      </form>
    </div>
  );
}
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5174` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Svelte
Source: https://docs.formbox.app/guides/svelte

Learn how to integrate your Formbox form with <a href="https://svelte.dev/" target="_blank" rel="noopener noreferrer">Svelte</a>.

## What is Svelte?

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Svelte project

To get up and running quickly, we will follow the official Svelte <a href="https://kit.svelte.dev/docs/creating-a-project">Getting Started</a> guide to create a new Svelte project. In your terminal, run the following command:

```bash theme={null}
npm create svelte@latest svelte-with-formbox
```

The first command will scaffold a new project in the `svelte-with-formbox` directory asking you if you'd like to set up some basic tooling such as TypeScript. Once all questions are answered, it will begin scaffolding your project and provide instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

```bash theme={null}
cd svelte-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5173`. You should see a new Svelte application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Svelte project

Now that we have a new Svelte project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Svelte <a href="https://tailwindcss.com/docs/guides/sveltekit">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `+page.svelte` file within the `src/routes` directory and replace everything in the file with the following code block:

```jsx +page.svelte theme={null}
<svelte:head>
	<title>Svelte with Formbox</title>
</svelte:head>

<section>
	<div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/your-form-id" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        ></textarea>
      </div>
      <button
        type="submit"
        class="
          bg-blue-500
          text-white
          px-4
          py-2
          rounded-md
          hover:bg-blue-600
          focus:outline-none focus:shadow-outline-blue
        "
      >
        Send Message
      </button>
    </form>
  </div>
</section>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5173` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Vue
Source: https://docs.formbox.app/guides/vue

Learn how to integrate your Formbox form with <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer">Vue</a>.

## What is Vue?

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, making it a great choice for building web applications.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Vue project

To get up and running quickly, we will follow the official Vue <a href="https://vuejs.org/guide/quick-start.html">Quick Start</a> guide to create a new Vue project. In your terminal, run the following command:

```bash theme={null}
npm create vue@latest
```

The command will install and execute <a href="https://github.com/vuejs/create-vue">create-vue</a>, the official Vue project scaffolding tool. The CLI will then present you with prompts for a number of optional features such as TypeScript and testing support. Once all questions are answered, it will begin scaffolding your project and provide instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

```bash theme={null}
cd vue-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5173`. You should see a new Vue application running.

<Frame>
  <img />
</Frame>

## Adding your Formbox form to your Vue project

Now that we have a new Vue project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Vue <a href="https://tailwindcss.com/docs/guides/vite#vue">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `App.vue` file within the `src` directory and replace everything in the file with the following code block:

```jsx App.vue theme={null}
<template>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        ></textarea>
      </div>
      <button
        type="submit"
        class="
          bg-blue-500
          text-white
          px-4
          py-2
          rounded-md
          hover:bg-blue-600
          focus:outline-none focus:shadow-outline-blue
        "
      >
        Send Message
      </button>
    </form>
  </div>
</template>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5173` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img />
</Frame>


# Webflow
Source: https://docs.formbox.app/guides/webflow

Learn how to integrate your Formbox form with <a href="https://webflow.com" target="_blank" rel="noopener noreferrer">Webflow</a>.

Comming soon...


# Airtable
Source: https://docs.formbox.app/integrations/airtable

With the Airtable integration, you can send your Formbox form submissions straight to a an Airtable database. <br/><br/>This is a great way to manage and share your form results with your team and create visual reports of your data.

## How it works

Once the integration is setup, a new row is automatically added to your Airtable database every time someone submits your form. The new submission will automatically be added to the database.

## Setting up the integration

Go to the **Integrations** tab of your Formbox form and click **Connect** on the Airtable integration.

<Frame>
  <img />
</Frame>

A window will pop up, prompting you to connect your Airtable account. Select the Airtable account you want to use and allow Formbox to access your Airtable workspaces.

Once the integration is connected, Formbox will ask you what Airtable base and table you want to send your form submissions to.

<Frame>
  <img />
</Frame>

You can access the Airtable base by clicking on the **Open Airtable Database** button in the dropdown menu.

<Frame>
  <img />
</Frame>

You can rename the Airtable Database if you want without affecting the integration.

<Frame>
  <img />
</Frame>

## Customizing the integration

You can customize the Google Sheets integration by clicking on the **Manage integration** option in the dropdown menu.

<Frame>
  <img />
</Frame>

Here you can change the Airtable database where the form submissions are sent to, by updating the **Base** and **Table** fields.

<Frame>
  <img />
</Frame>

## Deleting the integration

If you no longer want your integration to send form submissions to your spreadsheet, click the **Delete** option in the dropdown menu. Removing the integration won’t delete the Google Sheet document itself, but any future form submissions will stop being added to that spreadsheet.

<Frame>
  <img />
</Frame>


# Google Sheets
Source: https://docs.formbox.app/integrations/google-sheets

With the Google Sheets integration, you can send your Formbox form submissions straight to a Google Sheet. <br/><br/>This is a great way to manage and share your form results with your team and create visual reports of your data.

## How it works

Once the integration is set up, a new row is automatically added to your Google Sheet every time someone submits your form.

## Setting up the integration

Go to the **Integrations** tab of your Formbox form and click **Connect** on the Google Sheets integration.

<Frame>
  <img />
</Frame>

A window will pop up, prompting you to connect your Google account. Select the Google account you want to use and allow Formbox to access your Google Sheets.

Once the integration is connected, Formbox will automatically create a new Google Sheet with the same name as your form. You can access the google sheet by clicking on the **Open Google Sheet** button in the dropdown menu.

<Frame>
  <img />
</Frame>

You can rename the Google Sheet if you want without affecting the integration.

<Frame>
  <img />
</Frame>

## Editing your spreadsheet

You can style your Google Sheet, freeze rows, add filters, add formulas, add custom columns, and edit existing rows.

Formbox uses the column headers created from your form fields to keep new submissions organized. If those headers are renamed, deleted, or moved out of the first row, new submissions may appear in unexpected columns or Formbox may add the missing columns back.

For the most reliable syncing, keep the first row as the header row and avoid changing the Formbox-generated column names.

## Customizing the integration

You can customize the Google Sheets integration by clicking on the **Manage integration** option in the dropdown menu.

<Frame>
  <img />
</Frame>

Here you can change the Google Sheet where the form submissions are sent to, by updating the **Spreadsheet Id** field.

<Frame>
  <img />
</Frame>

You can find the **Spreadsheet Id** in the URL of your Google Sheet. It is the long string of letters and numbers between `/d/` and `/edit` of the URL.

<Frame>
  <img />
</Frame>

## Deleting the integration

If you no longer want your integration to send form submissions to your spreadsheet, click the **Delete** option in the dropdown menu. Removing the integration won’t delete the Google Sheet document itself, but any future form submissions will stop being added to that spreadsheet.

<Frame>
  <img />
</Frame>


# Mailchimp
Source: https://docs.formbox.app/integrations/mailchimp

With the Mailchimp integration, you can add your form submissions to your Mailchimp audience list. This is a great way to grow your email list with the leads you collect from your forms.

## How it works

When a submission is received by a form with a configured Mailchimp integration, a new subscriber will be added to your Mailchimp audience list.

## Setting up the integration

Go to the **Integrations** tab of your Formbox form and click **Connect** on the Mailchimp integration.

<Frame>
  <img />
</Frame>

A window will pop up, prompting you to connect your Mailchimp account. Sign in with the account you want to use and allow Formbox to access your Mailchimp audiences.

Once the integration is connected, Formbox will ask you what Mailchimp audience you want to sync your form submission emails to.

<Frame>
  <img />
</Frame>

You can rename your Mailchimp audience if you want without affecting the integration.

An example HTML form that you can use to collect emails and names for your Mailchimp audience list:

```html theme={null}
<form action="https://api.formbox.app/s/xxxxxxxxxxxxx" method="POST">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <input type="text" name="add1" placeholder="Address" />
  <input type="text" name="city" placeholder="City" />
  <input type="text" name="state" placeholder="State" />
  <input type="text" name="zip" placeholder="Zip Code" />

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

## Customizing the integration

You can customize the Mailchimp integration by clicking on the **Manage integration** option in the dropdown menu.

<Frame>
  <img />
</Frame>

Here you can change the Mailchimp audience where the form submission emails are added to, by updating the **Mailchimp List** field.

<Frame>
  <img />
</Frame>

## Deleting the integration

If you no longer want your integration to add emails to your Mailchimp audience list, click the **Delete** option in the dropdown menu. Removing the integration means that Formbox will not add emails to your list for any future form submissions.

<Frame>
  <img />
</Frame>


# Notion
Source: https://docs.formbox.app/integrations/notion



Comming soon...


# Integrations overview
Source: https://docs.formbox.app/integrations/overview

Formbox offers a wide range of direct integrations to help you streamline your processes and save time.

<CardGroup>
  <Card title="Google Sheets" href="/integrations/google-sheets">
    Send submissions to a Google spreadsheet.
  </Card>

  <Card title="Airtable" href="/integrations/airtable">
    Send submissions to Airtable.
  </Card>

  <Card title="Webhooks" href="/integrations/webhooks">
    Send webhook requests for submissions.
  </Card>

  <Card title="Mailchimp" href="/integrations/mailchimp">
    Add responses as subscribers in Mailchimp
  </Card>

  <Card title="Slack" href="/integrations/slack">
    Send Slack messages for new submissions.
  </Card>

  <Card title="Notion" href="/integrations/notion">
    Send submissions to Notion.
  </Card>

  <Card title="Zapier" href="/integrations/zapier">
    Send submissions to your favorite tools.
  </Card>
</CardGroup>


# Slack
Source: https://docs.formbox.app/integrations/slack

With the Slack integration, you can get notified in a Slack channel when a form submission is received.

## How it works

When a form submission is received, Formbox sends a notification to a Slack channel of your choice. The notification includes the form submission data, such as the form fields and the form name.

## Setting up the integration

Go to the **Integrations** tab of your Formbox form and click **Connect** on the Slack integration.

<Frame>
  <img />
</Frame>

A window will pop up, prompting you to connect your Slack account. Sign in with the account you want to use and allow Formbox to access your Slack channels.

Once the integration is connected, Formbox will ask you what Slack channel you want to sync your form submissions to.

<Frame>
  <img />
</Frame>

## Customizing the integration

You can customize the Mailchimp integration by clicking on the **Manage integration** option in the dropdown menu.

<Frame>
  <img />
</Frame>

Here you can change the Slack channel where the form submissions are added to, by updating the **Select Slack channel or DM** field.

<Frame>
  <img />
</Frame>

Example Slack message from Formbox:

<Frame>
  <img />
</Frame>

### How to add Formbox to your private Slack channel

* Open your private channel in the Slack app
* Click the channel name in the conversation header
* Select the **Integrations** tab and click on **Add apps**

<Frame>
  <img />
</Frame>

* Search for Formbox and click **Add**.

<Frame>
  <img />
</Frame>

* Now you can select the private channel in the **Select Slack channel or DM** field in the Formbox Slack integration settings.

<Note>
  If you don't see a channel or DM, you need to invite Formbox's Slack bot to the conversation by
  typing **/invite @formbox** in the Slack channel or DM.
</Note>

## Deleting the integration

If you no longer want your integration to send messages to your Slack channels, click the **Delete** option in the dropdown menu. Removing the integration means that Formbox will not send messages to any of your Slack channels for any future form submissions.

<Frame>
  <img />
</Frame>


# Webhooks
Source: https://docs.formbox.app/integrations/webhooks

If you only need to forward submission data to your app or service, then a custom webhook is a great solution. Formbox supports settiing up webhooks for your forms <br/><br/>This instant notification lets you build automated workflows to take action on form entries.

## How it works

When a submission is received by a form with a configured webhook URL, Formbox will queue up a post request to your service on your behalf. If the webhook fails, we will retry up to 5 times with an exponential backoff.

## Setting up the integration

Go to the **Integrations** tab of your Formbox form and click **Connect** on the Webhook integration.

<Frame>
  <img />
</Frame>

A window will pop up, prompting you to add an enpoint url for your webhook. This is the url that we will send the HTTP POST request to on successful submissions.

<Frame>
  <img />
</Frame>

The payload format we send to your service will include exactly what we receive on the inital form submission.

Example payload:

```json theme={null}
{
  "formId": "xxxxxxxxxxxxxxxxxxx",
  "submissionId": "xxxxxxxxxxxxxxxxxxx",
  "data": {
    "name": "John Doe",
    "email": "johndoe@example.com",
    "message": "Some message here."
  }
}
```

Make sure you have a publicly available HTTP API that can receive requests. If you don’t, you can use something like <a href="https://requestcatcher.com">requestcatcher.com</a> or <a href="https://webhook.site">webhook.site</a> to test the webhook integration out.

## Customizing the integration

Once the integration is setup you can customize the Webhook integration by clicking on the **Manage integration** option in the dropdown menu.

<Frame>
  <img />
</Frame>

Here you can change the Webhook endpoint url where the form submissions are sent to.

<Frame>
  <img />
</Frame>

## Deleting the integration

If you no longer want your integration to send form submissions to your webhook, click the **Delete** option in the dropdown menu. Any future form submissions will stop being sent to your webhook endpoint url.

<Frame>
  <img />
</Frame>


# Zapier
Source: https://docs.formbox.app/integrations/zapier

Zapier can help you automate tasks and build workflows between thousands of different apps through automated connections called Zaps. You can set them up in minutes with no coding.

## How to setup the Zapier integration

<Note>
  Right now there is no native integration with Zapier. This documentation will show you how to
  setup a Zap using the Webhook integration.
</Note>

<Frame>
  <iframe />
</Frame>


# Introduction
Source: https://docs.formbox.app/introduction

Welcome to the Formbox documentation site. <br/><br/>Formbox is a powerfull forms backend for you HTML forms. It allows you to collect submissions from your forms without any backend code. You can get email notifications for new submissions, upload files from your forms, and even integrate with services like Google Sheets, Slack, and more. This documentation will guide you through the process of setting up and managing your forms with Formbox.

## Creating your first form

Get started with Formbox by creating your first form. You can create a form from scratch or use one of our templates to get started quickly.

### Before we start, here is what you'll need:

* A Formbox account. You can [sign up here](https://app.formbox.app/auth/login)
* An HTML form. You can create a new form or use one of our templates.
* Basic Javascript knowledge (optional)

#### Step 1. Creating an HTML form

Create a simple contact form using HTML:

```html theme={null}
<form action="#" method="POST">
  <label for="name">Name</label>
  <input type="name" name="name" id="name" />

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

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

<Info>
  The most important aspect of an HTML form is the `action="#"` attribute, which
  specifies the URL where you want to process form data. In a typical website,
  it will look like this:

  ```html theme={null}
  <form action="https://mysite.com/myform.php" method="POST">
    <label for="email">What is your Email Address?</label>
    <input type="email" name="email" id="email" />
    <button type="submit">Subscribe</button>
  </form>
  ```

  This sends form data to `https://mysite.com/form.php`, where you would need to write back-end code (in PHP, Node.js, Go, Ruby, etc.) to process the data.
  Formbox handles this process for you by providing a unique URL that processes your form without any back-end code. Your unique URL allows you to receive emails from your form, send auto-responses, upload files, and trigger integrations.
  An example Formbox endpoint looks like this: `https://api.formbox.app/s/XXXXXXXX`
</Info>

#### Step 2. Creating a form in Formbox

First we need to create an Organization in Formbox dashboard. You can do this by clicking on the `Create organization` button in the dashboard.

<Frame>
  <img />
</Frame>

When you create an organization, you will be redirected to the organization page. Click on the `Create form` button to create a new form.

<Frame>
  <img />
</Frame>

When you create a form, you will be redirected to the form setup page where you can get your unique form endpoint. Copy this endpoint.

<Frame>
  <img />
</Frame>

<Tip>
  Your unique endpoint is a bridge between your form and Formbox that will deliver submissions.
</Tip>

#### Step 3. Adding the form endpoint to your HTML form

Paste the unique endpoint URL you copied in step 2 into your form's `action` attribute:

```html theme={null}
//this is sample endpoint change it with your endpoint that you copied in step 2
<form action="https://api.formbox.app/s/{your_form_api}" method="POST">
  <label for="name">Name</label>
  <input type="name" name="name" id="name" />

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

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

Now you have successfully created your first form with Formbox. You can test your form by submitting some data and viewing your submission in the dashboard.

<Frame>
  <img />
</Frame>

Congratulations! You're now ready to take full advantage of Formbox, including features like:

* ✅ Email notifications
* ✅ Google ReCaptcha
* ✅ Spam blocking
* ✅ Google sheets integration
* ✅ Webhooks
* ✅ CSV & JSON export
* ✅ Autoresponses

### Things to know

1. Each input field must have a `name` attribute

```html theme={null}
<input name="email" type="email" />
<input name="fullName" type="text" />
<textarea name="message"><textarea>
```

2. Content-Type: JSON, form-data, and x-www-form-urlencoded are supported. If you're just using an HTML form without JavaScript, you don't need to worry. However, if you're using JavaScript to make a request, you should set this attribute.

3. For file uploads, set the `Content-Type` to `multipart/form-data`.

4. If you want to receive a JSON response message, you must set the HTTP `Accept` header to `application/json`.