Hinzufügen von Autovervollständigung für Adressfelder in WordPress

Kürzlich hat uns einer unserer Benutzer gefragt, wie er die automatische Vervollständigung von Adressfeldern in WordPress-Formularen hinzufügen kann. Mit der automatischen Vervollständigung können Benutzer die Adresse aus den in Echtzeit generierten Vorschlägen während der Eingabe schnell auswählen. In diesem Artikel zeigen wir Ihnen, wie Sie mithilfe von Google Places-API die automatische Vervollständigung von Adressfeldern in WordPress hinzufügen.

Videoanleitung

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

Zuerst müssen Sie das Address Autocomplete mithilfe des Google Place Api-Plugins installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie besuchen Einstellungen »Google Autocomplete Seite, um die Plugin-Einstellungen zu konfigurieren.

Sie werden aufgefordert, den Google Places-API-Schlüssel einzugeben. Mit diesem API-Schlüssel kann Ihre Website eine Verbindung zu Google Maps herstellen und Vorschläge zur automatischen Vervollständigung in Echtzeit aus ihrer Datenbank abrufen.

Gehen Sie zur Website der Google Developer Console und erstellen Sie ein neues Projekt.

In einem Popup werden Sie aufgefordert, einen Namen für Ihr Projekt anzugeben. Verwenden Sie einen Namen, mit dem Sie später das Projekt identifizieren können, und klicken Sie dann auf die Schaltfläche Erstellen.

Das Popup-Fenster wird ausgeblendet. Warten Sie einige Sekunden, und Sie werden automatisch zu Ihrem neuen Projekt umgeleitet.

Jetzt wird die Liste der gängigen Google-APIs angezeigt, die Sie für Ihr Projekt aktivieren können. Sie müssen "Google Places API-Webdienst" suchen und darauf klicken..

Sie gelangen auf eine Übersichtsseite, in der die Funktionsweise dieser API erläutert wird. Sie müssen auf den Link Aktivieren klicken, um fortzufahren.

Die Entwicklerkonsole aktiviert jetzt die Google Places-API für Ihr Projekt.

Sie benötigen jedoch weiterhin Anmeldeinformationen, um die API auf Ihrer Website zu verwenden. Fahren Sie also fort und klicken Sie auf die Schaltfläche Anmeldeinformationen erstellen, um fortzufahren.

Auf dem nächsten Bildschirm müssen Sie auf "Welche Anmeldeinformationen benötige ich?" Taste.

In der Entwicklerkonsole wird jetzt der API-Schlüssel angezeigt. Sie müssen diesen Schlüssel kopieren und unter den Plugin-Einstellungen auf Ihrer WordPress-Website einfügen.

Sie müssen weiterhin eine andere API in Ihrem Google Developers-Projekt aktivieren. Klicken Sie auf die Bibliothek in der Google Developer Console und anschließend auf "Google Maps JavaScript API"..

Sie gelangen auf die Übersichtsseite der API, auf der Sie auf den Link "Aktivieren" klicken, um fortzufahren.

Diese API benötigt keinen zusätzlichen API-Schlüssel. Sie können also jetzt loslegen.

Aktivieren der automatischen Vervollständigung der Adresse in WordPress-Formularfeldern

Sie können jedes Formularfeld, das mit einem WordPress-Formularerstellungs-Plugin erstellt wurde, mit der Funktion zum automatischen Vervollständigen der Adresse versehen.

In diesem Tutorial werden wir WPForms verwenden. Diese Anweisungen funktionieren jedoch unabhängig vom verwendeten Kontaktformular-Plugin.

Zuerst 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 Website ein.

Gehen Sie als Nächstes zu dem Beitrag oder der Seite, auf der Sie Ihr Formular hinzugefügt haben. Sie müssen mit der rechten Maustaste auf das Adressfeld klicken und im Browser-Menü "Inspect" auswählen.

Sie sehen den Namen, die ID und die CSS-Klassenwerte für das Adressfeld.

In diesem Screenshot ist beispielsweise der Name des Formulars angegeben wpforms [Felder] [9] [Adresse1], ID-Wert ist wpforms-352-field_9, und CSS-Klasse ist wpforms-feldadresse adresse1.

Sie müssen nur einen dieser Werte kopieren und auf der Plugin-Einstellungsseite einfügen.

Wenn Sie mehrere Felder in mehreren Formularen anvisieren möchten, fügen Sie einfach ein Komma und einen weiteren Wert hinzu.

Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Änderungen zu speichern.

Das ist alles, Sie können jetzt Ihre Formularseite besuchen und versuchen, eine Adresse einzugeben. Das Formularfeld zeigt automatisch Vorschläge an, die Google-Orte und Google Maps verwenden.

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie Autocomplete für Adressfelder in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Liste der 24 WordPress-Plugins für geschäftliche Websites anzeigen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.