# Address autocomplete in Webflow forms

> Give your Webflow fields fixed ids, paste one script tag as custom code, and fill postcode and city when the customer picks an address.
>
> https://danadresse.dk/en/guides/webflow · verified 2026-11-02
Webflow forms are made of plain input fields, and you choose their id yourself in the Designer. That makes Webflow one of the easiest platforms: three ids and one script tag.

## 1. Create a browser key

Create a *live* key under [Keys](/dashboard/keys) and lock it under **Allowed domains** to your domain and your staging address, e.g. `mysite.dk`, `www.mysite.dk` and `mysite.webflow.io`. Enter the `webflow.io` address exactly, never as a wildcard, because a wildcard covers every Webflow site. See [Browser keys and allowed domains](/en/guides/browser-noegler-domaener).

## 2. Give the fields ids

Select the address field in the Designer, open **Element settings** and enter `adresse` in the **ID** box. Give the postcode and city fields the ids `postnr` and `by`. The field's **Name** decides what appears in the submission and can be something else.

## 3. Paste the script tag

Go to **Site settings → Custom code → Footer code**, paste the tag with your browser key, and save. If the form is on one page only, you can use that page's **Page settings → Before `</body>` tag** instead.

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

`data-fields` tells the script exactly which fields to use. Without it the script guesses from names, ids and labels. When the customer picks a suggestion, street and number (with floor and door), postcode and city are filled. A typed address is checked when the customer leaves the field, with a "Did you mean …?" suggestion.

To keep the address id, put an Embed element in the form with `<input type="hidden" id="adresse-id" name="adresse-id">` and add this to the footer code after the tag:

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

Then you can look the address up again later without guessing.

## 4. Publish and test

Custom code runs only on the published site, not in the Designer, and Webflow's plans set limits on custom code. Publish and test on the `webflow.io` address: type an address, pick a suggestion, and submit the form. Check under **Forms** in the site settings 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.

## Webflow Ecommerce checkout

The script also has a profile for Webflow's checkout fields. Add the tag to the checkout page's own custom code too (**Pages → Checkout → settings → Before `</body>` tag**). We have not tested it on a live Webflow store, so place a test order before you rely on it.

Webflow's forms only store what the customer sends. To check the address on the server, pass the submission on through a webhook or an integration. See [Address cleansing in checkout](/en/guides/datavask-i-checkout).

## Or: your own init code

If you want full control over what is filled, attach the address widget yourself:

```js id=init-js run=syntax
const API_KEY = "YOUR_BROWSER_KEY";

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);
    },
  });
}
```

Paste it as custom code, in place of the script tag from step 3:

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

## Next steps

- [The widget page](/en/widget)
- [Squarespace](/en/guides/squarespace)
- [Integrations](/en/integrationer)