So zeigen Sie eine Karte mit Ihrem WordPress-Kontaktformular an

Möchten Sie Ihrer WordPress-Kontaktformular eine Karte hinzufügen, damit Besucher den Standort Ihres Unternehmens leicht finden können? Das Hinzufügen einer Karte zu Ihrem Formular hilft Besuchern, genau zu wissen, wo Sie sich befinden, bevor sie Kontakt aufnehmen.

Dies ist besonders nützlich, wenn Sie ein physisches Ladengeschäft, ein Büro oder ein Servicegebiet haben, das Kunden besuchen müssen. Aber Karten auf Kontaktformularen können mehr tun, als nur Ihren Standort anzuzeigen.

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

In diesem Tutorial zeige ich Ihnen zwei Möglichkeiten, Karten zu Ihren Kontaktformularen in WordPress hinzuzufügen. Beide Methoden verwenden WPForms und sein Geolocation-Addon. Fangen wir an!

Erstellen Sie jetzt Ihr WordPress-Formular

Warum eine Karte in ein Kontaktformular einfügen?

Sicher, es ist kein Geheimnis, dass die meisten Kleinunternehmer mit Websites wissen, warum Sie ein Kontaktformular benötigen. Aber Sie fragen sich vielleicht, warum Sie diesem Kontaktformular eine Karte hinzufügen sollten.

Wenn Sie ein lokales Unternehmen führen, macht 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, nimmt eine Karte jedes Rätselraten ab. Sie können genau sehen, wo Sie sich befinden, bevor sie Sie kontaktieren, was die Fragen „Wo befinden Sie sich?“ in Ihrem Posteingang reduziert.
• Wenn Sie die Adress-Autovervollständigung aktivieren, können Besucher ein paar Buchstaben eingeben und ihre vollständige Adresse aus einer Dropdown-Liste auswählen. Dies beschleunigt die Formularerstellung 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 es Besuchern ermöglicht, auszuwählen, welchen sie kontaktieren oder besuchen möchten. Dies leitet Anfragen automatisch an das richtige Team weiter.
• Eine Karte auf Ihrer Kontaktseite signalisiert, dass Sie ein echtes Unternehmen mit physischer Präsenz sind. Dies ist besonders wichtig für lokale Dienstleistungen, Einzelhandelsgeschäfte oder Büros von Freiberuflern.

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

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

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

Schritt 1: Laden Sie das WPForms-Plugin herunter

WPForms ist ein leistungsstarker Formularersteller, mit dem Sie ganz einfach Kontaktformulare, Registrierungsformulare und mehr erstellen können. Es verfügt über über 2.100+ WordPress-Formularvorlagen, die Sie verwenden können.

Was mir an WPForms am besten gefällt, ist, wie es Formularerstellung mit integrierten Geolocation-Tools kombiniert. Sie müssen nicht mehrere Plugins zusammensetzen oder benutzerdefinierten Code schreiben, um Karten zu Ihren Formularen hinzuzufügen.

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

Kaufen Sie zunächst eine WPForms Pro-Lizenz. Installieren und aktivieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe bei der Installation benötigen, folgen Sie dieser Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Jetzt auf WPForms Pro upgraden! :)

Schritt 2: Installieren und aktivieren Sie das Geolocation-Addon

Nachdem WPForms Pro installiert ist, müssen Sie das Geolocation-Addon aktivieren. Dies ist das, was alle Kartenfunktionen in Ihren Kontaktformularen ermöglicht.

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 (normalerweise nur wenige Sekunden), klicken Sie auf Aktivieren.

Mit dem aktivierten Addon haben Sie jetzt Zugriff auf drei Möglichkeiten, Karten in Ihren Formularen zu verwenden:

• Anzeige Ihres Unternehmensstandorts: Zeigen Sie Besuchern genau an, wo sich Ihr Unternehmen befindet, mit einer eingebetteten Karte in Ihrem Formular. Dies eignet sich hervorragend für lokale Unternehmen, Büros oder Geschäfte, die von Kunden persönlich besucht werden.
• Adress-Autovervollständigung aktivieren: Besucher können Adressfelder schneller mit Autovervollständigungsvorschlägen ausfüllen. Während sie tippen, erscheint ihre vollständige Adresse in einer Dropdown-Liste, was Fehler reduziert und die Formularerstellung beschleunigt.

