Autovervollständigung für Adressfelder in WordPress hinzufügen

Möchten Sie die Autovervollständigung für Adressfelder in WordPress hinzufügen?

Kürzlich fragte uns einer unserer Nutzer, wie man die Autovervollständigung für Adressfelder in WordPress-Formularen hinzufügen kann. Mit der Autovervollständigung können Benutzer schnell Adressen aus Vorschlägen auswählen, die während der Eingabe in Echtzeit generiert werden.

In diesem Artikel zeigen wir Ihnen, wie Sie mit der Google Places API eine Autovervollständigung für Adressfelder in WordPress hinzufügen können.

Warum Autovervollständigungs-Adressfelder in WordPress hinzufügen?

Das Hinzufügen von Feldern zur automatischen Vervollständigung von Adressen in WordPress kann Ihnen helfen, die Benutzerfreundlichkeit Ihrer Website zu verbessern.

Wenn Sie z. B. einen E-Commerce-Shop betreiben, können Ihre Kunden ihre Adressen schneller eingeben und Tippfehler vermeiden.

Wenn die Kunden ihre Adresse eingeben, werden die möglichen Adressen auf der Grundlage ihres aktuellen Standorts auf dem Bildschirm angezeigt, so dass sie nur noch die richtige auswählen müssen. Dies hilft Ihnen, Fehler zu reduzieren, da die Optionen, die dem Nutzer angezeigt werden, mit Google Places und Google Maps API verbunden sind.

Die automatische Vervollständigung von Adressfeldern ist eine der praktischsten Funktionen, die Sie Ihren Nutzern bieten können. Wenn Sie den Käufern schnell durch die Kaufabwicklung helfen können, ist es wahrscheinlicher, dass sie einen Kauf abschließen.

Indem Sie jeden Kauf schnell und einfach gestalten, steigern Sie Ihre Umsätze und machen aus Gelegenheitskäufern wiederkehrende Kunden.

Nun, da Sie die Vorteile des Hinzufügens von Autovervollständigungs-Adressfeldern in WordPress kennen, zeigen wir Ihnen, wie Sie Schritt für Schritt vorgehen können.

Video-Anleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie bitte weiter.

Als Erstes müssen Sie das Plugin Autocomplete Google Address installieren und aktivieren.

Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ Autovervollständigen in Ihrem WordPress-Dashboard aufrufen, um die Plugin-Einstellungen zu konfigurieren.

Sie werden aufgefordert, den Google Places-API-Schlüssel einzugeben. Dieser API-Schlüssel ermöglicht es Ihrer Website, sich mit Google Maps zu verbinden und automatische Vervollständigungsvorschläge in Echtzeit aus der Datenbank abzurufen.

Zugriff auf Google Places API-Schlüssel

Rufen Sie die Google Developer Console-Website auf und erstellen Sie ein neues Projekt.

Sie werden auf eine neue Seite weitergeleitet, auf der Sie aufgefordert werden, einen Namen für Ihr Projekt anzugeben.

Geben Sie einen Namen ein, mit dem Sie das Projekt später leichter identifizieren können, und klicken Sie dann auf die Schaltfläche „Erstellen“. Wenn Sie eine Organisation haben, mit der Sie eine Verbindung herstellen möchten, können Sie auf den Link „Durchsuchen“ klicken, um eine Dropdown-Liste mit Optionen anzuzeigen.

Warten Sie ein paar Sekunden, dann werden Sie automatisch zur Seite APIs & Services weitergeleitet.

Von hier aus navigieren Sie zum linken Seitenbereich und klicken auf die Registerkarte „Bibliothek“.

Nun wird eine Liste der gängigen Google-APIs angezeigt, die Sie für Ihr Projekt aktivieren können. Wählen Sie im linken Bereich „Karten“, um nach Optionen zu filtern, die sich nur auf Karten beziehen.

Sie müssen nur die Option „Places API“ finden und anklicken.

Von dort aus werden Sie auf die Übersichtsseite der Places-API weitergeleitet.

Klicken Sie einfach auf die Schaltfläche „Aktivieren“, um die API zu autorisieren.

Wenn Ihre Google Console korrekt eingerichtet ist, sollte ein Pop-up-Fenster mit Ihrem API-Schlüssel erscheinen.

