Adresse-autocomplete i Gravity Forms' adressefelt

Gravity Forms' Address-felt består af flere input-felter i én container: gadeadresse, adresselinje 2, by, region, postnummer og land. Containeren har klassen ginput_container_address, og delfelterne har klasser som address_line_1, address_city og address_zip. Scriptet her finder alle adressefelter på siden og udfylder by og postnr. i den samme container.

Den hurtige vej: pluginnet Lynbro Danadresse#

Det gratis plugin 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. 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. Tjek under Integrations, at Gravity Forms er slået til. Pluginnet kobler sig på Address-feltet og udfylder postnr. og by i samme felt.

Vil du hellere have din egen kode, fx for at styre præcis hvad der udfyldes, så følg trinene nedenfor.

1. Opret en browsernøgle#

Opret en live-nøgle under Nøgler og lås den til sitets domæner under Tilladte domæner. Se Browsernøgler og tilladte domæner.

2. Sæt adressefeltet op#

Tilføj et Address-felt, vælg adressetypen International, og sæt Default Country til Danmark. Skjul gerne State / Province / Region, som ikke bruges i Danmark.

3. Mu-pluginnet#

Gem filen som 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 = "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(".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-formularer og næste side i flersidede formularer tegnes på ny
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
JS
    );
});

MutationObserver dækker det samme som Gravity Forms' gform_post_render-event: felter, der kommer til efter en AJAX-indsendelse, en valideringsfejl eller et sideskift.

4. Test#

Udfyld formularen, vælg et forslag, og send den. Åbn indsendelsen under Forms → Entries og tjek, at gade, postnr. og by er gemt. Ser feltet anderledes ud i dit theme, så tjek klasserne med Inspicér. Felternes id'er følger mønstret input_<formular>_<felt>_1 for gade, _3 for by og _5 for postnummer, hvis du hellere vil bruge dem. 403 origin_not_allowed i konsollen betyder, at domænet mangler på nøglen.

5. Valgfrit: tjek på serveren#

Med filteret gform_field_validation kan du sende gade og postnummer til /datavask/adgangsadresser med en server-nøgle uden domænelås og markere feltet som ugyldigt, hvis svaret er kategori C. Fremgangsmåden er den samme som i Contact Form 7-guiden, og kategorierne er forklaret i Datavask i checkout.

Næste skridt#

• WPForms
• Pluginnet på wordpress.org: Lynbro Danadresse