So fügen Sie ein interaktives Standortauswahlfeld zu jedem WordPress-Formular hinzu

Stellen Sie sich Folgendes vor: Ein Spender besucht die Website einer gemeinnützigen Organisation, um Wintermäntel zu spenden. Er ist bereit, diese abzugeben, doch das Formular zeigt lediglich ein Dropdown-Menü mit drei Adressen an. Es gibt weder eine Karte noch weitere Informationen. Er öffnet Google Maps in einem neuen Tab, gibt jede Adresse einzeln ein, findet heraus, welche am nächsten liegt, und kehrt dann zurück, um das Formular auszufüllen.

Manche schon. Die meisten jedoch nicht…

Stellen Sie sich nun eine interaktive Karte direkt im Formular vor. Die drei Abgabestellen sind mit benutzerdefinierten Symbolen markiert, die mit „North Community Center“, „Downtown Library“ und „Eastside Church“ beschriftet sind. Der Nutzer tippt auf die nächstgelegene Stelle, die Markierung hüpft zur Bestätigung, und seine Auswahl wird sauber in Ihrem Datensatz erfasst. Das ist in Sekundenschnelle erledigt, ohne dass die Seite jemals verlassen werden muss.

So funktioniert das WPForms-Feld „Karte“! Und auch wenn ein Buchungsformular mit Standortauswahl wahrscheinlich der erste Anwendungsfall ist, der einem in den Sinn kommt, ist dies bei weitem nicht der einzige. Abholung im Laden, Produktrückgaben, Check-in bei Veranstaltungen, Auswahl eines Servicegebiets, Anmeldung von Freiwilligen … jedes Formular, bei dem ein physischer Standort ausgewählt werden muss, lässt sich damit optimieren.

Ich zeige Ihnen, wie Sie es einrichten, und stelle Ihnen verschiedene Anwendungsmöglichkeiten vor.

So fügen Sie ein interaktives Standortauswahlfeld zu jedem WordPress-Formular hinzu

Was Sie brauchen

• WPForms Pro – Das Kartenfeld ist Teil des Geolocation-Add-ons, das in allen Pro-Tarifen enthalten ist
• Ein Google Places-API-Schlüssel – kostenlos einzurichten; damit werden die Karte und die Adress-Autovervollständigung unterstützt
• Die neueste Version von WPForms, die auf Ihrer WordPress-Website installiert ist

Wenn Sie WPForms Lite nutzen, müssen Sie auf die Pro-Version upgraden, um das Geolocation-Add-on nutzen zu können. Wenn Sie WPForms noch gar nicht kennen, ist die Pro-Version der richtige Einstieg.

Erstellen Sie jetzt Ihr WordPress-Formular

Schritt 1: Installieren Sie das Geolocation-Add-on

Gehen Sie in Ihrem WordPress-Dashboard zu „WPForms“ » „Addons“, suchen Sie nach „Geolocation“ und klicken Sie auf „Addon installieren“.

Sobald das Plugin aktiviert ist, gehen Sie zu „WPForms“ » „Einstellungen“ » „Geolokalisierung“ und geben Sie Ihren Google Places-API-Schlüssel ein, um eine Verbindung zu Google Maps herzustellen.

Eine vollständige Anleitung zur Einrichtung des API-Schlüssels finden Sie in der Dokumentation zum Geolocation-Addon.

Schritt 2: Fügen Sie das Kartenfeld zu Ihrem Formular hinzu

Öffnen Sie ein beliebiges Formular im WPForms-Builder – egal, ob neu oder bereits vorhanden. Suchen Sie im linken Bereich unter „Fancy Fields“ das Feld „Karte“ und ziehen Sie es in das Formular.

Es funktioniert in jeder Art von Formular: Kontaktformulare, Terminformulare, Anmeldeformulare, Spendenformulare – was auch immer Sie wollen.

Schritt 3: Fügen Sie Ihre Standorte hinzu

Klicken Sie auf das Feld „Karte“, um die Einstellungen für das Feld zu öffnen. Geben Sie auf der Registerkarte „Allgemein“ unter „Standorte“ den Anfang einer Adresse ein – die Autovervollständigung von Google Places schlägt passende Treffer vor.

