![](/img/icons/integrations/gravity-forms.svg)

# Gravity Forms

## Demo

![Activate Address Lookup on your address collection forms-screenshot](/assets/images/gravity-form-demo-96c0238ec733f260158869ef30b5463b.gif)

## Installation

This integration works by hooking into Gravity Forms' custom HTML fields. Below are the instructions to add 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 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

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

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

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

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