Validating email & telephone numbers in Unbounce forms

Unbounce is a popular system for building landing pages and lead capture forms, but like many such platforms it offers only basic validation of the details entered on its forms, leading to lost conversions due to invalid email addresses or phone numbers being entered. 

Thankfully Data8 can improve on this experience by integrating our popular email and telephone number validation solutions directly into your Unbounce page, ensuring that all contact details are valid before the form is submitted.

To get started you’ll need:

1. An Unbounce page with an email or telephone number field
2. A Data8 account (free sign up here)
3. Some credits for the Email Validation or International Telephone Validation service (ask your Data8 account manager for some free testing credits if you don’t already have any)

Now for the technical bit:

1. Get your Data8 Ajax API Key and add your domain name to the list of authorized domains
2. Find the name of the field in your Unbounce page that you want to validate
3. Add the following script to the header of your Unbounce page:

window.jQuery = lp.jQuery;
https://webservices.data-8.co.uk/javascript/loader.ashx?key=ajax-api-key&load=InternationalTelephoneValidation,EmailValidation
https://webservices.data-8.co.uk/javascript/jqueryvalidation_min.js

window.module.lp.form.data.validationRules.phone_number.d8val_inttelephone = true;
window.module.lp.form.data.validationRules.email_address.d8val_email = true;

Make sure you replace the highlighted values with the Ajax API Key and the field names you got earlier. You don’t have to validate both phone numbers and email addresses, and you can validate more than one field of each type – just repeat the window.module.lp.form.data.validationRules…. lines as many times as you need for each field you want to validate, and use d8val_inttelephone for validating phone numbers and d8val_email for email addresses.

That’s it – our enhanced validation services will now be applied to you form and you should start to see an increase in the conversion rate of your form!

A few more advanced options you can use if necessary:

1. Add UK Landline and Mobile Validation services. The d8val_inttelephone validation option applies our standard rule-based validation, but we can also check international mobile numbers and UK landline numbers in real-time against the telephone networks. To use this enhanced service, replace d8val_inttelephone with d8val_inttelephone_mobile_line
2. Customise the error messages shown when a phone number or email address is rejected by our services:
   module.lp.form.data.validationMessages.phone_number.d8val_inttelephone = “Invalid telephone number”;
   window.module.lp.form.data.validationMessages.email_address.d8val_email = “Invalid email address”