How to Add a Contact Form to Webflow

Webflow has native form handling, but it comes with limits. On the free site plan, form submissions are capped at 25. Even on paid plans, submissions are stored inside Webflow and you only get basic email notifications. If you want a dedicated submissions dashboard, spam protection, or the ability to forward entries to multiple email addresses, a form backend service like FormWit is a better fit.

This guide walks you through adding a contact form to Webflow that sends submissions to FormWit instead of Webflow's servers. You have two approaches: modify the action URL on Webflow's built-in form element, or use a custom HTML embed for full control. We cover both.

What you need

A Webflow project (free or paid plan)
A free FormWit account
Basic familiarity with the Webflow Designer

Why use FormWit instead of Webflow's built-in forms?

Webflow's native form handling works, but it has real constraints:

Submission limits: Free plans cap at 25 submissions total (not per month). Paid site plans include 500-2,500 depending on tier.
No real dashboard: Webflow stores submissions in a flat list inside the project settings. There is no search, filtering, or export-on-demand.
Single notification email: Webflow sends a notification to the site owner's email address. There is no way to add multiple recipients per form.
No spam honeypot: Webflow relies on reCAPTCHA, which adds friction for users. FormWit uses an invisible honeypot field that blocks bots without annoying real visitors.
No redirect control from the form: Webflow's redirect behavior is configured per-form in the Designer, not inline. FormWit lets you set redirects via a hidden field, making it portable across environments.

FormWit's free plan gives you unlimited forms, 100 submissions per month, email notifications, and a dashboard to view and manage entries. It works alongside Webflow without interfering with your design.

Step 1: Create your FormWit endpoint

Create a free FormWit account
Click Create Form in your dashboard
Copy the form endpoint URL. It looks like https://app.formwit.com/api/s/YOUR_FORM_ID

Keep this URL handy. You will paste it into the Webflow Designer in the next step.

Step 2: Build the form in Webflow Designer

You have two options here. Choose the one that fits your workflow.

Option A: Use Webflow's form element (recommended for most users)

This approach keeps the visual form builder intact. You just redirect where the submission goes.

In the Webflow Designer, add a Form Block element to your page (or select an existing one)
Inside the form block, add your fields: a text input for name, an email input for email, a textarea for message. Set the Name attribute on each field. This is critical. Webflow calls this the "Name" property in the element settings panel on the right. Use values like name, email, and message.
Select the Form Block element (not an individual input, the outer form wrapper)
In the element settings panel on the right, change the Action field to your FormWit endpoint URL: https://app.formwit.com/api/s/YOUR_FORM_ID
Set the Method to POST

That is all you need for a basic setup. When a visitor submits the form, the data goes to FormWit instead of Webflow's servers. You get an email notification and the submission appears in your FormWit dashboard.

Important: Once you change the action URL, Webflow's built-in form handling (including the success/error states in the Designer) will no longer apply. The form will redirect to FormWit's default thank-you page unless you configure a custom redirect (covered in Step 4).

Option B: Use an HTML Embed for full control

If you want complete control over the form markup, use Webflow's Embed element. This is useful if you need custom attributes, a specific field structure, or want to avoid Webflow's form wrapper entirely.

In the Designer, add an Embed element (found under Components or by searching)
Paste the following HTML:

<form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
  <!-- Honeypot field for spam protection -->
  <div style="display:none">
    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
  </div>

  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Your name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" placeholder="How can we help?" rows="5" required></textarea>

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

Replace YOUR_FORM_ID with your actual endpoint ID from the FormWit dashboard.

The embed approach does not use Webflow's form styling. You will need to style the form yourself using a <style> block inside the embed or by adding Webflow utility classes. Here is a basic style block you can include above the form:

<style>
  .formwit-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: #333;
  }
  .formwit-form input,
  .formwit-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
  }
  .formwit-form button {
    background: #4f46e5;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
  }
  .formwit-form button:hover {
    background: #4338ca;
  }
</style>

Wrap your <form> in a <div class="formwit-form"> to scope the styles.

Step 3: Add honeypot spam protection

