Forms

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

1. Adding a Form
2. Anatomy of a Form
3. Form elements
4. Success and error messages
5. Form Submissions
6. GDPR

Adding a form

You can add a form from the Add panel (A) > Elements > Forms section.

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

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 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.
• File upload — The file upload field allows site visitors to attach a file to their form submission. Read all about the File upload input and how you can customize it.
• 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. Learn more about checkboxes.
• Radio button — The radio button field is best used for input data where the visitor can select only one of many options. Learn more about radio buttons.
• 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. Learn more about select inputs.
• reCAPTCHA — reCAPTCHA is a Google service that helps prevent spam through forms. Learn how to add reCAPTCHA in your forms.
• Form button — No form is complete without a submit button! This special button is what triggers the action of the form to complete.

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.

Form elements

Double-click any form element inside of the Form block to open the settings panel. You can also access the settings by selecting the element and pressing enter.

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 Input and Text area fields, 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 — here, 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 Phone text type will only accept phone numbers. 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 the Form settings. When a form element has autofocus checked, the page will load and scroll to that element if the form is below the fold.

Troubleshooting — page automatically scrolls down after loading

If your page loads and scrolls down automatically, make sure to uncheck the autofocus option for all input fields of your form.

Learn more: Check our separate guide on checkboxes, radio buttons, and select inputs to learn more about the unique input settings these have.

Submit button

The submit button has different settings.

Double-clicking the Submit button brings up the settings modal. Here, you can change the:

• Button text — the text that appears on the submit button. The default Button text is "Submit."
• Waiting text — the text that will replace the button text until the form is submitted. The default waiting text is "Please wait..."

Success and error messages

To access the success and error messages, select the Form wrapper and go to the Elements settings (D) tab → Form settings section. Here, you can see the show state options. Click the state that you want to edit.

• Normal state —  the default state where you see the actual Form on your canvas
• Success state — 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 —  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.

Pro tip: It’s recommended to include an email address in the error state in case users run into an issue with the form.

Form submissions

When someone submits a form through one of your sites, the submitted data will be sent to the email(s) specified in your Form notification settings — and/or redirected to any 3rd-party location if you've set up your form to collect Form data elsewhere. If you fully own a website (that is, it's not a client's site), then you can also access this data and manage it in your Project settings dashboard or in the Editor dashboard.

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

Form notifications

You can access the Form notification settings under Project settings > Forms tab.

Here, you can configure how and where you can receive this data. Learn all about setting up form notifications.

Form submissions

If you own the project, you can also access and manage the submitted data under the Project settings > Forms tab. 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 all about form submissions and how to manage form data.

GDPR

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