# Adresse-autocomplete i Elementor-formularer

> Kobl adresse-widget'en på et Elementor Pro-formularfelt via felt-id'et, også i popups, og udfyld postnr. og by automatisk.
>
> https://danadresse.dk/guides/elementor · verified 2026-11-02
Elementor Pro's Form-widget giver hvert felt et id, du selv vælger. Feltet bliver til `<input id="form-field-<id>" name="form_fields[<id>]">`, og det er en stabil selektor at koble widget'en på. Gratisversionen af Elementor har ingen Form-widget, så guiden forudsætter Elementor Pro eller en formular med almindelige input-felter.

## 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. Elementor-formularer har ingen adressefelttype, så pluginnet finder adressefeltet med auto-detect, eller du angiver dets CSS-selektor under **Integrations** (fx `#form-field-adresse` fra trin 2 nedenfor).

Pluginnet udfylder kun postnr. og by i separate felter for formular-plugins med eget adressefelt (WooCommerce, Gravity Forms, WPForms m.fl.). Skal din Elementor-formular også udfylde postnr. og by, så brug din egen kode som 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. Giv felterne id'er

Åbn formularen i Elementor. Klik på adressefeltet, gå til fanen **Avanceret** for feltet og skriv `adresse` som **ID**. Giv postnummer- og by-felterne id'erne `postnr` og `by`. Elementor laver id'erne om til `form-field-adresse`, `form-field-postnr` og `form-field-by`.

## 3. Indlæs widget'en med et mu-plugin

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

```php id=mu-plugin run=syntax
<?php
/**
 * Plugin Name: Danadresse autocomplete (Elementor)
 */
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 bindAll() {
  document.querySelectorAll("#form-field-adresse").forEach((input) => {
    const form = input.form || document;
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(form.querySelector("#form-field-postnr"), a.postnr);
        setField(form.querySelector("#form-field-by"), a.postnrnavn);
      },
    });
  });
}
bindAll();
// Popups og faner tegner formularen senere
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
JS
    );
});
```

Scriptet bliver indlæst på alle sider, men laver først kald, når nogen skriver i adressefeltet. Har du Elementor Pro, kan du i stedet indsætte de to script-tags under **Elementor → Custom Code** med placeringen *body – end*.

## 4. Test

Udfyld formularen på det publicerede site, vælg et forslag, og send den. Tjek under **Elementor → Indsendelser** (eller i mailen), at postnr. og by kom med. Ligger formularen i en popup, så åbn popup'en og test der. `403 origin_not_allowed` i konsollen betyder, at domænet mangler på nøglen.

## 5. Valgfrit: tjek på serveren

Elementor Pro har action-hooket `elementor_pro/forms/validation`, hvor du kan kalde `/datavask/adgangsadresser` med en server-nøgle uden domænelås og afvise feltet med `$ajax_handler->add_error()`, hvis svaret er kategori C. Se [Datavask i checkout](/guides/datavask-i-checkout).

## Næste skridt

- [Contact Form 7](/guides/contact-form-7) og [WooCommerce](/guides/woocommerce) på samme site
- Pluginnet på wordpress.org: [Lynbro Danadresse](https://wordpress.org/plugins/lynbro-danadresse/)