If you used Option B (the embed), the honeypot field is already included in the code above. If you used Option A (Webflow's form element), you need to add it manually.

In the Webflow Designer, there is no built-in way to add a hidden honeypot input to a form block. The workaround is to nest an Embed element inside the form block:

Select your Form Block element in the Designer
Inside the form, add an Embed element
Paste this code into the embed:

<div style="display:none">
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
</div>

This adds an invisible input field that bots typically fill in. FormWit automatically rejects any submission where the _gotcha field has a value. Real visitors will never see it. For more details on how this works and other spam prevention techniques, see our spam protection guide.

Step 4: Configure redirect and custom fields

Custom redirect URL

After a successful submission, FormWit shows a default thank-you page. To redirect visitors back to your Webflow site instead, add a hidden field with the name redirect_to:

For Option A (form block), add another Embed element inside the form with:

<input type="hidden" name="redirect_to" value="https://yoursite.webflow.io/thank-you" />

For Option B (full embed), add the hidden input directly inside your form markup:

<input type="hidden" name="redirect_to" value="https://yoursite.webflow.io/thank-you" />

Create a /thank-you page in your Webflow project so visitors land on a branded confirmation page. This is better UX than a generic page.

Adding custom fields

FormWit accepts any field names you send. Want to add a phone number, company name, or subject line? Add more inputs with descriptive name attributes:

<input type="tel" name="phone" placeholder="Phone number" />
<input type="text" name="company" placeholder="Company name" />

<select name="subject">
  <option value="">Select a topic</option>
  <option value="general">General inquiry</option>
  <option value="support">Support</option>
  <option value="sales">Sales</option>
</select>

Every named field shows up in your FormWit dashboard and in the email notification. No configuration needed on the backend.

Adding custom attributes in Webflow Designer

If you are using Option A and want to add attributes to Webflow's native form inputs (like tabindex or autocomplete), use Webflow's Custom Attributes feature:

Select the input element
In the element settings panel, scroll to the Custom Attributes section
Click + to add a new attribute
Enter the attribute name and value

This is helpful for accessibility and for ensuring each input sends the correct field name to FormWit.

Step 5: Test your form

Publish your Webflow site (or use the preview/staging URL)
Fill in the form and submit
Check your FormWit dashboard. The submission should appear within seconds
Check your email inbox for the notification

If the submission is not showing up, verify these common issues:

Action URL is correct: Make sure the action attribute points to https://app.formwit.com/api/s/YOUR_FORM_ID with your actual form ID.
Method is POST: Double-check that the form method is set to POST, not GET.
Field names exist: Every input must have a name attribute. In Webflow's Designer, this is the "Name" property in the right panel. Without it, the data will not be sent.
Published site: Form action URLs only work on the published site, not in the Webflow Designer preview.

AJAX submission without page reload (optional)

If you want the form to submit in the background without navigating away from the page, you can add a small JavaScript snippet. In the Webflow Designer, go to Project Settings > Custom Code > Footer Code and add:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form[action*="formwit.com"]');
  if (!form) return;

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    var data = new FormData(form);

    fetch(form.action, {
      method: 'POST',
      body: data,
    }).then(function(response) {
      if (response.ok) {
        form.style.display = 'none';
        var msg = document.createElement('p');
        msg.textContent = 'Thank you! Your message has been sent.';
        msg.style.cssText = 'padding:20px;text-align:center;font-size:18px;color:#059669;';
        form.parentNode.appendChild(msg);
      } else {
        alert('Something went wrong. Please try again.');
      }
    });
  });
});
</script>

This script intercepts the form submission, sends it via fetch, and replaces the form with a success message. No page reload, no redirect. It targets any form with a FormWit action URL, so it works with both Option A and Option B. For more on JavaScript-based form handling, see our HTML contact form guide.

Summary

Adding a contact form to Webflow with FormWit takes just a few minutes:

Create a FormWit account and copy your endpoint URL
Set the form action in Webflow Designer to your FormWit endpoint, or use an HTML embed for full control
Add a honeypot field for spam protection
Configure a redirect URL and any custom fields you need
Publish and test

You get a real submissions dashboard, email notifications, and spam protection without touching Webflow's submission limits. FormWit's free plan includes unlimited forms and 100 submissions per month. Get started free, or check out our ready-made form templates for copy-paste code.

Frequently asked questions

Can I replace Webflow's native form handler?

Yes. In the Webflow Designer, select the Form Block element and change the Action field to your FormWit endpoint URL. Set the Method to POST. Submissions now go to FormWit instead of Webflow's servers. You keep Webflow's visual form styling but get FormWit's dashboard, spam protection, and unlimited forms.

Does FormWit work with exported Webflow sites?

Yes. If you export your Webflow site and host it elsewhere, the form still works because the action attribute points to FormWit's external API. The form is just standard HTML with a POST to an external URL, so it works on any host.

Can I keep Webflow's form styling?

Yes. If you use Option A (modifying the action URL on Webflow's built-in Form Block), all of Webflow's visual styling stays intact. You only change where the data is sent. If you use Option B (HTML embed), you need to style the form yourself with CSS.