Wie man ein Google Maps-Formular zum automatischen Ausfüllen von Adressen erstellt

Möchten Sie lernen, wie man ein Google Maps Formular zum automatischen Ausfüllen von Adressen erstellt?

Das Hinzufügen eines Feldes zum automatischen Ausfüllen von Adressen zu Ihren Website-Formularen verbessert die Benutzerfreundlichkeit, spart Zeit und validiert die übermittelte Adresse mithilfe von Google Maps.

Erstellen Sie Ihre WPForms Adresse Autocomplete Form

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie ein Google Maps-Formular zum automatischen Ausfüllen von Adressen erstellen können, ohne Code schreiben zu müssen!

Wie erstelle ich ein Google Maps Formular zum automatischen Ausfüllen von Adressen?

Sie fragen sich, wie Sie die Funktion zum automatischen Vervollständigen von Adressen in Google Maps nutzen können? Befolgen Sie die folgenden Schritte, um loszulegen:

Schritt 1: Installieren Sie das WPForms Plugin

Als Erstes müssen Sie das WPForms-Plugin installieren. Sobald WPForms installiert ist, klicken Sie auf die Schaltfläche "Aktivieren".

Wenn Sie neu in WordPress sind oder Schwierigkeiten bei der Plugin-Installation haben, können Sie die Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins lesen.

Schritt 2: Aktivieren Sie das Geolocation Addon

Um das Addon zu aktivieren, gehen Sie zu Ihrem WordPress-Dashboard und klicken Sie auf WPForms " Addons.

Geben Sie in der Suchleiste Geolocation ein. Klicken Sie dann auf die Schaltfläche Addon installieren, um den Status auf Aktiv zu ändern.

Schritt 3: Konfigurieren der Geolokalisierungseinstellungen

Sobald Sie das Geolocation-Addon aktiviert haben, müssen Sie seine Einstellungen konfigurieren. Klicken Sie dazu auf WPForms " Einstellungen.

Klicken Sie auf der Seite mit den WPForms-Einstellungen auf Geolocation in den oberen Registerkarten, um auf die Einstellungen zuzugreifen.

Hier sehen Sie verschiedene Optionen, mit denen Sie das Geolocation-Addon für unterschiedliche Bedürfnisse und Anforderungen konfigurieren können:

• Ortungsanbieter: Sie haben die Möglichkeit zu wählen, von welchem Anbieter Sie Ihre Geolocation-Informationen erhalten möchten. Hier wählen wir die Google Places API als unseren Ortsanbieter.

• Aktueller Standort: Aktivieren Sie diese Option, damit der Standort des Benutzers in das Formular eingetragen werden kann.

• Google Places API: Um die automatische Adressvervollständigung zu aktivieren und Google Maps in Ihren Formularen anzuzeigen, müssen Sie einen API-Schlüssel generieren und ihn mit WPForms verbinden.

Schauen wir uns den kompletten Prozess der Generierung eines API-Schlüssels an.

Generieren eines API-Schlüssels von der Google Developer Console

Rufen Sie die Google Developer Console auf und wählen Sie das Projekt aus dem Menü Projekt auswählen oben aus.

Wenn Sie keine zuvor erstellten Projekte haben, klicken Sie auf Neues Projekt, um ein neues Projekt zu erstellen.

Nachdem Sie erfolgreich ein neues Projekt erstellt haben, klicken Sie auf APIs und Dienste aktivieren.

Dadurch wird eine Google-API-Bibliothek geöffnet .

Von hier aus müssen Sie die drei 3 APIs aktivieren:

1. Geokodierung API
2. Karten JavaScript-API
3. Orte API

Diese API-Bibliothek bietet eine einfache Suchoption; geben Sie den Namen der API in das Suchfeld ein, gehen Sie zu Ihrer API und klicken Sie auf die Schaltfläche ENABLE.

