Skip to main content

Unbounce Integration

Integrate Address Validation to Your Unbounce Form

Demo

Activate address autocompletion on your address collection forms-screenshot

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 US address requires the following fields:

  • Street Line One
  • Street Line Two
  • City
  • State
  • ZIP Code

You can optionally include additional fields.

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.

initialize Address Lookup 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:

Adding the initialisation script-screenshot

<script src="https://cdn.jsdelivr.net/npm/@addresszen/address-lookup">
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
AddressZen.AddressLookup.setup({
apiKey: "YOUR API KEY",
outputFields: {
line_1: "#street",
line_2: "#street",
city: "#city",
state: "#state",
zip_plus_4_code: "#zip_code"
}
});
});
</script>

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

info

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.

Configuration

See our Address Lookup Plugin Documentation if you wish to customize Address Lookup.

info

If you need support, you can reach out to us on our support page.