So betten Sie eine Google Map in Kontaktformulare ein (mit Karten-Pin)

Wir haben schon viele Online-Formulare ausgefüllt und stellen oft fest, dass wir ständig dieselbe Adresse neu eingeben müssen.

Stellen Sie sich stattdessen Folgendes vor: Ein Besucher landet auf Ihrer Kontaktseite, sieht, dass seine Adresse automatisch ausgefüllt wird, und eine Stecknadel ist bereits auf der Karte platziert. Es ist schnell, persönlich und spart Zeit.

Das Hinzufügen einer Google Map mit einem Standort-Pin zu Ihrem WordPress-Kontaktformular mag wie eine kleine Geste erscheinen, kann aber eine große Wirkung erzielen. Nach unserer Erfahrung mit WPForms kann dies dazu beitragen, die Abschlussraten von Formularen zu erhöhen und den Benutzern ein reibungsloseres und zufriedenstellenderes Erlebnis zu bieten.

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie eine interaktive Google Map direkt in Ihr WordPress-Kontaktformular einbetten – ganz ohne Code. 🗺️

Warum eine Google Map in Ihr Kontaktformular einbetten?

Als Sie Ihre WordPress-Website eingerichtet haben, haben Sie wahrscheinlich ein Kontaktformular hinzugefügt, damit Besucher Sie bezüglich Ihrer Produkte oder Dienstleistungen erreichen können. Und wenn Sie ein physisches Geschäft haben, haben Sie wahrscheinlich eine Google Map hinzugefügt, um den Leuten zu helfen, Ihren Standort leicht zu finden.

Was viele Geschäftsinhaber nicht wissen, ist, dass Sie Geolocation verwenden können, um das Adressfeld auf Ihrem Kontaktformular automatisch auszufüllen und den Standort des Besuchers auf einer Karte anzuzeigen. Dann können sie leicht überprüfen, ob ihre Adresse korrekt ist, oder den Pin verschieben, um sie bei Bedarf zu ändern.

Dies verbessert die allgemeine Benutzererfahrung und kann dazu beitragen, den Abbruch von Formularen zu reduzieren.

Wenn Sie die Standorte Ihrer Benutzer kennen, können Sie auch Geolocation-Targeting verwenden, um personalisierte Inhalte anzuzeigen und die Konversionsraten zu steigern.

Nun wollen wir uns ansehen, wie Sie eine Google Map in Ihre Kontaktformulare einbetten. Hier ist eine Übersicht über alle Themen, die wir in diesem Artikel behandeln werden:

• How to Embed a Google Map in a Contact Form
  • Erstellen eines Google Places API-Schlüssels
  • Einschränkung Ihres Google Places API-Schlüssels
  • Hinzufügen des Google API-Schlüssels zu den WPForms-Einstellungen
  • Erstellen eines Kontaktformulars mit eingebetteter Google Map in WordPress
  • Hinzufügen des Kontaktformulars zu Ihrer Website
  • Anzeigen der Google Map im Kontaktformular
• So zeigen Sie Benutzerstandortdaten in einem Formular an
• Video-Tutorial: Google Map in Kontaktformulare einbetten
• Bonus-Ressourcen 🔗: Die besten Anleitungen zur Verwendung von Karten auf WordPress

Lass uns anfangen!

So betten Sie eine Google Map in ein Kontaktformular ein

Für dieses Tutorial verwenden wir WPForms, das beste Kontaktformular-Plugin für WordPress. Es ermöglicht Ihnen, mit einem einfachen Drag-and-Drop-Formularersteller ganz einfach jede Art von Formular zu erstellen.

Es gibt eine kostenlose Version von WPForms, die alle Funktionen enthält, die Sie zum Erstellen eines einfachen Kontaktformulars benötigen. Für dieses Tutorial verwenden wir jedoch WPForms Pro, da es das Google Maps Add-on enthält.

ℹ️ Wussten Sie schon? Bei WPBeginner verwenden wir WPForms für viele Dinge. Zum Beispiel treibt es unser Kontaktformular und die jährlichen Umfragen zur Zufriedenheit unserer Leser an. Wir hatten damit eine großartige Erfahrung, und Sie können mehr in unserem ausführlichen WPForms-Testbericht erfahren.

