# ![Unbounce Integration](https://img.ideal-postcodes.co.uk/Unbounce%20Integration%20Logo@3x.png)

Integrate Address Validation to Your Unbounce Form

## Screenshots[​](#screenshots "Direct link to Screenshots")

### Address Finder[​](#address-finder "Direct link to Address Finder")

![Activate address autocompletion on your address collection forms-screenshot](https://img.ideal-postcodes.co.uk/unbounce-form-1.png)

![Populate your address fields in moments with Address Finder-screenshot](https://img.ideal-postcodes.co.uk/unbounce-form-2.png)

### Postcode Lookup[​](#postcode-lookup "Direct link to Postcode Lookup")

![Populate your address fields in moments with Postcode Lookup-screenshot](/assets/images/unbouce-pl-demo-f55d16e56bb861a4c846b14ecc126e56.gif)

## Create Form Fields[​](#create-form-fields "Direct link to Create Form Fields")

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

### Access Dashboard[​](#access-dashboard "Direct link to 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](https://img.ideal-postcodes.co.uk/unbounce-dashboard.png)

### Create Address Fields[​](#create-address-fields "Direct link to 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](/docs/data/paf.md).

![Create address fields-screenshot](https://img.ideal-postcodes.co.uk/unbounce-form-creation.png)

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[​](#initialise-address-finder "Direct link to Initialise Address Finder")

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@4"></script>



<script>

	document.addEventListener("DOMContentLoaded", function () {

		IdealPostcodes.AddressFinder.setup({

			apiKey: "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 `apiKey` with your own API Key. Your API Key typically begins with `ak_`.

![Adding the initialisation script-screenshot](https://img.ideal-postcodes.co.uk/unbounce-script.png)

Click on `Done` and remember to also save any progress.

## Initialise Postcode Lookup[​](#initialise-postcode-lookup "Direct link to Initialise Postcode Lookup")

Create a new Custom HTML and place it above your first address field. This will create the postcode search field, search button and address dropdown for the plugin. Paste the code below

![Adding the custom html for postcode lookup](/assets/images/unbounce-custom-html-abd305e096de70e568a166b583c74c89.png)

```
<div>

	<!-- Postcode search field will appear below -->

	<div>

		<input

			type="text"

			placeholder="Lookup your postcode"

			id="idpc_input"

		/>

	</div>



	<br />



	<!-- Search button will appear below -->

	<div>

		<input

			type="button"

			id="idpc_button"

			value="Lookup Postcode"

		/>

	</div>



	<br />



	<!-- Address dropdown field will appear below -->

	<div id="idpc_dropdown"></div>

	<!-- Any error messages will appear here -->

	<div id="idpc"></div>

</div>
```

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/postcode-lookup-bundled"></script>



<script>

	document.addEventListener("DOMContentLoaded", function () {

		IdealPostcodes.PostcodeLookup.watch({

			apiKey: "ak_test",

			context: "#idpc",

			outputFields: {

				line_1: "#street_line_one",

				line_2: "#street_line_two",

				post_town: "#city",

				county: "#state",

				postcode: "#zip_code",

			},

			button: "#idpc_button",

			input: "#idpc_input",

			selectContainer: "#idpc_dropdown",

		});

	});

</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](/assets/images/unbounce-pl-script-3898480722d10bb43cb6230ec4cb0501.png)

Click on `Done` and remember to also save any progress.

#### Optional: Customise the Autocomplete Script[​](#optional-customise-the-autocomplete-script "Direct link to Optional: Customise the Autocomplete Script")

If you wish to add an additional field, include the parameter name [from our documentation](/docs/data/paf.md). For instance, adding a county field to your script will look like:

```
  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[​](#configuration "Direct link to Configuration")

See our [Address Finder Plugin Documentation](/docs/address-finder.md) if you wish to customise Address Finder.

See our [Postcode Lookup Plugin Documentation](/docs/postcode-lookup.md) if you wish to customise Postcode Lookup.

info

Still need help? Contact our support team via live chat on our website or email <support@ideal-postcodes.co.uk>.