So zeigen Sie eine Karte mit Ihrem WordPress-Kontaktformular an

Möchten Sie Ihrem WordPress-Kontaktformular eine Karte hinzufügen, damit Besucher Ihren Unternehmensstandort leicht finden können? Durch Hinzufügen einer Karte zu Ihrem Formular können Besucher vor der Kontaktaufnahme genau sehen, wo Sie sich befinden.

Dies ist besonders nützlich, wenn Sie über ein Ladengeschäft, ein Büro oder einen Servicebereich verfügen, den Kunden besuchen müssen. Karten in Kontaktformularen können jedoch mehr als nur Ihren Standort anzeigen.

Mit der richtigen Konfiguration können Sie Besuchern auch dabei helfen, Adressfelder schneller mit der Autovervollständigung auszufüllen, oder sogar mehrere Standorte anzeigen, wenn Sie mehrere Büros oder Geschäfte haben.

In diesem Tutorial zeige ich Ihnen zwei Möglichkeiten, wie Sie Karten zu Ihren Kontaktformularen in WordPress hinzufügen können. Beide Methoden verwenden WPForms und dessen Geolocation-Addon. Los geht's!

Erstellen Sie jetzt Ihr WordPress-Formular

Warum eine Karte in ein Kontaktformular einfügen?

Natürlich ist es kein Geheimnis, dass die meisten Kleinunternehmer mit Websites wissen, warum man ein Kontaktformular braucht. Aber vielleicht fragen Sie sich, warum Sie diesem Kontaktformular eine Karte hinzufügen sollten.

Wenn Sie ein lokales Unternehmen betreiben, wird durch das Hinzufügen einer Karte zu Ihrem Kontaktformular sofort klar, wo Sie sich befinden. Dies kann aus mehreren Gründen eine gute Idee sein:

• Wenn Kunden Ihr Unternehmen persönlich besuchen müssen, erspart eine Karte ihnen das Rätselraten. Sie können vor der Kontaktaufnahme genau sehen, wo Sie sich befinden, wodurch sich die Anzahl der Fragen „Wo befinden Sie sich?“ in Ihrem Posteingang reduziert.
• Wenn Sie die automatische Adressvervollständigung aktivieren, können Besucher einige Buchstaben eingeben und ihre vollständige Adresse aus einer Dropdown-Liste auswählen. Dies beschleunigt das Ausfüllen von Formularen und reduziert Tippfehler, die zu Kommunikationsproblemen führen könnten.
• Haben Sie mehr als ein Büro oder Geschäft? Sie können eine interaktive Karte einbetten, die alle Ihre Standorte anzeigt und Besuchern die Möglichkeit gibt, den Standort auszuwählen, den sie kontaktieren oder besuchen möchten. So werden Anfragen automatisch an das richtige Team weitergeleitet.
• Eine Karte auf Ihrer Kontaktseite signalisiert, dass Sie ein echtes Unternehmen mit physischer Präsenz sind. Dies ist besonders wichtig für lokale Dienstleister, Einzelhandelsgeschäfte oder professionelle Büros.

Das Beste daran? Anstatt selbst eine Karte in Ihre Website zu programmieren oder einen Webentwickler zu bezahlen, können Sie dies ganz einfach mit WPForms Pro erledigen. Es ist eines der besten Karten-Plugins für WordPress!

So fügen Sie eine Karte zu Ihrem WordPress-Kontaktformular hinzu

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

Schritt 1: Laden Sie das WPForms Plugin herunter

WPForms ist ein leistungsstarker Formular-Generator, mit dem Sie ganz einfach Kontaktformulare, Registrierungsformulare und vieles mehr erstellen können. Er verfügt über mehr als 2.100 WordPress-Formularvorlagen, die Sie verwenden können.

Was mir an WPForms am besten gefällt, ist die Kombination aus Formularerstellung und integrierten Geolokalisierungstools. Sie müssen nicht mehrere Plugins zusammenfügen oder benutzerdefinierten Code schreiben, um Ihren Formularen Karten hinzuzufügen.

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.

