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.
Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.
If you need support, you can either reach out to us on our support page or drop by our developer chat page.
This integration works by inserting scripts and stylesheets into the Unbounce Builder page.
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.
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:
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.
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_
.
Click on Done
and remember to also save any progress.
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"
/>
Click on Done
and remember to also save any progress.
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"
}
});
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.
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.
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.
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.