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

Integrate Address Validation to Your WordPress Contact Form 7 Pages.

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

![Activate Address Finder on your address collection forms-screenshot](/assets/images/contact-address-finder-demo-690b0e9f77c26c5d4331c364ca260f53.png)

![Quickly populate your address fields-screenshot](/assets/images/contact-postcode-lookup-demo-437ca8682e93add48c2807adc59e2824.png)

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

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

[Contact Form 7 Address Finder](https://www.youtube.com/embed/molqrzgQWSg)

### Form Creation[​](#form-creation "Direct link to Form Creation")

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)

```
<label> Address Line One [text* line_1] </label>



<label> Address Line Two [text* line_2] </label>



<label> Address Line Three [text* line_3] </label>



<label> City or Town [text* post_town] </label>



<label> Postcode [text* postcode] </label>



[submit "Submit"]
```

![Create address fields-screenshot](/assets/images/contact-address-form-96a2fed2880266df46da9961edb21346.png)

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

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

#### Install and Initialise Plugin[​](#install-and-initialise-plugin "Direct link to Install and Initialise Plugin")

Go to the page where the address form is located. Create a `html block` and add the 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.4.1/dist/address-finder.js"></script>



<script>

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

		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"]',

			},

		});

	});

</script>
```

![Add the Address Finder Plugin-screenshot](/assets/images/contact-address-finder-script-f3d6c984c2e3206590fdfb9704a69827.png)

You can optionally override CSS styles in the form editor. E.g.

```
<style>

	@media only screen and (min-width: 641px) {

		ul.idpc_ul {

			min-width: 0 !important;

			width: calc(50% - 8px);

		}

	}

</style>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your target fields. If your Address Line One has the shortcode `[text* line_1]`, ensure that `line_1` reads `'input[name="line_1"]'`

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"]'

}
```

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

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

Create HTML input fields above your first address field to scaffold your postcode search field, search button and address dropdown for the plugin.

```
<div>

	<!-- Postcode search field will appear below -->

	<div>

		<input

			type="text"

			placeholder="Lookup your postcode"

			id="idpc_input"

		/>

	</div>

	<!-- Search button will appear below -->

	<div>

		<input

			type="button"

			id="idpc_button"

			value="Lookup Postcode"

		/>

	</div>

	<!-- Address dropdown field will appear below -->

	<div id="idpc_dropdown"></div>

	<!-- Any error messages will appear here -->

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

</div>
```

![Add Postcode Lookup HTML Elements](/assets/images/contact-postcode-elements-e8f648c50788da58640e02ae57ac0192.png)

You can also append the HTML above with styles that suit your theme. The following snippet styles the Postcode Lookup fields according to the default WordPress theme.

```
<div>

	<p>

		<label

			>Postcode Lookup<span class="wpcf7-form-control-wrap line_1">

				<input

					type="text"

					size="40"

					id="idpc_input"

					class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"

				/>

			</span> </label

		><input

			type="button"

			id="idpc_button"

			class="wpcf7-form-control wpcf7-submit"

			value="Lookup Postcode"

		/>

	</p>

	<p id="idpc_dropdown"></p>

	<p id="idpc"></p>

</div>
```

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

Create another `html block` at the bottom of the form and add the scripts below.

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



<script>

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

		IdealPostcodes.PostcodeLookup.setup({

			apiKey: "ak_test",

			context: "#idpc",

			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"]',

			},

			button: "#idpc_button",

			input: "#idpc_input",

			selectContainer: "#idpc_dropdown",

		});

	});

</script>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your target fields. If your Address Line One has the shortcode `[text* line_1]`, ensure that `line_1` reads `'input[name="line_1"]'`. Do this for all the address fields you wish to include
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/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"]'

}
```

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