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... even though today, on the public Internet, you'd never see an address like 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}$
NOTE | NOV-2023: 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 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])+)\])
Combine validation techniques, they layer nicely.
In Webflow's designer;
See this in action;
Technically, it's possible for email addresses to use non-standard characters, particularly in Internationalized domain names. See discussion here.
