# ![Ideal Postcodes JetFormbuilder Integration](https://img.ideal-postcodes.co.uk/JetFormBuilder%20Integration%20Logo@3x.png)

This guide outlines how to integrate Address Finder and Postcode Lookup to your JetFormbuilder pages.

This integration works by hooking into JetFormbuilder custom HTML field.

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

* Bind address autocompletion to your address fields
* Add one or more postcode lookup fields

## Screenshots[​](#screenshots "Direct link to Screenshots")

### Postcode Lookup[​](#postcode-lookup "Direct link to Postcode Lookup")

![Quickly populate your address fields-screenshot](https://img.ideal-postcodes.co.uk/jetformbuilder-postcode-lookup-done.png)

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

![Activate Address Finder on your address collection forms-screenshot](https://img.ideal-postcodes.co.uk/contact-form-7-address-finder.png)

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

This integration works by adding our Address Validation tools using JetFormbuilder's form editor. Below are the instructions to add Postcode Lookup or Address Finder.

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

Add address input fields to your form. A basic address form to capture a correct UK address should have the following fields:

* Address line one (required)
* Address line two
* Address line three
* Post town (required)
* Postcode (required)

![Create address fields-screenshot](https://img.ideal-postcodes.co.uk/jetformbuilder-address-fields.png)

You can optionally include additional fields, which are documented in the [PAF documentation page](/docs/api/addresses.md).

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

#### Install and Initialise Plugin[​](#install-and-initialise-plugin "Direct link to 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/@ideal-postcodes/address-finder-bundled@2/dist/address-finder.js"></script>



<script>

	IdealPostcodes.AddressFinder.setup({

		apiKey: "ak_test",

		outputFields: {

			line_1: 'input[name="line_1"]',

			line_2: 'input[name="line_2"]',

			line_3: 'input[name="line_3"]',

			post_town: 'input[name="post_town"]',

			postcode: 'input[name="postcode"]',

		},

		onLoaded: function () {

			// This prevents the Address Finder from being obscured by the default

			// JetFormbuilder styles

			this.view.container.parentElement.parentElement.style.overflow =

				"visible";

		},

	});

</script>
```

![Add the Address Finder Plugin-screenshot](https://img.ideal-postcodes.co.uk/jetformbuilder-address-finder-script.png)

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your target fields to the JetFormbuilder `Form field name`. If your Address Line One has the `Form field name` `line_1`, ensure that `line_1` reads `'input[name="line_1"]'`
3. Ensure `inputField` points to the same field as `line_1` to have the Address Finder appear there

If you wish to add an additional field, include the parameter name [from our documentation](/docs/api/addresses.md). For instance, adding a county field with name `county` will look like:

```
outputFields: {

  line_1: 'input[name="line_1"]',

  line_2: 'input[name="line_2"]',

  line_3: 'input[name="line_3"]',

  post_town: 'input[name="post_town"]',

  county: 'input[name="county"]',

  postcode: 'input[name="postcode"]'

}
```

### Add Postcode Lookup[​](#add-postcode-lookup "Direct link to Add Postcode Lookup")

#### Layout[​](#layout "Direct link to Layout")

Add address input fields to your form. Ensure you have an input field at the top, which will be the field to search for the postcode. This should be followed by a `HTML block`. Copy the following to the HTML block:

```
<div id="idpc"></div>
```

Your layout should be in the following order:

* Postcode search
* HTML block
* Address line one (required)
* Address line two
* Address line three
* Post town (required)
* Postcode (required)

![Add Postcode Lookup fields-screenshot](https://img.ideal-postcodes.co.uk/jetformbuilder-postcode-lookup-search.png)

#### Initialise Postcode Lookup[​](#initialise-postcode-lookup "Direct link to Initialise Postcode Lookup")

At the bottom of your form, add another `HTML block`, ensuring the following scripts are included:

```
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@2.3/dist/postcode-lookup.js"></script>



<script>

	IdealPostcodes.PostcodeLookup.setup({

		context: "#idpc",

		input: "#idpc_input",

		apiKey: "ak_test",

		selectClass: "jet-form-builder__field select-field",

		outputFields: {

			line_1: 'input[name="line_1"]',

			line_2: 'input[name="line_2"]',

			line_3: 'input[name="line_3"]',

			post_town: 'input[name="city"]',

			postcode: 'input[name="postcode"]',

		},

	});

</script>
```

![Configure the Postcode Lookup plugin-screenshot](https://img.ideal-postcodes.co.uk/jetformbuilder-postcode-lookup-html-block.png)

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your target fields to the JetFormbuilder `Form field name`. If your Address Line One has the `Form field name` `line_1`, ensure that `line_1` reads `'input[name="line_1"]'`
3. Ensure `button`, `input` and `selectContainer` matches the `id`s of the lookup button, lookup field and address dropdown container in the fields created in Step 2
4. Ensure the `context` string matches the `id` of the last `<div>`. E.g. if `<div id="idpc"></div>`, the line of code should read `context: "#idpc"`

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 name `county` will look like:

```
outputFields: {

  line_1: 'input[name="line_1"]',

  line_2: 'input[name="line_2"]',

  line_3: 'input[name="line_3"]',

  post_town: 'input[name="post_town"]',

  county: 'input[name="county"]',

  postcode: 'input[name="postcode"]'

}
```

## 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>.