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

Adressfelder sind frustrierend. Benutzer schreiben Straßennamen falsch, vergessen Postleitzahlen, geben unvollständige Adressen ein oder brechen das Ausfüllen von Formularen ganz ab, weil das Eintippen vollständiger Adressen mühsam ist.

Die Autovervollständigung von Google Maps löst dieses Problem, indem sie während der Eingabe vollständige, validierte Adressen vorschlägt. Nach der Eingabe von 3–4 Zeichen wird den Nutzern eine Dropdown-Liste mit echten Adressen angezeigt, aus der sie auswählen können.

Möchten Sie dies in Ihrem Formular einrichten, um Tippfehler zu vermeiden und das Ausfüllen des Formulars zu beschleunigen? In dieser Anleitung gebe ich Ihnen Schritt für Schritt Anweisungen, wie Sie ein Google Maps-Formular mit Adress-Autovervollständigung erstellen können.

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

Mit WPForms Pro und dem Geolocation-Add-on können Sie Ihren Formularen im Handumdrehen Kartenfunktionen hinzufügen. Befolgen Sie diese einfachen Schritt-für-Schritt-Anweisungen, um loszulegen:

Schritt 1: Installieren Sie das WPForms Plugin

Als Erstes müssen Sie das WPForms-Plugin installieren, einen leistungsstarken Formular-Generator, mit dem Sie ganz einfach Kontaktformulare, Registrierungsformulare und vieles mehr erstellen können.

Es verfügt über mehr als 2.100 WordPress-Formularvorlagen, die Sie verwenden können, und enthält integrierte Geolokalisierungstools, die die Anzeige von Karten in Ihren Formularen erheblich vereinfachen.

Um Karten zu Ihren Kontaktformularen hinzuzufügen, benötigen Sie WPForms Pro, das das Geolocation-Add-on und alle Kartenfunktionen enthält, die wir in diesem Tutorial behandeln werden.

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.

Jetzt auf WPForms Pro upgraden 🙂

Schritt 2: Aktivieren Sie das Geolocation Addon

Nachdem WPForms Pro installiert ist, müssen Sie das Geolocation-Add-on aktivieren. Dieses Add-on ermöglicht alle Kartenfunktionen in Ihren Kontaktformularen.

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.

Das Add-on wird automatisch installiert. Sie müssen noch keine Dateien herunterladen oder etwas konfigurieren. Als Nächstes verbinden Sie es mit Google Maps.

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. Sie werden dann zurück zur Seite „Anmeldedaten“ weitergeleitet. Kopieren Sie Ihren Schlüssel von dieser Seite und kehren Sie zu Ihren WPForms-Einstellungen zurück.

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.

Ihre Geolokalisierungseinstellungen sind nun konfiguriert. Als Nächstes erstellen Sie ein Formular mit aktivierter Adress-Autovervollständigung.

Schritt 4: Erstellen Sie Ihr Formular für die automatische Adressvervollständigung

Nachdem Sie das Geolocation-Add-on konfiguriert haben, können Sie Ihr Kontaktformular erstellen. Dies dauert etwa 5 Minuten. Gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen, um den Formular-Generator zu öffnen.

Geben Sie Ihrem Formular im Feld „Name Ihres Formulars“ einen Namen. Etwas wie „Kontakt aufnehmen“ eignet sich gut. Hier werden Ihnen einige Optionen angezeigt. Wenn Sie Zeit sparen möchten, können Sie aus unseren über 2.100 WordPress-Formularvorlagen auswählen.

Ich empfehle Ihnen, die Vorlage „Einfaches Kontaktformular“ zu wählen . Damit erhalten Sie ein vorgefertigtes Kontaktformular, in dem die wichtigsten Felder bereits hinzugefügt sind.

Die Vorlage enthält ein Feld für den Namen, ein Feld für die E-Mail-Adresse und ein Feld für Kommentare oder Nachrichten. Sie können diese Felder anpassen, neue hinzufügen oder nicht benötigte Felder entfernen.

Nun gibt es wahrscheinlich noch einige weitere Formulareinstellungen, die Sie konfigurieren möchten, wie Benachrichtigungen und Bestätigungen. Wenn ja, (und ich empfehle dies wärmstens), lesen Sie unsere ausführliche Anleitung zum Erstellen Ihres ersten Formulars.

Probieren Sie den WPForms AI Builder aus! 🙂

Schritt 5: Fügen Sie das Adressfeld zu Ihrem Formular hinzu

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 einen Beschriftungstext und einen Unterbeschriftungstext, um Ihnen die Arbeit zu erleichtern. Sie können den Beschriftungstext flexibel anpassen, das Adressschema auswählen, die Feldgröße anpassen und Beschriftungen und Unterbeschriftungen ausblenden.

