Skip to main content

Unbounce Integration

Integrate Address Validation to Your Unbounce Form

Screenshots#

Address Finder#

Activate address autocompletion on your address collection forms-screenshot

Populate your address fields in moments with Address Finder-screenshot

Installation#

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

info

If you need support, you can either reach out to us on our support page or drop by our developer chat 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/address-finder-bundled@3"></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_.

Adding the initialisation script-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:

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"  }});

Configuration#

See our Address Finder Plugin Documentation if you wish to customise Address Finder.

See our Postcode Lookup Plugin Documentation if you wish to customise Postcode Lookup.