[How To] Require A Business Email In Your Unbounce Forms

From time to time, it’s a good option to prevent “free” or “personal” email address form submissions in your landing pages – this really depends on what kind of campaign you’re running.

This has come up here in the community before (here, here, and here) so I thought it might be a good idea to create a single post with the most up-to-date solution for this.

In this post shared by @Mark_Wainwright (one of Unbounce’s superstar software developers), he demonstrates how to add custom validation in Unbounce form fields. Here are the instructions to prevent free/personal email address form submissions in your Unbounce landing pages:

Apply the rule to the form field

Step 1. Copy the following script and paste it into the Javascripts section of the builder:

<script>
  window.ub.form.validationRules.my_form_field.nonWebmailEmail = true;
</script>

<script>
  window.ub.form.customValidators.nonWebmailEmail = {
    isValid: function(value) {
      return /\@(?!(me|mac|icloud|gmail|googlemail|hotmail|live|msn|outlook|yahoo|ymail|aol)\.)/.test(value.toLowerCase());
    },

    message: 'Please enter your work email address',
  };
</script>

Step 2. Replace my_form_field with the ID of the form field you want to apply the rule to

View the original post here, which goes into more detail of adding custom validations to form fields.


Boom! You’re done. :boom:

10 Likes

Uau, that’s what we call customer service.

Just a question: I got a form field but I’m not finding the ID of the form field. What is this? It’s the missing piece for this puzzle.

@viniap This is in the form designer - each field in there will have a Field Name and ID - you are able to edit this!

2 Likes

Hi Jess,

my_form_field does not appear in the snippet of code you shared, so I’m not sure where to replace my form ID?

Best,

Marius

Hi Marius, I’ve annotated where you can find it in the code. Hope this helps :slight_smile:

Hi Jess,

Thank you for getting back to me.

I don’t think I have implemented the code correctly. Apologies, I’m not a developer so things take an extra iteration with me.

I am not sure whether to add the form ID (found under Element Metadata) or the Form Field (found under “Edit Form Fields” - see screenshot). If the latter, what exactly do I add to the code?

I ran tests using a regular Gmail, and it accepted - which it shouldn’t. For your reference, I added the full code below:

Best,

Marius

Marius got my questions! I’m also stuck on this point.

Hi Marius,

Could you share the code you implemented for us to check? Thanks :slight_smile:

-Jess

Hi Jess,

Yes of course, thanks for asking.

<script>
  window.ub.form.customValidators.nonWebmailEmail = {
    isValid: function(value) {
      return /\@(?!(me|mac|icloud|gmail|googlemail|hotmail|live|msn|outlook|yahoo|ymail|aol)\.)/.test(value.toLowerCase());
    },

    message: 'Please enter your work email address',
  };
</script>

<script>
  window.ub.form.validationRules.lp-pom-form-19.nonWebmailEmail = true;
</script>

In red you see where I added the form ID.

I forgot to attach a screenshot of the Form Field found under “Edit Form Fields”, so here it is.

Thank you for taking the time.

Best wishes,

Marius

Thanks @Jess, super useful! Presumably this works with popup forms also?

If so the timing of this is perfect. We just launched a data studio dashboard with a lead capture element requesting Business Email, but are getting a lot of personal / generic emails.

1 Like

Hey Marius! I think I have all the info you’re looking for.

As per your screenshot above, in this instance you’ll want to replace my_form_field with email, which is the form field ID.

Here’s a screenshot to explain it a bit better:

Let me know if it works!

-Jess

That’s awesome, @Elliot_Sheen! I’d love to hear how that performs! :muscle:

To answer your question, YES! Sorry I didn’t respond sooner!

-Jess

1 Like

I tried this one. But not working.