Wählen Sie den passenden Eintrag aus, geben Sie ihm dann einen Namen (z. B. „Standort Hauptstraße“) und optional eine Beschreibung (Öffnungszeiten, Hinweise zum Parken, alles, was für den Besucher nützlich sein könnte).

Klicken Sie auf „+“, um weitere Standorte hinzuzufügen. Die Anzahl ist unbegrenzt.

Aktivieren Sie die Option „Standortliste anzeigen“, um Standortnamen und Adressen in einer übersichtlichen Liste unterhalb der Karte anzuzeigen.

Dadurch erhalten Besucher neben der visuellen Karte eine Textangabe, was besonders auf Mobilgeräten nützlich ist, wo das Antippen kleiner Markierungen schwierig sein kann.

Schritt 4: Standortauswahl aktivieren

Wenn zwei oder mehr Standorte hinzugefügt wurden, aktivieren Sie die Option „Standortauswahl zulassen“ unterhalb des Schalters „Standortliste“. Dadurch werden unterhalb der Karte Optionsfelder angezeigt, wodurch das Feld von einer visuellen Darstellung in ein interaktives Eingabefeld umgewandelt wird.

Wenn ein Besucher auf einen Pin klickt oder einen Eintrag aus der Liste auswählt, hüpft die Markierung zur Bestätigung. Bei der Übermittlung werden der Name, die Adresse und die Koordinaten des Standorts – sowie ein Link „Auf der Karte anzeigen“ – direkt in Ihrem Formulareintrag erfasst.

Hinweis: Für die Standortauswahl müssen sowohl die Option „Standortliste anzeigen“ aktiviert sein als auch mindestens zwei Standorte konfiguriert sein.

Schritt 5: Passen Sie Ihre Markierungen an

Hier unterscheidet sich das Feld „Karte“ von einer gewöhnlichen Google Maps-Einbettung. Neben jedem von Ihnen hinzugefügten Standort befindet sich ein Dropdown-Menü mit Symbolen.

Wenn Sie auf „Symbol“ klicken, erhalten Sie Zugriff auf eine umfangreiche Bibliothek mit Font-Awesome-Symbolen. Einfache Optionen wie Kartenmarkierungen oder Gebäudesymbole eignen sich in der Regel gut als Markierungen, aber es stehen auch spezifischere Optionen zur Verfügung, wie Kalender, Herzen und so weiter.

Jeder Pin ist vollständig anpassbar:

• Symbol – wählen Sie aus über 2.000 Font Awesome-Symbolen. Eine Einkaufstüte für ein Einzelhandelsgeschäft, ein Herz für eine Spendenseite, ein Recycling-Symbol für eine Rückgabestelle.
• Bild – Laden Sie Ihr eigenes Logo oder Ihr Markenzeichen aus Ihrer Medienbibliothek hoch.
• Farbe – Verwenden Sie die Farbauswahl oder geben Sie einen Hex-Wert ein, um die Farbe genau an Ihr Markenbild anzupassen.
• Größe – Stellen Sie die Markierungen auf „Klein“, „Mittel“ oder „Groß“ ein. Größere Markierungen heben Ihre Standorte sofort von den Standard-Sichtpunkten in Google Maps ab.

Bei jedem Pin kann beim Anklicken ein Popup mit Name und Beschreibung angezeigt werden, sodass Besucher den vollständigen Kontext erhalten, ohne das Formular verlassen zu müssen.

Schritt 6: Feinabstimmung der Anzeige

Auf der Registerkarte „Erweitert“ können Sie die Kartenoberfläche übersichtlicher gestalten, indem Sie Elemente ausblenden, die Besucher nicht benötigen – die Vollbild-Umschaltfunktion, die Kartenauswahl (Satellit/Gelände), die Street View-Steuerung und die Standortinformationskarten für andere Unternehmen.

Sie können auch das Ziehen oder das Zoomen mit dem Scrollrad deaktivieren, um den Fokus auf Ihre angehefteten Orte zu behalten.

