Address autocomplete in Elementor forms

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 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. 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 and lock it to the site's domains under Allowed domains. See Browser keys and allowed domains.

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

Next steps#

• Contact Form 7 and WooCommerce on the same site
• The plugin on wordpress.org: Lynbro Danadresse