Skip to main content

Ideal Postcodes FormAssembly Integration

Integrate Address Validation to Your FormAssembly Pages.

Features

  • Bind address autocompletion to your address fields
info

If you need support, you can either reach out to us on our support page.

Demo

Activate Address Lookup on your address collection forms-screenshot

Installation

This integration works by adding our Address Lookup tool using FormAssembly's custom code feature.

Create New Form-screenshot

Create Address Fields

On your form, firstly add an Address Lookup Field. You can do this by creating an text input field and then updating the input label and/or placeholder to something like Start typing to find your address.

Next, create your Address inputs beneath. We recommend the following address structure to correctly capture US addresses:

  • Street line one
  • Street line two
  • City
  • State
  • ZIP Code

Add Address Lookup

Install and Initialise Plugin

When your form is complete, make a note of the field names of your Address Lookup Field and your address fields. This is the grey text in the Form Outline box, you will need it to direct your user's selected address to the right fields.

Add our JavaScript library to your page with Custom Code. Click the Properties option on the top of the page. Next, in the Form Properties panel, click on Custom Code.

Add and adapt the following to load the plugin and then to initialise it.

<script src="https://cdn.jsdelivr.net/npm/@addresszen/address-lookup"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
AddressZen.AddressLookup.setup({
apiKey: "YOUR_API_KEY",
outputFields: {
line_1: 'input[name="tfa_2"]',
line_2: 'input[name="tfa_3"]',
city: 'input[name="tfa_4"]',
state: 'input[name="tfa_5"]',
zip_plus_4_code: 'input[name="tfa_6"]'
}
});
});
</script>
caution

Take special care to:

  1. Insert your API Key in the apiKey field
  2. Match the names of your target fields. You can verify this on the 'Form Outline' panel. If the field name for Address Line One is tfa_2, line_1: should read 'input[name="tfa_2"]'.

Ensure the attributes match the field values-screenshot

Configuration

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