Das Erste, was Sie tun müssen, ist, ein WPForms-Konto zu erstellen. Klicken Sie auf der WPForms-Website auf „Get WPForms Now“ und schließen Sie dann den Registrierungsprozess ab.

Sobald dies erledigt ist, gelangen Sie zu Ihrem WPForms-Konto-Dashboard, wo Sie auf Ihre WPForms Pro ZIP-Datei und Ihren Lizenzschlüssel zugreifen können.

Als Nächstes können Sie das WPForms-Plugin installieren und aktivieren.

Von Ihrem WordPress-Adminbereich aus können Sie zu Plugins » Neues Plugin hinzufügen gehen.

Verwenden Sie dann die Suchleiste, um das WPForms-Plugin schnell zu finden.

Klicken Sie in den Suchergebnissen einfach auf die Schaltfläche „Jetzt installieren“ und dann auf „Aktivieren“, um es auf Ihrer WordPress-Website zu verwenden.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite WPForms » Einstellungen besuchen, um Ihren Lizenzschlüssel einzugeben. Diese Informationen finden Sie in Ihrem WPForms-Konto. Stellen Sie sicher, dass Sie auf die Schaltfläche „Schlüssel überprüfen“ klicken, um Ihre Lizenz zu aktivieren.

Als Nächstes müssen Sie zu WPForms » Addons navigieren und das Geolocation Addon finden.

Sie können die Suchoption oben auf dem Bildschirm verwenden oder einfach durch die verfügbaren Add-ons scrollen.

Sobald Sie es gefunden haben, klicken Sie auf die Schaltfläche „Addon installieren“.

Jetzt, da das Geolocation-Add-on aktiviert ist, müssen Sie seine Einstellungen konfigurieren. Navigieren Sie dazu zu WPForms » Einstellungen und klicken Sie auf den Tab „Geolocation“.

Auf dieser Seite müssen Sie einen Geolocation-Anbieter auswählen.

Für dieses Tutorial wählen wir die „Google Places API“.

Sie sollten auch das Kontrollkästchen „Aktueller Standort“ aktivieren. Dies fordert den Browser des Benutzers auf, seinen Standort abzufragen, um das Adressfeld automatisch vorab auszufüllen. Dies spart Zeit und hilft, die Genauigkeit zu verbessern.

Als Nächstes müssen Sie zu den Google Places API-Einstellungen scrollen.

Hier wird WPForms Sie auffordern, Ihren Google API-Schlüssel einzugeben. Sie können Ihren Schlüssel von Google erhalten und ihn dann in das Eingabefeld einfügen. Wir zeigen Ihnen im nächsten Abschnitt, wie das geht.

Erstellen eines Google Places API-Schlüssels

Sie können einen API-Schlüssel für Google Places erhalten, indem Sie die Website der Google Cloud Console besuchen.

Wählen Sie zunächst einfach Ihr Land aus einem Dropdown-Menü aus und stimmen Sie den Nutzungsbedingungen zu. In einigen Ländern wird Ihnen möglicherweise auch die Möglichkeit angeboten, sich für eine Mailingliste anzumelden.

Wenn Sie bereit sind, mit dem nächsten Schritt fortzufahren, klicken Sie auf „Zustimmen und fortfahren“.

Als Nächstes müssen Sie ein Projekt für den API-Schlüssel auswählen. Klicken Sie einfach auf „Projekt auswählen“ und wählen Sie das gewünschte Projekt aus der Liste aus.

Wenn Sie noch kein Projekt erstellt haben oder dies eine neue Website ist, die Sie noch nicht zu Google hinzugefügt haben, dann sollten Sie auf „Neues Projekt“ klicken, um eines einzurichten.

Sie sollten sich nun auf der Seite „APIs & Dienste“ befinden, wo Sie die APIs aktivieren können, die zum Anzeigen von Google Maps auf Ihrer WordPress-Site benötigt werden.

Sie müssen oben auf der Seite auf die Schaltfläche „APIs und Dienste aktivieren“ klicken.

