Skip to main content

Formstack Integration

Demo

Default Address Field

AddressZen Formstack Address Field Integration

Short Answer Fields

AddressZen Formstack Short Answer Field Integration

Installation

There are 2 ways of creating your address form. You can use either:

  • Address field
  • Short Answer Field

Using the Address Field

You can find the Address field under Basic fields. Drag and drop it to the form builder.

Formstack Integration Address Field

Initialise Address Lookup

Under the Advanced Field menu, click Embed Code and drag it below the form you have created.

Formstack Integration Address Form

Click on the embed code field and paste the code below:

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

<script>
AddressZen.AddressLookup.setup({
apiKey: 'YOUR_API_KEY',
outputFields: {
line_1: '#field165151526-address',
line_2: '#field165151526-address2',
city: '#field165151526-city',
state: '#field165151526-state',
zip_code: '#field165151526-zip',
},
onAddressPopulated: function(address) {
console.log(address)
const state = document.querySelector(this.options.outputFields.state)
if (state != null) {
const option = state.querySelector(`option[value="${address.state_abbreviation}"]`)
state.dispatchEvent(new MouseEvent("click", {bubbles: true,cancelable: true,view: window,}))

setTimeout(function(){
option.dispatchEvent(new MouseEvent("click", {bubbles: true,cancelable: true,view: window,}))
state.value = address.state_abbreviation
state.dispatchEvent(new Event('change'))
},100);
}
}
});
</script>
note

Make sure to

  • Update the value for the apiKey with your own API Key. Your API Key typically begins with ak_.
  • Update the field selectors so they match your input fields

Using the Short Answer Fields

Add address input fields to your form. These should be created using Short Answer found under Basic Fields. A basic address form to capture a correct US address requires the following fields:

  • Street Line One
  • Street Line Two
  • City
  • State
  • Postcode

Formstack Integration Short Answer Fields

Initialise Address Lookup

Under the Advanced Field menu, click Embed Code and drag it below the form you have created.

Formstack Integration Address Form

Click on the embed code field and paste the code below:

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

<script>
AddressZen.AddressLookup.setup({
apiKey: 'YOUR_API_KEY',
outputFields: {
line_1: '#field165145846',
line_2: '#field165145899',
city: '#field165145897',
state: '#field165145456',
zip_code: '#field165145860',
},
});
</script>
note

Make sure to

  • Update the value for the apiKey with your own API Key. Your API Key typically begins with ak_.
  • Update the field selectors so they match your input fields

Optional: Customise the Address Finder Script

If you wish to add an additional field, include the parameter name from our documentation. For instance, adding a county field to your script will look like:

outputFields: 
{
line_1: '#field165145846',
line_2: '#field165145899',
line_3: '#field165145898',
post_town: '#field165145897',
county: '#field165145456',
postcode: '#field165145860',
},
info

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