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.
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])+)\])
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.