Wix Integration

Add US address autocomplete (Address Lookup) to a Wix or Wix Studio form. It loads from a Custom Code snippet and fills your form's address fields with verified USPS addresses.

Features

• Address autocomplete on your first street line
• Works with Wix Forms in the Wix Editor and Wix Studio

Screenshots

Address Lookup

Requirements

• An AddressZen 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 US address form needs these fields, labeled exactly as shown:

Field label	Address Lookup field
Street line 1	line_1
Street line 2	line_2
City	city
State	state
ZIP code	zip_plus_4_code

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 country. All available fields are listed in our USPS 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 shows	Your page	Snippets you can use
'function'	Has RequireJS	ES module or require
'undefined'	Does not have RequireJS	ES 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 Address Lookup

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

ES module

address-lookup-esm.htmlhtml

<script type="module">
  import { AddressLookup } from "https://cdn.jsdelivr.net/npm/@addresszen/address-lookup/+esm";
  AddressLookup.watch({
    apiKey: "API_KEY_HERE",
    outputFields: {
      line_1: 'input[aria-label="Street line 1"]',
      line_2: 'input[aria-label="Street line 2"]',
      city: 'input[aria-label="City"]',
      state: 'input[aria-label="State"]',
      zip_plus_4_code: 'input[aria-label="ZIP code"]',
    },
  });
</script>

require (RequireJS pages)

address-lookup-require.htmlhtml

<script>
  require([
    "https://cdn.jsdelivr.net/npm/@addresszen/address-lookup/dist/address-lookup.js",
  ], function (AddressZen) {
    AddressZen.AddressLookup.watch({
      apiKey: "API_KEY_HERE",
      outputFields: {
        line_1: 'input[aria-label="Street line 1"]',
        line_2: 'input[aria-label="Street line 2"]',
        city: 'input[aria-label="City"]',
        state: 'input[aria-label="State"]',
        zip_plus_4_code: 'input[aria-label="ZIP code"]',
      },
    });
  });
</script>

Script tag (no RequireJS)

address-lookup-script.htmlhtml

<script src="https://cdn.jsdelivr.net/npm/@addresszen/address-lookup/dist/address-lookup.js"></script>
<script>
  AddressZen.AddressLookup.watch({
    apiKey: "API_KEY_HERE",
    outputFields: {
      line_1: 'input[aria-label="Street line 1"]',
      line_2: 'input[aria-label="Street line 2"]',
      city: 'input[aria-label="City"]',
      state: 'input[aria-label="State"]',
      zip_plus_4_code: 'input[aria-label="ZIP code"]',
    },
  });
</script>

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

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 country field labeled Country, add this line to outputFields:

country: 'input[aria-label="Country"]',

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

Our script checks for RequireJS when it runs. If it is there, the script registers with RequireJS instead of creating the global AddressZen object. So on a page with RequireJS, the <script> tag snippet fails with AddressZen 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 Lookup to Wix Form fields.

Troubleshooting

• AddressZen 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 Lookup Plugin Documentation if you wish to customize Address Lookup.

info

If you need support, you can reach out to us on our support page.