# Jotform Integration

This guide outlines how to attach Address Finder on your form.

## Features[​](#features "Direct link to Features")

* Bind Address Finder to your address fields
* Add one or more Postcode Lookup fields

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

### Address Finder[​](#address-finder "Direct link to Address Finder")

![Quickly populate your address fields-screenshot](/assets/images/jotform-demo-bc26cf073e0eb88f97fbd6286239424b.gif)

<br />

<br />

***

<br />

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

### Create Address Inputs[​](#create-address-inputs "Direct link to Create Address Inputs")

Add address input fields to your form. These should be created using `Short Text` fields found under `Basic Elements`. A basic address form to capture a correct UK address requires the following fields:

* Address line one
* Address line two
* Address line three
* Post town
* Postcode

![Create address fields-screenshot](/assets/images/jotform-fields-ca409be7eb1258b823c9bec6912c2140.png)

You may add other address fields, which are listed on the [address documentation page](/docs/data/paf.md).

**Note the** `Field ID` number for each address field in the `Short Text Properties` side panel. You will need this later to configure the Postcode Lookup Plugin and/or Address Finder Plugin.

![Make a note of the Field ID-screenshot](/assets/images/jotform-field-id-8fdc949ad343f2cf1884ccf0b4a29d22.png)

<br />

<br />

***

<br />

### Add Address Finder[​](#add-address-finder "Direct link to Add Address Finder")

#### Insert Source Code[​](#insert-source-code "Direct link to Insert Source Code")

On your page, add an `HTML block` and paste the form's source code.

On the online form builder, go to Publish -> Embed -> Source Code

![Jotform add HTML Block](/assets/images/jotform-html-149a7101d3f4757dab8e8392f3a9a61b.png)

![Jotform add Source Code Block](/assets/images/jotform-source-code-0aa461473744cf7c2a074a95a028da6c.png)

#### Insert Initialisation Code[​](#insert-initialisation-code "Direct link to Insert Initialisation Code")

Place another `HTML block` under the first one and paste the code below:

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



<script>

	document.addEventListener("DOMContentLoaded", function () {

		IdealPostcodes.AddressFinder.watch({

			apiKey: "ak_test",

			outputFields: {

				line_1: "#input_3",

				line_2: "#input_4",

				line_3: "#input_5",

				post_town: "#input_6",

				postcode: "#input_7",

			},

		});

	});

</script>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the input field names of your target fields. If your Address Line One `Field ID` is `#input_1`, this line should be replaced with `'#input_1'`. Do this for all the address fields you wish to include

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 with Field ID `#input_8` will look like:

```
outputFields: {

    line_1: "#input_3",

    line_2: "#input_4",

    line_3: "#input_5",

    post_town: "#input_6",

    county: "#input_8",

    postcode: "#input_7"

}
```

## Configuration[​](#configuration "Direct link to Configuration")

See our [Address Finder Plugin Documentation](/docs/address-finder.md) if you wish to customise Address Finder.

See our [Postcode Lookup Plugin Documentation](/docs/postcode-lookup.md) if you wish to customise Postcode Lookup.

info

Still need help? Contact our support team via live chat on our website or email <support@ideal-postcodes.co.uk>.