Um loszulegen, erwerben Sie eine WPForms Pro-Lizenz. Installieren und aktivieren Sie anschließend WPForms auf Ihrer Website. Wenn Sie Hilfe bei der Installation benötigen, folgen Sie dieser Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Jetzt auf WPForms Pro upgraden 🙂

Schritt 2: Installieren und 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.

Gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Addons. Verwenden Sie die Suchleiste, um das Geolocation-Addon zu finden, und klicken Sie dann auf „Addon installieren”. Sobald es installiert ist (in der Regel dauert dies nur wenige Sekunden), klicken Sie auf „Aktivieren”.

Wenn das Add-on aktiviert ist, stehen Ihnen nun drei Möglichkeiten zur Verfügung, Karten in Ihren Formularen zu verwenden:

• Zeigen Sie Ihre Unternehmensstandorte an: Zeigen Sie Besuchern mit einer in Ihr Formular eingebetteten Karte genau, wo sich Ihr Unternehmen befindet. Dies eignet sich hervorragend für lokale Unternehmen, Büros oder Geschäfte, die Kunden persönlich besuchen.
• Adress-Autofüllung aktivieren: Besucher können Adressfelder dank Autofüll-Vorschlägen schneller ausfüllen. Während der Eingabe wird ihre vollständige Adresse in einem Dropdown-Menü angezeigt, wodurch Fehler reduziert werden und das Ausfüllen des Formulars beschleunigt wird.

Ich weiß, das klingt technisch, aber WPForms bietet eine Schritt-für-Schritt-Anleitung, die es viel einfacher macht, als es klingt. Eine vollständige Anleitung zur Einrichtung finden Sie in der Dokumentation zum Geolocation Addon.

Sobald Sie Ihren API-Schlüssel hinzugefügt und die Einstellungen gespeichert haben, sind Sie fertig. Das Geolocation-Addon ist nun einsatzbereit und Sie können damit beginnen, interaktive Karten zu Ihren Formularen hinzuzufügen.

Schritt 3: Erstellen Sie Ihr Kontaktformular

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. Der Formular-Generator funktioniert per Drag-and-Drop, sodass Sie die Felder ganz einfach neu anordnen können.

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 4: Fügen Sie Ihrem Kontaktformular eine Karte hinzu

Nun kommt der wichtige Teil, nämlich das Hinzufügen einer Karte zu Ihrem Kontaktformular. WPForms bietet Ihnen zwei Möglichkeiten, dies zu tun, je nachdem, was Sie erreichen möchten:

• Option 1: Standort Ihres Unternehmens anzeigen (Kartenfeld)
• Option 2: Adress-Autovervollständigung für Besucher hinzufügen (einzeiliges Textfeld oder Adressfeld)

Lassen Sie uns beide Optionen durchgehen, damit Sie diejenige auswählen können, die Ihren Anforderungen entspricht.

Option 1: Zeigen Sie Ihren Standort mit dem Kartenfeld an

Verwenden Sie diese Option, wenn Sie Besuchern zeigen möchten, wo sich Ihr Unternehmen befindet. Dadurch wird eine interaktive Karte direkt in Ihr Kontaktformular eingebettet.

Scrollen Sie im Formular-Generator im linken Bereich nach unten zu „Fancy Fields“ (Ausgefallene Felder ), wo Sie das Feld „Map“ (Karte) finden. Ziehen Sie es in die Formularvorschau auf der rechten Seite.

Wo Sie es platzieren, hängt von Ihren Vorlieben ab. Manche Leute mögen es oben, damit es sofort sichtbar ist. Andere bevorzugen eine niedrigere Position. Wählen Sie die Option, die sich für Ihr Formularlayout am natürlichsten anfühlt.

