Forms have various uses, and they can help you capture valuable information. In this article, we cover the basics of Webflow forms:

  • Adding a form
  • Anatomy of a form
  • Configuring form elements
  • Success and error messages
  • Form Submissions

Adding a form

From the Elements Panel, scroll down to the Forms section and drag a Form Block into your project.

Webflow Form block
 

By default, the Form Block includes some essential Form 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.

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.

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 3 child elements:

  • Form
  • Success Message
  • Error Message
Anatomy of a Webflow form
‍Anatomy of a form

Form

Inside the Form element, you will see the form elements that your form is made up of. These can be Field Labels, Text Fields, a Textarea, Select Fields, Checkbox or Radio Button fields, and a Submit Button, and any elements you add to your form.

  • 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

Inside the Form element, you will see the form elements that your form is made up of. These can be any of the following form 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.

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

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.
  • 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.
Important: When a form element has Autofocus checked, the page will load and scroll to that element if the form is below the fold.

Checkbox

Checkboxes allow a user to select multiple choices. Set the Name of each checkbox so you can identify them in the form subimssion data.

You can also set if a checkbox should be checked by default by ticking the Start Checked box.

If you want your users to tick a checkbox to confirm for example that the information provided is accurate, you can tick the Required field in the checkbox settings.

Checkbox settings in Webflow
Make sure to set the name of the chcekbox in the settings panel.

Radio Button

Radio buttons allow a user to select a single option among multiple options. You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name.

Webflow radio buttons
Make sure to set the Group Name and the Choice Value for each Radio button to receive accurate form submissions.

Let's say you want to create a group of radio buttons for gender with values male and female. You can group the two buttons by adding the same Group Name to both: "Gender" and setting the Choice Value of one to "Male" and the other to "Female". 

Now, let's say you want to add another group of options as a response to "will you attend the next conference?". The values will be: yes, maybe, and no. So, you add three radio buttons and make sure all three of them have the same group name: "attending". Then, you set the Value of each one separately.

Select

You can also add a dropdown list of choices. By default, a single choice can be selected from this dropdown. However, you can Allow Multiple Selections as well by enabling the setting in the Select Field setting panel.

Select field in Webflow
Name your Select Field and set whether you want to allow multiple selections or not

You can set the choices for the Select field in the advanced input settings in the Settings Panel on the right.

  • Click the plus (+) sign to add a choice
  • Click the pencil icon to edit the choice
  • Click the trashcan icon to delete a choice
  • Click & drag the dotted line to reposition a choice
Set options for the Select Field of Webflow Forms
Set the choices you want users to choose from through the Select Field of your form

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.

 

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

Form variables 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}}

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.

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 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.

 

Form submissions in the Editor

Anyone with access to the Editor will also be able to view and export form submissions made on the website. When logged in to the website through the Editor, simply locate the Forms tab in the Editor Panel.