Sobald Sie alle Ihre APIs aktiviert haben, gehen Sie zurück zu Ihrem Google Console Dashboard und navigieren Sie zur Registerkarte " Credentials".

Klicken Sie oben auf die Schaltfläche Anmeldeinformationen erstellen und wählen Sie die Option API-Schlüssel.

Ein Pop-up-Fenster mit einem API-Schlüssel wird geöffnet. Klicken Sie auf die Option SCHLÜSSEL EINSCHRÄNKEN in der unteren rechten Ecke des Pop-up-Fensters.

Es öffnet sich eine neue Seite, auf der Sie die folgenden Einstellungen vornehmen müssen:

• Anwendungsbeschränkungen: Hier können Sie auswählen, für welche Websites, IP-Adressen oder Anwendungen Sie den API-Schlüssel verwenden können. Hier müssen Sie die Option HTTP Referrers (HTTP-Referrer) wählen, damit Ihr Schlüssel innerhalb Ihrer Websites verwendet werden kann.

• Website-Einschränkungen: Sobald Sie die HTTP-Referrer ausgewählt haben, wird eine neue Option angezeigt: Website-Einschränkungen. Hier müssen Sie den Domainnamen Ihrer Website hinzufügen, damit der API-Schlüssel nur von den angegebenen Websites verwendet werden kann.

• API-Beschränkungen: Nachdem Sie Ihren Schlüssel nach Anwendung und Website eingeschränkt haben, müssen Sie Ihren Schlüssel nach API einschränken. Klicken Sie dazu auf die Option Schlüssel einschränken.

Daraufhin öffnet sich ein Dropdown-Menü mit mehreren APIs. Wählen Sie die folgenden APIs aus dem Dropdown-Menü:

• Orte API
• Karten JavaScript-API
• Geokodierung AP

Wenn Sie mit der Auswahl der APIs fertig sind, klicken Sie auf die Schaltfläche Speichern, um Ihre Einstellungen zu speichern.

Wenn Sie auf die Schaltfläche "Speichern" klicken, werden Sie zur Seite " Anmeldeinformationen" zurückgeleitet. Kopieren Sie Ihren Schlüssel von der Seite und gehen Sie zurück zu Ihren WPForms-Einstellungen.

Fügen Sie diesen in Ihren WPForms-Einstellungen in das Feld API-Schlüssel unter der Google Places API ein und klicken Sie auf die Schaltfläche Einstellungen speichern.

Großartig! Lassen Sie uns nun fortfahren und die Funktion zum automatischen Ausfüllen von Adressen zu Ihren Formularen hinzufügen.

Schritt 4: Erstellen eines Google Maps-Formulars zum automatischen Ausfüllen von Adressen

Nun, da wir mit den API-Einstellungen fertig sind, ist es an der Zeit, ein Google Maps-Autocomplete-Adressformular zu erstellen.

Dazu müssen wir zunächst ein neues Formular mit WPForms erstellen. Gehen Sie zu WPForms " Add New, um ein neues Formular zu erstellen.

Fügen Sie auf dem Einrichtungsbildschirm einen Namen für Ihr Formular hinzu und wählen Sie die Vorlage aus, die Sie verwenden möchten. WPForms wird mit mehr als 2.000 WordPress-Formularvorlagen geliefert.

Hier wählen wir eine Vorlage für ein einfaches Kontaktformular. Klicken Sie auf die Vorlage, um sie auf dem Dashboard des Formularerstellers live zu sehen.

Unten können Sie die WPForms Form Builder Dashboard überprüfen. Von diesem Builder aus können Sie zusätzliche Felder zu Ihrem Kontaktformular hinzufügen.

Schritt 5: Adressfeld zum Formular hinzufügen

Jetzt, wo wir unser Formular fertig haben, müssen wir nur noch das Adressfeld hinzufügen . Ziehen Sie auf der linken Seite das Adressfeld aus dem Abschnitt "Ausgefallene Felder" und platzieren Sie es in Ihrem Formular.

