Formspree

How to integrate Formspree with Webflow

Webflow's native forms handle basic contact submissions but lack capabilities like AJAX submission, file upload handling, honeypot spam protection (hidden fields that bots fill out but humans ignore), and webhook automation. Formspree adds these features while letting you keep Webflow's visual design workflow. The integration supports two primary use cases: simple contact forms that need better spam filtering and email routing, and complex multi-step forms that require custom validation and third-party service integration.

Formspree provides endpoints that receive form data through standard HTTP POST requests. You can point Webflow forms to these endpoints through the form action attribute, or build custom HTML forms with full control over validation and submission behavior. The Formspree Webflow library includes production-ready templates for contact forms, event registration, and order processing.

Use native Webflow Form Block with Formspree

Webflow's Form Block component provides the fastest path to working forms with Formspree backend processing. This method requires no custom code. You design forms visually in Webflow, then connect them to Formspree endpoints for submission handling, spam filtering, and email notifications.

The setup process starts in Webflow's Designer where you add a Form Block from the Elements panel. After customizing field labels and placeholders through the visual editor, you create a form in your Formspree account to generate a unique endpoint URL. According to the Formspree Webflow integration guide, you then connect the two by pasting your Formspree endpoint into Webflow's Form Settings under the Action field and setting the Method to POST.

This method works well for:

• Contact forms with name, email, and message fields that need spam protection through Formshield machine learning and CAPTCHA options
• Lead capture forms that trigger autoresponder emails and send data to CRM systems via webhooks
• Newsletter signups that require email validation and confirmation messages
• Support request forms that route submissions to different team inboxes based on form field values

The native Form Block approach has limitations. Forms submit through full page refresh rather than AJAX, file upload fields have restricted capabilities, and you can't implement honeypot spam protection without custom code. For these features, use HTML embeds instead.

Embed custom HTML forms as widgets

Custom HTML embeds give you complete control over form structure, validation logic, and submission behavior. This method works when you need AJAX submission, multiple file uploads, conditional field visibility, or honeypot spam protection beyond what Webflow's Form Block provides.

According to the Formspree HTML integration guide, custom forms require a simple structure: a form element with your Formspree endpoint as the action attribute, input fields with proper name attributes, and a submit button. The basic pattern looks like <form action="https://formspree.io/f/{form_id}" method="post"> with your specific form ID from Formspree.

You add custom forms through Webflow's Embed element, which accepts raw HTML. The form inherits your site's CSS styling automatically, or you can add custom styles through Webflow's Designer or inline CSS. All form processing happens on Formspree's servers, so you don't need to manage any backend code or databases.

Custom embeds enable:

• AJAX form submission that processes forms without page refresh and displays custom success messages inline
• File upload forms with multiple file fields and attachment handling for image galleries, document submission, or resume uploads
• Honeypot spam protection using hidden fields that bots fill out but humans ignore, as detailed in the Formspree Webflow library
• Multi-step forms with JavaScript-controlled field visibility and progressive submission

The Formspree Webflow library provides over 15 production-ready HTML templates you can copy directly into Embed elements, including contact forms, event registration systems, and order forms with custom validation.

Build with Webflow and Formspree APIs

API integration connects Webflow's CMS and form data with Formspree's submission handling through programmatic endpoints. This approach suits custom workflows like triggering Webflow CMS updates when forms submit, syncing form data between platforms, or building headless form systems that submit to Formspree from any frontend framework.

Access form data programmatically

The Formspree Forms API requires API keys for authentication and provides endpoints to retrieve submission data, manage forms, and configure settings without using the dashboard interface. You can query submissions, filter by date ranges, and export data to external systems.

The Webflow Developer API provides complementary endpoints for form management on the Webflow side. Key endpoints include:

• List forms with GET /sites/{site_id}/forms to retrieve all form configurations on a site
• Get form submissions using GET /forms/{form_id}/submissions to access submission data with pagination
• Update submissions through PATCH /form_submissions/{form_submission_id} to modify stored data

Authentication uses bearer tokens in the Authorization header. The Webflow authentication documentation supports Site Tokens for single-site integrations and OAuth tokens that require forms:read scope for webhook operations.

Connect forms to automation with webhooks

Webhooks enable real-time automation by sending form submission data to external services immediately after someone submits a form. According to Formspree's webhook documentation, webhooks POST JSON payloads to any endpoint you specify, allowing integration with CRMs, marketing automation platforms, or custom backend services.

Webflow provides webhook creation through its API. The Webflow webhook documentation details how to set up webhooks that trigger on form submissions, new orders, or CMS item changes. You verify webhook authenticity by checking the x-webflow-signature and x-webflow-timestamp headers using HMAC SHA-256 signature verification.

Common webhook automation patterns include:

• CRM synchronization where form submissions trigger contact creation in Salesforce, HubSpot, or other CRM platforms
• Order processing automation that sends e-commerce form data to fulfillment systems and inventory management tools
• Content management workflows that create Webflow CMS items when specific forms submit
• Notification systems that alert team members through Slack, Discord, or email when high-priority forms submit

What you can build

Integrating Formspree with Webflow enables automated form workflows with validation and routing beyond basic contact submissions, including automated lead processing, file upload handling, and multi-step data collection with real-time validation.

• Lead generation systems with CRM automation: Build contact forms that automatically create leads in your CRM through webhook integration, trigger personalized autoresponder sequences, and route high-value prospects to sales teams based on form field values.
• E-commerce order and inquiry forms: Create custom product order forms for businesses like bakeries or catering services that collect detailed specifications, handle file uploads for custom design requests, and process warranty registrations with automated confirmation emails.
• Event registration with conditional fields: Design registration forms that show or hide fields based on attendee selections, handle multiple ticket types with different data requirements, and collect file attachments like speaker proposals or sponsor materials.
• Support request systems with intelligent routing: Build help desk forms that categorize submissions by issue type, route requests to specific team inboxes, and trigger automated responses with relevant documentation links based on the selected support category.