Ich weiß, das klingt technisch, aber WPForms hat eine Schritt-für-Schritt-Anleitung, die es viel einfacher macht, als es klingt. Die vollständigen Einrichtungsanweisungen finden Sie in der Dokumentation des Geolocation Addons.

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 interaktive Karten zu Ihren Formularen hinzufügen.

Schritt 3: Erstellen Sie Ihr Kontaktformular

Nachdem das Geolocation-Addon konfiguriert ist, 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 einen Namen im Feld Name Ihres Formulars. Etwas wie „Kontakt aufnehmen“ ist gut. Sie sehen hier einige Optionen. Wenn Sie Zeit sparen möchten, können Sie aus unseren über 2.100 WordPress-Formularvorlagen wählen.

Ich empfehle die Auswahl der Vorlage für einfache Kontaktformulare. Dies gibt Ihnen ein fertiges Kontaktformular mit den bereits hinzugefügten wesentlichen Feldern.

Die Vorlage enthält ein Namensfeld, ein E-Mail-Feld und ein Kommentar- oder Nachrichtenfeld. Sie können diese Felder anpassen, neue hinzufügen oder nicht benötigte entfernen. Der Formular-Generator verwendet Drag-and-Drop, sodass das Neuanordnen von Feldern einfach ist.

Nun gibt es wahrscheinlich noch ein paar weitere Formulareinstellungen, die Sie konfigurieren möchten, wie z. B. Benachrichtigungen und Bestätigungen. Wenn ja (und das empfehle ich dringend), lesen Sie unseren detaillierten Leitfaden zur Erstellung Ihres ersten Formulars.

Probieren Sie den WPForms KI-Builder aus! :)

Schritt 4: Fügen Sie Ihrem Kontaktformular eine Karte hinzu

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

• Option 1: Anzeige Ihres Unternehmensstandorts (Kartenfeld)
• Option 2: Hinzufügen von Adress-Autovervollständigung für Besucher (Einzeiliges Textfeld oder Adressfeld)

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

Option 1: Standort mit dem Kartenfeld anzeigen

Verwenden Sie diese Option, wenn Sie Besuchern zeigen möchten, wo sich Ihr Unternehmen befindet. Dies bettet eine interaktive Karte direkt in Ihr Kontaktformular ein.

Scrollen Sie im Formular-Generator im linken Bereich zu Erweiterte Felder und Sie sehen dort das Feld Karte. Ziehen Sie es in Ihre Formularvorschau auf der rechten Seite.

Wo Sie es platzieren, hängt von Ihrer Präferenz ab. Manche Leute platzieren es gerne oben, damit es sofort sichtbar ist. Andere bevorzugen es weiter unten. Wählen Sie, was sich für Ihr Formularlayout natürlich anfühlt.

Nachdem Sie das Karten-Feld hinzugefügt haben, wählen Sie es aus, um seine Konfigurationsoptionen auf der linken Seite anzuzeigen. Suchen Sie den Abschnitt Standorte, denn hier geben Sie Ihre Geschäftsadressen ein.

Klicken Sie in das Feld Adresse und beginnen Sie mit der Eingabe Ihres Standorts. Sie werden sehen, wie Autovervollständigungsvorschläge erscheinen, während Sie tippen. Wählen Sie die richtige Übereinstimmung aus, um die genauen Kartenkoordinaten festzulegen.

Fügen Sie nun einen Namen für diesen Ort hinzu. Verwenden Sie etwas Beschreibendes wie „West Branch“ oder „Hauptverwaltung“. Besucher sehen diese Bezeichnung, wenn sie mit dem Marker interagieren, daher ist Klarheit wichtig.

Es gibt auch ein Feld Beschreibung, wenn Sie zusätzliche Informationen wie Öffnungszeiten, spezifische Kontaktdaten oder standortspezifische Notizen hinzufügen möchten.

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

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

Fügen Sie im Formular-Builder entweder ein Feld Einzeiliger Text oder ein Feld Adresse zu Ihrem Formular hinzu. Sie können auf den Feldnamen klicken oder ihn auf Ihr Formular ziehen.

