Open Nav

Ninja Forms: Add Address Validation to Your Forms

Integrate Address Validation to Your Ninja Forms Pages

Updated 26 May 2021

This guide outlines how to attach address autocompletion and Postcode Lookup to your Ninja Forms pages.

This integration works by hooking into WordPress' custom HTML field.

Features

  • Bind address autocompletion to your address fields
  • Add one or more postcode lookup fields

Screenshots

Address Finder

Activate Address Finder on your address collection forms-screenshot

Postcode Lookup

Quickly populate your address fields-screenshot

Links

Support

If you need support, you can either reach out to us on our support page or drop by our developer chat page.

Installation

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

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

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 UK address should have the following fields:

  • Address line one (required)
  • Address line two
  • Address line three
  • Post town (required)
  • Postcode (required)

Create address fields-screenshot

You can optionally include additional fields, which are documented in the PAF documentation page.

Add Custom Name Attributes

For Address Finder 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

Add Address Finder

Install and Initialise 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

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

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

<script>
  jQuery(document).on('nfFormReady', function() {
    IdealPostcodes.AddressFinder.setup({
      apiKey: "iddqd",
      inputField: 'input[name="search_address"]',
      injectStyle: true,
      outputFields: {
        line_1: 'input[name="address_line_one"]',
        line_2: 'input[name="address_line_two"]',
        line_3: 'input[name="address_line_three"]',
        post_town: 'input[name="post_town"]',
        postcode: 'input[name="postcode"]',
      }
    });
  });
</script>

Add the Address Finder Plugin-screenshot

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

Select your form-screenshot

Add Postcode Lookup

Add Postcode Lookup HTML elements

In your Ninja Forms dashboard, click on 'ADD NEW' to create a new form.

On top of your address fields, add a HTML layout field. Under the HTML panel, click on the code editor button and paste in the below HTML to scaffold your postcode search field, search button and address dropdown for the plugin.

<div>
<!-- Postcode search field will appear below -->
  <div>
    <input 
      type="text" 
      placeholder="Lookup your postcode"
      id="idpc_input" 
    />
  </div>

  <br>

  <!-- Search button will appear below -->
  <div>
    <input 
      type="button" 
      id="idpc_button" 
      value="Lookup Postcode" 
    />
  </div>

  <br>

  <!-- Address dropdown field will appear below -->
  <div id="idpc_dropdown"></div>
  <!-- Any error messages will appear here -->
  <div id="idpc"></div>
</div>

Enter HTML into the code editor-screenshot

Install Plugin

On the WordPress admin dashboard, click on the 'Pages' tab and click on 'Add New'. Next, click on the 'Add block' icon and look for the 'Custom HTML' option. Paste in the below script tag:

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

Add the Postcode Lookup Plugin script-screenshot

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


Take special care to:

  1. Insert your API Key in the apiKey field
  2. Match the names of your address fields. If your Address 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 Finder appear there

If you wish to add an additional field, include the parameter name from our documentation. For instance, adding a county field with name county will look like:

outputFields: {
  line_1: 'input[name="line_1"]',
  line_2: 'input[name="line_2"]',
  line_3: 'input[name="line_3"]',
  post_town: 'input[name="post_town"]',
  county: 'input[name="county"]',
  postcode: 'input[name="postcode"]'
}

Testing

Your first key on your Ideal Postcodes account will carry a free test balance which you can use to verify and test your integration. Please contact support if you need a larger test balance.

Going Live

In order to go live, you will need to purchase a balance of lookups on your API Key. This can be done manually or automated from your dashboard. Each address search consumes one lookup from your key balance.

See our account setup guide for the quickest way to go live by creating your first API Key and enabling automated top-ups.

Configuration

See our Address Finder Plugin Documentation if you wish to customise Address Finder.

API Key

Your API Key is central to how our service recognises your integration. See our guide on API Keys to find out more.

API Keys can also be safeguarded against potential misuse, please view our guide on securing your API Key to find out more.