Skip to the content

Unbounce Plugin

Our integration for Unbounce supports the following features:

  • International Telephone Validation
  • Email Validation

Installation

To integrate Data8 validation into your Unbounce site, add the following Javascript code to your site after body. Remember to change 'Your-Api-Key-Here' to your own Data8 API key from the Data8 Dashboard:

   <script type="text/javascript">
// Global config for Data8 validation
var d8Validation = {
    apiKey: "your-api-key-here",
    email: {
        enabled: true,
        level: "Address",
        msg: "Email address is invalid"
    },
    phone: {
        enabled: true,
        useLineValidation: true,
        useMobileValidation: true,
        defaultCountryCode: 44,
        msg: "Phone number is invalid"
    }
};

// Runs on form submission
function startData8Validation(e, $) {
  e.preventDefault();

  // Build an array of validation callbacks
  var promises = [];

  // Find the form and all the phone & email fields in it
  var form = lp.jQuery('.lp-pom-form form');

  if (d8Validation.phone.enabled) {
      var phoneFields = lp.jQuery('input[type=tel]', form);

      phoneFields.each(function(idx, el) {
        promises.push(validatePhoneAsync(el).then(reportValidationResult));
      });
  }

  if (d8Validation.email.enabled) {
      var emailFields = lp.jQuery('input[type=email]', form);

      emailFields.each(function(idx, el) {
        promises.push(validateEmailAsync(el).then(reportValidationResult));
      });
  }

  // Wait for all the callbacks to complete. If the form is then valid, submit it
  Promise.all(promises).then(function(values) {
        form.submit();
  });
}

function validateEmailAsync(field, valid) {
    return new Promise(function (resolve, reject) {
        var params = {
            email: field.value,
            level: d8Validation.email.level,
            options: {
                ApplicationName: 'Unbounce'
            }
        }

        var req = new XMLHttpRequest();
        req.open("POST", "https://webservices.data-8.co.uk/EmailValidation/IsValid.json?key=" + d8Validation.apiKey);
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;

                if (this.status === 200) {
                    var result = JSON.parse(this.response);
                    if (!result.Status.Success)
                        resolve({ field: field, valid: true });
                    else if (result.Result !== "Invalid")
                        resolve({ field: field, valid: true });
                    else
                        resolve({ field: field, valid: false, msg: d8Validation.email.msg });
                } else {
                    resolve({ field: field, valid: true });
                }
            }
        };

        req.send(window.JSON.stringify(params));
    });
}

function validatePhoneAsync(field, valid) {
    return new Promise(function (resolve, reject) {
        var params = {
            telephoneNumber: field.value,
            defaultCountry: d8Validation.phone.defaultCountryCode,
            options: {
                UseLineValidation: d8Validation.phone.useLineValidation,
                UseMobileValidation: d8Validation.phone.useMobileValidation,
                ApplicationName: 'Unbounce'
            }
        }

        var req = new XMLHttpRequest();
        req.open("POST", "https://webservices.data-8.co.uk/InternationalTelephoneValidation/IsValid.json?key=" + d8Validation.apiKey);
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;

                if (this.status === 200) {
                    var result = JSON.parse(this.response);
                    if (!result.Status.Success)
                        resolve({ field: field, valid: true });
                    else if (result.Result.ValidationResult !== "Invalid")
                        resolve({ field: field, valid: true });
                    else
                        resolve({ field: field, valid: false, msg: d8Validation.phone.msg });
                } else {
                    resolve({ field: field, valid: true });
                }
            }
        };

        req.send(window.JSON.stringify(params));
    });
}

function reportValidationResult(result) {
    if (result.valid) {
        result.field.setCustomValidity("");
    }
    else {
        result.field.setCustomValidity(result.msg);
    }

    return result;
}

// Waits until window load to initialize
lp.jQuery(window).load(function(){
  lp.jQuery(function($) {
    $('.lp-pom-form .lp-pom-button').unbind('click tap touchstart').bind('click.formSubmit tap.formSubmit touchstart.formSubmit', function(e) {
      startData8Validation(e, $);
    });
    $('form').unbind('keypress').bind('keypress.formSubmit', function(e) {
      if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea')
      startData8Validation(e, $);
    });
  });
});
</script>

Should you ever wish to remove the Data8 validation from your Unbounce site, simply remove the Data8 code from your site.

Configuration

To configure the validation to suit your needs, there are variables at the top of the code that control the enabling of telephone and email validation. There are also options for enabling Mobile and Landline validation, and changing the level of email validation to perform, as well as setting custom validation messages for each service.

Remember to change the 'apiKey' to your unique key that can be obtained from the Data8 Dashboard.

Settings Code

Usage

After setting up the options to suit your needs, the relevant validation will be applied to the appropriate fields on your data-capture forms.

Telephone Validation

When Telephone Validation is enabled, all suitable telephone number fields are validated automatically. There are also three other options available to you for further control of validation: Landline Validation, Mobile Validation and Default Country Code, as well as a custom message to display. If entered data is identified as invalid, the error will be highlighted suitably on the form.

Option Description
Landline Validation If you have purchased our UK Landline Validation service, enable this option to use the enhanced level of validation for any UK landline numbers in addition to the standard level of validation provided by the International Telephone Validation service.
Mobile Validation If you have purchased our Mobile Validation service, , enable this option to use the enhanced level of validation for any mobile numbers in addition to the standard level of validation provided by the International Telephone Validation service.
Default Country Code The ISO 2-character country code or international dialling code of the country to validate the telephone number in, unless that number contains an explicit country code prefix.

Email Validation

When Email Validation is enabled, all suitable email address fields are validated automatically. The level of validation to apply to entered email addresses can be selected from a drop down on the settings page. See the table below for information on each level. If entered data is identified as invalid, the error will be highlighted suitably on the form.

Email Validation Levels:

Level Description
Syntax The supplied email is checked to ensure that it meets the standard email address format. This is the quickest option and would reject such incorrect email addresses as "noone@nowhere" and "N/A", but would accept incorrect email addresses that are correctly formed but that do not include a valid domain name such as "noone@data-9.com".
Domain The supplied email is checked to ensure that the domain name (the part to the right of the @ sign) exists and is set up to receive email. This is still normally very quick, but can take a few seconds in some cases. This check would reject incorrectly formatted email addresses in the same way as the Syntax check, and would also reject a misspelled domain name such as "noone@data-9.com". It can also detect when a domain name exists but does not handle email, such as "noone@example.com". It does not verify that the part of the email address to the left of the @ sign exists.
Server In addition to the Domain level checks, validates that at least one of the mail servers advertised for the domain is actually live.
Address In addition to the Server level checks, validates that the mail server accepts mail for the full email address.

The number of returned mail reduced by 28% as a result of the integrated reference to the goneaway file

Business Strategy Manager, Brookson Ltd

Start a Free 30 Day Trial Today

Start a free trial today