# Address autocomplete in Squarespace forms

> Paste one script tag into Code Injection so a Squarespace form gets address autocomplete, point it at the fields if needed, and see why the checkout cannot get it.
>
> https://danadresse.dk/en/guides/squarespace · verified 2026-11-02
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](/dashboard/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](/en/guides/browser-noegler-domaener).

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

```html id=auto-tag run=no
<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:

```html id=auto-fields run=no
<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:

```js id=init-js run=syntax
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:

```html id=footer-html run=no
<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](/en/guides/datavask-i-checkout).

## Next steps

- [Webflow](/en/guides/webflow), where you set the field id yourself
- [Widget options](/en/widget)
- [Integrations](/en/integrationer)