It’s a single field email sign-up form and at the moment it’s allowing non-emails e.g. “test@test” to be submitted which then flags as a possible error in Zapier and Klaviyo.
Other forum posts say that in HTML5, this is a valid email entry, but in practice that kind of email isn’t useful – is there a way of making it a requirement to have a valid domain ending on the email before it can be submitted e.g. “firstname.lastname@example.org” ?
Another forum post linked to this article about validation – <input type="email"> - HTML: HyperText Markup Language | MDN
For my use-case this part of the article would be sufficient:
- A single properly-formed e-mail address. This doesn’t necessarily mean the e-mail address exists, but it is at least formatted correctly. In simple terms, this means
email@example.com. There’s more to it than that, of course; see Validation for a regular expression that matches the e-mail address validation algorithm.
Can anyone shed any light on how to add the code into Webflow to make this level of email validation happen?
Here is my site Read-Only: (Webflow - Sequence)
You can test the regex I use here if you like;
Here’s how to validate your own email field.
In the designer, select your Email Input element, and add a custom attribute.
Name the attribute
pattern, and paste in this value…
I’ve seen a lot of requests for this, so here’s a cloneable;
And more details on the approach;
This is a thing of beauty, thank you for sharing – have added to the live-site here www.sequencehq.com
Ha ha yes the HTML5 specification team got a lot of things right.
Hey @memetican, seems like your live site is broken and the pattern does not work anymore to avoid foo@bar to be submitted, any idea what needs to be changed in order for this to work again?
Thanks a lot in advance!
Hey Carl, thanks for sharing this. Are you using Google Chrome?
Chrome appears to have introduced a bug with patterns earlier this year. I’ll do a bit of research on this, but it looks like it is having a problem processing hyphens in the regex pattern.
Here’s a much simpler one that’s working on my Chrome.
Give this a go and let me know if it works for you.
Here’s an even looser match, also working for me;