---
title: "Add forms to Webflow"
description: "Connect Forminit to your Webflow site and get powerful form handling with file uploads, spam protection, and detailed analytics."
url: https://forminit.com/docs/webflow/
---

# Add forms to Webflow

![Forminit+Webflow](https://forminit.com/guides/webflow/webflow-thumbnail-min.png) 

Connect Forminit to your Webflow site and get powerful form handling with file uploads, spam protection, and detailed analytics.

## What is Forminit?

Forminit is a form backend service that handles everything that happens after a user clicks "Submit." Instead of building your own server to process form data, Forminit receives submissions, validates them, stores the data, and can notify you or connect to other apps without writing backend code.

You build the form in Webflow, and Forminit takes care of the rest.

## Why Use Forminit with Webflow?

Webflow's native forms work well for simple use cases, but Forminit unlocks advanced capabilities:

| Feature | Webflow Forms | Forminit |
|---------|---------------|----------|
| File uploads | Requires Business plan ($39/mo) | Included on all plans |
| GDPR compliance | No | Built-in |
| Spam protection | Basic | Advanced (Cloudflare Turnstile, reCAPTCHA, hCaptcha, honeypot) |
| Server-side validation | No | Yes |
| Full-text search | No | Yes |
| Submission reports | Basic | Detailed analytics |
| UTM tracking | No | Automatic |

## Requirements

- **Webflow account** on Starter plan or higher (custom code access required)
- **Forminit account** ([sign up free](https://forminit.com))

---

## Setup Guide

### Step 1: Get Your Form ID and Endpoint

1. Create a new form in Forminit
2. Copy your **Form ID** and **Form Endpoint**
3. Set authentication mode to **Public**

![Get form endpoint and ID](https://forminit.com/guides/webflow/webflow-1-min.png)

### Step 2: Add the Forminit Script to Your Page

1. In Webflow, go to **Pages** → select your page → **Page Settings**
2. Scroll to **Before `</body>` tag**
3. Paste the code below
4. Replace `YOUR-FORM-ID` with your actual Form ID (e.g., `va0igelxfw9`)

![Add script before closing body tag](https://forminit.com/guides/webflow/webflow-2-min.png)

Paste below code into your Webflow Page Settings. 

```html
<script src="https://forminit.com/sdk/v1/forminit.js"></script>

<script>
  const forminit = new Forminit();

  // ✅ Your Forminit Form ID (from Forminit dashboard)
  const FORM_ID = 'YOUR-FORM-ID';

  // ✅ Your Webflow <form> element must have this ID
  const WEBFLOW_FORM_ID = 'contact-form';

  const form = document.getElementById(WEBFLOW_FORM_ID);

  if (!form) {
    console.warn(`Form not found: #${WEBFLOW_FORM_ID}`);
  } else {
    const formBlock = form.closest('.w-form') || document;

    const button =
      form.querySelector('input.w-button[type="submit"]') ||
      form.querySelector('button.w-button');

    const doneBlock = formBlock.querySelector('.w-form-done');
    const failBlock = formBlock.querySelector('.w-form-fail'); 

    const show = (el) => { if (el) el.style.display = 'block'; };
    const hide = (el) => { if (el) el.style.display = 'none'; };

    hide(doneBlock);
    hide(failBlock);

    const originalLabel = button
      ? (button.tagName === 'INPUT' ? button.value : button.textContent)
      : '';

    form.addEventListener('submit', async (event) => {
      event.preventDefault();

      hide(doneBlock);
      hide(failBlock);

      if (button) {
        button.disabled = true;

        if (button.tagName === 'INPUT') button.value = 'Sending...';
        else button.textContent = 'Sending...';
      }

      const formData = new FormData(form);
      const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

      if (button) {
        button.disabled = false;
        if (button.tagName === 'INPUT') button.value = originalLabel;
        else button.textContent = originalLabel;
      }

      if (error) {
        show(failBlock);
        return;
      }

      // Optional: Redirect to a thank-you page
      // You can configure redirectUrl in your Forminit form settings
      // if (redirectUrl) {
      //   window.location.href = redirectUrl;
      // }

      form.reset();
      form.style.display = 'none';
      show(doneBlock);
    });
  }
</script>
```

---

### Step 3: Add a Form Block

1. Open the **Add Elements** panel (keyboard shortcut: `A`)
2. Drag a **Form Block** onto your page

![Add form block element](https://forminit.com/guides/webflow/webflow-3-min.png)

---

### Step 4: Set the Form ID

1. Select the `<form>` element inside your form block
2. In the **Element Settings** panel, set the **ID** to `contact-form`

This must match the ID in your script:

```javascript
const WEBFLOW_FORM_ID = 'contact-form';
```

![Set form ID to contact-form](https://forminit.com/guides/webflow/webflow-4-min.png)

---

### Step 5: Configure the Form Action

1. Select the form block
2. Open **Form Settings**
3. Under **Send To**, remove any existing webhooks or email notifications
4. Add a **Custom Action**
5. Paste your Forminit form endpoint
6. Set method to **POST**

![Configure custom form action](https://forminit.com/guides/webflow/webflow-5-min.png)

---

### Step 6: Rename Input Fields

Select each input field and update the **Name** attribute to match Forminit's field naming convention.

**For submitter information (Sender Block):**

| Field | Name Attribute |
|-------|----------------|
| Email | `fi-sender-email` |
| First Name | `fi-sender-firstName` |
| Last Name | `fi-sender-lastName` |
| Phone | `fi-sender-phone` |

**For other fields (Single Blocks):**

| Field Type | Name Pattern | Example |
|------------|--------------|---------|
| Text | `fi-text-{name}` | `fi-text-message` |
| Select/Dropdown | `fi-select-{name}` | `fi-select-department` |
| Number | `fi-number-{name}` | `fi-number-budget` |

See all available form blocks: [Form Blocks documentation](https://forminit.com/docs/form-blocks/)

![Rename input fields](https://forminit.com/guides/webflow/webflow-6-min.png)

---

### Step 7: Test Your Form

1. Publish your Webflow site
2. Submit a test entry
3. View the submission in your [Forminit dashboard](https://app.forminit.com)

For select fields, you'll see analytics showing how often each option was chosen across all submissions.

![View submissions in dashboard](https://forminit.com/guides/webflow/webflow-7-min.png)

---

## Adding File Uploads

Webflow's native file upload requires a Business plan. With Forminit, file uploads work on any plan.

### Add a File Input

1. Open the **Add Elements** panel
2. Drag a **Code Embed** element into your form block
3. Add one of the following code snippets:

**Single file upload:**

```html
<input type="file" name="fi-file-resume" />
```

**Multiple file upload:**

```html
<input type="file" name="fi-file-documents[]" multiple />
```

4. Save and publish your site

![Add file upload via code embed](https://forminit.com/guides/webflow/webflow-8-min.png)

---

## Redirecting After Submission

By default, the form displays a success message after submission. If you'd prefer to [redirect users](https://forminit.com/docs/redirections/) to a thank-you page or another URL:

1. In your Forminit dashboard, open your form settings and set your **Redirect URL**
2. In your Webflow page script, find the commented redirect code and uncomment it:

```javascript
if (redirectUrl) {
  window.location.href = redirectUrl;
}
```

The `redirectUrl` value comes from your Forminit form settings, so you can change the destination anytime without updating your Webflow code.

---

## Troubleshooting

**Form not submitting?**
- Verify the form ID matches in both Webflow and your script
- Check that authentication mode is set to **Public** in Forminit
- Open browser developer tools to check for JavaScript errors

**Success/error messages not showing?**
- Ensure your form block has the default `.w-form-done` and `.w-form-fail` elements

**File uploads not working?**
- File inputs must use the `fi-file-{name}` naming pattern
- For multiple files, add `[]` to the name and include the `multiple` attribute

---

## Next Steps

- [Add spam protection with Cloudflare Turnstile](https://forminit.com/docs/cloudflare-turnstile/)
- [Add spam protection with reCAPTCHA](https://forminit.com/docs/recaptcha/)
- [Set up email notifications](https://forminit.com/docs/email-notifications/)
- [Connect to Zapier or Make](https://forminit.com/docs/zapier/)