# Installing Address Validation for PageFly

To add address validation to your PageFly store, follow these simple steps. This guide will walk you through signing up for a free trial, creating a form and configuring the code.

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

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

![Add Address Finder to your checkout address forms-screenshot](/assets/images/pagefly-af-demo-b73e95dbb6bb642cc9d4ddd04d768ae0.gif)

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

![Add Postcode Lookup to your checkout address forms-screenshot](/assets/images/pagefly-pl-demo-3024c0de97055dc00613b7840055531f.gif)

***

## Step 1: Sign Up for a Free Trial[​](#step-1-sign-up-for-a-free-trial "Direct link to Step 1: Sign Up for a Free Trial")

To use Ideal Postcodes, you’ll first need to create an account and get your API key.

1. If you don’t have an account [sign up to create a free account](https://account.ideal-postcodes.co.uk/users/sign_up).
2. Navigate to the [**KEYS**](https://account.ideal-postcodes.co.uk/tokens) section in your account.
3. **Copy your API Key -** you’ll need this to complete the setup. It’s a string of characters that begins with the letters `ak_`. On signing up your first key will have a balance of 50 free lookups for testing.

<br />

***

<br />

## Step 2: Create a Form[​](#step-2-create-a-form "Direct link to Step 2: Create a Form")

Add address input fields to your form. These should be created using `Single Line Text`. You can find this in the `Elements` menu under the `Shopify` tab then select to `Customer Form Field`.

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

![PageFly Create Form](/assets/images/pagefly-create-form-dbc5d59cf000e8fcf5dae5fe2131f934.png)

<br />

***

<br />

## Step 3: Drop in Script[​](#step-3-drop-in-script "Direct link to Step 3: Drop in Script")

You can integrate either Address Finder or Postcode Lookup to your form.

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

In the `Elements` menu in the `PageFly` tab, select `HTML/Liquid` and place it at the bottom of your form.

![PageFly HTML/Liquid](/assets/images/pagefly-html-488d2ff27cde34bcae87e3dd8ae0d645.png)

Open the code editor and add the following code to the bottom of your form:

```
<script type="module">

  import { AddressFinder } from "https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled@5/dist/address-finder.esm.js";

  AddressFinder.setup({

    apiKey: "ak_test",

    inputField: 'input[name="contact[note][Address Line One]"]',

    outputFields: {

      line_1: 'input[name="contact[note][Address Line One]"]',

      line_2: 'input[name="contact[note][Address Line Two]"]',

      line_3: 'input[name="contact[note][Address Line Three]"]',

      post_town: 'input[name="contact[note][Post Town]"]',

      postcode: 'input[name="contact[note][Postcode]"]',

    },

  });

</script>
```

info

* Replace the apiKey with the key that is supplied when you created your account.
* Ensure you are using the correct identifiers for your address fields.

<br />

***

<br />

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

In the `Elements` menu in the `PageFly` tab, select `HTML/Liquid` and place it at the bottom of your form.

![PageFly HTML/Liquid](/assets/images/pagefly-html-488d2ff27cde34bcae87e3dd8ae0d645.png)

Open the code editor and add the following code to the bottom of your form:

```
<script type="module">

  import { PostcodeLookup } from "https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@3/dist/postcode-lookup.esm.js";

  PostcodeLookup.setup({

    apiKey: "ak_test",

    context: "#idpc",

    inputField: 'input[name="contact[note][Address Line One]"]',

    outputFields: {

      line_1: 'input[name="contact[note][Address Line One]"]',

      line_2: 'input[name="contact[note][Address Line Two]"]',

      line_3: 'input[name="contact[note][Address Line Three]"]',

      post_town: 'input[name="contact[note][Post Town]"]',

      postcode: 'input[name="contact[note][Postcode]"]',

    },

  });

</script>
```

Add another `HTML block` and place it at the top of the form and add the HTML code below:

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

info

* The ID that you provide here must match the ID provided in context
* Replace the API key with the one supplied when you created your account
* Ensure you are using the correct identifiers for your address fields

<br />

***

<br />

## Customisation[​](#customisation "Direct link to Customisation")

Both libraries can be customised to suit your needs.

For Address Finder, head over to the [Address Finder documentation](/docs/address-finder.md) for more information.

For Postcode Lookup, head over to the [Postcode Lookup documentation](/docs/postcode-lookup.md) for more information.

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

If you encounter any issues during installation or configuration:

* Make sure you’ve correctly entered your API key.
* Ensure that the input selectors in the code match your input fields.

info

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