# Adresse-autocomplete i Webflow-formularer

> Giv dine Webflow-felter faste id'er, indsæt ét script-tag som custom code, og udfyld postnr. og by, når kunden vælger en adresse.
>
> https://danadresse.dk/guides/webflow · verified 2026-11-02
Webflow-formularer består af almindelige input-felter, og du bestemmer selv deres id i Designeren. Det gør Webflow til en af de nemmeste platforme: tre id'er og ét script-tag.

## 1. Opret en browsernøgle

Opret en *live*-nøgle under [Nøgler](/dashboard/keys) og lås den under **Tilladte domæner** til dit domæne og din staging-adresse, fx `minside.dk`, `www.minside.dk` og `minside.webflow.io`. Skriv `webflow.io`-adressen præcist, aldrig som wildcard, for et wildcard dækker alle Webflow-sites. Se [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener).

## 2. Giv felterne id'er

Markér adressefeltet i Designeren, åbn **Element settings** og skriv `adresse` i feltet **ID**. Giv postnummer- og by-felterne id'erne `postnr` og `by`. Feltets **Name** bestemmer, hvad der står i indsendelsen, og kan være noget andet.

## 3. Indsæt script-tagget

Gå til **Site settings → Custom code → Footer code**, indsæt tagget med din browsernøgle, og gem. Ligger formularen kun på én side, kan du i stedet bruge sidens **Page settings → Before `</body>` tag**.

```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":"#adresse","zip":"#postnr","city":"#by"}]' defer></script>
```

`data-fields` fortæller scriptet præcis, hvilke felter det skal bruge. Uden det gætter scriptet ud fra navne, id'er og labels. Når kunden vælger et forslag, udfyldes vej og husnr. (med etage og dør), postnr. og by. En indtastet adresse tjekkes, når kunden forlader feltet, med et "Mente du …?"-forslag.

Vil du gemme adressens id, så læg et Embed-element i formularen med `<input type="hidden" id="adresse-id" name="adresse-id">`, og tilføj dette i footer-koden efter tagget:

```html id=auto-select run=no
<script>
  document.addEventListener("danadresse:select", (e) => {
    document.getElementById("adresse-id").value = e.detail.address.id;
  });
</script>
```

Så kan du slå adressen op igen senere uden at gætte.

## 4. Publicér og test

Custom code kører kun på det publicerede site, ikke i Designeren, og Webflow's abonnementer sætter grænser for custom code. Publicér og test på `webflow.io`-adressen: skriv en adresse, vælg et forslag, og indsend formularen. Tjek i **Forms** under site-indstillingerne, at postnr. og by kom 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.

## Webflow Ecommerce-checkout

Scriptet har også en profil til Webflow's checkout-felter. Tilføj tagget i checkout-sidens egen custom code også (**Pages → Checkout → indstillinger → Before `</body>` tag**). Vi har ikke testet det i en live Webflow-butik, så prøv en testordre, før du stoler på det.

Webflow's formularer gemmer kun det, kunden sender. Vil du tjekke adressen på serveren, så send indsendelsen videre via webhook eller en integration. Se [Datavask i checkout](/guides/datavask-i-checkout).

## Eller: din egen init-kode

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv:

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

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;
}

const input = document.getElementById("adresse");
if (input) {
  DanadresseAutocomplete.attach(input, {
    apiKey: API_KEY,
    onSelect(a) {
      setField(input, streetLine(a), ["change"]);
      setField(document.getElementById("postnr"), a.postnr);
      setField(document.getElementById("by"), a.postnrnavn);
    },
  });
}
```

Indsæt den som custom code i stedet for script-tagget fra trin 3:

```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>
```

## Næste skridt

- [Widget-siden](/widget)
- [Squarespace](/guides/squarespace)
- [Integrationer](/integrationer)