Jetzt aktivieren Sie die Autovervollständigungsfunktion für Ihr Adressfeld. Dies ist eine einfache Umschaltfunktion, die das Feld mit Ihrer Google Places API verbindet.

Klicken Sie auf das Feld „Adresse“ in Ihrem Formular und anschließend auf die Registerkarte „Erweitert“ in den Feldeinstellungen auf der linken Seite.

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: Veröffentlichen Sie Ihr Google Maps-Formular zur automatischen Adressvervollständigung

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-Adressformular mit Autovervollständigung zufrieden sind, können Sie es Ihrer Seite hinzufügen. Klicken Sie auf das Symbol „+“ und fügen Sie den WPForms-Block aus dem Block-Editor hinzu.

Wählen Sie dann Ihr Formular aus dem Dropdown-Menü im Block aus. In diesem Fall wähle ich das Formular „Adress-Autocomplete“ aus, das ich gerade anhand der oben beschriebenen Schritte erstellt habe.

Danach müssen Sie nur noch die Seite veröffentlichen, und schon ist Ihr Formular online und bereit für Eingaben. So sieht das Adressfeld mit der interaktiven Karte auf einer veröffentlichten Seite aus. Ist das nicht toll?

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?

Die Adress-Autovervollständigung ist eine Funktion, die vollständige, validierte Adressen vorschlägt, während Benutzer in ein Formularfeld tippen. Nach der Eingabe von 3–4 Zeichen erscheint eine Dropdown-Liste mit passenden Adressen aus der Google-Datenbank.

Benutzer wählen ihre Adresse aus, anstatt jedes Feld manuell auszufüllen. Dadurch werden Tippfehler vermieden, die Eingabe beschleunigt (insbesondere auf Mobilgeräten) und sichergestellt, dass die Adressen korrekt und zustellbar sind.

Wie füge ich eine Autovervollständigungsadresse zu meinem WordPress-Formular hinzu?

Installieren Sie WPForms Pro oder höher, aktivieren Sie das Geolocation-Add-on, generieren Sie einen kostenlosen Google Places API-Schlüssel aus der Google Cloud Console und fügen Sie den API-Schlüssel unter WPForms » Einstellungen » Geolocation ein.

Danach müssen Sie nur noch ein Formular erstellen, ein Adressfeld hinzufügen und in den erweiterten Einstellungen des Feldes die Option „Adress-Autocomplete aktivieren” aktivieren.

Die vollständige Einrichtung dauert 20 bis 30 Minuten und wird in dieser Anleitung Schritt für Schritt beschrieben. Nach der Konfiguration funktioniert die Autovervollständigung in jedem Formular mit einem Adressfeld.

Funktioniert die Autovervollständigung von WPForms mit Google Maps?

Ja, WPForms verwendet die Google Places API für die automatische Adressvervollständigung. Dabei handelt es sich um dieselbe Technologie, die auch die Adressensuche von Google Maps unterstützt.

Sie müssen drei Google-APIs (Places API, Maps JavaScript API und Geocoding API) aktivieren, um den vollen Funktionsumfang nutzen zu können.

WPForms kann auch eine interaktive Google-Karte in Ihrem Formular anzeigen, auf der der ausgewählte Standort angezeigt wird. Aktivieren Sie diese Option in den erweiterten Einstellungen des Adressfelds unter „Karte anzeigen“.

Ist die Adress-Autovervollständigung von Google Maps kostenlos?

Google bietet monatlich 28.000 kostenlose Adress-Autovervollständigungsanfragen an. Danach zahlen Sie 2,83 $ pro 1.000 Anfragen. Die meisten kleinen bis mittelgroßen Websites bleiben innerhalb des kostenlosen Kontingents.

Eine „Anfrage“ wird jedes Mal gezählt, wenn ein Nutzer etwas in Ihr Adressfeld eingibt und Vorschläge angezeigt werden (nicht pro Tastenanschlag, sondern pro Suchvorgang). Überwachen Sie die Nutzung in Ihrer Google Cloud Console.

Wenn Sie die Limits häufig überschreiten, sollten Sie ein Upgrade Ihres Google Cloud-Tarifs in Betracht ziehen oder die Autovervollständigung auf wichtige Formulare beschränken.

Was ist der Unterschied zwischen Google Places API und Mapbox für die Autovervollständigung?