Wenn Sie Ihr Google-Konsolenkonto jedoch zum ersten Mal einrichten, müssen Sie möglicherweise Ihre Rechnungsdaten eingeben.

Jetzt können Sie zu Ihrer WordPress-Website zurückkehren.

Fügen Sie den API-Schlüssel aus Ihrer Google-Konsole an der Stelle ein, an der „Google Place API Key“ steht.

Um sicherzustellen, dass die automatische Adressvervollständigung in WordPress funktioniert, müssen Sie die Google Maps JavaScript-API aktivieren.

Sie müssen also nur zur Registerkarte „APIs & Services“ im Dashboard der Google Developer Console zurückkehren. Suchen Sie dann die „Maps JavaScript API“ und klicken Sie auf „Aktivieren“.

Jetzt können Sie mit dem Hinzufügen der Formular-ID fortfahren.

Für den nächsten Schritt benötigen Sie die Formular-ID des Adressfeldes, in das Sie die Funktion zum automatischen Vervollständigen von Adressen einfügen möchten.

Aktivieren der automatischen Adressvervollständigung in WordPress-Formularfeldern

Sie können jedem Formularfeld, das mit einem beliebigen WordPress-Formularerstellungs-Plugin erstellt wurde, eine Funktion zum automatischen Ausfüllen von Adressen hinzufügen.

Wir werden WPForms in diesem Tutorial verwenden, da es der beste Drag-and-Drop-Formularersteller ist und für Anfänger am einfachsten zu bedienen ist. Diese Anweisungen funktionieren jedoch unabhängig davon, welches Kontaktformular-Plugin Sie verwenden.

Zunächst müssen Sie ein Formular erstellen, das ein Adressfeld oder eine Reihe von Adressfeldern enthält.

Wenn Sie fertig sind, fügen Sie dieses Formular wie gewohnt in Ihre WordPress-Website ein.

Gehen Sie dann zu dem Beitrag oder der Seite, auf der Sie Ihr Formular hinzugefügt haben. Klicken Sie mit der rechten Maustaste auf das Adressfeld und wählen Sie „Prüfen“ aus dem Browsermenü.

Hier sehen Sie einen hervorgehobenen Abschnitt mit dem Wert der Formular-ID für das Eingabefeld.

In diesem Screenshot lautet der ID-Wert unseres Formulars beispielsweise wpforms-567-field_4.

Kopieren Sie diesen Wert und fügen Sie ihn auf der Seite mit den Plugin-Einstellungen ein.

Sie sollten jedoch die Funktion zum automatischen Ausfüllen zu Ihrem gesamten Adressformular hinzufügen. Wenn Sie z. B. möchten, dass die Benutzer eine komplette Lieferadresse automatisch ausfüllen können, bedeutet das, dass sie die Stadt, den Anfang und die Postleitzahl automatisch ausfüllen müssen.

In diesem Fall müssen Sie das gleiche Verfahren anwenden, indem Sie auf „Prüfen“ klicken und dann die Formular-ID für jedes Feld suchen.

Wenn Sie alle Ihre IDs haben, kopieren Sie sie in die Autovervollständigungsseite, wo „Formular-ID“ steht.

Wenn Sie mehrere IDs hinzufügen, müssen Sie jede ID durch ein Komma und Anführungszeichen trennen, wie unten gezeigt. Wenn Sie fertig sind, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken.

Das war’s. Sie können nun Ihre Formularseite besuchen und versuchen, eine Adresse einzugeben.

Das Formularfeld zeigt automatisch Vorschläge über Google Places und Google Maps an.

Jetzt haben Sie die Funktion zum automatischen Ausfüllen von Google-Adressen erfolgreich zu Ihren Formularen hinzugefügt. Die Benutzer können Ihr Formular automatisch ausfüllen, egal ob sie in Ihrem WooCommerce-Shop einkaufen oder eine Benutzerregistrierung abschließen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Adressfelder in WordPress automatisch vervollständigt. Vielleicht interessieren Sie sich auch für unsere Liste der 24 unverzichtbaren WordPress-Plugins für Business-Websites oder unsere Anleitung zum Erstellen eines E-Mail-Newsletters.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.