Skip to main content

The goal here is to apply a script for the email field in forms to alert a user when the text they have entered is not an actual email address. Typos can happen often but we also need to try and prevent users from submitting “any-random-text” as an email address in forms.

(As of this post, Unbounce allows ex: “abc” to be submitted and counted as a conversion. Which throws of stats…sad face)


Guaranteeing valid email leads will assist in legitimate conversions and will help prevent false leads. Therefore a better spend of money and confidence that the emails gathered are legit.


I grabbed an example script from another topic and included the capability to validate full email addresses for Unbounce email forms. included below When a user tries to type in anything that is not formatted like a full email address, they will get an alert message.


For example, I type in “abc” it won’t work… However, if I wanted to fake an email address like "abc@test.com" be aware, that WILL submit. You will need to get your hands dirty in another script to check for legit email address, like mailcheck. But in the mean-time, this quick script will help weed out a few users.


In your Unbounce builder, add the javascript below to your page/variant in the HEAD placement. Click Save. Don’t forget to test in the preview. The alert should look something like the included screenshot…


1



<script>

lp.jQuery(function($) {
var field = 'email';
var message = 'Invalid email address. Please make sure it looks like this: email@website.com';
var rules = module.lp.form.data.validationRulesmfield];
$.validator.addMethod('notWebmail', function(value, field) {
var valid = /^(( ^<>()\i\]\\.,;:\s@"]+(\.;^<>()\\\]\\.,;:\s@"]+)*)|(".+"))@((\:\0-9]{1,3}\..0-9]{1,3}\.-0-9]{1,3}\.-0-9]{1,3}\])|((1a-zA-Z\-0-9]+\.)+)a-zA-Z]{2,}))$/.test(value.toLowerCase());
return valid || (!rules.required && !value);
}, message);
rules.notWebmail = true;
});


</script>



Hope this helps 🙂

Hey @Kyle.C,


Unbounce already validates email addresses if you are using the right field.


There is really no need to add one more script to do it.



Best,

Hristian


It’s absolutely true! A colleague pointed it out to me. But I decided to leave the post here anyway.


Thanks for the reply, maybe this will still help other folks who have completely scrolled passed the checkbox. I hate it when I miss the obvious 😬


Unbounce recently made an update to the default validation for email addresses, by no longer requiring a TLD. Technically, emails do not need a TLD, but for my use case, I’d very much like to include this as part of the validation. Therefore, I have tested the script from this thread.


However, I am running into an issue when using it in conjunction with a multistep form, which also uses custom script. You can see an example on this page: https://freekit.birchgold.com/tra-test-4320/


When the multistep form works correctly, as you move from field to field, the cursor is automatically in each new field. However, when I use this additional script, when you go from the last name field to email field, the cursor disappears. This means that you have to click back into the field to input the email address.


Do you have any suggestions for how to get the cursor to remain in the email field after submitting a last name?


I’d love to see domain and domain extension validation included so that typos like “gmial” or “.con” are flagged user side for correction before submit. Maybe Unbounce will consider bringing this to the table as part of the platform so that we don’t have to rely on configuring scripts or third-party api calls.


You can now validate emails at the domain and mailbox levels in Unbounce with the free Verifalia email checker widget: https://verifalia.com/email-verification-widget

Here is the step by step guide to do that: https://verifalia.com/help/email-verification-widget/how-to-block-invalid-emails-in-unbounce-landing-pages


Reply