# Formstack Integration

## Demo[​](#demo "Direct link to Demo")

### Default Address Field[​](#default-address-field "Direct link to Default Address Field")

![AddressZen Formstack Address Field Integration](/assets/images/formstack-address-demo-73177a2c9f04a6da9dd34897d65bd85c.gif)

### Short Answer Fields[​](#short-answer-fields "Direct link to Short Answer Fields")

![AddressZen Formstack Short Answer Field Integration](/assets/images/formstack-short-demo-bcc8cd66924eafd2fd5c047254c6200c.gif)

## Installation[​](#installation "Direct link to Installation")

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

* Address field
* Short Answer Field

### Using the Address Field[​](#using-the-address-field "Direct link to 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](/assets/images/formstack-address-field-02fa46d4b501de0e8d661d87c48f7cdc.png)

#### Initialise Address Lookup[​](#initialise-address-lookup "Direct link to Initialise Address Lookup")

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

![Formstack Integration Address Form](/assets/images/formstack-embed-code-8afa68c7a5a98591c41507d7fe413115.png)

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[​](#using-the-short-answer-fields "Direct link to 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](/assets/images/formstack-create-form-c6cccc8e493707eb8d9fe97fe4c5adb1.png)

#### Initialise Address Lookup[​](#initialise-address-lookup-1 "Direct link to Initialise Address Lookup")

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

![Formstack Integration Address Form](/assets/images/formstack-embed-code-8afa68c7a5a98591c41507d7fe413115.png)

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[​](#optional-customise-the-address-finder-script "Direct link to Optional: Customise the Address Finder Script")

If you wish to add an additional field, include the parameter name [from our documentation](/docs/data/paf.md). 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](https://addresszen.com/support).