Das Adressfeld enthält bereits eine Beschriftung und einen Text für die Unterbeschriftung. Sie erhalten die Flexibilität zu:

• Anpassen des Etikettentextes
• Wählen Sie das Schemaformat für das Adressfeld
• Feldgröße anpassen
• Etikett ausblenden
• Unter-Etiketten ausblenden

Schritt 6: Aktivieren Sie die Funktion zum automatischen Vervollständigen von Adressen

Um die Funktion zum automatischen Vervollständigen von Adressen zu aktivieren, gehen Sie auf die Registerkarte Erweitert des Adressfeldes.

Scrollen Sie nach unten, bis Sie die Option Autovervollständigung für Adressen aktivieren sehen. Aktivieren Sie diese Einstellung, um das automatische Ausfüllen von Adressen in Ihrem Formular zu aktivieren.

Wenn Sie dies zulassen, wird eine weitere Funktion geöffnet: Karte anzeigen. Wenn Sie eine Karte in Ihrem Kontaktformular anzeigen möchten, aktivieren Sie auch diese Option.

Verwenden Sie die Dropdown-Liste, um festzulegen, ob die Karte über oder unter den Adress-Unterfeldern erscheinen soll.

Klicken Sie oben auf die Schaltfläche Speichern. Jetzt, da Ihr Formular für die automatische Vervollständigung von Adressen fertig ist, können Sie es zu Ihrer Website hinzufügen.

Schritt 7: Fügen Sie Ihr Google Maps Autocomplete Adressformular zu Ihrer WordPress-Website hinzu

WPForms ermöglicht es Ihnen, Ihr Formular an mehreren Stellen einzufügen, einschließlich Seiten, Blog-Posts und sogar Sidebar-Widgets Ihrer Website.

Wenn Sie möchten, können Sie vor dem Einbetten Ihres Formulars in eine Seite prüfen, wie Ihr Formular auf der Live-Seite aussehen wird. Um eine Vorschau Ihres Formulars anzuzeigen, klicken Sie oben auf die Schaltfläche Vorschau.

Wenn Sie mit Ihrem Google Maps-Formular zur automatischen Vervollständigung von Adressen zufrieden sind, können Sie es zu Ihrer Seite hinzufügen.

Erstellen Sie eine neue Seite oder öffnen Sie eine bestehende Seite auf der WordPress-Website. Klicken Sie auf das "+" -Symbol und fügen Sie den WPForms-Block über den Block-Editor hinzu.

Wählen Sie dann Ihr Formular aus dem Dropdown-Menü des Blocks aus. In diesem Fall wählen wir das Formular zum automatischen Ausfüllen von Adressen.

Danach brauchen Sie die Seite nur noch zu veröffentlichen, und Ihr Formular ist einsatzbereit und kann Anmeldungen annehmen.

Hier sehen Sie, wie das Adressfeld mit der interaktiven Karte auf einer veröffentlichten Seite aussieht. Ist das nicht erstaunlich?

Tolle Arbeit! Sie haben erfolgreich ein Google Maps-Formular zum automatischen Ausfüllen von Adressen erstellt. In diesem Leitfaden finden Sie weitere Einzelheiten zu den Adresszeilen 1 und 2.

FAQs über die Erstellung eines Google Maps-Formulars mit automatischer Adressvervollständigung

Das automatische Ausfüllen von Adressformularen ist ein beliebtes Thema bei unseren Lesern. Hier finden Sie Antworten auf einige häufig gestellte Fragen dazu:

Was ist die automatische Vervollständigung der Adresse im Formular?

Das automatische Ausfüllen von Adressen in einem Formular ist eine Funktion, die das Ausfüllen von Adressfeldern vereinfacht.

Wenn Sie mit der Eingabe einer Adresse beginnen, schlägt das Formular automatisch vollständige Adressen auf der Grundlage der ursprünglichen Eingabe vor. Dies hilft den Benutzern, schnell genaue Informationen einzugeben, ohne die gesamte Adresse abtippen zu müssen.