Dies führt Sie zur API-Bibliothek von Google, wo Sie drei Mapping-APIs aktivieren müssen:

• Google Places API – ermöglicht es Ihrem Formular, vorgeschlagene Adressen abzurufen, während Benutzer tippen.
• Maps JavaScript API – zeigt die interaktive Karte auf Ihrer Website an.
• Geocoding API – wandelt eine Adresse in exakte Koordinaten um, damit die Karte den Pin korrekt platzieren kann.

Sie können diese über die Suchleiste oben oder durch Klicken auf die Schaltfläche „Alle anzeigen“ im Abschnitt „Karten“ finden.

Von hier aus suchen und aktivieren wir die Places API. Sobald Sie sie gefunden haben, müssen Sie darauf klicken.

Klicken Sie auf der nächsten Seite auf die Schaltfläche „Aktivieren“.

Danach sollten Sie dasselbe für die Maps JavaScript API und die Geocoding API tun.

Und sobald Sie die drei APIs aktiviert haben, können Sie einen API-Schlüssel erstellen.

Im Menü auf der linken Seite müssen Sie zu APIs & Dienste » Anmeldeinformationen navigieren.

Von hier aus können Sie oben auf dem Bildschirm auf die Schaltfläche „+ Anmeldeinformationen erstellen“ klicken und dann die Option „API-Schlüssel“ auswählen.

Ihr API-Schlüssel wird erstellt und in einem Popup-Fenster angezeigt.

Später in diesem Tutorial müssen Sie diesen Schlüssel in die Einstellungen von WPForms kopieren. Vorerst sehen wir uns an, wie Sie Einschränkungen für die Verwendung des API-Schlüssels festlegen können.

Einschränkung Ihres Google Places API-Schlüssels

Eine übermäßige Nutzung des API-Schlüssels kann dazu führen, dass Sie aus der kostenlosen Stufe herausfallen und mehr kosten, als Sie erwarten. Wir empfehlen Ihnen, den Schlüssel einzuschränken, um eine unbefugte oder unerwartete Nutzung zu verhindern.

Dazu müssen Sie auf den Link 'Schlüssel einschränken' am unteren Rand des Popups 'API-Schlüssel erstellt' im obigen Screenshot klicken.

Auf der nächsten Seite können Sie verschiedene Einschränkungen festlegen. Die erste davon ist „Anwendungseinschränkungen“.

In diesem Abschnitt sollten Sie die Option „HTTP-Referrer (Websites)“ auswählen. Dann wird der Schlüssel nur auf Websites verwendet.

Stellen Sie als Nächstes sicher, dass sie nur auf Ihrer eigenen Website verwendet wird. Tun Sie dies, indem Sie nach unten zum Abschnitt „Website-Beschränkungen“ scrollen und dann auf die Schaltfläche „Element hinzufügen“ klicken.

