# Adresse-autocomplete i Squarespace-formularer

> Indsæt ét script-tag i Code Injection, så en Squarespace-formular får adresse-autocomplete, peg det på felterne om nødvendigt, og se hvorfor checkout'en ikke kan få det.
>
> https://danadresse.dk/guides/squarespace · verified 2026-11-02
Squarespace lader dig indsætte egen kode via *Code Injection*. Det virker på dine almindelige sider, fx en formular til tilbud eller booking. Squarespace's checkout kører ikke din injicerede kode, så leveringsadressen i en Squarespace Commerce-ordre kan ikke få autocomplete.

Code Injection findes ikke på det billigste abonnement. Tjek dit abonnement, før du går i gang.

## 1. Opret en browsernøgle

Opret en *live*-nøgle under [Nøgler](/dashboard/keys) og lås den til dit domæne under **Tilladte domæner**, fx `minside.dk` og `www.minside.dk`. Bruger du også den indbyggede `squarespace.com`-adresse, så skriv den præcist, aldrig som wildcard. Se [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener).

## 2. Indsæt script-tagget

Åbn **Code Injection** (under **Indstillinger → Avanceret** eller **Indstillinger → Udviklerværktøjer**, afhængigt af din Squarespace-version), indsæt tagget med din browsernøgle i feltet **Footer**, og gem:

```html id=auto-tag run=no
<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE" defer></script>
```

Scriptet er bygget til at finde delfelterne i en formularbloks *Address*-felt via deres labels og `autocomplete`-attributter og udfylde vej, postnr. og by. Vi har ikke testet det på et live Squarespace-site, så test en indsendelse, før du stoler på det. Vil du kun have scriptet på én side, kan du i stedet bruge sidens egen Code Injection under sidens indstillinger.

## 3. Test en indsendelse

Indsend formularen med en adresse fra et forslag, og se indsendelsen i Squarespace (fx i den mail, formularen sender, eller i det lager, formularen gemmer til). Kontrollér, at postnr. og by er kommet med. `API refused the request (403): … locked to …` i konsollen betyder, at domænet mangler på nøglen. Tilføj `data-debug` til tagget for at se i konsollen, hvilke felter scriptet fandt.

## Hvis felterne ikke bliver fundet

Squarespace genererer selv formularfelternes `id`, og de kan skifte, når du redigerer formularen. Åbn den publicerede side, højreklik på adressefeltet, vælg **Inspicér**, og find en egenskab, der er stabil: `name`, `autocomplete` eller `aria-label`. Selektoren bliver fx `input[name="…"]`. Tjek i konsollen, at `document.querySelectorAll("…").length` giver `1`. Gør det samme for postnummer og by, og giv selektorerne til scriptet:

```html id=auto-fields run=no
<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE"
        data-fields='[{"street":"input[name=\"dit-adressefelt\"]","zip":"input[name=\"dit-postnummerfelt\"]","city":"input[name=\"dit-byfelt\"]"}]' defer></script>
```

Ændrer du formularen, kan feltnavnene ændre sig. Tjek selektorerne igen efter hver redigering.

## Eller: din egen init-kode

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv. Ret de tre selektorer i `FIELDS`, og indsæt din nøgle:

```js id=init-js run=syntax
const API_KEY = "DIN_BROWSER_NØGLE";

// Ret til dine felter (se trin 2)
const FIELDS = {
  adresse: 'input[name="dit-adressefelt"]',
  postnr: 'input[name="dit-postnrfelt"]',
  by: 'input[name="dit-byfelt"]',
};

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();
  // Formularblokke tegnes efter sidens indlæsning
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

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

`setField` sender `input`- og `change`-events, fordi Squarespace's formularer holder værdierne i JavaScript. Uden events kan formularen sende den gamle tekst. Indsæt koden i feltet **Footer** i stedet for script-tagget fra trin 2:

```html id=footer-html run=no
<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* indsæt init-koden ovenfor her */
</script>
```

Vil du tjekke adresser på serveren, skal formularens data videre til et system, der kan kalde API'et. Se [Datavask i checkout](/guides/datavask-i-checkout).

## Næste skridt

- [Webflow](/guides/webflow), hvor du selv styrer feltets id
- [Widget-indstillinger](/widget)
- [Integrationer](/integrationer)