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

Wir haben schon viele Online-Formulare ausgefüllt und uns oft dabei ertappt, wie wir ständig dieselbe Adresse neu eingeben mussten. Da wünschten wir uns, es gäbe einen einfacheren Weg.

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 hilft es, die Abschlussraten von Formularen zu erhöhen und den Benutzern eine reibungslosere und zufriedenstellendere Erfahrung 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 erstellten, haben Sie wahrscheinlich ein Kontaktformular hinzugefügt, damit Besucher Sie leicht bezüglich Ihrer Produkte und Dienstleistungen kontaktieren können.

Und wenn Ihr Unternehmen einen physischen Standort hat, haben Sie wahrscheinlich auch eine Google Map Ihres eigenen Standorts hinzugefügt, um Leute zu ermutigen, Ihren Laden zu besuchen.

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 Benutzers auf einer Karte anzuzeigen. Dann können sie ihre Adresse einfach überprüfen oder die Markierung ziehen, um sie bei Bedarf zu ändern.

Dies verbessert das allgemeine Benutzererlebnis und hilft, Formularabbrüche 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.

Damit gesagt, werden wir Ihnen zeigen, wie Sie eine Google Map in Kontaktformulare einbetten. Hier ist eine Übersicht über alle Themen, die wir in diesem Artikel behandeln werden:

• So betten Sie eine Google Map in ein Kontaktformular ein
• So zeigen Sie Benutzerstandortdaten in einem Formular an
• Video-Tutorial
• 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 Zufriedenheitsumfragen für Leser an. Wir haben damit großartige Erfahrungen gemacht und Sie finden alles darüber in unserem ausführlichen WPForms-Testbericht.

Das Erste, was Sie tun müssen, ist das WPForms-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation 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, sollten Sie das Add-on installieren, indem Sie auf die Schaltfläche „Add-on installieren“ klicken.

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 diesen Artikel wählen wir die Google Places API.

Sie sollten auch das Kontrollkästchen „Aktueller Standort“ aktivieren. Dies erkennt und vervollständigt die Adresse, wenn Benutzer das Kontaktformular ausfüllen, was Zeit spart und die Genauigkeit verbessert.

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

Sie werden aufgefordert, 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.

Sie werden aufgefordert, Ihr Land aus einem Dropdown-Menü auszuwählen und den Nutzungsbedingungen zuzustimmen. 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 verschiedene Mapping-APIs aktivieren müssen.

Sie können sie über die Suchfunktion oben auf der Seite oder durch Klicken auf den Link „Alle anzeigen“ neben dem Abschnitt „Karten“ finden.

Zuerst müssen Sie die Places API finden und aktivieren. Sobald Sie sie gefunden haben, müssen Sie darauf klicken. Auf der nächsten Seite sollten Sie auf die Schaltfläche „Aktivieren“ klicken.

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

Jetzt, da 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 WPForm kopieren. Vorerst sehen wir uns an, wie Sie einige Einschränkungen für die Verwendung des API-Schlüssels festlegen.

Einschränkung Ihres Google Places API-Schlüssels

Übermäßige Nutzung des API-Schlüssels kann dazu führen, dass Sie aus dem kostenlosen Plan fallen und mehr kosten, als Sie erwarten. Wir empfehlen Ihnen, den Schlüssel zu beschrä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-Beschrä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 „Geocaching 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 zusammen mit allen anderen verfügbaren Schlüsseln. Klicken Sie auf das Symbol 'Kopieren', um den Schlüssel zur WPForms-Geolokationseinstellungsseite 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 dort den Schlüssel in das Feld „Google Places API“ in den WPForms-Einstellungen ein. Sobald Sie dies getan haben, 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.

Und schließlich können Sie aus über 2.000 vorgefertigten Formularvorlagen wä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 einzeiliges Textfeld verwenden. Für dieses Tutorial verwenden wir ein „einzeiliges Textfeld“.

Ziehen Sie einfach den Block „Einzeiliger Text“ 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 einem vorhandenen Formular hinzufügen oder eine neue Seite 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 das Formular 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 Geolokation aktivieren, zeichnet WPForms auch den Standort jedes Benutzers auf, wenn er Ihr Formular ausfüllt. 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 ausgefüllten Formulardaten, wie z. B. deren Namen, Geschäfts-E-Mail und Geschäftstelefonnummer, zusammen mit einigen Standortdaten.

Dies beinhaltet eine Markierung auf Google Maps, den Standort des Benutzers, Postleitzahl und Land sowie seine ungefähre Breite und Länge.

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 hinzugefügt. Sie können WPForms auch verwenden, um Umfragen in WordPress erstellen, ein Zahlungsformular erstellen, um Online-Zahlungen akzeptieren und mehr.

Video-Tutorial

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.