Forms are one of the most powerful tools any website can feature, whether you're gathering email newsletter signups or work inquiries from potential clients. Webflow forms are fully customizable.

In this lesson

Let's introduce you to the basics of using forms in Webflow, including:

Adding a form

You can add a form from Add panel (A)→ Elements → Forms.

Just drag a form block and drop it where you want it on your page.


Anatomy of a form

When you drop a form block onto your page, you get a form wrapper which inherits the full width of its parent element. It contains three child elements:

  • Form — contains all your form inputs and elements
  • Success Message — this is the message that a user sees when they submit the form successfully
  • Error message — this is the error message that appears if there's a problem submitting the form.
Anatomy of a Webflow form
‍Anatomy of a form

Structure of your form

To customize your form, you'll be editing the content inside the form wrapper → form element.

By default, the form includes some essential form fields and elements. You can add and remove any form element like an input field or a checkbox inside of the form block to customize your form as needed. You can also add other elements like images and text blocks.

Form elements
  • Label — A label is used to describe the function or purpose of a form field.
  • Input — The input field is used to collect single-line data, like a one-word response to a question.
  • Text Area — The text area field allows visitors to input multi-line data, like a lengthy message.
  • Checkbox — The checkbox field is best used for input data where the visitor can select one or multiple options.
  • Radio Button — The radio button field is best used for input data where the visitor can select only one of many options. 
  • Select — The select menu field behaves very similar to a dropdown element, where you can add a list of different options for your visitor to select from. You can also allow for multiple selections.
  • Form Button — No form is complete without a Submit button! This special button is what triggers the action of the form to complete.
Webflow Form elements
Form elements
Need to know
Form elements can only be dropped inside of a form block which is required to capture data that's collected when the form is filled out.

Configuring form elements

Double-click any form element inside of the Form Block to open the settings panel.

Webflow Form input settings
Form input settings

Input settings

Each form element has different input settings based on its type.

  • Name — All form elements have a Name field. This is how you identify the field on form submissions.
  • Required — Each form element has the required option. This lets you choose whether the user can submit the form without filling this field out.
  • Placeholder — For a text input field, the placeholder is the text that displays in an empty input field. It can be a sample text or a description of the required information. You can style a placeholder text from the states menu.
  • Text type — In Text type, you choose what type of input you are asking for. For example, an input field with text type email will only accept email addresses. A password text type will hide the typed characters in the input field.
  • Autofocus — If you want an input field to get focus when the page loads, check the Autofocus option in Form settings.
Must know
When a form element has autofocus checked, the page will load and scroll to that element if the form is below the fold.
Troubleshooting: So, if your page loads and scrolls down automatically, make sure to uncheck the autofocus option for all input fields of your form.
Learn more

Submit button

The submit button has different settings.

Webflow Form Submit Button Settings
Submit Button Settings

Double-clicking the Submit button brings up the settings modal. Here, you can change the Button text and the Waiting Text. The Waiting text is the text that will replace the button text until the form is submitted.

Configuring success and error messages

To access success and error messages:

  1. Select the Form Wrapper
  2. Go to the Elements Settings tab
  3. Under Form settings, you can see the Show State options. Click on the State that you want to edit.

Normal state

The normal state is the default state where you see the actual form on your canvas.

Success state

Success shows what a user will see when they successfully submit the form. You can change the text and customize this as you like.

Error state

The Error state shows the message a user will see if there's a problem submitting the form. Again, you can customize the error state as you like. It’s recommended to include an email address in in the Error state in case users run into an issue with the form.

Form notifications

You can access the form submissions and notification settings under the Forms tab in the Project Settings dashboard.

Good to know
  • You can fill these field with form variables which allow you to dynamically customize the text that populates the notification fields, and include: {{siteName}} — {{formName}} — {{formData}} (A list of all of the form fields in the submission) — {{formDashboardUrl}}.

Here, you can configure how and where you can receive this data.

  • From Name — This is the label of the sender of the email.
  • Send form submissions to — Here, you specify the email address or multiple email addresses (separated by a comma) you want submissions sent to. The email notifications will be sent from an unbranded email 
  • Subject Line — This is where you specify what the subject of the email notification will be for each form submission. You can use form variables like {{siteName}} and {{formName}} to best differentiate your notifications.
  • Reply To Address — The Reply To Address is the email address that is used if you receive a form submission email and hit reply.
    You can copy the {{ Name }} and {{ Email }} variables mentioned in the note next to the field and paste them right inside the field. This will ensure that replies to this email go straight to the email address that's captured on the form.
Email Template

The Email template is how your form data is displayed in the email notification body. You can leave this as is, or you can write your own version using any of the variables suggested in the description to the right of the text field such as {{siteName}}, {{formName}}, {{formData}} and {{formDashboardUrl}}. You can even use custom HTML.

Managing form submissions

When someone submits a form, the form is sent to the email(s) specified in the Form submitted data will be listed under the Forms tab in the Project settings dashboard. You can view the submissions there, or you can even download a CSV file. You can also access form submissions in the CMS Editor.

Learn more
Good to know
Forms are easy to integrate with MailChimp and Zapier to help you automate your list building.


Disclaimer: The content presented here is provided only for informational purposes and is not meant to serve as legal advice. You should work with professional legal counsel to determine how the GDPR may or may not apply to you.

If you host websites that collect personal data from EU residents — e.g., via form submissions or third-party scripts — you have responsibilities as a "data controller." Take the time to understand your responsibilities as a data controller, and take steps to abide by the GDPR. This data protection self-assessment checklist can be helpful.

If you’re creating forms that request personal data in Webflow, make sure to clearly ask for and get consent, unless another lawful basis for processing applies.
If you’re creating websites for clients who collect personal data on their websites, make sure your clients understand their responsibilities as a controller of that personal data.
If you’re using third-party tools (e.g., Zapier) to connect your Webflow forms to external data sources and are sending personal data using those integrations, make sure to review your responsibilities as a data controller.
Helpful resources
How to get ready for the General Data Protection Regulation — and what Webflow’s doing