Klicken Sie auf das Feld, das Sie gerade hinzugefügt haben, um seine Einstellungen zu öffnen. Ändern Sie die Bezeichnung in „Ihre Adresse“ oder etwas Ähnliches. Klicken Sie dann im Feld-Einstellungen auf die Registerkarte Erweitert.

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

Schalten Sie dann Karte anzeigen ein. Sie können über das Dropdown-Menü auswählen, ob die Karte über oder unter dem Eingabefeld angezeigt werden soll.

Wenn Besucher dieses Feld nun ausfüllen, sehen sie eine Karte, die sich während der Eingabe aktualisiert. Sie können auch den Karten-Pin ziehen, um ihren genauen Standort zu verfeinern.

Diese Option eignet sich hervorragend für Dienstleistungsunternehmen, Lieferscheine oder jede Situation, in der Sie die Adresse des Besuchers benötigen. Sobald Sie Ihre Karte mit einer der Optionen hinzugefügt haben, klicken Sie oben rechts auf Speichern.

Schritt 5: Veröffentlichen Sie die Karte Ihres Kontaktformulars

Bereit, Ihr Kontaktformular mit einer Karte zu veröffentlichen? Mit Ihrem WPForms Pro-Plugin ist es super einfach, Ihr Formular auf Ihrer Website einzubetten. Lassen Sie das Formular im Builder geöffnet und klicken Sie oben rechts auf die Schaltfläche Einbetten.

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

Geben Sie Ihrer Seite einen Titel. Etwas wie „Kontaktieren Sie uns“ oder „Nehmen Sie Kontakt auf“, was auch immer Sie möchten und Ihren Bedürfnissen entspricht, und klicken Sie dann auf die Schaltfläche Los geht’s!.

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

Um anzupassen, wie Ihr Kontaktformular aussieht, klicken Sie im Seiten-Editor irgendwo um das Formular herum. Dies öffnet das Styling-Panel auf der rechten Seite, wo Sie das Erscheinungsbild des Formulars anpassen können.

Für schnelles Styling wählen Sie ein vorgefertigtes Design aus dem Dropdown-Menü Formular-Design. Optionen wie Modern, Klassisch oder Minimal verleihen Ihrem Formular sofort ein professionelles Aussehen, das zum Design Ihrer Website passt.

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

Sobald alles richtig aussieht und die Karte Ihren Standort korrekt anzeigt, klicken Sie auf Veröffentlichen. Ihr Kontaktformular mit Karte ist jetzt live. Hier ist eine Vorstellung davon, wie es aussehen wird:

FAQs zum Hinzufügen eines Kontaktformulars mit Karte in WordPress

Haben Sie Fragen zum Hinzufügen von Karten zu Ihren WordPress-Kontaktformularen? Hier sind Antworten auf die häufigsten Fragen, die wir hören:

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 zu nutzen. Das Geolocation-Addon benötigt einen davon, um sich mit dem Kartendienst zu verbinden.

Keine Sorge! WPForms bietet Schritt-für-Schritt-Anleitungen zum Abrufen Ihres API-Schlüssels in der Dokumentation des Geolocation-Addons. Die Einrichtung dauert normalerweise etwa 10 Minuten.

Was ist der Unterschied zwischen dem Kartenfeld und der Adressautovervollständigung mit einer Karte?

• Das Kartenfeld zeigt Ihren/Ihren Geschäftsort/Orte für Besucher an. Es zeigt ihnen, wo Sie sich befinden. Verwenden Sie dies, wenn Sie möchten, dass die Leute Ihr Büro, Geschäft oder Servicegebiet auf Ihrem Kontaktformular sehen.
• Die Adressautovervollständigung mit einer Karte hilft Besuchern, ihre eigene Adresse schneller auszufüllen. Während sie tippen, schlägt es ihre Adresse vor und zeigt sie auf einer Karte an. Verwenden Sie dies, wenn Sie den Standort des Besuchers erfassen müssen.

Kann ich mehrere Geschäftsstandorte auf einer Karte anzeigen?

