Springe zum Hauptinhalt

Wie für die automatische Vervollständigung der Adressfelder

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Kürzlich hat uns einer unserer Benutzer gefragt, wie die automatische Vervollständigung von Adressfeldern in WordPress-Formularen hinzugefügt werden soll. Durch die automatische Vervollständigung können Benutzer schnell die Adresse von Vorschlägen auswählen, die während der Eingabe in Echtzeit generiert werden.

In diesem Tutorial zeigen wir Ihnen, wie Sie die automatische Vervollständigung von Adressfeldern in WordPress mithilfe von " Google Places API ".

So fügen Sie die automatische Vervollständigung in WordPress 1 hinzu

Als erstes müssen Sie das Plugin installieren und aktivieren. " Adresse Autovervollständigung mit Google Place Api “. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung unter wie man ein WordPress Plugin installiert.

Nach der Aktivierung müssen Sie den Ort besuchen " Einstellungen> Google Autocomplete Seite zum Konfigurieren der Plugin-Einstellungen.

Konfigurieren Sie die automatische Vervollständigung in WordPress

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 in Echtzeit in ihrer Datenbank abrufen.

Gehe zu " Google Developer Console So erstellen Sie ein neues Projekt.

Google Entwicklungskonsole

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

Das Popup verschwindet, warten Sie einige Sekunden und Sie werden automatisch zu Ihrem neuen Projekt weitergeleitet.

Jetzt wird die Liste der Google-APIs angezeigt, die Sie für Ihr Projekt aktivieren können. Sie müssen suchen und klicken Sie auf " Google Places API Web Service ".

Liste der Google API-Schlüssel

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Hiermit gelangen Sie zu einer Vorschauseite, auf der die Funktionsweise dieser API erläutert wird. Sie müssen auf den Link "Aktivieren" klicken, um fortzufahren.

Aktivierung des Google Place API-Webdienstmoduls

Entwicklerkonsole aktivieren Google Platz API für Ihr Projekt.

Sie benötigen jedoch weiterhin die Anmeldeinformationen, um die API auf Ihrer Site verwenden zu können. Klicken Sie also auf die Schaltfläche Anmeldeinformationen erstellen, um fortzufahren.

Erstellen Sie Anmeldeinformationen

Klicken Sie im nächsten Bildschirm auf die Schaltfläche "Welche Anmeldeinformationen benötige ich?".

Alle Informationen, die ich brauche

Die Entwicklerkonsole zeigt Ihnen nun den API-Schlüssel an. Sie müssen diesen Schlüssel kopieren und in die Einstellungen Ihrer WordPress-Site einfügen.

Kopieren Sie einen Google API-Schlüssel

Sie müssen in Ihrem Google Developers-Projekt immer einen anderen API-Schlüssel aktivieren. Klicken Sie in der Google Developer Console auf die Bibliothek und dann auf " Google Maps JavaScript-API ".

Google Maps Javascript API

Hiermit gelangen Sie zur Seite „API-Übersicht“, auf der Sie auf den Link „Aktivieren“ klicken müssen, um fortzufahren.

Google Map Javascript API

Diese API benötigt keinen zusätzlichen API-Schlüssel, sodass Sie jetzt fortfahren können.

So aktivieren Sie die automatische Vervollständigung in Formularfeldern

Sie können Feldern, die mit Formularerstellungs-Plug-ins erstellt wurden, Funktionen zur automatischen Vervollständigung hinzufügen.

In diesem Tutorial werden wir WPForms verwenden. Dieses Plugin kann jedoch mit nahezu jedem Formularerstellungs-Plugin verwendet werden.

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

Wenn Sie fertig sind, fügen Sie dieses Formular wie gewohnt zu Ihrer Website hinzu.

Gehen Sie dann zu dem Artikel oder der Seite, auf der Sie Ihr Formular hinzugefügt haben. Sie müssen mit der rechten Maustaste auf das Feld klicken und "Überprüfen" aus dem Browser-Menü auswählen.

Adressfeld des Wordpress-Formulars wpforms

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

In dieser Erfassung wird beispielsweise der Attributname " wpforms [Felder] [9] [address1] Der ID-Wert ist " wpforms-352-field_9 Und die Klasse CSS ist " wpforms-Feld-Adresse-address1 ".

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

Wenn Sie mehrere Felder in mehreren Formularen als Ziel festlegen möchten, können Sie einfach ein Komma und andere Werte hinzufügen.

Fügen Sie Adressen aus WordPress-Feldern hinzu

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Vergessen Sie nicht, auf den Button «zu klicken. Registrieren Speichern Sie Ihre Änderungen.

Jetzt können Sie die Formularseite besuchen und versuchen, eine Adresse einzugeben. Im Formularfeld werden Vorschläge mit Google Places und Google Maps angezeigt.

Standort von Google und Google Map

Das ist alles für dieses Tutorial. Ich hoffe, dass Sie damit die automatische Vervollständigung in die WordPress-Felder einfügen können.

Dieser Artikel enthält 1 Kommentar

  1. Weiß ich, was zu tun ist, um das automatische Ausfüllen von Formularen auf der Seite zu blockieren?
    Denn oft, wenn jemand viele Daten hat, zum Beispiel auf den Namen der automatischen Vervollständigung klickt, springt der Rest auf uns und ist oft falsch und der Kunde sieht es nicht und sendet das falsche Formular ? Das ist natürlich WordPress.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
15 Aktien
Aktie12
tweet
Registrieren3