Forms overview

Add and configure Webflow Forms.

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. You can add a form block to your site from Add panel > Elements > Forms.

Form anatomy

The Form block inherits the full width of its parent element and contains three 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

Form structure

You can add or delete any of the following form elements within the form to customize your form as needed:

Form element	Purpose
Field label	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	Used to collect single-line data, like a short response to a question (e.g., name or email address)
File upload	Allows site visitors to attach a file to their form submission
Text area	Allows site visitors to input multi-line data, like a lengthy message
Checkbox	Used for input data where site visitors can choose one or multiple options
Radio button	Used for input data where site visitors can choose only one of many options
Select	Used to allow site visitors to select options from a dropdown list. You can allow for multiple selections.
reCAPTCHA	Google service that prevents form spam
Submit button	Submits all data collected in a form. No form is complete without the Submit button.

Note

Form elements can only be added inside a form block.

How to configure Form elements

You can double-click a form element (e.g., Input, Submit button) to open its settings.

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

Input settings	Purpose	Additional notes
Name	Identifies the field on form submissions	n/a
Required	Lets you require a form field to be filled in order to submit the form	When checked, prevents site visitors from submitting the form without filling out the required field
Placeholder	Lets you display text in an empty input field that disappears when a site visitor starts typing in the field	Can be sample text or a description of the required information 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. You can style placeholder text from the states menu.
Text type	Specifies the type of input you’re collecting (e.g., an input field with `type=email` will only accept email addresses)	A phone text type accepts phone numbers and text characters and presents a keypad on mobile devices A password text type hides characters typed in the input field
Autofocus	Specifies whether the input should receive focus when the page loads	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 site visitor must scroll to see If your page loads and scrolls down automatically, this may be because autofocus is checked on an input field in a form that falls inside the portion of the page that a site visitor 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 the autofocus option is unchecked for any hidden form fields, as this may cause issues with form submission.

Submit button

The submit button’s settings allow you to set its button text and waiting text.

Double-clicking the submit button brings up the on-canvas settings modal. Here, you can change two 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…”

How to manage form settings

Customize success and error states

To access the success and error states, select the form block and go to Form block settings. Here, you can view or customize the state options:

Normal — the default state prior to site visitors interacting with the form
Success — the message returned when the form has been successfully submitted
Error — the message returned when there’s an issue with form submission

Pro tip

We recommend including an email address in the error state in case site visitors have trouble submitting the form.

Set the form name

The form name you set in Form block settings associates the form with the submissions it receives. By default, all form names are set to “Email Form.” If you have more than one form on your site and you haven’t set unique names for them, submission data from all of your forms appears under “Email Form” in Site settings > Forms > Form submission data. We recommend giving your forms descriptive names so you can clearly distinguish between submission data for each form.

Manage form submissions and notifications

You can specify who should receive form submissions on your site in Form block settings. You can also manage additional advanced form notification settings (e.g., reply to address, email template, etc.) in Site settings > Forms > Form notifications.

If you fully own a website (that is, it’s not a client’s site), you can access and manage form submission data in Site settings > Forms > Form submissions.

Redirect site visitors on form submission

You can add a URL to the Redirect field to send site visitors to that URL when they submit your form.

Set a custom action

You can set a custom action to send form submissions to a third-party service and bypass Webflow’s form processing. When you add a custom action, Webflow no longer sends form submission notifications. If you’d like Webflow to process your form submissions and send your form data to a third-party service (e.g., HubSpot), you can connect Apps to your form.

View App connections

In the Connections section, you can view a list of Apps connected to your form, if applicable. Apps you’ve installed and used to edit your form appear here. Note that Send form data to Webflow always appears in this section, as Webflow processes all form data unless you bypass form processing using a Redirect URL or by embedding third-party forms.

Disclaimer

The content presented here is provided only for informational purposes and is not meant to serve as legal advice. You might consider working with professional legal counsel to determine how privacy laws like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA) may or may not apply to you. Visit our privacy FAQs to learn more.

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, 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 free accounts 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.

If the issue continues after trying the above troubleshooting steps, please contact customer support.

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.