Formspree

Webflow processes form submissions natively, and on any paid Site plan the number of submissions is unlimited. The limits sit at the edges. The File upload element needs a Premium Site plan, a legacy Business Site plan, or one of the Ecommerce plans, and each upload button accepts a single file of up to 10MB, per Webflow's form file upload article. Sites exported for hosting elsewhere get no Webflow form processing at all.

Formspree takes over the submission side while you keep the form you designed. Point a form's action at a Formspree endpoint and submissions land in Formspree's dashboard inbox, with email notifications, Formshield spam filtering, and plugins that pass data on to Google Sheets, HubSpot, Salesforce, or Mailchimp. Embedded Formspree forms accept up to 10 files per submission at 25MB each on any paid Formspree plan, whatever your Webflow Site plan.

The swap suits agencies running forms across many client sites, since every Formspree plan includes unlimited forms and projects. It also suits teams whose forms carry attachments or have to land somewhere other than an inbox. Expat Savvy, an insurance business serving English speakers moving to Switzerland, captures leads through Webflow forms and routes them into a custom Supabase CRM through the Formspree API.

How to integrate Formspree with Webflow

What is Formspree? Formspree is a form backend, API, and email service for HTML and JavaScript forms. It stores submissions in a dashboard inbox and screens them with Formshield, its machine learning spam filter. From there it forwards data to email or to plugins. Pricing runs from a free tier through Personal, Professional, and Business, as listed on Formspree's plans page.

Teams pair the two when a Webflow site needs form handling that Webflow's own inbox does not cover. Résumé uploads on a site that is not on a Premium or Ecommerce plan are the common trigger, followed by autoresponses back to the submitter and rules that send different submissions to different destinations. Mikkeller, the Copenhagen craft beer group, connects native Webflow forms to Formspree endpoints so its marketing team can update them without developer involvement. Expat Savvy runs the same pattern one step further and reads submissions back out through the API.

The Formspree and Webflow integration supports these implementation methods:

• The native Form Block method points a Webflow form at a Formspree endpoint without writing code.
• Code Embed elements hold custom HTML forms, which is what adds AJAX, file uploads, and honeypot fields. The Formbutton widget goes in a Code Embed or in page or site custom code.
• The Webflow Data API and the Formspree API give you control over where submission data ends up, at the cost of server-side work.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Connect a Webflow Form Block to a Formspree endpoint

This is the zero-code path, and the one Formspree documents for contact forms in its own Webflow guide, linked from the sidebar. You keep the styling you built and change only where the data goes. Since October 14, 2025, form-level settings such as the custom action live on the form itself while you build the page rather than in the site dashboard.

To set up the integration:

1. In Formspree, click ++ Add New > New Form, then name the form and set the recipient email.
2. Copy the endpoint URL from the form's Integration section. It follows the format https://formspree.io/f/your-form-id.
3. In Webflow, drag a Form Block onto the page from the Add panel.
4. Select the form, open its settings, and paste the endpoint into the Form Action field.
5. Set the method to POST.
6. Give every field a meaningful name attribute, such as email or message.
7. Publish the site and submit a test entry on the live domain.

What the endpoint gives you depends on the Formspree plan behind it:

• Email notifications: Every plan sends a notification for each submission, and the Free plan lets you link two email addresses to the account.
• A dashboard inbox: The Free plan keeps a 30-day submission archive, and paid plans hold submissions longer, as the account limits article sets out.
• Spam screening: Formshield and reCAPTCHA run on every plan, and you can switch reCAPTCHA off per form under Settings > Spam protection.
• Submission allowances: The Free plan covers 50 submissions a month, and Personal, Professional, and Business raise that to 200, 2,000, and 20,000 respectively.
• Rate limiting: Formspree caps every account at 20 posts a minute regardless of plan, and AJAX forms get a 429 back when they cross it, per the system limits article.

One trade comes with the custom action. Webflow's forms documentation states that when you set a custom action, submissions are not sent to or stored in Webflow, and the custom action cannot run alongside the Webflow or Email notifications destinations. If you want the data in both places, connect an app from the Forms and Surveys category instead. The Code Embed method below is what you want if you need AJAX, file uploads, or honeypot fields.

Embed custom Formspree forms with Code Embed elements

Custom HTML embeds add what the native Form Block cannot reach. Formspree's Webflow library page covers the list: AJAX submissions, file uploads, honeypot spam protection, hidden metadata fields, and custom redirect URLs.

Add a custom HTML form

Paste a complete HTML form into a Code Embed element and Formspree processes the submission directly. Webflow gates the Code Embed element behind a paid Site plan or a paid Workspace plan.

To embed the form:

1. In Webflow, open the Add panel and drag a Code Embed element onto the page.
2. Paste your form HTML with the Formspree endpoint as the action and POST as the method:

<form action="https://formspree.io/f/your-form-id" method="POST">
  <label>
    Your email:
    <input type="email" name="email" required>
  </label>
  <label>
    Your message:
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Confirm every input carries a name attribute, then save and publish. For file uploads, add enctype="multipart/form-data" to the form tag and drop in a file input; Formspree accepts up to 10 files per submission at 25MB each, with a 100MB ceiling on the whole request and a 30-second timeout, per its file uploads article. For spam protection, add the honeypot field <input type="text" name="_gotcha" style="display:none" />, which Formspree's honeypot guide describes as a field bots fill in and humans never see.

