Forms

Form Block

To start a Form, drag and drop a Form Block onto your canvas. You can add, remove, and edit Form Elements inside a Form Block.

NOTE: All form elements must remain inside the Form Wrapper in order to successfully send form submissions.

Field Label

Field Labels look and behave like normal text but generate form specific code on export.

NOTE: Generated form specific code is important for forms accessibility (e.g. screen readers) and is added automatically. Learn more

Input Field

Input Field elements allow you to enter single-line data.

Input Field Settings

Input Fields have five types of settings: Name, Placeholder, Text Type, Required, and Autofocus.

• Name: the name that the generated markup uses for form data.
• Placeholder: the visible text when the Input Field is empty.
• Text Type: set as plain text, an email, or a password.
• Required: set as a requirement to submit the form.
• Autofocus: set to autofocus when the web page loads.

Text Area

Text Area elements allow you to enter multi-line data.

Text Area Settings

Text Areas have four types of settings: Name, Placeholder, Required, and Autofocus.

• Name: the name that the generated markup uses for form data.
• Placeholder: the text that your site visitors see when the Text Area is empty.
• Required: set as a requirement to submit the form.
• Autofocus: make your field autofocus when the web page loads.

Checkbox

Checkbox elements allow you to select one, none, or multiple options in a form.

Checkbox Settings

Checkboxes have three types of settings: Name, Required, and Start Checked.

• Name: the name that the generated markup uses for form data.
• Required: set as a requirement to submit the form.
• Start Checked: default to a checked status when the page is loaded.

Radio Button

Radio Button elements allow you to select one of a limited number of choices.

Radio Button Settings

Radio Buttons have three types of settings: Group Name, Choice Value, and Required.

• Group Name: the name assigned to a group of radio buttons.
• Choice Value: the value of the selected Radio Button in a group.
• Required: set as a requirement to submit the form.

Select Field

Select Field elements allow you to make a selection in a drop down list.

Select Field Settings

Select Fields have five types of settings: Name, Required, Allow Multiple, Choice Text, and Choice Value.

• Name: the name assigned to the drop-down list.
• Required: set as a requirement to submit the form.
• Allow Multiple: allows you to select multiple options in a list.
• Choice Text: the visible text of a drop-down list option.
• Choice Value: the value of the selected drop-down list option.

Submit Button

Submit Button elements allow you to submit form data to your form-handler.

Submit Button Settings

Submit Buttons have two types of settings: Button Text and Waiting Text.

• Button Text: the visible text of a Submit Button.
• Waiting Text: the visible text shown when waiting for longer requests to run. 

Show State

Customize your Normal, Success, and Error message designs by selecting the Show State from the Form Settings Module.

• Normal: customize the design of your form as it appears when the page is loaded.
• Success: customize the design of your success message after submitting a form.
• Error: customize the design of your error message after a failed form submission.

Notification Settings

Set up your form submission notifications from the Forms tab in your Site Settings.

Form submission notifications have five types of settings: From Name, Send to Address, Subject Line, Reply to Address, and Email Template.

• From Name: set the label of the sender email address.
• Send to Address: send form submissions to one, none, or multiple email addresses.
• Subject Line: set the subject of the notification email. Available variables are {{siteName}} and {{formName}}.
• Reply to Address: set the email address when replying to form notifications.
• Email Template: send notifications via text or HTML. Available variables are {{siteName}}, {{formName}}, {{formData}}, and {{formDashboardUrl}}

NOTE: Professional and Team Plans offer unbranded form submission notifications (from “[email protected]”) Upgrade now

Form Submission Data

Webflow automatically captures your form submissions and stores them in the Forms tab of your Site Settings. 

• From Name: form Submission data is separated by Form Name.
• Submission Data: your form submission data is stored in a table. Columns are represented by form element names.
• Download CSV: download a comma separated values file with all of your form data. This is useful for backing up your data or manually uploading to an external app.
• Delete: delete your form submissions forever.

MailChimp

Populate your MailChimp list with data captured by your Webflow form.

Create a MailChimp List

From your MailChimp dashboard, navigate to the Lists tab and click the Create List button.

Setup Embedded Signup Form

From your MailChimp list settings, navigate to the Signup Forms tab and select the Embedded Forms option.

Copy MailChimp Action URL

From your Embedded Form settings, navigate to the Classic tab and copy the form Action URL.

Set Form Action and Method

From your Webflow form’s settings, paste the MailChimp Action URL in the Action field and set the Method to “post”.

IMPORTANT: MailChimp uses double-opt-in list confirmations and therefore requires you to opt-in when testing the integration. Learn more

Zapier

Use Zapier to automatically send form data to hundreds of apps including Gmail, MailChimp, Salesforce, and more.

NOTE: Zapier integrations are available on all paid plans including Micro, Personal, Professional, and Team Plans. Upgrade now

Choose Trigger and Action

From the Make a Zap page, choose Webflow From Submission as your trigger, select an app for your action, and click the Continue button.

Connect Your Webflow Account to Zapier

Grant Zapier permission to access your Webflow account and click the Continue button.

Choose Site and Form Name

After setting up the action for your Zap, select the Webflow site you are connecting to and type the Form Name exactly as it appears in your form settings.

NOTE: Once you connect your Webflow account, select your site name, and enter your form name, you can then continue to setup your Zap Action following the Zapier guidelines. Learn more

Test Webflow Trigger

Once you set up your Zap Action, test your Webflow Trigger by submitting a form submission and click the Test Webflow Trigger button.

NOTE: Although Zapier integration help is outside the scope of Webflow support, if you are having any trouble with your Zaps, please contact us and we’ll make sure your forms are setup properly. :)