Wie füge ich eine Adresse zur automatischen Vervollständigung zu Google hinzu?

Um einem Google-Formular eine Funktion zum automatischen Ausfüllen von Adressen hinzuzufügen, müssen Sie die Google Maps API integrieren. Diese API verbindet Ihr Formular mit der umfangreichen Adressdatenbank von Google und ermöglicht es, Adressen vorzuschlagen, während die Nutzer sie eingeben.

Für WordPress-Benutzer, WPForms Pro, kombiniert mit dem Geolocation Addon, bietet eine einfache Integration, die Ihre Formulare mit Adresse Autocomplete-Funktionen erweitert.

Was ist das Werkzeug zur automatischen Vervollständigung von Adressen?

Ein Tool zur automatischen Vervollständigung von Adressen ist ein System, das vollständige Adressen vorhersagt und anzeigt, sobald der Benutzer sie in ein Formularfeld eingibt. Es erhöht die Geschwindigkeit und Genauigkeit der Adresseingabe und stellt sicher, dass die Informationen korrekt sind.

Für WordPress-Sites, die Einbeziehung dieser Funktion ist einfach mit WPForms Pro und der Geolocation Addon, die nahtlos integrieren Adresse Autocomplete in Ihre Formulare.

Erfordert das Einbetten der Google Maps Autovervollständigung Programmierkenntnisse?

Das Einbetten der Google Maps-Funktion zum automatischen Vervollständigen von Adressen in ein Kontaktformular erfordert Programmierkenntnisse.

Wenn Sie jedoch ein Formularerstellungs-Plugin wie WPForms verwenden, können Sie den Prozess in wenigen Schritten und ohne Codierung durchführen.

Welches ist das beste Google Maps-Plugin für WordPress?

WPForms Pro ist eines der besten Karten-Plugins für WordPress. Es enthält ein leistungsfähiges Geolocation Addon, das mit einer vorgefertigten Autovervollständigungsfunktion für Adressen kommt, die mit Google Maps oder Mapbox funktioniert.

Mit dieser Funktion werden die Standorte Ihrer Nutzer automatisch ermittelt und vorgeschlagen, während sie ihre Adressen ausfüllen und eintippen.

Darüber hinaus können Sie mit dem Geolocation-Addon eine Karte zu Ihrem WordPress-Kontaktformular hinzufügen und Ihren Nutzern ermöglichen, einen Standort hinzuzufügen, indem Sie die Stecknadel auf der Karte anpassen.

Verfolgen Sie als nächstes Ihre WordPress-Formular-Konversionen

Und da haben Sie es! Mit dem WPForms Geolocation Addon können Sie ganz einfach die Autovervollständigungsfunktion für Ihre Kontaktformulare aktivieren und die Erfahrung Ihrer Besucher verbessern.

Nachdem Sie ein Google Maps-Autovervollständigungsformular für Adressen erstellt haben, möchten Sie vielleicht die Quellen nachverfolgen, die Besucher und potenzielle Kunden auf Ihre Website bringen. Wenn Sie mehr darüber erfahren möchten, lesen Sie unsere ausführliche Anleitung zur Verfolgung von Lead-Quellen in WordPress.

Weitere Möglichkeiten, mit Karten in WordPress zu arbeiten, finden Sie in unserer Liste der besten WordPress Mapbox-Plugins. Vielleicht interessiert Sie auch ein Blick auf einige einfache Tricks, um Spam bei der Benutzerregistrierung zu vermeiden.

Erstellen Sie jetzt Ihr WordPress-Formular

Also, worauf warten Sie noch? Starten Sie noch heute mit dem leistungsstärksten WordPress-Formular-Plugin. Und vergessen Sie nicht, wenn Sie diesen Artikel mögen, dann folgen Sie uns bitte auf Facebook und Twitter.