Two Code Embed constraints are worth knowing before you commit to this route. The element supports HTML, CSS in style tags, and JavaScript in script tags, but server-side languages such as PHP and Python will not run. Each element also caps at 50,000 characters, and you cannot visually edit anything inside the embed.

Add the Formbutton pop-up widget

Formbutton is Formspree's copy-and-paste pop-up form overlay, and it suits adding a form without touching page layout. Supported field types include text, email, number, textarea, select, checkbox, radio, and hidden.

To add the widget to a single page:

1. In the Pages panel, hover over the page and click the Page settings icon, then find the head and body code fields.
2. Paste the Formbutton snippet:

<script src="https://formspree.io/js/formbutton-v1.min.js" defer></script>
<script>
  window.formbutton=window.formbutton||function(){(formbutton.q=formbutton.q||[]).push(arguments)};
  formbutton("create", {action: "https://formspree.io/YOUR_FORM_ID"})
</script>

Replace YOUR_FORM_ID with your form's ID, then save and publish. For site-wide placement, add the same snippet under Site settings > Custom code instead, or paste it into a Code Embed element.

Build with the Webflow and Formspree APIs

Server-side code is what you need when a submission has to end up somewhere Formspree's plugins do not reach, including Webflow CMS collections on the same site. Expat Savvy takes this path. API access and webhooks both need a Formspree Professional or Business plan, and Webflow Data API calls need a site token whose scopes you choose when you create it.

Three moving parts carry the data between the two platforms:

• The submissions API: Formspree's submissions API reads submissions at GET https://formspree.io/api/0/forms/<hashid>/submissions, with since, limit, offset, order, and spam parameters.
• Webhooks: Formspree webhooks fire on every new submission and post the full JSON payload to a URL you control.
• Authentication: Formspree accepts Basic auth with the API key as the password, or a Bearer token, and you switch the HTTP API toggle on in the form's Settings tab.
• Webflow's side: Data API requests use a Bearer site token against the https://api.webflow.com/v2 base URL, and each token carries only the scopes you granted it.

Scope the token to the least you need. A relay that only writes CMS items does not need read access to site activity, and keeping the two separate is what makes the integration safe to hand to an agent later.

Publish Formspree submissions as CMS items

A webhook-to-CMS relay turns form entries into content, such as testimonials or directory listings submitted through a form on your site. Formspree fires one webhook event per new submission, so the flow stays simple.

To implement the relay:

1. In Formspree, add a Simple Webhook pointing at your serverless function's URL. Cloudflare Workers, AWS Lambda, and Google Cloud Functions all work as receivers.
2. Parse the payload your function receives:

export default {
  async fetch(request) {
    // Formspree posts { form, keys, submission } on every new submission
    const { form, keys, submission } = await request.json();

    const fieldData = {
      name: submission.name,
      slug: submission.name.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
      quote: submission.message,
      "submitted-on": submission._date
    };

    // hand fieldData to the Webflow Data API request in the next step
    return new Response(null, { status: 200 });
  },
};

With fieldData assembled, create a staged item using POST https://api.webflow.com/v2/collections/{collection_id}/items. The request needs the cms:write scope, and fieldData must include name and slug. Call POST /v2/collections/{collection_id}/items/live instead if you want the item published straight away rather than held for review.

Pick the webhook type carefully: the Build Hook sends an empty body and only suits triggering a rebuild, and the REST Hook type is sunset and kept for backward compatibility, so a Simple Webhook is the right choice for this pattern. If you would rather not host the relay yourself, the Webflow MCP server exposes the same CMS write operations to an agent, along with per-site permissions and an activity log covering what that agent did.

What you can build with the Formspree Webflow integration

Integrating Formspree with Webflow lets you run production forms and file intake without building or hosting a backend, then decide where each submission goes next.

These are the patterns that come up most often:

• Lead capture with CRM routing: Expat Savvy captures insurance leads through Webflow forms, then pushes them via the Formspree API into a custom Supabase CRM, and built-in plugins cover HubSpot and Salesforce if you would rather skip custom code.
• Job application pages with résumé uploads: Collect applications with attached résumés on any Webflow Site plan, since the file handling sits on the Formspree side rather than behind Webflow's Premium and Ecommerce plan gate.
• Internal request routing at scale: Mikkeller, a craft beer group with more than 500 employees across bars, restaurants, and franchises, runs marketing forms on Webflow with Formspree endpoints and uses the Business plan rules engine to send HR and event requests to the right destination.
• Feedback surveys and newsletter signups: Build satisfaction surveys or signup forms and route them onward to an email tool, with autoresponses confirming each submission on Professional and Business plans.
• Tuned spam handling on a public form: Professional and Business plans let you set the Formshield smart filter to Neutral, Aggressive, or Relaxed and toggle classifiers such as crypto or profanity, which matters on forms that attract bots.

If routing leads into a CRM is the job in front of you, see form submissions to HubSpot for the no-code version of the same pattern.