Open Nav

Gutenberg Forms: Add Address Validation to Your Forms

Integrate Address Validation to Your WordPress Gutenberg Forms Pages

Updated 29 Mar 2021

Ideal Postcodes Gutenberg Forms Integration

This guide outlines how to attach address autocompletion to your WordPress Gutenberg Forms pages.

This integration works by hooking into Gutenberg Forms' custom HTML field.


  • Bind address autocompletion to your address fields


Address Finder

Activate Address Finder on your address collection forms-screenshot



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


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

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

  • Address line one
  • Address line two
  • Address line three
  • Post town
  • Postcode

Create address fields-screenshot

You can optionally include additional fields, which are documented in our PAF data page.

Note the field labels associated with each Text block. In the above example, some of these are Address Search, Address Line One, Post Town, etc. You will need this to initialise address validation.

Add Address Finder

Install Plugin

Add a HTML block at the bottom of your form.

Create HTML block-screenshot

Now add the Autocomplete Plugin script tag.


Add the Autocomplete Plugin-screenshot

Initialise Autocomplete

In the same HTML block, add the Autocomplete initialisation code.


  inputField: 'input[aria-label="Address Line One"]',
  apiKey: 'iddqd',
  injectStyle: true,
  outputFields: {
    line_1: 'input[aria-label="Address Line One"]',
    line_2: 'input[aria-label="Address Line Two"]',
    line_3: 'input[aria-label="Address Line Three"]',
    post_town: 'input[aria-label="Post Town"]',
    postcode: 'input[aria-label="Postcode"]',

Configure autocomplete fields-screenshot

You can optionally override CSS styles in the same HTML field. E.g.

  @media only screen and (min-width: 641px) {
    ul.idpc_ul { 
      min-width: 0 !important;
      width: calc(50% - 8px);

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 Address Line One, then line_1 should read 'input[aria-label="Address Line One"]'. Do this for all the address fields you wish to include
  3. Ensure inputField points to the same field as line_1

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

outputFields: {
  line_1: 'input[aria-label="Address Line One"]',
  line_2: 'input[aria-label="Address Line Two"]',
  line_3: 'input[aria-label="Address Line Three"]',
  post_town: 'input[aria-label="Post Town"]',
  county: 'input[aria-label="County"]',
  postcode: 'input[aria-label="Postcode"]'


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.


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

See our Postcode Lookup Plugin Documentation if you wish to customise Postcode Lookup.


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 see our guide on securing your API Key to find out more.