Adding email verification to your form

Installation Instructions

This page shows how to add Addressfinder’s email verification to a custom form.

The basic steps are:

• Find the html identifiers of the email field or fields you want to apply validation to.
• Copy/Paste the provided configuration script into your webpage.
• Adjust the configuration to match your form elements and credentials.

Step by step

You should have an existing web form containing an email address field.

It should already be working well and collecting emails. We will enhance this form to enable email address verification.

We will verify the email address added by your user. There will be visual feedback with an icon and a warning/error message if appropriate. Visit our feature page to see it in action.

If you do not have ID value(s) assigned to the form element(s), you can also use CSS selectors to identify the element(s). For example, you might use selectors such as input[type=email] or input[name=email_address].

  
<script>
(function (d) {
  // **************************************************
  // Addressfinder settings
  // **************************************************

  // STEP BY STEP integration instructions here:
  // https://addressfinder.nz/docs/email/integration-instructions/

  var conf = {
    // STEP 1 - update the property selectors using the ID attributes of your form fields
    addressSelector: "input[type=email]",

    // STEP 2: paste in your licence key
    licenceKey: "ADDRESSFINDER_DEMO_KEY",

    // STEP 3 (optional): customise the behaviour by adding some advanced options.
    // See integration instructions for the available options.
    rules: {
    }
  };

  d.addEventListener("DOMContentLoaded",function(){if(d.querySelector(conf.addressSelector)){var e=d.createElement("script");e.src="https://api.addressfinder.io/assets/email/v1/widget.js",e.async=!0,e.onload=function(){new AddressFinder.Email.Widget(conf.addressSelector, conf.licenceKey, conf)},d.body.appendChild(e)}});
})(document);
</script>
  

Paste the provided configuration script

You should paste the configuration script into the source code of your webpage. We suggest that you include it at the bottom of the page.

Adjust the configuration

You should now set the ID value for your email field. Notice that the ID value has a # prefix which needs to be retained. If you are using a CSS selector, then this is not necessary.

Next, update the licenceKey value to use your key. You can obtain this value from the credentials link in the portal sidebar

Advanced options

It is possible to customise your email verification widget by including some rules in the configuration script. The widget can be set up to behave in a stricter or looser manner than the default.

There are four attributes that can be customised. Details of the available options and default values can be found in the email verification Javascript reference documentation.

Working examples

We have several code examples demonstrating the email verification widget being used in a variety of scenarios.

Troubleshooting

Having trouble? Send us an email at support@addressfinder.nz, and we will have a look. Be sure to include the URL of the page, so we can see the page with the problem.