# Adresse-autocomplete i WPForms

> Kobl adresse-widget'en på WPForms' adressefelt eller på almindelige tekstfelter i WPForms Lite, og udfyld postnr. og by automatisk.
>
> https://danadresse.dk/guides/wpforms · verified 2026-11-02
WPForms har et **Address**-felt, som hører til de betalte felttyper. Det giver input-felter med navne som `wpforms[fields][3][address1]`, `wpforms[fields][3][postal]` og `wpforms[fields][3][city]`, hvor tallet er feltets id. Bruger du WPForms Lite, laver du tre almindelige tekstfelter og giver dem hver sin CSS-klasse. Scriptet nedenfor dækker begge dele.

## Den hurtige vej: pluginnet Lynbro Danadresse

Det gratis plugin [Lynbro Danadresse](https://wordpress.org/plugins/lynbro-danadresse/) fra wordpress.org giver adresse-autocomplete i WooCommerce, Contact Form 7, Gravity Forms, WPForms, Fluent Forms, Elementor, GiveWP, Forminator og flere. Det kalder API'et via din egen server, så nøglen aldrig når browseren.

1. Gå til **Plugins → Tilføj nyt** i WordPress, søg efter "Lynbro Danadresse", klik **Installér** og **Aktivér**.
2. Opret en nøgle under [Nøgler](/dashboard/keys). Brug en almindelig *live*-nøgle **uden** tilladte domæner: pluginnet kalder API'et fra din egen server, og dér afvises en domænelåst nøgle, fordi et serverkald ikke har en `Origin`.
3. Sæt nøglen ind under **Lynbro → Danadresse → Settings**. Fanen **Status** laver et testopslag med nøglen.
4. Tjek under **Integrations**, at WPForms er slået til. Pluginnet kobler sig på **Address**-feltet og udfylder postnr. og by. Med WPForms Lite's almindelige tekstfelter angiver du i stedet adressefeltets CSS-selektor (fx `.dk-adresse input` fra trin 2 nedenfor).

Vil du hellere have din egen kode, eller postnr. og by i separate Lite-felter, så følg trinene nedenfor.

## 1. Opret en browsernøgle

Opret en *live*-nøgle under [Nøgler](/dashboard/keys) og lås den til sitets domæner under **Tilladte domæner**. Se [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener).

## 2. Sæt felterne op

Med **Address**-feltet: vælg skemaet **International**, så feltet har et postnummer i stedet for en amerikansk ZIP-kode, og skjul delfeltet til region.

Med WPForms Lite: lav tre **Single Line Text**-felter. Under **Avanceret → CSS-klasser** giver du dem klasserne `dk-adresse`, `dk-postnr` og `dk-by`. WPForms sætter klassen på feltets container, så selektoren bliver `.dk-adresse input`.

## 3. Mu-pluginnet

Gem filen som `wp-content/mu-plugins/danadresse.php`:

```php id=mu-plugin run=syntax
<?php
/**
 * Plugin Name: Danadresse autocomplete (WPForms)
 */
if (!defined('ABSPATH')) {
    exit;
}

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'danadresse-autocomplete',
        'https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js',
        [],
        null,
        true
    );
    wp_add_inline_script('danadresse-autocomplete', <<<'JS'
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;
}

function attach(input, postnrEl, byEl) {
  DanadresseAutocomplete.attach(input, {
    apiKey: API_KEY,
    onSelect(a) {
      setField(input, streetLine(a), ["change"]);
      setField(postnrEl, a.postnr);
      setField(byEl, a.postnrnavn);
    },
  });
}

function bindAll() {
  // Address-feltet: wpforms[fields][3][address1] → [postal] og [city]
  document.querySelectorAll('.wpforms-form input[name$="[address1]"]').forEach((input) => {
    const form = input.form;
    const named = (part) => form.querySelector('[name="' + input.name.replace("[address1]", "[" + part + "]") + '"]');
    attach(input, named("postal"), named("city"));
  });
  // WPForms Lite: tekstfelter med CSS-klasser
  document.querySelectorAll(".wpforms-form .dk-adresse input").forEach((input) => {
    const form = input.form;
    attach(input, form.querySelector(".dk-postnr input"), form.querySelector(".dk-by input"));
  });
}
bindAll();
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
JS
    );
});
```

## 4. Test

Udfyld formularen, vælg et forslag, og send den. Tjek i notifikationsmailen (eller under **WPForms → Entries**, som kræver en betalt licens), at postnr. og by kom med. Bruger du et andet skema end International, kan postnummer-delfeltet hedde noget andet. Tjek navnet med **Inspicér**. `403 origin_not_allowed` i konsollen betyder, at domænet mangler på nøglen.

## 5. Valgfrit: tjek på serveren

I action-hooket `wpforms_process` kan du sende gade og postnummer til `/datavask/adgangsadresser` med en server-nøgle uden domænelås og sætte en fejl på feltet i `wpforms()->process->errors`, hvis svaret er kategori C. Se [Contact Form 7-guiden](/guides/contact-form-7) for et fuldt eksempel på kaldet og [Datavask i checkout](/guides/datavask-i-checkout) for kategorierne.

## Næste skridt

- [Gravity Forms](/guides/gravity-forms)
- Pluginnet på wordpress.org: [Lynbro Danadresse](https://wordpress.org/plugins/lynbro-danadresse/)