Aktivieren Sie für Einträge die Option „Miniaturansicht im Eintrag anzeigen“, um direkt auf der Eingabeseite unter „WPForms“ » „Einträge“ eine Kartenvorschau anzuzeigen.

Schritt 7: Standortbezogene Benachrichtigungen einrichten

Bevor Sie Ihr Buchungsformular für mehrere Standorte veröffentlichen, sollten Sie sich einen Moment Zeit nehmen, um Benachrichtigungen und Bestätigungen einzurichten. Gehen Sie im Formular-Generator zu „Einstellungen“ » „Benachrichtigungen“.

WPForms sendet bei jeder Formularübermittlung automatisch eine Benachrichtigung an Ihre WordPress-Admin-E-Mail-Adresse. Auf diesem Bildschirm können Sie die Standardeinstellungen anpassen – beispielsweise die Betreffzeile oder die E-Mail-Adressen der Empfänger.

Mit Smart Tags können Sie außerdem eine Benachrichtigung einrichten, die direkt an die Person gesendet wird, die das Formular ausgefüllt hat. Damit bestätigen Sie den Erhalt und teilen ihr mit, dass sich jemand um die Angelegenheit kümmern wird. Dies ist besonders nützlich bei Formularen in WordPress, die an mehreren Standorten eingesetzt werden. Ausführlichere Anleitungen finden Sie in der Dokumentation zur Einrichtung von Formularbenachrichtigungen in WordPress.

Wenn das erledigt ist, gehen Sie im Menü „Einstellungen“ zum Punkt „Bestätigungen“, um festzulegen, was nach einer erfolgreichen Übermittlung geschehen soll.

Es gibt drei Möglichkeiten:

• Meldung: Zeigt eine Dankesmeldung auf derselben Seite an – ideal, wenn Einfachheit im Vordergrund steht.
• Seite anzeigen: Leitet den Besucher auf eine andere Seite Ihrer Website weiter, beispielsweise auf eine Seite, auf der die nächsten Schritte beschrieben werden oder weitere Kontaktdaten angegeben sind.
• Zur URL weiterleiten (Weiterleitung): Leitet den Besucher zu einer externen URL weiter. Dies eignet sich besonders gut, wenn ein Buchungssystem eines Drittanbieters oder eine benutzerdefinierte Landingpage zum Einsatz kommt.

Wählen Sie die Option, die am besten zu Ihrer Konfiguration passt. Wenn Sie sich für die Option „Nachricht“ entscheiden, können Sie den Standardtext anpassen, zum Beispiel: „Vielen Dank für Ihre Buchung bei uns! Wir senden Ihnen in Kürze eine Bestätigungs-E-Mail an die von Ihnen angegebene Adresse.“

Hinweise zu den anderen Bestätigungsarten finden Sie in der Dokumentation zur Einrichtung von Formularbestätigungen.

Kartenfeld vs. Adress-Autovervollständigung: Was ist der Unterschied?

Es handelt sich hierbei um zwei separate Funktionen des Geolokalisierungs-Add-ons, die gegensätzliche Aufgaben erfüllen und leicht verwechselt werden können:

	Kartenfeld	Adresse automatisch vervollständigen
Was es zeigt	Ihre vordefinierten Standorte	Vorschläge beim Eingeben einer Adresse
Was es einfängt	Der Ort, den ein Besucher auswählt	Die Adresse, die ein Besucher eingibt
Am besten für	Auswahl aus Ihren Filialen, Standorten oder Veranstaltungsorten	Eine Liefer-, Rechnungs- oder Serviceadresse erfassen

Beides kann im selben Formular verwendet werden. In einem Bestellformular für Essenslieferungen könnte das Feld „Karte“ dazu dienen, dem Kunden die Auswahl einer Restaurantfiliale zu ermöglichen, während ein Adressfeld mit Autovervollständigung zur Erfassung der Lieferadresse genutzt wird.

Um die automatische Adressvervollständigung zu aktivieren, öffnen Sie ein beliebiges Adressfeld, wechseln Sie zur Registerkarte „Erweitert“ und aktivieren Sie die Option „Adressvervollständigung aktivieren“. Eine vollständige Anleitung finden Sie unter „So erstellen Sie ein Formular mit automatischer Adressvervollständigung für Google Maps“.