Nachdem Sie das Feld „Karte“ hinzugefügt haben, wählen Sie es aus, um die Konfigurationsoptionen auf der linken Seite anzuzeigen. Suchen Sie den Abschnitt „Standorte“, da Sie hier Ihre Geschäftsadressen eingeben.

Klicken Sie in das Adressfeld und geben Sie Ihren Standort ein. Während der Eingabe werden Ihnen Vorschläge zur automatischen Vervollständigung angezeigt. Wählen Sie die passende Option aus, um die genauen Kartenkoordinaten festzulegen.

Geben Sie nun einen Namen für diesen Ort ein. Verwenden Sie eine aussagekräftige Bezeichnung wie „West Branch“ oder „Unternehmenszentrale“. Besucher sehen diese Bezeichnung, wenn sie mit der Markierung interagieren, daher ist Klarheit wichtig.

Es gibt auch ein Feld „Beschreibung“, in das Sie zusätzliche Informationen wie Öffnungszeiten, bestimmte Kontaktdaten oder standortspezifische Hinweise eintragen können.

Option 2: Adress-Autovervollständigung für Besucher hinzufügen

Verwenden Sie diese Option, wenn Besucher in Ihrem Kontaktformular ein Adressfeld ausfüllen müssen (z. B. für Angebotsanfragen, Servicetermine oder Versandfragen). Die Karte hilft ihnen dabei, ihre Adresse korrekt einzugeben.

Fügen Sie im Formular-Generator entweder ein einzeiliges Text feld oder ein Adressfeld zu Ihrem Formular hinzu. Sie können auf den Feldnamen klicken oder ihn auf Ihr Formular ziehen.

Klicken Sie auf das soeben hinzugefügte Feld, um dessen Einstellungen zu öffnen. Ändern Sie die Bezeichnung in „Ihre Adresse“ oder etwas Ähnliches. Klicken Sie dann in den Feldeinstellungen auf die Registerkarte „Erweitert “.

Scrollen Sie nach unten und aktivieren Sie die Option „Adress-Autovervollständigung aktivieren“. Dadurch können Besucher ihre Adresse eingeben und aus einer Dropdown-Liste auswählen.

Aktivieren Sie als Nächstes die Option „Karte anzeigen“. Über das Dropdown-Menü können Sie auswählen, ob die Karte über oder unter dem Eingabefeld angezeigt werden soll.

Wenn Besucher dieses Feld ausfüllen, wird ihnen nun eine Karte angezeigt, die während der Eingabe aktualisiert wird. Sie können auch die Stecknadel auf der Karte verschieben, um ihren genauen Standort zu präzisieren.

Diese Option eignet sich hervorragend für Dienstleistungsunternehmen, Lieferformulare oder alle Situationen, in denen Sie die Adresse des Besuchers benötigen. Nachdem Sie Ihre Karte mit einer der beiden Optionen hinzugefügt haben, klicken Sie oben rechts auf „Speichern “.

Schritt 5: Veröffentlichen Sie Ihre Kontaktformular-Karte

Sind Sie bereit, Ihr Kontaktformular mit einer Karte zu veröffentlichen? Mit Ihrem WPForms Pro-Plugin ist es ganz einfach, Ihr Formular in Ihre Website einzubetten. Klicken Sie bei geöffnetem Formular im Builder auf die Schaltfläche „Einbetten“ in der oberen rechten Ecke.

Hier können Sie eine beliebige WordPress-Seite auswählen, sei es eine bestehende oder eine neue Seite. In diesem Tutorial klicke ich auf „Neue Seite erstellen“.

Geben Sie Ihrer Seite einen Titel. Etwas wie „Kontakt“ oder „Mit uns in Verbindung treten“ – ganz nach Ihren Wünschen und Bedürfnissen. Klicken Sie anschließend auf die Schaltfläche „Los geht's! “.