Die Google Places API bietet eine umfassendere weltweite Adressabdeckung (über 200 Länder) und eine bessere Adressvalidierung, hat jedoch ein kostenloses Kontingent von 28.000 Aufrufen pro Monat.

Mapbox bietet unbegrenzte kostenlose Autovervollständigungsanfragen, jedoch weniger detaillierte Adressdaten in ländlichen Gebieten und einigen internationalen Regionen.

WPForms unterstützt beides. Wählen Sie Google Places für Genauigkeit oder Mapbox für unbegrenzte Nutzung. Sie können den Anbieter unter WPForms » Einstellungen » Geolokalisierung wechseln, ohne Ihre Formulare neu erstellen zu müssen.

Kann ich die Adress-Autovervollständigung in WooCommerce-Checkout-Formularen verwenden?

Die Adress-Autovervollständigung von WPForms funktioniert nur bei Formularen, die mit WPForms erstellt wurden, nicht bei der nativen Kaufabwicklung von WooCommerce. Sie können jedoch mit WPForms ein benutzerdefiniertes Kaufabwicklungsformular mit Zahlungsintegration und Adress-Autovervollständigung erstellen.

Alternativ können Sie ein WooCommerce-spezifisches Plugin zur Adress-Autocomplete installieren, das sich direkt in die WooCommerce-Checkout-Felder integrieren lässt.

Wenn Sie speziell eine WooCommerce-Integration benötigen, suchen Sie im Plugin-Verzeichnis von WooCommerce nach Plugins für die automatische Adressvervollständigung oder Google Places, die für den Checkout entwickelt wurden.

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.

Was passiert mit meinem Formular, wenn ich die kostenlose Nutzungsgrenze von Google überschreite?

Wenn Sie 28.000 Autovervollständigungsanfragen pro Monat überschreiten, belastet Google entweder Ihr Cloud-Konto (wenn die Abrechnung aktiviert ist) oder stellt die Bereitstellung von Autovervollständigungsvorschlägen ein (wenn die Abrechnung nicht aktiviert ist).

Ihr Formular funktioniert weiterhin, und das Adressfeld wird zu einem normalen Texteingabefeld ohne Vorschläge. Benutzer können Adressen weiterhin manuell eingeben.

Überwachen Sie Ihre Nutzung in der Google Cloud Console und richten Sie Rechnungsbenachrichtigungen ein, um Überraschungen zu vermeiden. Die meisten Websites bleiben deutlich unter dem kostenlosen Limit, sofern sie nicht sehr hohe Zugriffszahlen haben.

Als Nächstes: Verbessern Sie Ihre Formulare mit interaktiven Karten

Großartige Arbeit! Sie haben erfolgreich ein Google Maps-Formular mit Adress-Autovervollständigung erstellt, das die Benutzererfahrung verbessert und genaue Adressdaten gewährleistet. Nachdem Sie nun die Adress-Autovervollständigung eingerichtet haben, können Sie Ihre Formulare mit dem Kartenfeld von WPForms auf die nächste Stufe heben.

Mit dieser Funktion können Sie interaktive Karten direkt in Ihre Formulare einbetten, in denen Benutzer durch Anklicken Standorte auswählen, mehrere Unternehmensstandorte mit benutzerdefinierten Markierungen anzeigen oder ihren bevorzugten Servicebereich aus einer visuellen Karte auswählen können. Das Kartenfeld eignet sich perfekt für:

• Buchungsformulare für mehrere Standorte: Kunden können alle Standorte auf einer Karte sehen und ihre bevorzugte Filiale auswählen.
• Auswahl des Servicebereichs: Zeigen Sie Ihre Versorgungsgebiete visuell an , damit Kunden wissen, ob Sie ihren Standort bedienen.
• Kontaktformulare mit Standorten: Helfen Sie Besuchern, das nächstgelegene Büro zu finden, noch bevor sie das Formular absenden.
• Veranstaltungsanmeldung: Zeigen Sie Veranstaltungsorte mit Wegbeschreibungen im Formular an .

Schauen Sie sich diese Anleitungen an, um zu erfahren, was möglich ist:

• So zeigen Sie eine Karte mit Ihrem WordPress-Kontaktformular an
• So erstellen Sie ein WordPress-Buchungsformular für mehrere Standorte

Möchten Sie herausfinden, welche Formulare am besten konvertieren? Erfahren Sie, wie Sie eine Lead-Quelle in WordPress verfolgen können, um zu sehen, welche Traffic-Quellen Ihnen die meisten Formularübermittlungen bringen.

Erstellen Sie jetzt Ihr WordPress-Formular

Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.