# ![Ideal Postcodes Divi Integration](https://img.ideal-postcodes.co.uk/Divi%20Integration%20Logo%403x.png)

Integrate Address Validation with the WordPress Divi Page Builder.

## Features[​](#features "Direct link to Features")

* Bind address autocompletion to your address fields
* Add one or more postcode lookup fields

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

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

![Enable Postcode Lookup on your address fields-screenshot](https://img.ideal-postcodes.co.uk/divi-postcode-lookup.png)

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

![Activate Address Finder on your address collection forms-screenshot](https://img.ideal-postcodes.co.uk/divi-autocomplete.png)

## Installation[​](#installation "Direct link to Installation")

Below are the instructions to add Postcode Lookup or Address Finder.

### Create Address Inputs[​](#create-address-inputs "Direct link to Create Address Inputs")

Add address input fields to your form. These should be created using `Single Line Text` fields found under `Standard Fields`.

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

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

You can optionally include additional fields, which are documented in our [PAF documentation](/docs/api/addresses.md).

**Note the** `Field ID` number for each address field created. You will need this later to configure the Postcode Lookup Plugin and/or Autocomplete Plugin.

![Make a note of the Field ID-screenshot](https://img.ideal-postcodes.co.uk/divi-address-field-id.png)

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

#### Install Plugin[​](#install-plugin "Direct link to Install Plugin")

Create a code block beneath your address form. Preferably, at the bottom point of your page. In the `Code` box add the Autocomplete Plugin script tags.

```
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled@4"></script>
```

![Insert a Code box-screenshot](https://img.ideal-postcodes.co.uk/divi-add-code.png)

#### Initialise Autocomplete[​](#initialise-autocomplete "Direct link to Initialise Autocomplete")

Now, in the same `Code` box as above, append the Autocomplete initialisation code.

```
<script>

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

		IdealPostcodes.AddressFinder.setup({

			apiKey: "ak_test",

			inputField: 'input[data-original_id="line_1"]',

			outputFields: {

				line_1: 'input[data-original_id="line_1"]',

				line_2: 'input[data-original_id="line_2"]',

				line_3: 'input[data-original_id="line_3"]',

				post_town: 'input[data-original_id="post_town"]',

				postcode: 'input[data-original_id="postcode"]',

			},

		});

	});

</script>
```

![Configure autocomplete fields-screenshot](https://img.ideal-postcodes.co.uk/divi-autocomplete-config.png)

You can optionally override CSS styles in the same `HTML` field:

```
<style>

	@media only screen and (min-width: 641px) {

		ul.idpc_ul {

			min-width: 0 !important;

			width: calc(50% - 8px);

		}

	}

</style>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the input field names of your target fields. If your Address Line One `Field ID` is `line_1`, this line should be replaced with `'input[data-original_id="line_1']'`. Do this for all the address fields you wish to include
3. Ensure `inputField` points to the same field as Address line One

If you wish to add an additional field, include the parameter name [from our documentation](/docs/api/addresses.md). For instance, adding a county field with Field ID `county` will look like:

```
outputFields: {

  line_1: 'input[data-original_id="line_1"]',

  line_2: 'input[data-original_id="line_2"]',

  line_3: 'input[data-original_id="line_3"]',

  post_town: 'input[data-original_id="post_town"]',

  county: 'input[data-original_id="county"]',

  postcode: 'input[data-original_id="postcode"]'

}
```

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

#### Add Postcode Lookup HTML elements[​](#add-postcode-lookup-html-elements "Direct link to Add Postcode Lookup HTML elements")

Create a new `Code` box above your form. This will provision the postcode search field, search button and address dropdown for the postcode lookup plugin.

```
<div>

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

	<div>

		<input

			type="text"

			placeholder="Lookup your postcode"

			id="idpc_input"

		/>

	</div>

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

	<div>

		<input

			type="button"

			id="idpc_button"

			value="Lookup Postcode"

		/>

	</div>

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

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

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

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

</div>
```

You will also need to append styles to suit your theme to the HTML above. The following snippet styles the postcode lookup fields according to a custom theme.

```
<div class="gform_wrapper">

	<div class="ginput_container ginput_container_text">

		<input

			type="text"

			placeholder="Lookup your postcode"

			class="medium"

			id="idpc_input"

		/>

	</div>

	<div

		class="gform_footer"

		style="margin: 0;"

	>

		<input

			type="button"

			id="idpc_button"

			class="gform_button button"

			value="Lookup Postcode"

		/>

		<div

			id="idpc_dropdown"

			style="margin-top: 1em"

		></div>

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

	</div>

</div>
```

![Add Postcode Lookup fields-screenshot](https://img.ideal-postcodes.co.uk/divi-postcode-lookup-fields.png)

#### Install Plugin[​](#install-plugin-1 "Direct link to Install Plugin")

Add a `Code` box at the top of your form and add the Postcode Lookup plugin script tag.

```
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled"></script>
```

In the same Code box, add the Postcode Lookup initialisation script.

```
<script>

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

		IdealPostcodes.PostcodeLookup.setup({

			apiKey: "ak_test",

			context: "#idpc",

			button: "#idpc_button",

			input: "#idpc_input",

			selectClass: "#idpc_dropdown",

			outputFields: {

				line_1: 'input[data-original_id="line_1"]',

				line_2: 'input[data-original_id="line_2"]',

				line_3: 'input[data-original_id="line_3"]',

				post_town: 'input[data-original_id="post_town"]',

				postcode: 'input[data-original_id="postcode"]',

			},

		});

	});

</script>
```

![Configure the Postcode Lookup plugin-screenshot](https://img.ideal-postcodes.co.uk/divi-postcode-lookup-init.png)

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the input field names of your target fields. If your Address Line One `Field ID` is `line_1`, this line should be replaced with `'input[data-original_id="line_1"]'`. Do this for all the address fields you wish to include
3. Ensure `button`, `input` and `selectClass` matches the IDs of the lookup button, lookup field and address dropdown container in the fields created in Step 2

If you wish to add an additional field, include the parameter name [from our documentation](/docs/api/addresses.md). For instance, adding a county field with Field ID `county` will look like:

```
outputFields: {

  line_1: 'input[data-original_id="line_1"]',

  line_2: 'input[data-original_id="line_2"]',

  line_3: 'input[data-original_id="line_3"]',

  post_town: 'input[data-original_id="post_town"]',

  county: 'input[data-original_id="county"]',

  postcode: 'input[data-original_id="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>.