Geben Sie nun Ihren Website-Domainnamen in das Feld „Neuer Eintrag“ im Muster *example.com/* ein.

Wenn Sie Google Maps auf mehr als einer Website verwenden, können Sie auf die Schaltfläche „Element hinzufügen“ klicken und so viele Domains hinzufügen, wie Sie benötigen.

Jetzt, da Sie den API-Schlüssel auf Ihre eigenen Websites beschränkt haben, können Sie ihn auch so einschränken, dass er nur mit den oben von Ihnen hinzugefügten Google APIs funktioniert.

Sie müssen zum Abschnitt „API-Einschränkungen“ der Seite scrollen und die Option „Schlüssel einschränken“ auswählen. Daraufhin wird ein Dropdown-Menü angezeigt, in dem Sie die Kontrollkästchen „Geocoding API“, „Maps JavaScript API“ und „Places API“ aktivieren sollten.

Sobald Sie dies getan haben, sollten Sie auf den Link „OK“ klicken, um Ihre Einstellungen zu speichern.

Stellen Sie abschließend sicher, dass Sie unten auf der Seite auf die Schaltfläche „Speichern“ klicken, um alle von Ihnen gewählten Einschränkungen zu aktivieren.

Beachten Sie, dass es bis zu 5 Minuten dauern kann, bis die Einstellungen wirksam werden.

Hinzufügen des Google API-Schlüssels zu den WPForms-Einstellungen

Sie sehen nun den API-Schlüssel neben anderen verfügbaren Schlüsseln aufgelistet. Sie sollten auf das „Kopieren“-Symbol klicken, um den Schlüssel zur WPForms Geolocation-Einstellungsseite hinzuzufügen.

Beachten Sie, dass Sie, wenn Sie jemals die Einstellungen oder Beschränkungen der API ändern müssen, auf das Bearbeiten-Symbol auf der rechten Seite klicken können.

Nun müssen Sie zu Ihrer Website zurückkehren, die sich immer noch auf der Seite WPForms » Einstellungen » Geolocation befinden sollte.

Fügen Sie den Schlüssel dort in das Feld „Google Places API“ in den WPForms-Einstellungen ein. Und stellen Sie sicher, dass Sie auf die Schaltfläche „Einstellungen speichern“ klicken.

Erstellen eines Kontaktformulars mit eingebetteter Google Map in WordPress

Jetzt, da Sie WPForms und Google Places konfiguriert haben, können Sie ein Kontaktformular in WordPress erstellen.

Es gibt verschiedene Möglichkeiten, Ihre WordPress-Formulare mit WPForms zu erstellen.

Erstens können Sie mit einer leeren Leinwand beginnen. Dies gibt Ihnen die volle Kontrolle, Formularfelder von Grund auf hinzuzufügen und anzuordnen, was es perfekt für vollständig angepasste Designs macht.

Zweitens können Sie den KI-Formularersteller verwenden, um ein vollständiges Formular basierend auf einer einfachen Textaufforderung zu generieren. Dies spart viel Zeit, wenn Sie nicht sicher sind, wo Sie anfangen sollen.

Zuletzt können Sie aus über 2.000 vorgefertigten Formularvorlagen auswählen. Egal, ob Sie ein Kontaktformular, eine Umfrage, ein Buchungsformular oder etwas Komplexeres benötigen, es gibt wahrscheinlich eine Vorlage, die Ihren Anforderungen entspricht!

Sie können loslegen, indem Sie unserer Anleitung folgen: So erstellen Sie ein Kontaktformular in WordPress.

Sobald Sie ein einfaches Formular erstellt haben, müssen Sie ein Adressfeld hinzufügen. Sie können entweder einen Adressblock oder ein Feld für einzelne Textzeilen verwenden.

Für dieses Tutorial verwenden wir ein Feld für einzelne Textzeilen. Ziehen wir also einfach den Block 'Einzelne Textzeile' auf das Formular.

Als Nächstes passen wir die Einstellungen des Feldes an.

Dazu müssen Sie auf das Feld klicken, um die Einstellungen für einzeiligen Text anzuzeigen.

Zuerst sollten Sie die Bezeichnung des Feldes in „Adresse“ ändern. Dies macht Ihren Benutzern klar, was sie in das Feld eingeben sollen.

Danach müssen Sie die Einstellungen des Feldes ändern, damit es eine Karte auf dem WordPress-Formular anzeigt. Dazu müssen Sie auf die Registerkarte 'Erweitert' klicken.

Dort angekommen, sollten Sie nach der Option „Adressen automatisch vervollständigen aktivieren“ am unteren Rand der Einstellungen suchen und diese auf „Ein“ stellen.

Sie sehen dann eine weitere Option, 'Karte anzeigen', die Sie ebenfalls aktivieren sollten. Sie können wählen, ob die Karte über oder unter dem Feld angezeigt werden soll.

Hinzufügen des Kontaktformulars zu Ihrer Website

Der einfachste Weg, das Kontaktformular zu Ihrer Website hinzuzufügen, ist, auf die Schaltfläche „Einbetten“ zu klicken. Sie finden sie neben der Schaltfläche „Speichern“ oben auf dem Bildschirm des Formular-Editors.

Sie werden gefragt, ob Sie das Formular zu einer vorhandenen Seite hinzufügen oder eine neue erstellen möchten.

Für dieses Tutorial klicken wir auf die Schaltfläche „Neue Seite erstellen“.

Geben Sie der Seite als Nächstes einen Namen und klicken Sie dann auf die Schaltfläche „Los geht’s!“.

Eine neue Seite mit diesem Namen wird erstellt und Ihr Kontaktformular wird automatisch hinzugefügt.

Alles, was Sie tun müssen, ist auf die Schaltfläche 'Veröffentlichen' zu klicken, um die Seite live zu schalten.

Anzeigen der Google Map im Kontaktformular

Wenn ein Benutzer Ihr Kontaktformular besucht, wird er gefragt, ob er zulassen möchte, dass Ihre Website auf seinen Standort zugreift.

Wenn sie auf die Schaltfläche „Zulassen“ klicken, wird ihr aktueller Standort in das Adressfeld eingegeben und ein Pin dieses Standorts zur Karte hinzugefügt.

Diese Autovervollständigungsfunktion spart Ihren Besuchern Zeit, indem sie die Eingabe ihrer Adressen schneller und einfacher macht.

Wenn sie die Adresse ändern müssen, können sie einfach eine neue eingeben oder die Markierung an eine andere Stelle auf der Karte ziehen.

So zeigen Sie Benutzerstandortdaten in einem Formular an

Sobald Sie die Geolokalisierung aktivieren, zeichnet WPForms auch den Standort jedes Benutzers auf, wenn er Ihr Formular übermittelt. Die Kenntnis des Standorts Ihrer Benutzer kann Ihnen helfen, bessere Leads zu finden.

Sie müssen zu WPForms » Einträge navigieren und dann auf Ihr Kontaktformular klicken.

Sie sehen nun eine Liste der von Ihren Benutzern für dieses Formular ausgefüllten Einträge.

Um eine bestimmte Formularübermittlung anzuzeigen, klicken Sie einfach auf den Link 'Anzeigen' auf der rechten Seite.

Sie sehen nun die vom Benutzer übermittelten Formulardaten, wie z. B. seinen Namen, seine Geschäfts-E-Mail-Adresse und Geschäfts-Telefonnummer, zusammen mit einigen Standortdaten.

Dazu gehören ein Pin auf Google Maps, der Standort des Benutzers, die Postleitzahl und das Land. Beachten Sie, dass die Genauigkeit vom Gerät des Benutzers abhängt; GPS-Daten von Mobiltelefonen sind in der Regel sehr präzise, während IP-basierte Standorte von Desktop-Computern ungefähr sein können.

Wenn der Benutzer natürlich keine Erlaubnis erteilt hat, dass das Formular seinen Standort kennt, werden keine Standortdaten angezeigt.

Das ist alles. Sie haben erfolgreich eine Google Map zu Ihrem Kontaktformular in WordPress hinzugefügt. Sie können WPForms auch verwenden, um Umfragen in WordPress zu erstellen, ein Zahlungsformular zu erstellen, um Online-Zahlungen anzunehmen, und mehr.

Video-Tutorial: Google Map in Kontaktformulare einbetten

Möchten Sie sehen, wie es funktioniert? Klicken Sie einfach auf die Wiedergabe ▶️-Schaltfläche im folgenden Video-Tutorial, um zu erfahren, wie Sie eine Google Map in Ihr Kontaktformular einbetten.

WPBeginner abonnieren

Bonus-Ressourcen 🔗: Die besten Anleitungen zur Verwendung von Karten auf WordPress

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie eine Google Map in Kontaktformulare einbetten. Als Nächstes möchten Sie vielleicht auch einige unserer anderen Anleitungen zur Verwendung von Karten auf Ihrer Website ansehen:

• So fügen Sie Google Maps in WordPress hinzu (Der RICHTIGE Weg)
• So fügen Sie einen Google Maps-Shop-Locator in WordPress hinzu
• So betten Sie Bing Maps in WordPress ein (Schritt für Schritt)
• So fügen Sie eine interaktive Karte in WordPress hinzu
• Die besten Google Maps Plugins für WordPress (die meisten sind kostenlos)
• Beste Mapbox WordPress Plugins
• Beste WordPress Geolocation- und GeoIP-Plugins

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