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

Das Hinzufügen von Autovervollständigung für Adressfelder kann Ihre WordPress-Formulare benutzerfreundlicher machen. So können Benutzer während der Eingabe schnell Adressen aus Vorschlägen auswählen, was den Prozess beschleunigt und Fehler reduziert.

Kürzlich wollte einer unserer Benutzer wissen, wie er dies für seine Formulare einrichten kann. Mit der Autovervollständigung können Benutzer eine reibungslosere Erfahrung machen und genaue Adresseinträge erhalten.

In diesem Artikel führen wir Sie durch die Schritte zum Hinzufügen der automatischen Adressvervollständigung zu Ihrer WordPress Website mit der Google Places API. Dies ist eine einfache Möglichkeit, Ihre Formulare zu verbessern und effizienter zu gestalten.

Warum Adressfelder mit Autovervollständigung 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 zum Beispiel ein eCommerce-Geschäft 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 Autovervollständigung von Adressfeldern ist eine der praktischsten Funktionen, die Sie Ihren Benutzern anbieten können. Wenn Sie Käufern schnell durch die Kaufabwicklung helfen können, ist die Wahrscheinlichkeit höher, dass sie einen Kauf abschließen.

Dies kann zu besseren Umsätzen führen und den Gelegenheitskäufer in einen Stammkunden verwandeln.

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.

Hier finden Sie eine kurze Übersicht über alle Schritte, die wir in diesem Artikel behandeln:

Sind Sie bereit? Beginnen wir mit einem Video-Tutorial.

Video-Anleitung

Subscribe to WPBeginner

Wenn Sie schriftliche Anleitungen bevorzugen, lesen Sie bitte weiter.

Schritt 1: Installieren und Aktivieren der Autovervollständigung von Google Address

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 gehen Sie in Ihrem WordPress-Dashboard auf Einstellungen “ Autovervollständigen, um die Einstellungen des Plugins zu konfigurieren.

Anschließend werden Sie 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.

Schritt 2: Zugriff auf Google Places API-Schlüssel

Um auf Ihren Google Places-API-Schlüssel zuzugreifen, können Sie die Google Developer Console-Website aufrufen und ein neues Projekt erstellen.

Sie werden auf eine neue Seite weitergeleitet, auf der Sie aufgefordert werden, Ihr Projekt zu benennen. Wir empfehlen, einen Namen zu wählen, mit dem Sie das Projekt leicht identifizieren können.

Anschließend können Sie auf den Button „Erstellen“ klicken.

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 & Dienste“ weitergeleitet.

Von hier aus navigieren Sie zur linken Seite und klicken auf den Tab „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 die Optionen für Karten zu filtern.

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

Sie werden dann auf die Übersichtsseite „Places API“ weitergeleitet.

Klicken Sie einfach auf den Button „Aktivieren“, um die API zu aktivieren.

Wenn Ihre Google-Konsole korrekt eingerichtet ist, sollte ein Popup-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 dann 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 zum Tab „APIs & Dienste“ im Dashboard der Google Developer Console zurückkehren. Dann suchen Sie die „Maps JavaScript API“ und klicken 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.

Schritt 3: Aktivieren Sie die automatische 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 in diesem Tutorial WPForms verwenden, da es der beste Drag-and-drop-Formularersteller und der einfachste für Anfänger ist. Diese Anweisungen funktionieren jedoch unabhängig davon, welches Kontaktformular Plugin Sie verwenden.

Zunächst müssen Sie ein Formular mit einem Adressfeld oder einer Reihe von Adressfeldern erstellen. Danach können Sie dieses Formular wie gewohnt in Ihre WordPress-Website einfügen. Wenn Sie Hilfe brauchen, können Sie unsere Anleitung zum Erstellen eines Kontaktformulars lesen.

Als Nächstes öffnen wir den Beitrag oder die Seite, auf der Sie Ihr Formular hinzugefügt haben, klicken mit der rechten Maustaste auf das Adressfeld und wählen im Menü des Browsers die Option „Prüfen“.

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 auf Ihr gesamtes Adressformular anwenden. Wenn Sie z. B. möchten, dass Benutzer eine komplette Lieferadresse automatisch ausfüllen können, müssen sie die Stadt, den Anfang und die Postleitzahl automatisch ausfüllen.

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

Sobald Sie alle IDs haben, kopieren Sie sie auf die Seite „Autovervollständigen“, 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. Im Formularfeld werden automatisch Vorschläge von Google Places und Google Maps angezeigt.

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

Bonus-Tipp: Verfolgen und Verringern von Formularabbrüchen in WordPress

Formularabbrüche treten auf, wenn Personen ein Formular verlassen, ohne es abzuschicken, oft aufgrund einer schlechten Benutzererfahrung oder aus anderen Gründen.

Die Reduzierung von Formularabbrüchen ist wichtig, da sie sich auf das Wachstum Ihrer E-Mail-Liste, Ihren eCommerce-Umsatz und den allgemeinen Geschäftserfolg auswirkt. Studien zeigen, dass mehr als 77 % der Online-Käufer ihre Checkout-Formulare nicht abschließen, was bedeutet, dass sie viel Geld durch unvollständige Verkäufe verlieren.

Durch die Verfolgung und Verbesserung der Formulare, die häufig abgebrochen werden, können Sie diese Umsatzverluste verringern. Die automatische Vervollständigung kann zwar helfen, aber es gibt noch andere Faktoren, die zum Abbruch von Formularen beitragen können:

• Optionale Felder werden obligatorisch: Es kann sehr lästig sein, wenn Menschen unwichtige Informationen ausfüllen müssen.
• Unklare Anweisungen: Verwirrende oder vage Formularfelder können dazu führen, dass Menschen aufgeben.
• Unfreundlichkeit für Mobilgeräte: Formulare, die auf mobilen Geräten schwer zu bedienen sind, können eine große Abfuhr sein.
• Technische Probleme: Probleme wie schlecht funktionierende Formulare oder langsame Ladezeiten können Menschen davon abhalten, das Formular auszufüllen.

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Verfolgung und Reduzierung von Formularabbrüchen in WordPress.

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 Expertentipps zum Erstellen interaktiver Formulare und zur Steigerung der Konversionsrate oder für unsere Anleitung zum Anpassen und Gestalten von WordPress-Formularen.

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.