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

Integrate Address Validation to Your WordPress Gutenberg Forms Pages.

![Activate Address Finder on your address collection forms-screenshot](/assets/images/gutenberg-address-finder-1570702ed7260679c4e511146d382036.gif)

![Activate Postcode Lookup on your address collection forms-screenshot](/assets/images/gutenberg-postcode-lookup-demo-fca47df6f5e15771986e84654144a81a.gif)

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

This integration works by hooking into Gutenberg Forms' custom HTML fields. 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 `Text` blocks.

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](/assets/images/gutenberg-address-form-9e669f28add225d5ecb60a471338ffef.png)

You can optionally include additional fields, which are documented in our [PAF data page](/docs/data/paf.md).

**Note the** field labels associated with each `Text` block. In the above example, some of these are `Address Search`, `Address Line One`, `Post Town`, etc. You will need this to initialise address validation.

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

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

Add a `HTML` block at the bottom of your form.

![Create HTML block-screenshot](/assets/images/gutenberg-html-block-83aa3dea59f6eaa05a6f57cffc00113d.png)

Now add the Autocomplete Plugin script tag.

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



<script>

	IdealPostcodes.AddressFinder.setup({

		apiKey: "ak_test",

		outputFields: {

			line_1: 'input[aria-label="Address Line One"]',

			line_2: 'input[aria-label="Address Line Two"]',

			line_3: 'input[aria-label="Address Line Three"]',

			post_town: 'input[aria-label="Post Town"]',

			postcode: 'input[aria-label="Postcode"]',

		},

	});

</script>
```

You can optionally override CSS styles in the same `HTML` field. E.g.

```
<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 names of your target fields. These should match the label names on your form. If your first address line is `Address Line One`, then `line_1` should read `'input[aria-label="Address Line One"]'`. Do this for all the address fields you wish to include
3. Ensure `inputField` points to the same field as `line_1`

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 `abcde` will look like:

```
outputFields: {

  line_1: 'input[aria-label="Address Line One"]',

  line_2: 'input[aria-label="Address Line Two"]',

  line_3: 'input[aria-label="Address Line Three"]',

  post_town: 'input[aria-label="Post Town"]',

  county: 'input[aria-label="County"]',

  postcode: 'input[aria-label="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 `html box` above your form. This will provision the postcode search field, search button and address dropdown for the postcode lookup plugin.

![Add Postcode Lookup HTML Elements on top of the form](/assets/images/gutenberg-postcode-lookup-html-top-fbe3dfd34711e371de7a54a4250a9732.png)

```
<div>

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

	<div>

		<input

			type="text"

			placeholder="Lookup your postcode"

			id="idpc_input"

			style="display: inline"

		/>

	</div>



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

	<div>

		<input

			type="button"

			id="idpc_button"

			value="Lookup Postcode"

			style="margin-top: 10px"

		/>

	</div>



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

	<div

		id="idpc_dropdown"

		style="margin-top: 10px"

	></div>



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

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

</div>
```

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

Create another `html block` and place it at the bottom of the form. Add the Postcode Lookup script.

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



<script>

	IdealPostcodes.PostcodeLookup.setup({

		apiKey: "ak_test",

		context: "#idpc",

		button: "#idpc_button",

		input: "#idpc_input",

		selectClass: "#idpc_dropdown",

		outputFields: {

			line_1: 'input[aria-label="Address Line One"]',

			line_2: 'input[aria-label="Address Line Two"]',

			line_3: 'input[aria-label="Address Line Three"]',

			post_town: 'input[aria-label="Post Town"]',

			postcode: 'input[aria-label="Postcode"]',

		},

	});

</script>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the names of your target fields. These should match the label names on your form. If your first address line is `Address Line One`, then `line_1` should read `'input[aria-label="Address Line One"]'`. Do this for all the address fields you wish to include
3. Ensure `inputField` points to the same field as `line_1`

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 `abcde` will look like:

```
outputFields: {

  line_1: 'input[aria-label="Address Line One"]',

  line_2: 'input[aria-label="Address Line Two"]',

  line_3: 'input[aria-label="Address Line Three"]',

  post_town: 'input[aria-label="Post Town"]',

  county: 'input[aria-label="County"]',

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