Integrate Address Validation to Your WordPress Gravity Forms Pages
Updated 30 Dec 2020
This guide outlines how to attach address autocompletion to your WordPress Gravity Forms pages.
This integration works by hooking into Gravity Forms' custom HTML field.
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 Gravity Form's custom HTML fields. Below are the instructions to add Postcode Lookup or Address Autocomplete.
Add address input fields to your form. These should be created using Single Line Text
fields found under Standard Fields
.
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 documentation page.
Note the Field ID
number for each address field in the Single Line Text
panel. You will need this later to configure the Postcode Lookup Plugin and/or Address Finder Plugin.
Add a HTML
field at the top of your form and add the Address Finder Plugin script tag.
<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">
Create a new HTML
field. Add the Autocomplete initialisation code.
<script>
jQuery(function () {
new IdealPostcodes.Autocomplete.Controller({
inputField: 'input[name="input_24"]',
api_key: "iddqd",
outputFields: {
line_1: 'input[name="input_24"]',
line_2: 'input[name="input_30"]',
line_3: 'input[name="input_32"]',
post_town: 'input[name="input_33"]',
postcode: 'input[name="input_34"]',
}
});
});
</script>
You can optionally override CSS styles in the same HTML
field. 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:
api_key
fieldField ID
is 24
, this line should be replaced with 'input[name="input_24"]'
. Do this for all the address fields you wish to includeinputField
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[name="input_24"]',
line_2: 'input[name="input_30"]',
line_3: 'input[name="input_32"]',
post_town: 'input[name="input_33"]',
county: 'input[name="abcde"]',
postcode: 'input[name="input_34"]'
}
Add a HTML
at the top of your form an add the Postcode Lookup plugin script tag.
<script
src="https://cdn.jsdelivr.net/npm/jquery-postcodes@3.0.8/dist/postcodes.min.js"
integrity="sha256-JZSN3ZEXOFlpSMFjQkHjbKnjHlsFVf8N7p1SbCI0XHI="
crossorigin="anonymous">
</script>
Create a new HTML Content
field above your first address field. This will provision the 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 Gravity Forms theme.
<div class="gform_wrapper">
<div class="ginput_container ginput_container_text">
<input
type="text"
placeholder="Lookup your postcode"
class="medium"
id="idpc_input"
/>
</div>
<div class="gform_footer" style="margin: 0;">
<input
type="button"
id="idpc_button"
class="gform_button button"
value="Lookup Postcode"
/>
<div id="idpc_dropdown" style="margin-top: 1em"></div>
<div id="idpc"></div>
</div>
</div>
Create a new HTML Content
field Add the Postcode Lookup initialisation code.
<script>
jQuery(function () {
jQuery("#idpc").setupPostcodeLookup({
api_key: "You API Key goes here",
output_fields: {
line_1: 'input[name="input_24"]',
line_2: 'input[name="input_30"]',
line_3: 'input[name="input_32"]',
post_town: 'input[name="input_33"]',
postcode: 'input[name="input_34"]'
},
button: "#idpc_button",
input: "#idpc_input",
dropdown_container: "#idpc_dropdown"
});
});
</script>
Take special care to:
api_key
fieldField ID
is 24
, this line should be replaced with 'input[name="input_24"]'
. Do this for all the address fields you wish to includebutton
, input
and dropdown_container
matches the IDs of the lookup button, lookup field and address dropdown container in the fields created in Step 2jQuery("#ID")
matches the ID of the last <div>
. E.g. if <div id="idpc"></div>
, the code should read jQuery("#idpc").setupPostcodeLookup(...)
If you wish to add an additional field, include the paramater name from our documentation. For instance, adding a county field with Field ID abcde
will look like:
output_fields: {
line_1: 'input[name="input_24"]',
line_2: 'input[name="input_30"]',
line_3: 'input[name="input_32"]',
post_town: 'input[name="input_33"]',
county: 'input[name="abcde"]',
postcode: 'input[name="input_34"]'
}
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 Plugin Documentation if you wish to customise Address Autocomplete.
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.