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

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

![Activate Address Lookup on your address collection forms-screenshot](/assets/images/gravity-form-demo-96c0238ec733f260158869ef30b5463b.gif) This integration works by hooking into Gravity Forms' custom HTML field.

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

This integration works by hooking into Gravity Form's 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 `Single Line Text` fields found under `Standard Fields`. A basic address form to capture a correct US address requires the following fields:

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

You may add other address fields, which are listed on the [address documentation page](/docs/api/find-address.md).

**Note the** `Field ID` number for each address field in the `Single Line Text` panel. You will need this later to configure the Address Lookup Plugin.

![Make a note of the Field ID-screenshot](/assets/images/gravity-form-1-647893fea904c44f8422f59b2824d46e.png)

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

#### Insert Code[​](#insert-code "Direct link to Insert Code")

Add a `HTML` block at the top of your form and add the Address Lookup Plugin script tag.

![Configure Address Lookup fields-screenshot](/assets/images/gravity-form-2-946181e3dcbb74a50d1cd2edfb782bb9.png)

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



<script>

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

    AddressZen.AddressLookup.setup({

      apiKey: "YOUR_API_KEY",

      outputFields: {

        line_1: 'input[name="input_1"]',

        line_2: 'input[name="input_2"]',

        city: 'input[name="input_4"]',

        state: 'input[name="input_5"]',

        zip_plus_4_code: 'input[name="input_6"]'

      }

    });

  });

</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 input field names of your target fields. If your Street Line One `Field ID` is `24`, this line should be replaced with `'input[name="input_24"]'`. 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).