# Elementor

Add address autocompletion and postcode lookup to your Elementor pages.

## Demo[​](#demo "Direct link to Demo")

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

![Activate Address Finder on your address collection form](/assets/images/elementor-af-demo-9bb55654f2cdf676cac06a4faef66c3a.gif)

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

![Quickly populate your address fields](/assets/images/elementor-pl-demo-b7042c4fc9e1ecc2db614316295bc665.gif)

***

***

## Form Creation[​](#form-creation "Direct link to Form Creation")

This integration works by adding our Address Validation tools using Elementor's page builder. This requires you to upgrade your account to the Pro version to access the necessary components. Below are the instructions to add Postcode Lookup or Address Finder.

First create a form, to do this on Elementor scroll down to the Pro section on the left-side menu and choose 'Form'

![Elementor pro side navigation highlighting Form component](/assets/images/elementor-form-a14a4d5a74e65ee7c5fe76d881e09e24.png)

A basic address form to capture a correct UK address should have the following fields:

* Address line one (required)
* Address line two
* Address line three
* Post town (required)
* Postcode (required)

![Create address fields-screenshot](/assets/images/elementor-inputs-56f694a03367513b70ad9aacc08cf51b.png)

You can optionally include additional fields, which are listed in the [Address data guide](/docs/data/paf.md).

***

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

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

Look for the HTML component, it is located in the General section of the Elementor components menu. Place it underneath the form. Click on the HTML component and add the script below.

![Initialise Address Finder](/assets/images/elementor-af-install-3f0252afc0b08bb56004a6aef182ec0a.png)

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



<script>

	IdealPostcodes.AddressFinder.watch({

		apiKey: "ak_test",

		outputFields: {

			line_1: "#form-field-line_1",

			line_2: "#form-field-line_2",

			line_3: "#form-field-line_3",

			post_town: "#form-field-post_town",

			postcode: "#form-field-postcode",

		},

	});

</script>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your address fields. If your Address Line One has an id=`address-line-one`, ensure that `line_1` reads `'#address-line-one'`

If you wish to add an additional field, include the parameter name [from our documentation](/docs/data/paf.md). For instance, adding a UPRN field with an ID `#form-field-uprn` will look like:

```
outputFields: {

  line_1: '#form-field-line_1',

  line_2: '#form-field-line_2',

  line_3: '#form-field-line_3',

  post_town: '#form-field-post_town',

  postcode: '#form-field-postcode',

  uprn: '#form-field-uprn'

}
```

info

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

***

***

### 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")

Look for the HTML component, it is located in the General section of the Elementor components menu. Place it one above and underneath the form.

![Elementor Postcode Lookup setup](/assets/images/elementor-pl-install-b5d0eddc87f66e82b225666af652655a.png)

Click on the HTML component above the form and add the script below. This will generate the input field and button needed for Postcode Lookup.

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

caution

The HTML generated by the Postcode Lookup Library does not have any styling. Postcode Lookup CSS classes can be found [here](/docs/postcode-lookup/css-classes.md)

Next, add the script below on the second HTML component.

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



<script>

	IdealPostcodes.PostcodeLookup.watch({

		apiKey: "ak_test",

		context: "#idpc",

		outputFields: {

			line_1: "#form-field-line_1",

			line_2: "#form-field-line_2",

			line_3: "#form-field-line_3",

			post_town: "#form-field-post_town",

			postcode: "#form-field-postcode",

		},

	});

</script>
```

If you wish to add an additional field, include the parameter name [from our documentation](/docs/data/paf.md). For instance, adding a UPRN field with an ID `#form-field-uprn` will look like:

```
outputFields: {

  line_1: '#form-field-line_1',

  line_2: '#form-field-line_2',

  line_3: '#form-field-line_3',

  post_town: '#form-field-post_town',

  postcode: '#form-field-postcode',

  uprn: '#form-field-uprn'

}
```

info

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