Adresse-autocomplete i Webflow-formularer

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

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.

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

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

Eller: din egen init-kode#

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

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:

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