![](/img/icons/integrations/divi.svg)

# Divi

Integrate Address Validation with the WordPress Divi Page Builder.

## Features

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

## Screenshots

### Postcode Lookup

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

### Address Lookup

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

## Installation

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

### 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/find-address.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 Lookup

#### 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.

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

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

#### Initialize Autocomplete

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

```html
<script>
  document.addEventListener("DOMContentLoaded", function() {
    AddressZen.AddressLookup.setup({
      apiKey: "zenkey",
      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:

```html
<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/find-address.md). For instance, adding a county field with Field ID `county` will look like:

```javascript
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 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.

```html
<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.

```html
<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

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

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

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

```html
<script>
  document.addEventListener("DOMContentLoaded", function() {
    IdealPostcodes.PostcodeLookup.setup({
      apiKey: "zenkey",
      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` match 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/find-address.md). For instance, adding a county field with Field ID `county` will look like:

```javascript
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

See our [Address Lookup Plugin Documentation](/docs/address-lookup.md) if you wish to customize Address Lookup.

info

If you need support, you can reach out to us on our [support page](https://addresszen.com/support).