So fügen Sie einen interaktiven Standort-Picker zu jedem WordPress-Formular hinzu

Stellen Sie sich vor: Ein Unterstützer besucht die Website einer gemeinnützigen Organisation, um Wintermäntel zu spenden. Er ist bereit, sie abzugeben, aber das Formular zeigt nur ein Dropdown-Menü mit drei Straßenadressen. Keine Karte oder Kontext enthalten. Er öffnet Google Maps in einem neuen Tab, fügt jede Adresse einzeln ein, ermittelt, welche die nächste ist, und kehrt dann zurück, um das Formular auszufüllen.

Manche werden es tun. Die meisten nicht…

Stellen Sie sich nun eine interaktive Karte direkt im Formular vor. Die drei Abgabestellen sind mit benutzerdefinierten Symbolen markiert und mit „North Community Center“, „Downtown Library“ und „Eastside Church“ beschriftet. Der Benutzer tippt auf die ihm am nächsten gelegene Stelle, der Pin hüpft zur Bestätigung, und seine Auswahl wird sauber in Ihrem Eintrag erfasst. Dies geschieht in Sekundenschnelle und ohne die Seite zu verlassen.

Das ist das WPForms Map-Feld in Aktion! Und während ein Formular zur Buchung mit standortabhängiger Auswahl wahrscheinlich der erste Anwendungsfall ist, der einem in den Sinn kommt, ist es bei weitem nicht der einzige. Abholung im Einzelhandel, Produktrückgabe, Check-in bei Veranstaltungen, Auswahl von Servicebereichen, Anmeldungen von Freiwilligen… jedes Formular, das die Auswahl eines physischen Standorts beinhaltet, wird dadurch besser.

Ich zeige Ihnen, wie Sie es einrichten und auf vielfältige Weise nutzen können.

So fügen Sie einen interaktiven Standort-Picker zu jedem WordPress-Formular hinzu

Was Sie benötigen werden

• WPForms Pro — das Kartenfeld ist Teil des Geolocation Addons, das in allen Pro-Plänen enthalten ist
• Ein Google Places API-Schlüssel — kostenlos einzurichten; dieser ermöglicht die Kartendarstellung und die Adressautovervollständigung
• Die neueste Version von WPForms, installiert auf Ihrer WordPress-Website

Wenn Sie WPForms Lite verwenden, müssen Sie auf Pro upgraden, um auf das Geolocation Addon zugreifen zu können. Wenn Sie neu bei WPForms sind, ist Pro der richtige Einstieg.

Erstellen Sie jetzt Ihr WordPress-Formular

Schritt 1: Installieren Sie das Geolocation Addon

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

Sobald es aktiv ist, gehen Sie zu WPForms » Einstellungen » Geolocation und geben Sie Ihren Google Places API-Schlüssel ein, um die Verbindung zu Google Maps herzustellen.

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

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

Öffnen Sie ein beliebiges Formular im WPForms-Builder – neu oder bestehend. Finden Sie das Feld Karte unter Fancy Fields im linken Bereich und ziehen Sie es hinein.

Es funktioniert in allen Formulararten: Kontaktformulare, Terminformulare, Registrierungsformulare, Spendenformulare, Sie nennen es.

Schritt 3: Fügen Sie Ihre Standorte hinzu

Klicken Sie auf das Kartenfeld, um die Einstellungen für die Feldoptionen zu öffnen. Im Tab Allgemein unter Standorte beginnen Sie mit der Eingabe einer Adresse – die Google Places Autovervollständigung schlägt passende Ergebnisse vor.

Wählen Sie die richtige aus, geben Sie ihr dann einen Namen (z. B. „Main Street Location“) und eine optionale Beschreibung (Öffnungszeiten, Parkhinweise, alles Nützliche für den Besucher).

Klicken Sie auf +, um weitere Standorte hinzuzufügen. Es gibt keine Begrenzung.

Aktivieren Sie Liste der Standorte anzeigen, um Ortsnamen und Adressen in einer übersichtlichen Liste unter der Karte anzuzeigen.

Dies gibt Besuchern eine Textreferenz neben der visuellen Karte, was besonders nützlich ist, wenn das Tippen auf kleine Pins schwierig sein kann.

Schritt 4: Aktivieren Sie die Standortauswahl

Wenn zwei oder mehr Standorte hinzugefügt wurden, aktivieren Sie Standortauswahl zulassen unter der Umschaltfläche Liste der Standorte. Dies fügt Optionsfelder unter der Karte hinzu und wandelt das Feld von einer visuellen Anzeige in eine Live-Formulareingabe um.

Wenn ein Besucher auf einen Pin klickt oder eine Auswahl aus der Liste trifft, hüpft der Marker zur Bestätigung. Ihre Übermittlung erfasst den Namen, die Adresse und die Koordinaten des Standorts – plus einen Link Auf Karte anzeigen – direkt in Ihrem Formulareintrag.