Standortdaten in Ihren Einträgen anzeigen

Alle Standortdaten befinden sich unter „WPForms“ » „Einträge“.

Öffnen Sie einen beliebigen Eintrag, um den Namen und die Adresse des ausgewählten Ortes sowie den Link „Auf der Karte anzeigen“ anzuzeigen. Wenn Sie die Kartenvorschau in den erweiterten Einstellungen aktiviert haben, wird direkt auf der Eintragsseite eine visuelle Vorschau angezeigt.

Wenn Sie Daten in Google Tabellen exportieren, ordnen Sie die ausgewählten Standortfelder mithilfe des Google Tabellen-Add-ons zu – dies ist nützlich, um nach Abholorten sortierte Auslieferungslisten zu erstellen oder die Anzahl der Freiwilligenanmeldungen pro Standort zu verfolgen.

Sind Sie bereit loszulegen? Das Feld „Karte“ steht allen Pro-Nutzern im WPForms-Formular-Generator zur Verfügung. Wenn das Geolocation-Add-on bereits installiert ist, finden Sie es im Bereich „Fancy Fields“.

Erstellen Sie jetzt Ihr WordPress-Formular

Häufig gestellte Fragen zum Hinzufügen einer interaktiven Standortauswahl zu jedem WordPress-Formular

Funktioniert das Feld „Karte“ auf Mobilgeräten?

Ja. Das Kartenfeld ist vollständig responsiv. Die Standortliste mit Optionsfeldern unterhalb der Karte erleichtert die Auswahl auf Smartphones – man muss nicht mehr präzise auf eine kleine Stecknadel tippen.

Muss ich für das Geolokalisierungs-Add-on extra bezahlen?

Nein. Es ist in allen WPForms Pro-Tarifen ohne zusätzliche Kosten enthalten, ebenso wie über 2.000 Formularvorlagen und alle anderen Pro-Add-ons.

Was passiert, wenn ich nur einen Standort hinzufüge?

Bei nur einem Standort dient das Feld „Karte“ lediglich zur Anzeige – Ihr markierter Pin auf der Karte, eine Auswahl ist nicht erforderlich. Die Standortauswahl wird erst aktiviert, wenn zwei oder mehr Standorte vorhanden sind und die Option „Standortliste anzeigen“ aktiviert ist.

Kann ich bedingte Logik verwenden, die davon abhängt, welchen Standort ein Besucher auswählt?

Ja. Mithilfe der bedingten Logik von WPForms können Sie Felder ein- oder ausblenden, Benachrichtigungen an verschiedene Empfänger weiterleiten oder je nach ausgewähltem Standort unterschiedliche Bestätigungsmeldungen auslösen.

Kann ich mein eigenes Logo als Kartenmarkierung hochladen?

Ja. Wählen Sie im Abschnitt „Standorte“ der Feldoptionen in der Symbol-Dropdown-Liste die Option „Bild“ aus und laden Sie ein beliebiges Bild aus Ihrer Medienbibliothek als Markierung hoch.

Erfahren Sie mehr anhand dieser Anwendungsbeispiele

Möchten Sie mehr über einen bestimmten Anwendungsfall erfahren? Diese Anleitungen könnten Ihnen dabei helfen:

• So erstellen Sie ein WordPress-Buchungsformular für mehrere Standorte – eine vollständige Anleitung für Dienstleistungsunternehmen und die terminbasierte Planung
• So erstellen Sie ein Online-Bestellformular für ein Restaurant – Fügen Sie die Standortauswahl in den gesamten Bestell- und Zahlungsablauf ein
• So erstellen Sie ein mehrstufiges Formular in WordPress – Aufteilung komplexer Formulare auf mehrere Seiten, wobei die Standortauswahl der erste Schritt ist
• So erstellen Sie ein Adressformular mit Google Maps-Autovervollständigung – Ergänzen Sie das Kartenfeld um eine Autovervollständigung für Besucheradressen

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.