Unbounce: Add Address Validation to Your Forms

Integrate Address Validation to Your Unbounce Form

Updated 30 Dec 2020

This guide outlines how to attach address autocompletion to your Unbounce forms.

This integration works by inserting scripts and stylesheets into Unbounce's Builder page.

Screenshots

Address Finder

Activate address autocompletion on your address collection forms-screenshot

Populate your address fields in moments with Address Finder-screenshot

Support

If you need support, you can either reach out to us on our support page or drop by our developer chat page.

Installation

This integration works by inserting scripts and stylesheets into the Unbounce Builder page.

Access Dashboard

From the Unbounce dashboard, click on your page. On the Overview tab, scroll down the page to the Active Variant panel and click on the blue Edit button.

Visit your dashboard-screenshot

Create Address Fields

Next click on the address form. You will be directed to a modal where you can start adding address input fields to your form. A basic address form to capture a correct UK address requires the following fields:

Address line one
Address line two
Address line three
Post town
Postcode

You can optionally include additional fields, which are documented in our PAF data documentation.

Create address fields-screenshot

Be sure to create an input label to search for an address. Should you wish to hide the text, you can click on the Hide label checkbox. When selecting a label, you can alter its position in the form by clicking on the up and down arrows to the right of the panel.

Initialise Address Finder Plugin

Navigate to the bottom of the Unbounce Builder page.

Click on the JavaScripts tab, followed by Add New JavaScript. Give the script a name and paste in the following scripts:

<script 
  src="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/dist/ideal-postcodes-autocomplete.min.js" integrity="sha256-lZPaPHBx7V2Gj9iAc8QfVcW02KlWB2gbrqXpGfiEGgo=" 
  crossorigin="anonymous">
</script>

<script>
  new IdealPostcodes.Autocomplete.Controller({
    inputField: "#input",
    api_key: "Your API Key",
    outputFields: {
      line_1: "#address_line_one",
      line_2: "#address_line_two",
      line_3: "#address_line_three",
      post_town: "#post_town",
      postcode: "#postcode"
    }
  });
</script>

The values for the address lines correspond to the names set when creating the input fields.

Make sure you update the value for the api_key with your own API Key. Your API Key typically begins with ak_.

Adding the initialisation script-screenshot

Click on Done and remember to also save any progress.

Add Autocomplete Styles

Now navigate to the bottom of the Unbounce Builder page.

This time, click on the Stylesheets tab, followed by Add New Stylesheet. Give the stylesheet a name and paste in the link below:

<link
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/css/ideal-postcodes-autocomplete.css" 
  integrity="sha256-ewtQO/9EEPz6LsP/kWLv+bzykzIAr+d6s0WqA2B4clQ=" 
  crossorigin="anonymous"
/>

Adding Autocomplete styles-screenshot

Click on Done and remember to also save any progress.

Optional: Customise the Autocomplete Script

If you wish to add an additional field, include the parameter name from our documentation. For instance, adding a county field to your script will look like:

new IdealPostcodes.Autocomplete.Controller({
  inputField: "#input",
  api_key: "Your API Key",
  outputFields: {
    line_1: "#address_line_one",
    line_2: "#address_line_two",
    line_3: "#address_line_three",
    post_town: "#post_town",
    county: "#county",
    postcode: "#postcode"
  }
});

Testing

Your first key on your Ideal Postcodes account will carry a free test balance which you can use to verify and test your integration. Please contact support if you need a larger test balance.

Going Live

In order to go live, you will need to purchase a balance of lookups on your API Key. This can be done manually or automated from your dashboard. Each address search consumes one lookup from your key balance.

See our account setup guide for the quickest way to go live by creating your first API Key and enabling automated top-ups.

Configuration

See our Address Finder Plugin Documentation if you wish to add additional fields or customise behaviour in some way. Feel free to contact us or drop by our chat page if you need assistance.

API Key

Your API Key is central to how our service recognises your integration. See our guide on API Keys to find out more.

API Keys can also be safeguarded against potential misuse, please see our guide on securing your API Key to find out more.

Back to Guides