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

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

![Activate Address Lookup on your address collection forms-screenshot](/assets/images/ninja-form-demo-638c57a587d1c284a5604da57c7b6590.gif) Add Address Lookup to your Ninja Forms pages.

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

This integration works by adding our Address Validation tools using WordPress' form editor. Below are the instructions to add Address Lookup.

### Enable Dev Mode[​](#enable-dev-mode "Direct link to Enable Dev Mode")

On your WordPress dashboard, click on the 'Ninja Forms' tab, followed by 'Settings'. Here, scroll down to 'Advanced Settings' and check the box for 'Form Builder "Dev Mode"'. This will be required when using the `name` attribute for your input fields.

![Enable Dev Mode-screenshot](https://img.ideal-postcodes.co.uk/ninja-forms-form-builder-dev-mode.png)

### Create Address Inputs[​](#create-address-inputs "Direct link to Create Address Inputs")

Add address input fields to your form. To do so, select the 'Single Line Text' field and drag it into the form. Once clicked, you can update the label text.

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

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

![Create address fields-screenshot](/assets/images/ninja-form-1-20e044d084b3f7d8129ff3c2245d1c8e.png)

You can optionally include additional fields.

### Add Custom Name Attributes[​](#add-custom-name-attributes "Direct link to Add Custom Name Attributes")

For Address Lookup to identify the output fields, add `name` attributes to your address fields. To do so, click on the address field, and then the 'Advanced' dropdown. Here, you will find the `CUSTOM NAME ATTRIBUTE` field, which you can update. Remember to click on 'DONE' when complete.

![Add a custom name attribute-screenshot](/assets/images/ninja-form-2-9970b35112cfc8bed35c3eeba18178d8.png)

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

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

On the WordPress admin dashboard, click on the 'Pages' tab, followed by 'Add New'. Now, click on the 'Add block' icon and look for the 'Custom HTML' option.

![Custom HTML block-screenshot](/assets/images/ninja-forms-3-93234039bcb7c51ba52ce2652e7ec996.png)

Subsequently, add the following two script tags within the HTML block to load the plugin and then to initialize it.

Lastly, click on ‘Append a Ninja Form’ dropdown which is on the ‘Page’ tab and select your Ninja Form.

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



<script>

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

  jQuery(document).on('nfFormReady', function() {

    AddressZen.AddressLookup.setup({

      apiKey: "YOUR_API_KEY",

      outputFields: {

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

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

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

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

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

      }

    });

  });

});

</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 Street Line One has the shortcode `[text* line_1]`, ensure that `line_1` reads `'input[name="line_1"]'`
3. Ensure `inputField` points to the same field as `line_1` to have the Address Lookup appear there

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