Formidable - Add Address Validation to your Forms

This guide outlines how to attach address autocompletion to your WordPress Formidable forms.

This integration works by hooking into Formidable's custom HTML functionality.

Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.

Screenshots

Address Autocomplete

Activate address autocompletion on your address collection forms.

Links

• Address Autocomplete Plugin Documentation
• Formidable Plugin

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 hooking into Formidables custom HTML functionality.

1. Create your Address Inputs

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

You can optionally include additional fields, which are documented here.

Note the Field Keys under the Advanced tab of the left sidebar. You will need this later to configure the Autocomplete plugin.

2. Navigate to Customize HTML

Navigate to the Custom HTML setting by clicking on the Settings tab, then Customize HTML in the left sidebar and scroll to After Fields. It is in the After Fields section where the Autocomplete plugin is loaded and initialised.

3. Load the Autocomplete Plugin

Add the following Script Tags to load the Autocomplete Plugin and CSS stylesheet.

    <script 
        src="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/dist/ideal-postcodes-autocomplete.min.js"
        integrity="sha256-lZPaPHBx7V2Gj9iAc8QfVcW02KlWB2gbrqXpGfiEGgo=" 
        crossorigin="anonymous"></script>

    <link 
        rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/css/ideal-postcodes-autocomplete.css" 
        integrity="sha256-ewtQO/9EEPz6LsP/kWLv+bzykzIAr+d6s0WqA2B4clQ=" 
        crossorigin="anonymous">

4. Configure the Autocomplete Plugin

In the same After Fields box, add the initialisation code. Special care is required to:

• Update the apiKey attribute with the API Key from your account. Your API Key typically begins with ak_
• Update the outputFields attribute with the Field Keys tied to your form inputs
• Update the inputField attribute with the Field Key for the first line of your address form

Your API Key is required to authenticate your form with your Ideal Postcodes account.

When inserting Field Keys, they must be prepending with #field_. So if your first address line Field Key is 49qm4, the line_1 parameter is #field_49qm4.

The outputFields parameter tells the plugin where to send address fragments like first line, postcode, etc. Your input fields are identified by IDs which look like #field_XXXXX.

The inputField parameter tells the plugin where the Address Autocomplete box should appear. Typically this is the same as your line_1 parameter

The Field Key or XXXXX can be found under the Advanced Tab in the sidebar of the form builder:

Your configuration should be inserted after the earlier Script Tags and look something like this:

    <script 
      src="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/dist/ideal-postcodes-autocomplete.min.js"
      integrity="sha256-lZPaPHBx7V2Gj9iAc8QfVcW02KlWB2gbrqXpGfiEGgo=" 
      crossorigin="anonymous"></script>

    <link 
      rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/css/ideal-postcodes-autocomplete.css" 
      integrity="sha256-ewtQO/9EEPz6LsP/kWLv+bzykzIAr+d6s0WqA2B4clQ=" 
      crossorigin="anonymous">

    <script>
    new IdealPostcodes.Autocomplete.Controller({
      inputField: "#field_49qm4",
      api_key: "Your Key",
      outputFields: {
        line_1: "#field_49qm4",
        line_2: "#field_sdg3d",
        line_3: "#field_14ydv",
        post_town: "#field_5yzek",
        postcode: "#field_xaiqo"
      }
    });
    </script>

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

    new IdealPostcodes.Autocomplete.Controller({
      inputField: "#field_49qm4",
      api_key: "Your Key",
      outputFields: {
        line_1: "#field_49qm4",
        line_2: "#field_sdg3d",
        line_3: "#field_14ydv",
        post_town: "#field_5yzek",
        postcode: "#field_xaiqo",
        county: "#field_abcde"
      }
    });

5. Testing and Going Live

Your first key on your Ideal Postcodes account will carry a free test balance which you can use to verify and test your integration. When you are ready to go live, you will need to add a live balance to your Key either manually or with automated top-ups.

View our guide on how to create your first Ideal Postcodes API key and enable automated top-ups.

Configuration Options

See our Address Autocomplete Plugin Documentation if you wish to add additional fields or customise behaviour in some way. Feel free to contact us or drop by our chat page if you need assistance.

Safeguarding Your API Key

For more information on how to protect your API key against potential misuse, please visit our guide on securing your API key.