How do I add a form in Webflow?
Add a Webflow form block, keep each label, give the form its own name, and choose where the submission goes.
Open the Add panel, go to Forms, and drag a Form block onto the page. The block starts with name and email fields, labels, a submit button, a success message, and an error message. Keep the labels. Give the form its own name in the settings. New forms store submissions in Webflow and send a notification email. Publish, then submit one test on the live page.
Drag a Form block onto the page
Open the Add panel on the Elements tab. Scroll to Forms. Drag a Form block onto the canvas, or drop it in the Navigator where the form should sit.
The block arrives with a structure you can change. The wrapper holds two text inputs, each with a label: Name and Email address. It also holds a submit button. Under that are a success message and an error message. The success state is what a visitor sees after a submit that goes through. The error state is what they see when it does not.
Example: a contact page needs a name, an email address, and a short message. Start from this block. Do not build the fields as loose inputs on the page and hope they submit.
Keep the labels, then add only the fields you need
Field labels tell a visitor, including someone using a screen reader, what the field is for. Leave them on the form. Placeholder text is a hint inside the empty field. It disappears as someone types, and it is not a substitute for the label. The placeholder guide covers that hint.
To add a field, drag it from Forms into the form wrapper. A text area is the right control for a message that runs past one line. A checkbox, a radio button, a select, and a file upload are separate elements, and each one also has to sit inside the wrapper. Select a field and press Delete on Windows or Backspace on Mac, or right-click it and choose Delete, to remove one you do not need.
Select a field and open its settings from the settings icon, from a double-click, or from the Settings panel. Name is the label you will see on the submission. Required blocks submit until that field is filled. Text type can be email, phone, or password. Phone shows a numeric keypad on a mobile device. Password hides what was typed. The required field guide is the closer page for that switch.
Leave Autofocus off unless that field should take the cursor when the page loads. Autofocus on a field that is hidden, or below the fold, can scroll the page on load.
Name the form before the first real submission
Every new form is named Email Form until you change it. Select the form, open the Settings panel, and give it a name you will recognize later, such as Contact or Workshop waitlist. That name is how you tell submissions apart under Site settings, Forms.
In the same panel you can edit the success and error text. Put a real address in the error message so a visitor can reach you when the submit fails. The success message guide is the page for that state. A redirect after submit is a separate setting, covered in the redirect guide.
Choose where the submission goes
A new form sends the submission to Webflow and sends a notification email. Select the form, open Settings, and use Send to when you want to add or remove a destination. You can send to more than one place, such as Webflow and email.
Webflow stores the submission under Site settings, Forms. Email notifications go to the people you list. The notification guide walks through recipients, subject, and reply address. On the free Starter Site plan, those emails are limited to five recipients, and each recipient has to be a Workspace member. The same plan is limited to 50 form submissions in total.
A custom action sends the submission to an address you enter and does not store it in Webflow. Webflow says that option cannot be combined with Webflow storage or email notifications. Remove those destinations first if you switch to a custom action.
If reCAPTCHA is turned on under Site settings, Apps and Integrations, add a reCAPTCHA element to every form. Forms without it fail. The spam guide covers filtering and bot blocking. If the site was exported and is hosted outside Webflow, Webflow does not process the form at all.
Publish and send one labeled test
Publish the site, open the live page, and submit the form once with a subject you can find, such as 'Test from the contact page'. Then check Site settings, Forms, and the notification inbox.
If the button does nothing, check the form troubleshooting guide. Confirm the fields sit inside the wrapper, no hidden required field is blocking submit, and you tested the published page rather than the canvas only.
A form on a page you already have is ordinary work on an existing site. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.
Questions & answers
Can I put an input next to the form instead of inside it?
No. Form elements have to sit inside the form wrapper. An input that is outside that wrapper is not part of the submission.
Why do two forms show up as one list of submissions?
A new form is named Email Form until you rename it. Give each form its own name so Site settings, Forms, can separate them.
The form fails as soon as I turn reCAPTCHA on. What is missing?
If reCAPTCHA validation is on for the site, every form needs a reCAPTCHA element. A form without that element fails when someone submits it.
I exported the site. Will Webflow still store the submissions?
No. If the site is exported and hosted outside Webflow, Webflow does not process the form. Use a third-party form or another collector on that host.
Sources & further reading
Need a hand with your Webflow site?
View membership
View membership