Webflow Forms

Validating Emails

No items found.

HTML5 has a built-in email input type, and the Webflow designer supports it directly. However, many designers find that browser validation for email address fields is lacking for modern email addresses.

By itself, it will accept this as a valid email;

foo@bar

Why? Well there's a lot of ancient history here, that says that's actually a valid email address... even though today, on the public Internet, you'd never see a domain like that.

So how do we prevent that?

In addition to setting the field type to email, we add the following custom attribute;

pattern =

(?:[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

Best Practices

Combine validation techniques, they layer nicely.

In Webflow's designer;

  1. Set the input type to email
  2. Add the custom pattern attribute above to validate your email
  3. Optionally, make the field required
  4. Optionally, improve error messaging. You can add a custom title attribute to describe what is expected.

Demo

See this in action;

Resources

Limitations

Technically, it's possible for email addresses to use non-standard characters, particularly in Internationalized domain names. See discussion here.

Overview
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
Intro
100
Input Number & Decimal Places
Intro
101
WIP
Numeric Range Sliders
Intro
102
WIP
Multi-Select Dropdown
Intro
104
Forms Validation
Forms Validation Basics
Intro
200
Input Types
Intro
201
Using Regex Patterns in Forms Validation
Intro
202
Custom Validation Errors
Adv
203
Forms Validation Techniques
Validating Emails
Intro
301
Blocking Free Email Provider Addresses
Intro
302
Requiring Checkboxes
Intro
302
International Phone Numbers
Int
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
Intro
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms
Intro
501
SPAM Blocking Techniques
CAPTCHA Approaches
601
No items found.
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.