Address autocomplete in the Gravity Forms address field

The Gravity Forms Address field is several input fields in one container: street address, address line 2, city, region, postcode and country. The container has the class ginput_container_address, and the sub-fields have classes such as address_line_1, address_city and address_zip. The script here finds every address field on the page and fills city and postcode in the same container.

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 Gravity Forms is switched on. The plugin attaches to the Address field and fills postcode and city in the same field.

If you want your own code instead, for example to control exactly what is filled, 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 address field#

Add an Address field, choose the address type International, and set Default Country to Denmark. You may hide State / Province / Region, which is not used in Denmark.

3. The mu-plugin#

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

<?php
/**
 * Plugin Name: Danadresse autocomplete (Gravity Forms)
 */
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(".ginput_container_address .address_line_1 input").forEach((input) => {
    const box = input.closest(".ginput_container_address");
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(box.querySelector(".address_zip input"), a.postnr);
        setField(box.querySelector(".address_city input"), a.postnrnavn);
      },
    });
  });
}
bindAll();
// AJAX forms and the next page of multi-page forms are rendered again
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
JS
    );
});

The MutationObserver covers the same cases as Gravity Forms' gform_post_render event: fields that appear after an AJAX submission, a validation error or a page change.

4. Test#

Fill in the form, pick a suggestion, and submit it. Open the entry under Forms → Entries and check that street, postcode and city were saved. If the field looks different in your theme, check the classes with Inspect. The field ids follow the pattern input_<form>_<field>_1 for street, _3 for city and _5 for postcode, if you prefer to use those. 403 origin_not_allowed in the console means the domain is missing from the key.

5. Optional: check on the server#

With the gform_field_validation filter you can send street and postcode to /datavask/adgangsadresser with a server key without a domain lock and mark the field invalid if the answer is category C. The approach is the same as in the Contact Form 7 guide, and the categories are explained in Address cleansing in checkout.

Next steps#

• WPForms
• The plugin on wordpress.org: Lynbro Danadresse