Integrate Address Validation to Your WordPress Formidable Forms
Updated 19 Apr 2021
This guide outlines how to attach address autocompletion to your WordPress Formidable Forms.
This integration works by hooking into Formidable Form's custom HTML functionality.
Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.
Postcode Lookup
Address Finder
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 Formidable Form's custom HTML functionality.
Add address input fields to your form. A basic address form to capture a correct UK address requires the following fields:
You can optionally include additional fields, which are documented in the PAF data documentation.
Note the Field Key
s under the Advanced
tab of the left sidebar. You will need this later to configure Address Finder.
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 Address Finder is loaded and initialised.
Add the following Script Tag to load Address Finder.
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled@2/dist/address-finder.min.js">
</script>
In the same After Fields
box, add the initialisation code. Special care is required to:
apiKey
attribute with the API Key from your account. Your API Key typically begins with ak_
outputFields
attribute with the Field Keys
tied to your form inputsinputField
attribute with the Field Key
for the first line of your address formYour 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 Finder 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/address-finder-bundled@2/dist/address-finder.min.js">
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
IdealPostcodes.AddressFinder.setup({
apiKey: "Your Key",
injectStyle: true,
inputField: "#field_49qm4",
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 parameter name from our documentation. For instance, adding a county field with Field Key abcde
will look like:
IdealPostcodes.AddressFinder.setup({
apiKey: "Your Key",
injectStyle: true,
inputField: "#field_49qm4",
outputFields: {
line_1: "#field_49qm4",
line_2: "#field_sdg3d",
line_3: "#field_14ydv",
post_town: "#field_5yzek",
postcode: "#field_xaiqo",
county: "#field_abcde"
}
});
Create a HTML Field above your first address field to scaffold your postcode search field, search button and address dropdown for the plugin.
To do this, on the Add Fields
section, click on HTML
and insert the following in the Content
box:
<div id="postcode_lookup"></div>
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 Address Finder is loaded and initialised.
Add the script tag to load the Postcode Lookup plugin.
<script
src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@2/dist/postcode-lookup.js">
</script>
In the same After Fields
box, add the initialisation code. Special care is required to:
apiKey
attribute with the API Key from your account. Your API Key typically begins with ak_
outputFields
attribute with the Field Keys
tied to your form inputscontext
attribute with the id
used in the HTML div
element created in step 1.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 Finder 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/postcode-lookup-bundled@2/dist/postcode-lookup.js">
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
IdealPostcodes.PostcodeLookup.setup({
apiKey: "iddqd",
context: "#lookup_field",
outputFields: {
line_1: '#field_z9ghk',
line_2: '#field_j0ep',
line_3: '#field_jmuiw',
post_town: '#field_qgsnb',
postcode: '#field_h2n4z'
},
buttonClass: "lookup-button",
});
});
</script>
You may also style components of the Postcode Lookup field, e.g. for the button, you can assign it a CSS class selector. In the example above, we added the buttonClass
attribute to the initialistion code, with a class name of lookup-button
.
To style the button, you may place a style
tag in the Customize HTML
setting.
<style>
.lookup-button {
background-color: #579AF6;
border: 1px solid #579AF6;
border-radius: 4px;
color: #fff;
margin: 1em 0;
}
</style>
If you wish to add an additional field, include the parameter name from our documentation. For instance, adding a county field with Field Key abcde
will look like:
IdealPostcodes.PostcodeLookup.setup({
apiKey: "iddqd",
context: "#lookup_field",
outputFields: {
line_1: '#field_z9ghk',
line_2: '#field_j0ep',
line_3: '#field_jmuiw',
post_town: '#field_qgsnb',
postcode: '#field_h2n4z',
county: "#field_abcde"
}
});
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.
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 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.
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.