Adding a Form to Webflow
In this guide we’ll show you how to add a contact form to your Webflow website using Formspree.
Formspree is a powerful backend for your Webflow forms. With just a simple configuration change, you can send submissions to your inbox. No Zapier, server code, or external plugins needed!
By the end of this guide, you’ll have a fully functional Webflow form that submits via Formspree and notifies you by email.
Prerequisites
To follow this guide, you’ll need:
- A Formspree account (you can sign up for free here)
- A Webflow site with a form already added, or one that you’re planning to create
Adding a form to Webflow
Webflow includes a built-in Form element that we can hook directly into Formspree by updating the action attribute.
Step 1: Add the Form Block
In the Webflow Designer, open the Add Elements panel (A key or the + icon), and under Forms, drag the Form Block onto your page:
This block includes an example form with all required form infrastructure, like <form>, <input>, and <button> elements.
By default, the Form Block includes Name, Email, and Message fields. You can customize labels, placeholders, or add new fields using the Add Elements panel.
You can also use Webflow’s Element Settings panel to change name attributes on fields. This is important for Formspree to recognize and label them (email, message, etc.).
Step 2: Creating a Form Endpoint
Next, you need to create a form endpoint using Formspree. If you don’t have an account yet you can sign up here.
To start, create a new form with ++ Add New > New Form, call it Contact form and update the recipient email to the email where you wish to receive your form submissions. Then click Create Form.
On the form details page, you will find the Form Endpoint:
Step 3: Set the Form action to the Formspree Form Endpoint
Select the Form element (not an individual field), go to the Settings panel (D), and update the Form Action field.
Paste your Formspree endpoint here:
Set the Method to POST.
Step 4: Publish and Test Your Site
Click the Publish button and view your site on the live domain. Fill out the form and hit Submit. Your data will be sent directly to Formspree.
If the form submits correctly, you’ll see a thank-you message, and you’ll receive an email notification.
That’s it, you’re done!
Now your Webflow form is connected to Formspree. No custom code, no integrations, no backend; just a simple, scalable way to handle contact forms, lead capture, feedback requests, and more.
To explore additional features like redirecting after submission or connecting to APIs, check out Formspree’s documentation.