This guide outlines how to integrate Address Lookup to your JetFormbuilder pages.
This integration works by hooking into JetFormbuilder custom HTML field.
Features
- Bind address autocompletion to your address fields
If you need support, you can either reach out to us on our support page.
Demo
Address Lookup
Installation
This integration works by adding our Address Validation tools using JetFormbuilder's form editor. Below are the instructions to add Address Lookup.
Create Address Inputs
Add address input fields to your form. A basic address form to capture a correct US address should have the following fields:
- Address line one
- Address line two
- City
- State
- ZIP Code
You can optionally include additional fields, which are documented in the PAF documentation page.
Add Address Lookup
Install and Initialise Plugin
Add a HTML block
and include 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/@addresszen/address-lookup"></script>
<script>
AddressZen.AddressLookup.setup({
apiKey: 'YOUR_API_KEY',
outputFields: {
line_1: 'input[name="line_1"]',
line_2: 'input[name="line_2"]',
city: 'input[name="city"]',
state: 'input[name="state"]',
zip_plus_4: 'input[name="zipcode"]'
},
onLoaded: function () {
// This prevents the Address Lookup from being in obscured by the default
// JetFormbuilder styles
this.view.container.parentElement.parentElement.style.overflow = 'visible';
}
});
</script>
Take special care to:
- Insert your API Key in the
apiKey
field - Match the names of your target fields to the JetFormbuilder
Form field name
. If your Address Line One has theForm field name
line_1
, ensure thatline_1
reads'input[name="line_1"]'
- Ensure
inputField
points to the same field asline_1
to have the Address Lookup appear there
Configuration
See our Address Lookup Plugin Documentation if you wish to customise Address Lookup.