WPForms fügt Ihr Formular automatisch in die Seite ein. Sie sehen Ihr Kontaktformular mit der bereits integrierten Karte. Von hier aus können Sie einen Einführungstext über dem Formular hinzufügen, das Seitenlayout anpassen oder Ihr Formular ein wenig gestalten.

Um das Aussehen Ihres Kontaktformulars anzupassen, klicken Sie im Seiteneditor auf eine beliebige Stelle um das Formular herum. Dadurch wird auf der rechten Seite das Stilfenster geöffnet, in dem Sie das Aussehen des Formulars anpassen können.

Für eine schnelle Gestaltung wählen Sie ein vorgefertigtes Design aus der Dropdown-Liste „Formular-Design “. Optionen wie „Modern“, „Klassisch“ oder „Minimalistisch“ verleihen Ihrem Formular sofort ein professionelles Aussehen, das zum Design Ihrer Website passt.

Wenn Sie mehr Kontrolle wünschen, können Sie über das Bedienfeld auch einzelne Elemente wie Farben, Schriftarten, Abstände und Schaltflächenstile anpassen .

Sobald alles richtig aussieht und die Karte Ihren Standort korrekt anzeigt, klicken Sie auf „Veröffentlichen“. Ihr Kontaktformular mit Karte ist nun online. So könnte es aussehen:

Häufig gestellte Fragen zum Hinzufügen eines Kontaktformulars mit Karte in WordPress

Haben Sie Fragen zum Hinzufügen von Karten zu Ihren WordPress-Kontaktformularen? Hier finden Sie Antworten auf die häufigsten Fragen, die uns gestellt werden:

Benötige ich einen Google Maps API-Schlüssel, um Karten in WPForms zu verwenden?

Ja, Sie benötigen entweder einen Google Maps API-Schlüssel oder einen Mapbox API-Schlüssel, um die Kartenfunktionen in WPForms nutzen zu können. Das Geolocation-Add-on benötigt einen dieser Schlüssel, um eine Verbindung zum Kartendienst herzustellen.

Keine Sorge! WPForms bietet in der Dokumentation zum Geolocation-Add-on eine Schritt-für-Schritt-Anleitung zum Abrufen Ihres API-Schlüssels. Die Einrichtung dauert in der Regel etwa 10 Minuten.

Was ist der Unterschied zwischen dem Feld „Karte“ und der Adress-Autovervollständigung mit Karte?

• Das Feld „Karte“ zeigt Besuchern den Standort Ihres Unternehmens an. Es zeigt ihnen, wo Sie sich befinden. Verwenden Sie diese Funktion, wenn Sie möchten, dass Besucher Ihr Büro, Ihr Geschäft oder Ihren Servicebereich auf Ihrem Kontaktformular sehen können.
• Die Adress-Autovervollständigung mit Karte hilft Besuchern, ihre eigene Adresse schneller einzugeben. Während der Eingabe werden Vorschläge für ihre Adresse angezeigt und auf einer Karte dargestellt. Verwenden Sie diese Funktion, wenn Sie den Standort des Besuchers erfassen möchten.

Kann ich mehrere Unternehmensstandorte auf einer Karte anzeigen?

Ja. Im Feld „Karte“ können Sie beliebig viele Standorte hinzufügen, z. B. mehrere Büros, Geschäfte, Filialen oder Servicezentren.

Jeder Standort erhält eine eigene Markierung auf der Karte, und Sie können die Markierungssymbole und Farben individuell anpassen. Besucher können auf jede Markierung klicken, um den Namen und Details des Standorts anzuzeigen.

Eine Schritt-für-Schritt-Anleitung finden Sie in der Dokumentation zum Feld „Karte“.

Funktioniert die Karte auf Mobilgeräten?

Auf jeden Fall. Mit WPForms erstellte Karten sind vollständig responsiv und funktionieren perfekt auf Smartphones und Tablets.

Besucher können die Karte wie auf einem Desktop-Computer zoomen, schwenken und mit ihr interagieren. Die Funktion zur automatischen Adressvervollständigung funktioniert auch auf Mobilgeräten reibungslos.

