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

Integrate Address Validation to Your WordPress Gutenberg Forms Pages.

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

![Activate Address Lookup on your address collection forms-screenshot](/assets/images/gutenberg-demo-7e1017b159ec93153a845acb7c818b59.gif)

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

This integration works by hooking into Gutenberg Forms' custom HTML fields. Below are the instructions to add Address Lookup.

### 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 US address requires the following fields:

* Street Line One
* Street Line Two
* City
* State
* ZIP Code

![Create address fields-screenshot](/assets/images/gutenberg-form-d55c5704f4e1d54e6e366bc4d3101076.png)

You can optionally include additional fields.

note

The field labels associated with each `Text` block. In the above example, some of these are `Street Line One`, `City`, etc. You will need this to initialize address validation.

### Add Address Lookup[​](#add-address-lookup "Direct link to Add Address Lookup")

#### 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-7a38d0d2e7259863b2203dc052b85f5f.png)

Now add the Autocomplete Plugin script tag.

```
<script 

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

</script>



<script>

AddressZen.AddressLookup.setup({

  apiKey: 'YOUR_API_KEY',

  outputFields: {

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

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

    city: 'input[aria-label="City"]',

    state: 'input[aria-label="State"]',

    zip_plus_4_code: 'input[aria-label="ZIP Code"]',

  }

});

</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 `Street Line One`, then `line_1` should read `'input[aria-label="Street Line One"]'`. Do this for all the address fields you wish to include

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