Open Nav

Contact Form 7: Add Address Validation to your Forms

Integrate Address Validation to Your WordPress Contact Form 7 Pages

Updated 19 Feb 2021

Ideal Postcodes Contact Form 7 Integration

This guide outlines how to attach address autocompletion to your WordPress Contact Form 7 (CF7) pages.

This integration works by hooking into CF7's custom HTML field.

Features

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

Screenshots

Postcode Lookup

Quickly populate your address fields-screenshot

Address Finder

Activate Address Finder on your address collection forms-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 CF7s's form editor. Below are the instructions to add Postcode Lookup or Address Finder.

Create Address Inputs

Add address input fields to your form. 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 Address Finder

Install and Initialise Plugin

Add two script tags at the bottom of your form to load the plugin and then to initialise it.

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

<script>
  jQuery(function () {
    IdealPostcodes.AddressFinder.setup({
      inputField: 'input[name="line_1"]',
      apiKey: "iddqd",
      injectStyle: true,
      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"]',
        postcode: 'input[name="postcode"]',
      }
    });
  });
</script>

Add the Address Finder Plugin-screenshot

You can optionally override CSS styles in the form editor. E.g.

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

Take special care to:

  1. Insert your API Key in the apiKey field
  2. Match the names of your target 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"]'
}

Add Postcode Lookup

Install Plugin

At the bottom of your form editor add the script tag.

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

Add Postcode Lookup HTML elements

Create HTML input fields above your first address field 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>
  <!-- Search button will appear below -->
  <div>
    <input 
      type="button" 
      id="idpc_button" 
      value="Lookup Postcode" 
    />
  </div>
  <!-- Address dropdown field will appear below -->
  <div id="idpc_dropdown"></div>
  <!-- Any error messages will appear here -->
  <div id="idpc"></div>
</div>

You can also append the HTML above with styles that suite your theme. The following snippet styles the Postcode Lookup fields according to the default Wordpress theme.

<div>
  <p>
    <label>Postcode Lookup<span class="wpcf7-form-control-wrap line_1">
        <input type="text" size="40" id="idpc_input" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" />
      </span>
    </label><input type="button" id="idpc_button" class="wpcf7-form-control wpcf7-submit" value="Lookup Postcode" />
  </p>
  <p id="idpc_dropdown"></p>
  <p id="idpc"></p>
</div>

Add Postcode Lookup fields-screenshot

Initialise Postcode Lookup

Beneath the script tag created in the first step, add another script tag for the Postcode Lookup initialisation code.

<script>
  jQuery(function () {
    IdealPostcodes.PostcodeLookup.setup({
      apiKey: "iddqd",
      context: "#idpc",
      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"]',
        postcode: 'input[name="postcode"]'
      },
      button: "#idpc_button",
      input: "#idpc_input",
      selectContainer: "#idpc_dropdown"
    });
  });
</script>

Configure the Postcode Lookup plugin-screenshot

Take special care to:

  1. Insert your API Key in the apiKey field
  2. Match the names of your target fields. If your Address Line One has the shortcode [text* line_1], ensure that line_1 reads 'input[name="line_1"]'. Do this for all the address fields you wish to include
  3. Ensure button, input and selectContainer matches the ids of the lookup button, lookup field and address dropdown container in the fields created in Step 2
  4. Ensure the context string matches the id of the last <div>. E.g. if <div id="idpc"></div>, the line of code should read context: "#idpc"

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.

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

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.