How can I add email validation to the subscribe form in Webflow?
TL;DR
- Set the form field’s type to Email and check the Required box in the Element Settings Panel.
- Customize the error message if desired, then publish and test the form to ensure only valid emails are accepted.
You can easily add email validation to a Webflow subscribe form using built-in form field settings.
1. Use the Email Field Type
- Select the form field where users will enter their email.
- In the Element Settings Panel (gear icon), set the field’s Type to Email.
- This automatically applies basic email format validation (e.g., must include "@" and a domain).
2. Set the Field as Required
- While selecting the email field, check the “Required” box in the Element Settings Panel.
- This ensures the form won’t submit unless a valid email is entered.
3. Customize Error Messages (Optional)
- Click on the Form Block to reveal the Form Success and Error states.
- Switch to the Error state, and edit the default error message (e.g., “Please enter a valid email address”) to fit your brand.
4. Test the Form
- Publish your site and try submitting the form with:
- A valid email address (e.g., user@example.com)
- Invalid inputs (e.g., user@, user.com, blank field)
- Webflow will automatically prevent submission and trigger the error message for invalid input.
Summary
To add email validation in Webflow, set the form field’s type to Email and enable Required—Webflow then automatically ensures only valid email formats are accepted before submission.