Ja. Das Kartenfeld ermöglicht es Ihnen, so viele Standorte hinzuzufügen, wie Sie benötigen, z. B. mehrere Büros, Geschäfte, Zweigstellen oder Servicezentren.

Jeder Standort erhält eine eigene Markierung auf der Karte, und Sie können die Markierungssymbole und -farben anpassen. Besucher können auf jede Markierung klicken, um den Standortnamen und die Details anzuzeigen.

Schritt-für-Schritt-Anleitungen finden Sie in der Dokumentation zum Kartenfeld.

Funktioniert die Karte auf Mobilgeräten?

Absolut. Karten, die mit WPForms erstellt wurden, sind vollständig responsiv und funktionieren perfekt auf Smartphones und Tablets.

Besucher können die Karte zoomen, verschieben und mit ihr interagieren, genau wie auf dem Desktop. Die Adress-Autocomplete-Funktion funktioniert auch nahtlos auf Mobilgeräten.

Verlangsamt das Hinzufügen einer Karte mein Kontaktformular?

Nein. WPForms lädt Karten effizient, sodass sie Ihre Seite nicht verlangsamen. Die Karte wird nur geladen, wenn sie benötigt wird, und beeinträchtigt die Leistung Ihres Formulars nicht.

WPForms ist optimiert, um Ihre Website auch mit interaktiven Funktionen wie Karten schnell zu halten.

Kann ich anpassen, wie die Karte auf meinem Formular aussieht?

Ja. Mit dem Kartenfeld können Sie Markierungssymbole und -farben an Ihr Branding anpassen.

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

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

Sehe ich, woher Formularübermittlungen kommen, auf einer Karte?

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

Sie können diese Daten auf einer Karte in Ihrem WordPress-Dashboard anzeigen, wenn Sie einzelne Formulareinträge ansehen. Dies hilft Ihnen zu verstehen, woher Ihre Leads und Kunden geografisch kommen.

Als Nächstes: Weitere WPForms Pro-Funktionen ansehen

Holen Sie sich noch heute WPForms Pro, um Zugriff auf das Geolocation-Addon zu erhalten, mit dem Sie diese großartigen Karten hinzufügen können.

Sie erhalten auch Zugriff auf eine Vielzahl anderer hilfreicher Funktionen.

• Einfach zu bedienender Builder – Erstellen Sie Ihre eigenen Formulare in wenigen Minuten, ohne eine einzige Zeile Code zu schreiben.
• Umfragen – Sammeln Sie Daten durch Umfragen und Abstimmungen und sehen Sie sie in schönen Berichten. Sie können auch eine Funktion zum Speichern und Fortsetzen zu langen Umfragen hinzufügen, damit Benutzer ihre Formulare pausieren und später abschließen können.
• Formularseiten – Sorgen Sie dafür, dass mehr Leute Ihre Formulare ausfüllen, indem Sie mit einem einzigen Klick ablenkungsfreie Formularseiten erstellen.
• Bestellformulare – Integrieren Sie Stripe (alle Pläne), Square (Pro) und PayPal (Pro) direkt in Ihren Formularen und akzeptieren Sie online Geld.
• Benutzerverlaufsberichte – Sehen Sie, wo sich die Leute auf Ihrer Website befanden, bevor sie Ihr Formular ausgefüllt haben.
• Sichere Formulare – Schützen Sie Formulare mit Anti-Spam-Optionen wie benutzerdefiniertem Captcha, hCaptcha oder Google reCAPTCHA v2 oder v3.
• Konversationelle Formulare – Sehen Sie zu, wie die Konversionsraten mit ansprechenden und modern aussehenden Formularen in die Höhe schnellen.
• 2.100+ Vorlagen – Bauen Sie nie wieder ein Formular von Grund auf neu mit vorgefertigten Vorlagen für die gängigsten Formulararten.
• Premium-Support – Greifen Sie auf ein freundliches und kompetentes Team zu, das Ihnen hilft, wenn Sie Hilfe bei Ihren Website-Formularen benötigen.
• …und vieles mehr.

Tatsächlich sehen Sie, wenn Sie sich WPForms Lite vs Pro ansehen, dass es viele Gründe gibt, warum Pro so beliebt ist.

Erstellen Sie jetzt Ihr WordPress-Formular

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

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