Back to all lessons
Lesson library

Fundamentals of Forms in Webflow

Add and configure Webflow Forms.

Note: We’re transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes. 
If your account hasn’t yet switched over to Workspaces, please visit our legacy lesson about forms. You can also learn how to check if your account is on Workspaces.  
This video features an old UI. Updated version coming soon!
Clone this project

Forms are one of the most powerful tools on the web, allowing you to capture information efficiently, whether you’re gathering email newsletter signups or work inquiries from potential clients. With Webflow, you can fully customize and optimize your forms to fit your needs. 

In this lesson: 

  1. How to add a form
  2. Form anatomy
  3. How to configure form elements
  4. Success and error states
  5. Form submissions
  6. Form data and GDPR
  7. Troubleshooting

How to add a form

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

The Form block element is highlighted within the Forms section of the Add panel.

Drag a Form block onto the canvas.

The default Form block element on the Webflow canvas, with the Form block settings modal window open.

Form anatomy

The Form block inherits the full width of its parent element and contains 3 child elements: 

  • Form — contains all your form inputs and elements
  • Success message — the message returned when the form has been successfully submitted
  • Error message — the message returned when there’s an issue with form submission
The Form block element expanded in the Navigator panel to reveal its child elements: Form, Success message, and Error message. 

Structure of your form

You can add or delete any form element within the Form, like an Input or a Checkbox, to customize your form as needed. 

Form elements

  • Field label — A label is used to describe the function or purpose of a form field. Field labels are crucial for accessible navigation of your form, so it’s important that you do not delete these. 
  • Input — The Input field is used to collect single-line data, like a one-word response to a question (e.g., name or email address).
  • File upload — The File upload button allows site visitors to attach a file to their form submission. Read all about the File upload button and how you can customize it.
  • Text area — The Text area field allows visitors to input multi-line data, like a lengthy message.
  • CheckboxCheckboxes are 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 input behaves very similar to a dropdown element, where you can add a list of different options for your visitor to select. You can also allow for multiple selections. Learn more about select inputs.
  • reCAPTCHA — reCAPTCHA is a Google service that helps prevent form spam. Learn how to add reCAPTCHA in your forms.
  • Submit button — No form is complete without the Submit button! When clicked, this button submits all of the data collected in the form. 
Form element section within the Add panel, which contains all available form elements.
Need to know: Form elements can only be dropped inside of a Form block.

How to configure Form elements

You can double-click a form element (e.g., Input, Submit button) to open its settings. You can also access an element’s settings by selecting the element and pressing Enter/Return.

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 can identify the field on form submissions.
  • Required — Each form element has the Required option. When checked, site visitors won’t be able to submit the form without filling out this field.
  • Placeholder— For Input and Text area fields, the Placeholder is the text that displays in an empty input field and is overwritten the moment you start typing in the field. It can be a sample text or a description of the required information. You can style a placeholder text from the states menu. 
Important: You should never use Placeholder text as a replacement for a Label, or to provide crucial information or help text for its related input field (e.g., “Password must be between 8-20 characters”), because placeholder text won’t be translated for site visitors using translation tools and isn’t available to assistive technology like screen readers. Additionally, because placeholder text disappears when site visitors start typing in the field, using placeholder text in place of a Label makes it difficult for site visitors to remember what information belongs in the field.
  • Text type — The Text type allows you to specify the type of input you’re collecting. 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 to receive focus (i.e., the site visitor’s cursor to be inside the Input field) 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 falls inside the portion of the page that a user must scroll to see. 
Note: If your page loads and scrolls down automatically, this may be because Autofocus has been checked on an Input field in a form that falls inside the portion of the page that a user must scroll to see. If you don’t want this to happen, make sure to uncheck the Autofocus option for all Input fields in your form. You’ll also want to make sure that the Autofocus option is unchecked for any hidden form fields, as this may cause issues with form submission.
Settings for an Input field, including Name, Placeholder, Text Type, and options to set the Input to Required and Autofocus the field.

To learn more about input settings, check out our separate guide to checkboxes, radio buttons, and select inputs.

Submit button

The Submit button’s settings allow you to set its Button text and Waiting text

Form settings for the Submit button. The default button text is “Submit” and the default waiting text is “Please wait…”

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

  • 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 after the submit button is clicked and before the form is submitted. The default Waiting text is “Please wait…”

Success and error states

To access the success and error states, select the Form within the Form block and open Settings (D) > Form settings. Here, you can see the State options. Click on the State that you want to edit.

  • Normal —  the default state prior to site visitors interacting with the form
  • Success — the message returned when the form has been successfully submitted. You can change the text and customize this as you like.
  • Error —  the message returned when there’s an issue with form submission. Again, you can customize the error state as you like.
Pro tip: We recommend including an email address in the error state in case users run into an issue with the form.
The default Form block success state on the Webflow canvas. The default success message replaces the Form block and reads, “Thank you! Your submission has been received!” 
The default Form block error state on the Webflow canvas. The default error message shown under the Form block reads, “Oops! Something went wrong while submitting 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 a third-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 Site settings or in the Editor.

Pro tip: You can integrate MailChimp and/or Zapier with your Webflow forms to automate your list building.

Form notifications

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

Form notification settings within the Forms tab of site settings.

Here, you can configure how and where you want to receive your data. Learn more about setting up form notifications.

Form submissions

If you own the site, you can also access and manage the submitted data under the Site settings > Forms tab. You can view the submissions there or download the submissions as a CSV file. You can also access form submissions in the Editor. Learn all about form submissions and how to manage form data.

Form submission data for an example “Email Form” within the Forms tab of Webflow site settings. This form collects the date of submission, the name of the submitter, and a résumé attachment.

Form data and 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 General Data Protection Regulation (GDPR) may or may not apply to you. Learn more in our Privacy FAQs.

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. The UK Information Commissioner’s Office 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 through 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 send personal data using those integrations, make sure to review your responsibilities as a data controller.

Learn more: How to get ready for the General Data Protection Regulation – and what Webflow’s doing

Troubleshooting

If your form can’t be submitted successfully, try the following: 

  • If you’ve enabled reCAPTCHA on your site, make sure all of the forms on your site contain a reCAPTCHA element. When reCAPTCHA is enabled in Site settings > Forms tab, forms that don’t contain a reCAPTCHA element will fail to submit. 
  • If you’ve hidden any form fields in your form, make sure that Autofocus is not checked in the settings for those fields. 
  • Form submissions on unhosted sites (i.e., sites for which you do not have an active hosting plan) on Starter Workspaces will max out at 50 form submissions total. If you’ve reached this limit, you’ll need to upgrade your site plan to continue receiving form submissions. 
Important: If you’ve exported your site for external hosting, Webflow will not process form submissions on your site. You’ll need to use a third-party tool to collect form submissions on the exported site or embed a third-party form integration.

If your page loads and scrolls down automatically, this may be because Autofocus has been checked on an Input field below the fold. If you don’t want this to happen, make sure to uncheck the Autofocus option for all Input fields in your form.

If the issue continues, please contact customer support.

Try Webflow — it's free