To send Webflow forms to FormSubmit, 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.
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.
Option A: keep your Webflow form (recommended)
- In the Designer, select the Form Block (not the inner form element).
- Open Element settings (the gear icon).
- Set Action to
https://formsubmit.app/f/YOUR_FORM_ID. - Set Method to POST.
- Check each input's Name field under its settings — this becomes the field label in emails.
- 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:
<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
<!--
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>Allowlist
Add both yoursite.webflow.io and your custom domain to the form's allowlist so submissions from staging and production work.