Unbounce: Add Address Validation to Your Forms

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.

Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.

Screenshots

Address Finder

Links

• Address Finder Plugin Documentation
• Unbounce

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.

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.

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/address-finder-bundled@2/dist/address-finder.min.js">
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    IdealPostcodes.AddressFinder.setup({
      apiKey: "YOUR API KEY",
      injectStyle: true,
      inputField: "#input",
      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 apiKey with your own API Key. Your API Key typically begins with ak_.

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:

IdealPostcodes.AddressFinder.setup({
  apiKey: "YOUR API KEY",
  injectStyle: true,
  inputField: "#input",
  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.