Hinweis: Die Standortauswahl erfordert sowohl die Option Liste der Standorte anzeigen als auch mindestens zwei konfigurierte Standorte.

Schritt 5: Passen Sie Ihre Markierungen an

Hier hebt sich das Kartenfeld von einer generischen Google Maps-Einbettung ab. Neben jedem von Ihnen hinzugefügten Standort gibt es ein Dropdown-Menü Symbol.

Die Auswahl von Symbol gibt Ihnen Zugriff auf eine große Bibliothek von Font Awesome-Symbolen. Einfache Auswahlmöglichkeiten wie Karten-Pins oder Gebäude-Symbole eignen sich gut als Marker, aber es gibt auch spezifischere Optionen wie Kalender, Herzen usw.

Jeder Pin ist vollständig anpassbar:

• Symbol – wählen Sie aus über 2.000 Font Awesome-Symbolen. Eine Einkaufstasche für einen Einzelhandelsstandort, ein Herz für eine Spendenstelle, ein Recycling-Symbol für einen Rückgabeort.
• Bild – laden Sie Ihr eigenes Logo oder Markierungsbild aus Ihrer Mediathek hoch.
• Farbe – verwenden Sie den Farbwähler oder fügen Sie einen Hex-Wert ein, um Ihre Marke genau abzustimmen.
• Größe – stellen Sie Pins auf Klein, Mittel oder Groß ein. Größere Marker heben Ihre Standorte sofort von den Standard-Points of Interest von Google Maps ab.

Jeder Pin kann beim Klicken auch ein Namens- und Beschreibungs-Popup anzeigen, sodass Besucher den vollständigen Kontext erhalten, ohne das Formular zu verlassen.

Schritt 6: Optimieren Sie die Anzeige

Unter der Registerkarte Erweitert können Sie die Kartenoberfläche bereinigen, indem Sie Elemente ausblenden, die Besucher nicht benötigen – den Vollbild-Schalter, den Kartentyp-Selektor (Satellit/Gelände), die Street View-Steuerung und Informationskarten für andere Unternehmen.

Sie können auch das Ziehen oder Zoomen mit dem Mausrad deaktivieren, um den Fokus auf Ihre angepinnten Standorte zu legen.

Aktivieren Sie für Einträge Miniaturansicht im Eintrag anzeigen, um eine Kartenvorschau direkt auf der Übermittlungsseite unter WPForms » Einträge anzuzeigen.

Schritt 7: Richten Sie standortbezogene Benachrichtigungen ein

Bevor Sie Ihr Multi-Standort-Buchungsformular veröffentlichen, sollten Sie sich einen Moment Zeit nehmen, um Benachrichtigungen und Bestätigungen einzurichten. Gehen Sie im Formular-Builder zu Einstellungen » Benachrichtigungen.

WPForms sendet automatisch eine Benachrichtigung an Ihre WordPress-Admin-E-Mail, jedes Mal wenn das Formular übermittelt wird. Von dieser Seite aus können Sie die Standardeinstellungen anpassen – Dinge wie die Betreffzeile oder die Empfänger-E-Mail-Adressen.

Mit Smart Tags können Sie auch eine Benachrichtigung einrichten, die direkt an die Person gesendet wird, die das Formular ausgefüllt hat. Diese bestätigt den Eingang und informiert, dass sich jemand darum kümmern wird. Dies ist ein besonders nützlicher Schritt für Formulare mit mehreren Standorten in WordPress. Detailliertere Anleitungen finden Sie in der Dokumentation zum Thema Einrichtung von Formularbenachrichtigungen in WordPress.

Wenn das erledigt ist, gehen Sie zu Bestätigungen im Menü Einstellungen, um zu entscheiden, was nach einer erfolgreichen Übermittlung geschieht.

Es gibt drei Optionen:

• Nachricht: Zeigt eine Dankesnachricht auf derselben Seite an – eine gute Wahl, wenn Einfachheit Priorität hat.
• Seite anzeigen: Leitet den Besucher zu einer anderen Seite Ihrer Website weiter, z. B. zu einer Seite, die die nächsten Schritte beschreibt oder zusätzliche Kontaktdaten enthält.
• URL aufrufen (Weiterleitung): Leitet den Besucher zu einer externen URL weiter. Dies ist nützlich, wenn ein Buchungssystem eines Drittanbieters oder eine benutzerdefinierte Zielseite beteiligt ist.

Wählen Sie die Option, die am besten zu Ihrer Einrichtung passt. Wenn Sie die Option Nachricht wählen, kann der Standardtext angepasst werden, z. B.: „Vielen Dank für Ihre Buchung! Wir senden Ihnen in Kürze eine Bestätigungs-E-Mail an die von Ihnen angegebene Adresse.“

Anleitungen zu den anderen Bestätigungstypen finden Sie in der Dokumentation zum Einrichten von Formularbestätigungen.

Feld „Karte“ vs. Adress-Autovervollständigung: Was ist der Unterschied?

