# Webflow Integration

The guide outlines how to attach Address Finder and Postcode Lookup to your Webflow Form Block.

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

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

![Webflow Integration Address Finder Demo](/assets/images/webflow-af-demo-09a361f0c6c128e8c0aa74210f512e92.gif)

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

![Webflow Integration Postcode Lookup Demo](/assets/images/webflow-pl-demo-8b77a7c52b27a770488156a96a3498f9.gif)

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

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

Address Inputs are created using `Input` fields under `Forms`. However, Webflow requires you to create a `Form Block` first. This is also found in the same section. 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

![Webflow Integration Address Field](/assets/images/webflow-form-e5b5e373b0fb2990f134c545ba922e5e.png)

note

Take note of your `input IDs` you will need them later to configure Address Finder or Postcode Lookup. These can be found in `field settings`

![Webflow Integration Address Field IDs](/assets/images/webflow-field-id-be1d7d01db38246f12e2a0ca260ca4e6.png)

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

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

Add an `Embed Code` component at the bottom of your form to add the Address Finder script.

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



<script>

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

    IdealPostcodes.AddressFinder.setup({

      apiKey: "ak_test",

      outputFields: {

        line_1: '#field-1',

        line_2: '#field-2',

        line_3: '#field-3',

        post_town: '#field-4',

        postcode: '#field-5'

      }

    });

  });

</script>
```

![Webflow Integration Address Finder Script](/assets/images/webflow-af-script-82b780c72a25f28e64e8bfd1fb52404a.png)

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your input fields.

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

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

Add an `Embed Code` component at the top of your form. Copy the following:

```
<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>
```

![Webflow Integration Postcode Lookup Layout](/assets/images/webflow-pl-layout-64854494eb384a0191b39b70bbb3485d.png)

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

Create another `Embed Code` component at the bottom of the form and add the script below:

```
<script

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

</script>



<script>

  IdealPostcodes.PostcodeLookup.setup({

    context: '#idpc',

    input: '#idpc_input',

    button: '#idpc_button',

    selectContainer: '#idpc_dropdown',

    selectClass: 'select-field',

    apiKey: "ak_test",

    outputFields: {

      line_1: '#field-1',

      line_2: '#field-2',

      line_3: '#field-3',

      post_town: '#field-4',

      postcode: '#field-5'

    }

  });

</script>
```

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Match the names of your input fields.
3. Ensure the context string matches the id of `<div id="idpc"></div>`, the line of code should read context: `"#idpc"`

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