Address autocomplete in Squarespace forms

Squarespace lets you add your own code through Code Injection. That works on your normal pages, for example a quote or booking form. Squarespace's checkout does not run your injected code, so the delivery address in a Squarespace Commerce order cannot get autocomplete.

Code Injection is not available on the cheapest plan. Check your plan before you start.

1. Create a browser key#

Create a live key under Keys and lock it to your domain under Allowed domains, e.g. mysite.dk and www.mysite.dk. If you also use the built-in squarespace.com address, enter it exactly, never as a wildcard. See Browser keys and allowed domains.

2. Paste the script tag#

Open Code Injection (under Settings → Advanced or Settings → Developer Tools, depending on your Squarespace version), paste the tag with your browser key into the Footer box, and save:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY" defer></script>

The script is built to find the sub-fields of a form block's Address field by their labels and autocomplete attributes, and to fill street, postcode and city. We have not tested it on a live Squarespace site, so test a submission before you rely on it. If you only want the script on one page, use that page's own Code Injection in the page settings instead.

3. Test a submission#

Submit the form with an address from a suggestion and look at the submission in Squarespace (e.g. the email the form sends, or the storage the form saves to). Check that postcode and city came through. API refused the request (403): … locked to … in the console means the domain is missing from the key. Add data-debug to the tag to see in the console which fields the script found.

If the fields are not found#

Squarespace generates the form fields' id itself, and it can change when you edit the form. Open the published page, right-click the address field, choose Inspect, and find an attribute that is stable: name, autocomplete or aria-label. The selector becomes e.g. input[name="…"]. Check in the console that document.querySelectorAll("…").length returns 1. Do the same for postcode and city, and give the selectors to the script:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY"
        data-fields='[{"street":"input[name=\"your-address-field\"]","zip":"input[name=\"your-postcode-field\"]","city":"input[name=\"your-city-field\"]"}]' defer></script>

If you edit the form, the field names may change. Check the selectors again after each edit.

Or: your own init code#

If you want full control over what is filled, attach the address widget yourself. Change the three selectors in FIELDS and insert your key:

const API_KEY = "YOUR_BROWSER_KEY";

// Change to your fields (see step 2)
const FIELDS = {
  adresse: 'input[name="your-address-field"]',
  postnr: 'input[name="your-postcode-field"]',
  by: 'input[name="your-city-field"]',
};

function setField(el, value, events) {
  if (!el || value == null) return;
  const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set;
  setter.call(el, value);
  for (const type of events || ["input", "change"]) {
    el.dispatchEvent(new Event(type, { bubbles: true }));
  }
}

function streetLine(a) {
  let line = a.vejnavn + " " + a.husnr;
  if (a.etage) line += ", " + a.etage + ".";
  if (a["dør"]) line += " " + a["dør"];
  return line;
}

function bindAll() {
  document.querySelectorAll(FIELDS.adresse).forEach((input) => {
    const form = input.form || document;
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(form.querySelector(FIELDS.postnr), a.postnr);
        setField(form.querySelector(FIELDS.by), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  // Form blocks are rendered after the page has loaded
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
else start();

setField fires input and change events because Squarespace's forms keep their values in JavaScript. Without the events the form may submit the old text. Paste it into the Footer box in place of the script tag from step 2:

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* paste the init code from above here */
</script>

To check addresses on the server, the form data has to go on to a system that can call the API. See Address cleansing in checkout.

Next steps#

• Webflow, where you set the field id yourself
• Widget options
• Integrations