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 foo@bar is actually a valid email address on internal networks... even though today, on the public Internet, you'd never see an address like that.
So how do we prevent that?
In addition to setting the field type to email, we'll add a pattern attribute to further specify what we consider as valid input.
In Webflow, you do this by selecting the input field and then adding a custom attribute. Here we'll use;
pattern =
^[A-Z0-9a-z._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,64}$If you have problems with this on any browsers, you can try an even looser match for your pattern;
pattern =
^[\w\-\.]+@([\w\-]+\.)+[\w\-]{2,10}$IMPORTANT CHANGE
I've updated this recommended pattern due to a Chrome bug that was spotted in the Webflow forum- thanks Carl! Here are some details of the bug.
The original pattern below, which is much more precise and complete, no longer appears to work properly in Chrome.
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;
- Set the input type to email
- Add the custom pattern attribute above to validate your email
- Optionally, make the field required
- Optionally, improve error messaging. You can add a custom title attribute to describe what is expected.
Demo
See this in action;
Resources
- General Email Regex - RFC 5322
Limitations
Technically, it's possible for email addresses to use non-standard characters, particularly in Internationalized domain names. See discussion here.