Verlangsamt das Hinzufügen einer Karte mein Kontaktformular?

Nein. WPForms lädt Karten effizient, sodass sie Ihre Seite nicht verlangsamen. Die Karte wird nur bei Bedarf geladen und hat keinen Einfluss auf die Leistung Ihres Formulars.

WPForms ist so optimiert, dass Ihre Website auch mit interaktiven Funktionen wie Karten schnell bleibt.

Kann ich das Aussehen der Karte in meinem Formular anpassen?

Ja. Mit dem Feld „Karte“ können Sie Markierungssymbole und Farben an Ihre Marke anpassen.

Sie können auch festlegen, welche Kartensteuerelemente angezeigt werden (Zoom, Vollbild, Kartentyp usw.), und die anfängliche Zoomstufe anpassen.

Bei Karten mit Adress-Autovervollständigung können Sie wählen, ob die Karte über oder unter dem Eingabefeld angezeigt werden soll.

Kann ich auf einer Karte sehen, woher die Formularübermittlungen stammen?

Ja. Wenn das Geolocation-Add-on aktiv ist, erfasst WPForms automatisch Standortdaten (mit Zustimmung des Besuchers) für jede Formularübermittlung.

Sie können diese Daten auf einer Karte in Ihrem WordPress-Dashboard anzeigen, wenn Sie sich einzelne Formulareinträge ansehen. So können Sie besser nachvollziehen, woher Ihre Leads und Kunden geografisch kommen.

Als Nächstes sehen Sie sich weitere Funktionen von WPForms Pro an.

Holen Sie sich noch heute WPForms Pro, um Zugriff auf das Geolocation-Add-on zu erhalten, mit dem Sie diese fantastischen Karten hinzufügen können.

Sie erhalten außerdem Zugriff auf eine Vielzahl weiterer nützlicher Funktionen.

• Ein benutzerfreundlicher Builder - Erstellen Sie Ihre eigenen Formulare in wenigen Minuten, ohne eine einzige Zeile Code zu schreiben.
• Umfragen - Erfassen Sie Daten durch Umfragen und Abstimmungen und zeigen Sie sie in schönen Berichten an. Sie können auch eine Funktion zum Speichern und Fortsetzen zu langen Umfragen hinzufügen, so dass die Benutzer ihre Formulare unterbrechen und später ausfüllen können.
• Formularseiten - Bringen Sie mehr Leute dazu, Ihre Formulare auszufüllen, indem Sie mit einem einzigen Klick ablenkungsfreie Formularseiten erstellen.
• Bestellformulare - Integrieren Sie Stripe (alle Pläne), Square (Pro) und PayPal (Pro) direkt in Ihre Formulare und nehmen Sie Geld online an.
• User Journey Reports - Sehen Sie, wo sich die Besucher auf Ihrer Website befanden, bevor sie Ihr Formular ausgefüllt haben.
• Sichere Formulare - Schützen Sie Formulare mit Anti-Spam-Optionen wie Custom Captcha, hCaptcha oder Google reCAPTCHA v2 oder v3.
• Conversational Forms - Erleben Sie, wie die Konversionsraten mit hochgradig ansprechenden und modern gestalteten Formularen in die Höhe schnellen.
• Über 2.100 Vorlagen – Dank vorgefertigter Vorlagen für die gängigsten Formulartypen müssen Sie nie wieder ein Formular von Grund auf neu erstellen.
• Premium-Support - Greifen Sie auf ein freundliches und sachkundiges Team zu, das Sie in die richtige Richtung lenkt, wenn Sie Hilfe mit Ihren Website-Formularen benötigen.
• ...und vieles mehr.

In der Tat, wenn Sie auf WPForms Lite vs Pro schauen, werden Sie sehen, es gibt eine Tonne von Gründen, warum Pro so beliebt ist.

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.