Skip to main content

Wix Integration

Add UK address autocomplete (Address Finder) or a postcode search (Postcode Lookup) to a Wix or Wix Studio form. Both load from a Custom Code snippet and fill your form's address fields with Royal Mail PAF addresses.

Features​

  • Address autocomplete on your first address line
  • Postcode search with an address dropdown
  • Works with Wix Forms in the Wix Editor and Wix Studio

Screenshots​

Address Finder​

Ideal Postcodes Wix Integration Demo

Requirements​

  • An Ideal Postcodes API key
  • A Wix Form on your site
  • Access to Custom Code in your site's dashboard settings

Create address fields​

Add a Short answer field to your Wix Form for each part of the address. A basic UK address form needs these fields, labelled exactly as shown:

Field labelAddress Finder field
Address line 1line_1
Address line 2line_2
Address line 3line_3
Townpost_town
Postcodepostcode

The snippets find each field by its label. If you use different labels, change the selectors to match (see Field selectors).

You can include other address fields too, such as county. All available fields are listed in our PAF documentation.

Check your page​

Wix loads a JavaScript module loader called RequireJS on some pages but not others. It changes how our script must be loaded, so check the page with your form before you pick a snippet:

  1. Open the published page with your form in Chrome, Edge or Firefox
  2. Wait for the page to finish loading, then press F12 and open the Console tab
  3. Type typeof requirejs and press Enter
Console showsYour pageSnippets you can use
'function'Has RequireJSES module or require
'undefined'Does not have RequireJSES module or <script> tag

The ES module snippet works on both, so use it unless you have a reason not to. Check each page with a form, as one page of a site can have RequireJS when another does not.

Add the code​

  1. In your site's dashboard, open Settings
  2. Under Advanced, click Custom Code
  3. Click Add Code in the Body - end section
  4. Paste one of the snippets below and set the Code Type to Essential
  5. Replace API_KEY_HERE with your API key, then click Apply

Address Finder​

address-finder-esm.htmlhtml
<script type="module">
  import { AddressFinder } from "https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder/+esm";
  AddressFinder.watch({
    apiKey: "API_KEY_HERE",
    outputFields: {
      line_1: 'input[aria-label="Address line 1"]',
      line_2: 'input[aria-label="Address line 2"]',
      line_3: 'input[aria-label="Address line 3"]',
      post_town: 'input[aria-label="Town"]',
      postcode: 'input[aria-label="Postcode"]',
    },
  });
</script>

Publish your site. Address Finder attaches to the Address line 1 field and fills the other fields when a customer picks an address.

Postcode Lookup​

Postcode Lookup adds a postcode box and a Find my Address button above Address line 1.

postcode-lookup-esm.htmlhtml
<script type="module">
  import { PostcodeLookup } from "https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup/+esm";
  var outputFields = {
    line_1: 'input[aria-label="Address line 1"]',
    line_2: 'input[aria-label="Address line 2"]',
    line_3: 'input[aria-label="Address line 3"]',
    post_town: 'input[aria-label="Town"]',
    postcode: 'input[aria-label="Postcode"]',
  };
  PostcodeLookup.watch(
    { apiKey: "API_KEY_HERE", outputFields: outputFields },
    {
      anchor: outputFields.line_1,
      onAnchorFound: function (options) {
        var field = options.anchor.parentElement;
        var previous = field.previousElementSibling;
        if (previous && previous.classList.contains("idpc_lookup")) return;
        var context = document.createElement("div");
        context.className = "idpc_lookup";
        field.before(context);
        options.config.context = context;
      },
    }
  );
</script>

Field selectors​

Wix Forms do not give their inputs a name or a fixed id. Each input carries its field label in an aria-label attribute, so the snippets select fields with input[aria-label="<field label>"]. The label must match exactly, including capitals. Wix leaves the required-field asterisk out of the aria-label.

To add a county field labelled County, add this line to outputFields:

county: 'input[aria-label="County"]',

To check a label, open your published page, right-click the field and choose Inspect. The aria-label value on the <input> element is what goes inside the quotes.

Why the loading method matters​

The -bundled scripts used by the require and <script> tag snippets check for RequireJS when they run. If it is there, they register with RequireJS instead of creating the global IdealPostcodes object. So on a page with RequireJS, a <script> tag snippet fails with IdealPostcodes is not defined, and on a page without it the require snippet fails with require is not defined. An ES module import ignores RequireJS, which is why it works on both.

Velo and HTML embeds​

Use Custom Code, not Velo or an HTML embed. Velo page code cannot reach the page's HTML elements, and an HTML embed runs in its own iframe, separate from your form. Neither can attach Address Finder or Postcode Lookup to Wix Form fields.

Troubleshooting​

  • IdealPostcodes is not defined in the browser console: the page has RequireJS. Use the ES module or require snippet.
  • require is not defined in the browser console: the page does not have RequireJS. Use the ES module or <script> tag snippet.
  • No suggestions appear: a selector does not match your field. Check the aria-label values as described in Field selectors.

Configuration​

See our Address Finder Plugin Documentation if you wish to customise Address Finder.
See our Postcode Lookup Plugin Documentation 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.