Forms overview - Webflow help

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 accessibility.
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. Multiple selections allowed
reCAPTCHA	Google service that prevents form spam
Submit button	Submits all data collected in a form. No form is complete without the Submit button

---

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 setting	Purpose	Additional notes
Name	Identifies the field on form submissions	n/a
Required	Lets you require a form field to be filled in to submit the form	Blocks empty submits
Placeholder	Shows text in input that disappears on typing; should NOT replace labels or crucial instructions	Not available to assistive tech or translation tools; styleable from states menu
Text type	Specifies the type of input (e.g. email, phone, password)	Phone accepts chars & shows keypad; password hides typed chars
Autofocus	Decides if field auto-focuses when page loads	Watch for scroll/jump issues or hidden fields blocking submits

Submit Button

The Submit button’s settings let you set:

• Button text: What appears on the button (default: “Submit”)
• Waiting text: What replaces the button after it is clicked & before submission completes (default: “Please wait…”)

---

How to manage form settings

Customize success and error states

Select the form block and go to Form block settings to:

• Normal: Default state
• Success: Message after a successful submission
• Error: Message after a failed submission

Set the form name

The name you set associates the form with its submission data. If you don’t set unique names, all submission data appears under “Email Form.” Give descriptive names to distinguish forms.

Manage form submissions and notifications

• Specify recipients in Form block settings.
• Access advanced notifications in Site settings → Forms → Form notifications.
• For full website owners: access/manage form data in Site settings → Forms → Form submissions.

Redirect site visitors on form submission

Add a URL in the Redirect field to send users elsewhere after submission.

Set a custom action

Add a custom action to send submissions elsewhere (e.g. HubSpot). When you add this, Webflow does not process or send the notification. You can also connect Apps for more integrations.

View app connections

Connected Apps will appear in Connections. Note: Send form data to Webflow always appears unless you fully bypass Webflow processing.

---

Form data and GDPR

• If you collect personal data from EU residents (including through forms), you are a data controller under GDPR.
• Get appropriate consent for data collection.
• If building for clients, educate them about their responsibilities.
• Review responsibilities if connecting data to 3rd parties (e.g., Zapier).

Learn more:

• How to get ready for GDPR – and what Webflow’s doing

---

Troubleshooting

If your form can’t be submitted:

• If you’ve enabled reCAPTCHA, make sure all forms include it. Otherwise, submissions will fail.
• If you have hidden fields, ensure Autofocus is off for those.
• Free/unhosted sites are limited to 50 total form submissions. Upgrade your site plan to remove the cap.

If issues persist, contact customer support.

---

Back to webflow help