Skip to content
FormSubmit

Webflow

Webflow forms: send submissions to email, Google Sheets and webhooks

Point your Webflow forms at a custom form backend to email submissions, filter spam and send them to Google Sheets, Slack or webhooks, keeping your design.

3 min readUpdated Oct 9, 2026

To send Webflow forms to email, Google Sheets or a webhook, point them at a form backend: select the Form Block, open its settings, set Action to your FormSubmit endpoint and Method to POST. Your design stays exactly the same; submissions are emailed to you, stored, spam-filtered and forwarded to any integration.

How Webflow forms work by default

Out of the box, a Webflow form sends submissions to Webflow, which emails them to the addresses in your site settings and lists them under Site settings → Forms. That works for a simple contact form, but you're limited to what Webflow offers for notifications, spam handling and integrations.

When you set a custom Action on the Form Block, the browser sends the submission to that URL instead. Webflow stops handling it, and the service at that URL takes over.

Why use an external backend with Webflow?

Webflow's built-in form handling is convenient, but plan limits on submissions, limited integrations and routing notifications per form can get in the way — especially for agencies managing many client sites. With FormSubmit you get webhooks, Slack, Discord, Google Sheets, Airtable, Mailchimp and Kit on every plan, per-form recipients and autoresponders.

  1. In the Designer, select the Form Block (not the inner form element).
  2. Open Element settings (the gear icon).
  3. Set Action to https://formsubmit.app/f/YOUR_FORM_ID.
  4. Set Method to POST.
  5. Check each input's Name field under its settings — this becomes the field label in emails (and the column header if you send the form to Google Sheets).
  6. Publish the site and submit a test from the live domain.

To send visitors to a Webflow page afterwards, add a hidden input via an Embed inside the form:

html
<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

Option B: paste a form in an Embed element

Embed element
<!--
  Webflow option A (keep your designed form):
    1. Select your Form Block → Settings.
    2. Set Action to: https://formsubmit.app/f/YOUR_FORM_ID
    3. Set Method to: POST
    4. Make sure every input has a Name.

  Webflow option B: paste the form below into an Embed element.
-->
<form action="https://formsubmit.app/f/YOUR_FORM_ID" method="POST" class="fs-form">
  <div class="fs-field">
    <label for="fs-name" class="fs-label">Name</label>
    <input id="fs-name" type="text" name="name" placeholder="Jane Doe" required class="fs-input">
  </div>
  <div class="fs-field">
    <label for="fs-email" class="fs-label">Email</label>
    <input id="fs-email" type="email" name="email" placeholder="jane@example.com" required class="fs-input">
  </div>
  <div class="fs-field">
    <label for="fs-message" class="fs-label">Message</label>
    <textarea id="fs-message" name="message" rows="5" placeholder="How can we help?" required class="fs-input"></textarea>
  </div>
  <!-- Honeypot: leave this hidden field empty to catch bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <!-- Optional: where to send people after submitting -->
  <!-- <input type="hidden" name="_redirect" value="https://yoursite.com/thanks"> -->
  <button type="submit" class="fs-button">Send</button>
</form>

<style>
  .fs-form { max-width: 32rem; margin: 0 auto; display: grid; gap: 1.1rem; font-family: system-ui, sans-serif; }
  .fs-field { display: grid; gap: 0.35rem; border: 0; padding: 0; margin: 0; }
  .fs-label { font-size: 0.875rem; font-weight: 600; color: #18181b; }
  .fs-input { width: 100%; box-sizing: border-box; border: 1px solid #d4d4d8; border-radius: 0.5rem; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.9rem; }
  .fs-input:focus { outline: 2px solid #6366f155; border-color: #6366f1; }
  .fs-choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
  .fs-help { font-size: 0.75rem; color: #71717a; margin: 0; }
  .fs-button { background: #18181b; color: #fff; border: 0; border-radius: 0.5rem; padding: 0.7rem 1rem; font-weight: 600; cursor: pointer; }
  .fs-button:hover { background: #27272a; }
</style>

Send Webflow form submissions to email

Once the action points at FormSubmit, every Webflow form submission is emailed to you within seconds. Reply-To is set to the visitor's address, so pressing Reply answers them directly. From the form's Notifications settings you can:

  • add more recipients, for example a client and your agency inbox (each confirms by email first);
  • set the subject with variables, such as New {{service}} enquiry from {{name}};
  • send the visitor an automatic confirmation with the autoresponder;
  • switch to a daily or weekly digest for busy forms.

To set a subject for one particular form without touching the dashboard, add a hidden _subject input in an Embed inside the Form Block.

Send Webflow forms to Google Sheets, Slack or a webhook

Integrations are set up per form in FormSubmit, with no Zapier step in between:

  • Google Sheets: each submission becomes a row, with your Webflow input Names as columns.
  • Slack and Discord: post new leads to a channel.
  • Webhooks: send signed JSON to your CRM, Make, n8n or your own code.

Stop spam on Webflow forms

Webflow sites attract form spam like any other site. The hidden _gotcha honeypot in the snippet above catches most bots, and FormSubmit also checks timing, content and rate limits. Spam goes to a separate folder and doesn't count toward your quota. For stubborn spam, add hCaptcha, Turnstile or reCAPTCHA using an Embed inside the form. More in how to stop form spam.

Troubleshooting Webflow forms

  • Nothing arrives. Custom actions only run on the published site, not in the Designer preview. Publish, then test from the live URL.
  • Fields are missing in the email. An input without a Name isn't sent. Check each field's settings.
  • The Webflow success message doesn't show. With a custom action, the visitor leaves the page for the thank-you page. Use _redirect to send them to your own Webflow page instead.
  • Submissions are rejected. If you set an allowlist, include both the webflow.io staging domain and your custom domain.

Allowlist

Add both yoursite.webflow.io and your custom domain to the form's allowlist so submissions from staging and production work.

Frequently asked questions

Will I lose Webflow's success and error messages?

With a custom action, Webflow hands the submission to the external URL. Visitors are redirected to FormSubmit's thank-you page or your own redirect URL.

Do I need custom code?

No. Setting the Form Block action is a built-in Webflow setting. Custom code is only needed if you want an embed instead.

How do I send Webflow form submissions to email?

Set the Form Block's Action to your FormSubmit endpoint and Method to POST. Every submission is emailed to your account address, and you can add more recipients under Notifications in your FormSubmit dashboard.

Can I send Webflow forms to Google Sheets without Zapier?

Yes. Connect Google Sheets on the form in FormSubmit and each Webflow submission is added as a new row. The input Names in Webflow become the column headers.

Why are my Webflow form submissions not arriving?

Check that the site is published, that every input has a Name, that Method is POST, and that both your webflow.io and custom domains are on the form's allowlist if you use one. Spam-filtered submissions appear in the form's Spam folder.

Can Webflow forms accept file uploads with FormSubmit?

The Form Block has no setting for multipart encoding, so use an Embed element with your own form and enctype="multipart/form-data" for file uploads.

Keep reading

Your form backend is 60 seconds away

Sign up with Google or email, create a form, paste the endpoint. Free forever for small sites — no credit card.