Address autocomplete in WPForms

WPForms has an Address field, which is one of the paid field types. It produces input fields with names like wpforms[fields][3][address1], wpforms[fields][3][postal] and wpforms[fields][3][city], where the number is the field id. If you use WPForms Lite, you create three plain text fields and give each one a CSS class. The script below covers both.

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. Under Integrations, check that WPForms is switched on. The plugin attaches to the Address field and fills postcode and city. With WPForms Lite's plain text fields, enter the address field's CSS selector instead (e.g. .dk-adresse input from step 2 below).

If you want your own code instead, or postcode and city in separate Lite fields, follow the steps 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. Set up the fields#

With the Address field: choose the International scheme, so the field has a postal code instead of a US ZIP code, and hide the region sub-field.

With WPForms Lite: create three Single Line Text fields. Under Advanced → CSS Classes give them the classes dk-adresse, dk-postnr and dk-by. WPForms puts the class on the field's container, so the selector becomes .dk-adresse input.

3. The mu-plugin#

Save the file as wp-content/mu-plugins/danadresse.php:

<?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 = "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 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 field: wpforms[fields][3][address1] → [postal] and [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: text fields with CSS classes
  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#

Fill in the form, pick a suggestion, and submit it. Check in the notification email (or under WPForms → Entries, which needs a paid licence) that postcode and city came through. If you use a scheme other than International, the postcode sub-field may have another name. Check it with Inspect. 403 origin_not_allowed in the console means the domain is missing from the key.

5. Optional: check on the server#

In the wpforms_process action hook you can send street and postcode to /datavask/adgangsadresser with a server key without a domain lock and set an error on the field in wpforms()->process->errors if the answer is category C. See the Contact Form 7 guide for a full example of the call and Address cleansing in checkout for the categories.

Next steps#

• Gravity Forms
• The plugin on wordpress.org: Lynbro Danadresse