# Address autocomplete in Elementor forms

> Attach the address widget to an Elementor Pro form field by its field id, popups included, and fill postcode and city automatically.
>
> https://danadresse.dk/en/guides/elementor · verified 2026-11-02
Elementor Pro's Form widget gives every field an id that you choose. The field becomes `<input id="form-field-<id>" name="form_fields[<id>]">`, which is a stable selector to attach the widget to. The free version of Elementor has no Form widget, so this guide assumes Elementor Pro or a form with plain input fields.

## The quick route: the Lynbro Danadresse plugin

The free plugin [Lynbro Danadresse](https://wordpress.org/plugins/lynbro-danadresse/) from wordpress.org adds address autocomplete to WooCommerce, Contact Form 7, Gravity Forms, WPForms, Fluent Forms, Elementor, GiveWP, Forminator and more. It calls the API through your own server, so the key never reaches the browser.

1. In WordPress go to **Plugins → Add New**, search for "Lynbro Danadresse", click **Install** and **Activate**.
2. Create a key under [Keys](/dashboard/keys). Use a normal *live* key **without** allowed domains: the plugin calls the API from your own server, and a domain-locked key is refused there because a server call has no `Origin`.
3. Paste the key under **Lynbro → Danadresse → Settings**. The **Status** tab runs a test lookup with the key.
4. Elementor forms have no address field type, so the plugin finds the address field by auto-detect, or you enter its CSS selector under **Integrations** (e.g. `#form-field-adresse` from step 2 below).

The plugin fills postcode and city in separate fields only for form plugins with their own address field (WooCommerce, Gravity Forms, WPForms and others). If your Elementor form should fill postcode and city too, use your own code as below.

## 1. Create a browser key

Create a *live* key under [Keys](/dashboard/keys) and lock it to the site's domains under **Allowed domains**. See [Browser keys and allowed domains](/en/guides/browser-noegler-domaener).

## 2. Give the fields ids

Open the form in Elementor. Click the address field, go to the field's **Advanced** tab and enter `adresse` as **ID**. Give the postcode and city fields the ids `postnr` and `by`. Elementor turns the ids into `form-field-adresse`, `form-field-postnr` and `form-field-by`.

## 3. Load the widget with an mu-plugin

Save the file as `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 = "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;
}

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 and tabs render the form later
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
JS
    );
});
```

The script is loaded on every page, but makes no calls until someone types in the address field. With Elementor Pro you can instead paste the two script tags under **Elementor → Custom Code** with the location *body – end*.

## 4. Test

Fill in the form on the published site, pick a suggestion, and submit. Check under **Elementor → Submissions** (or in the email) that postcode and city came through. If the form is in a popup, open the popup and test there. `403 origin_not_allowed` in the console means the domain is missing from the key.

## 5. Optional: check on the server

Elementor Pro has the action hook `elementor_pro/forms/validation`, where you can call `/datavask/adgangsadresser` with a server key without a domain lock and reject the field with `$ajax_handler->add_error()` if the answer is category C. See [Address cleansing in checkout](/en/guides/datavask-i-checkout).

## Next steps

- [Contact Form 7](/en/guides/contact-form-7) and [WooCommerce](/en/guides/woocommerce) on the same site
- The plugin on wordpress.org: [Lynbro Danadresse](https://wordpress.org/plugins/lynbro-danadresse/)