How to add a required field to a Webflow form?

Form validation ensures visitors fill in the information you actually need. Webflow makes individual fields required at the element level — no custom code necessary.

Making a field required in the Designer

Steps:

1. Open your project in the Webflow Designer
2. Click on the specific form field you want to make required (text input, email field, textarea, etc.)
3. In the right sidebar, go to the Element Settings panel (gear icon)
4. Toggle the Required switch to On
5. Repeat for any other fields that need validation
6. Publish your site

When a visitor tries to submit the form without filling in a required field, Webflow blocks the submission and highlights the missing field with a browser-native validation message.

Customizing the validation message

By default, browsers show generic messages like "Please fill out this field." To customize the message:

1. Select the required field
2. In Element Settings, find the Validation Message text field
3. Enter your custom message — e.g., "Please enter your email address"
4. Publish

Custom messages give visitors clearer guidance on what's expected, which improves form completion rates.

Required fields and field types

Webflow supports required validation on most native form elements:

• Text input — standard single-line fields
• Textarea — multi-line text areas
• Email field — validates format and presence
• Select dropdown — ensures a selection is made
• Radio buttons — at least one option must be selected
• Checkbox — useful for terms acceptance (single checkbox required)
• File upload — ensures a file is attached

Note: The email field type provides both required validation and format validation. A visitor must enter something and it must look like an email address.

Common issues

• Required fields not enforcing: Make sure you published the site after toggling the Required setting. Changes in the Designer don't take effect until publish.
• Form submits anyway with empty fields: This can happen if you're using a custom HTML form instead of Webflow's native Form block. Only native Webflow form elements support the built-in required toggle.
• Styling the error state: Webflow lets you style the "field focused" and "field error" states in the Style panel. Use these to visually indicate which fields need attention — a red border or a different background color helps visitors spot errors quickly.
• Conditional required fields: Webflow doesn't natively support conditional logic (e.g., "require phone only if the user selects 'Call me back'"). For that, you'd need custom JavaScript validation or a third-party form tool like Formstack embedded in your Webflow site.

Best practices

• Only require what you truly need. Every additional required field reduces form completion rates. Ask for the minimum information necessary.
• Mark required fields visually. Add an asterisk (*) or a "Required" label so visitors know upfront what's expected.
• Group required fields logically. Place the most important required fields at the top of the form.
• Test on mobile. Browser-native validation behaves differently across devices. Submit your form on both desktop and mobile to confirm the experience is consistent.