Skip to main content

Formstack Integration

Screenshots​

Address Finder​

Ideal Postcodes Formstack Integration

Installation​

This installation works ny inserting javascript into the Formstack Form builder

info

If you need support, you can either reach out to us on our support page or drop by our developer chat page.

Create Address Field​

Formstack comes with a pre-built address form. Inside the Basic Field menu, simply drag it over to the form builder on the left

Formstack Integration Address Form

Initialise Address Finder​

Under the Advanced Field menu, drag Embed Code over to the form builder on the left.

Formstack Integration Address Form

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

Formstack Integration Address Form

<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled@3"></script>

<script>
    IdealPostcodes.AddressFinder.setup({
        apiKey: "ak_test",
        outputFields: {
            line_1: 'input[aria-label="Address Line 1"]',
            line_2: 'input[aria-label="Address Line 2"]',
            post_town: 'input[aria-label="City"]',
            postcode: 'input[aria-label="Postcode"]',
        },
    });
</script>

Make sure you update the value for the apiKey with your own API Key. Your API Key typically begins with ak_.

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: 'input[aria-label="Address Line 1"]',
    line_2: 'input[aria-label="Address Line 2"]',
    post_town: 'input[aria-label="City"]',
    postcode: 'input[aria-label="Postcode"]',
    county: 'input[aria-label="County"]',
}