Address autocomplete in Webflow forms

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

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.

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

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

Or: your own init code#

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

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:

<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
• Squarespace
• Integrations