Dies sind zwei separate Funktionen des Geolocation-Add-ons, die gegensätzliche Dinge tun und leicht zu verwechseln sind:

	Kartenfeld	Adress-Autovervollständigung
Was es anzeigt	Ihre vordefinierten Standorte	Tippvorschläge für jede Adresse
Was es erfasst	Der vom Besucher ausgewählte Standort	Die vom Besucher eingegebene Adresse
Am besten für	Auswahl aus Ihren Filialen, Standorten oder Veranstaltungsorten	Erfassung einer Liefer-, Rechnungs- oder Serviceadresse

Sie können beide in demselben Formular verwenden. Ein Bestellformular für die Lieferung von Lebensmitteln könnte das Feld „Karte“ verwenden, damit der Kunde eine Filiale auswählen kann, und ein Adressfeld mit Autovervollständigung, um seine Lieferadresse zu erfassen.

Um die Adressautovervollständigung zu aktivieren, öffnen Sie ein beliebiges Adressfeld, gehen Sie zur Registerkarte Erweitert und aktivieren Sie Adressautovervollständigung aktivieren. Eine vollständige Anleitung finden Sie unter Erstellen eines Google Maps-Formulars mit Adressautovervollständigung.

Standortdaten in Ihren Einträgen anzeigen

Alle Standortdaten befinden sich unter WPForms » Einträge.

Öffnen Sie eine beliebige Übermittlung, um den Namen, die Adresse und einen Link Auf Karte anzeigen des ausgewählten Standorts zu sehen. Wenn Sie die Miniaturansicht der Karte in den erweiterten Einstellungen aktiviert haben, sehen Sie eine visuelle Vorschau direkt auf der Eintragsseite.

Wenn Sie nach Google Tabellen exportieren, ordnen Sie die ausgewählten Standortfelder mit dem Google Tabellen-Add-on zu – nützlich für die Erstellung von Bearbeitungslisten, die nach Abholort organisiert sind, oder zur Verfolgung der Anmeldezahlen von Freiwilligen pro Standort.

Bereit zum Start? Das Feld „Karte“ ist im WPForms-Formularersteller für alle Pro-Benutzer verfügbar. Wenn das Geolocation-Add-on bereits installiert ist, finden Sie es im Abschnitt „Fancy Fields“.

Erstellen Sie jetzt Ihr WordPress-Formular

FAQs zum Hinzufügen eines interaktiven Standortauswahlers zu jedem WordPress-Formular

Funktioniert das Feld „Karte“ auf Mobilgeräten?

Ja. Das Kartenfeld ist vollständig responsiv. Die Standortliste mit darunter liegenden Radiobuttons erleichtert die Auswahl auf Mobiltelefonen – kein präzises Antippen eines kleinen Pins erforderlich.

Muss ich für das Geolocation-Addon extra bezahlen?

Nein. Es ist in allen WPForms Pro-Plänen ohne zusätzliche Kosten enthalten, zusammen mit über 2.000 Formularvorlagen und allen anderen Pro-Addons.

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

Bei einem einzelnen Standort fungiert das Kartenfeld als Anzeige – Ihr gebrandeter Pin auf der Karte, keine Auswahl erforderlich. Die Standortauswahl wird erst aktiviert, wenn zwei oder mehr Standorte vorhanden sind und die Option „Liste der Standorte anzeigen“ aktiviert ist.

Kann ich bedingte Logik verwenden, basierend darauf, welchen Standort ein Besucher auswählt?

Ja. Mit der bedingten Logik von WPForms können Sie Felder ein- oder ausblenden, Benachrichtigungen an verschiedene Empfänger weiterleiten oder unterschiedliche Bestätigungsnachrichten basierend auf dem ausgewählten Standort auslösen.

Kann ich mein eigenes Logo als Kartenmarkierung hochladen?

Ja. Wählen Sie im Abschnitt „Standorte“ der Feldoptionen im Dropdown-Menü für Symbole Bild aus und laden Sie ein beliebiges Bild aus Ihrer Mediathek als Pin-Markierung hoch.

Tauchen Sie tiefer ein mit diesen Anwendungsfällen

Möchten Sie mehr über einen bestimmten Anwendungsfall erfahren? Ich denke, diese Anleitungen werden Ihnen hilfreich sein:

• Erstellen eines WordPress-Buchungsformulars für mehrere Standorte – vollständige Anleitung für Dienstleistungsunternehmen und terminbasierte Planung
• Erstellen eines Online-Bestellformulars für Restaurants – Standortauswahl zu einem vollständigen Bestell- und Zahlungsablauf hinzufügen
• Erstellen eines mehrstufigen Formulars in WordPress – komplexe Formulare in Seiten aufteilen, wobei die Standortauswahl der erste Schritt ist
• Erstellen eines Google Maps Autocomplete-Adressformulars – ergänzen Sie das Kartenfeld mit der automatischen Adressvervollständigung für Besucher

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.