Erstellen eines WordPress-Buchungsformulars für mehrere Standorte

Die Verwaltung von Buchungen an mehreren Standorten kann ohne die richtigen Werkzeuge ein Albtraum sein, besonders wenn Kunden sehen müssen, wo Sie sich befinden, bevor sie buchen.

Mit WPForms und dem Geolocation Addon können Sie ein WordPress-Buchungsformular für mehrere Standorte erstellen, das alle Ihre Standorte auf einer interaktiven Karte anzeigt und es Besuchern ermöglicht, ihren bevorzugten Ort auszuwählen.

Diese Anleitung führt Sie durch die Erstellung eines Buchungsformulars, das mehrere Büros, Servicezentren oder Veranstaltungsorte auf einer einzigen Karte anzeigt, sodass Kunden leicht ihren nächstgelegenen Standort finden und buchen können.

Erstellen Sie jetzt Ihr WordPress-Formular für mehrere Standorte! :)

Erstellen eines WordPress-Buchungsformulars für mehrere Standorte

Um ein Buchungsformular für mehrere Standorte in WordPress zu erstellen, benötigen Sie ein Plugin, das die eigentliche Arbeit erledigen kann, und WPForms ist das, für das ich mich immer einsetze. Befolgen Sie die nachstehenden Schritte, um loszulegen:

Schritt 1: Installieren Sie das WPForms Pro Plugin

WPForms ist ein großartiges Werkzeug zur Erstellung von Formularen wie Kontaktformularen und Buchungsformularen. Es verfügt über mehr als 2.100+ WordPress-Formularvorlagen, die Sie verwenden können.

Was mir an WPForms am besten gefällt, ist, wie es leistungsstarke Formularfunktionen mit integrierten Geolocation-Tools kombiniert. Sie müssen nicht mehrere Plugins zusammensetzen oder benutzerdefinierten Code schreiben.

Um ein Buchungsformular für mehrere Standorte in WordPress zu erstellen, benötigen Sie WPForms Pro, das das Geolocation Addon und das Kartenfeld enthält, das Sie für dieses Tutorial benötigen.

Kaufen Sie zunächst die Pro-Lizenz. Installieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie dieser Anleitung, wie Sie ein Plugin zu WordPress hinzufügen.

Jetzt auf WPForms Pro upgraden! :)

Schritt 2: Aktivieren Sie das Geolocation Addon

Bevor Sie Ihrer Buchungsformular eine interaktive Karte hinzufügen können, müssen Sie das Geolocation Addon installieren. Dies ist das, was das Kartenfeld antreibt.

Gehen Sie zunächst in Ihrem WordPress-Dashboard zu WPForms » Addons. Geben Sie in der Suchleiste „Geolocation“ ein, um das Addon schnell zu finden.

Sobald es erscheint, klicken Sie auf Addon installieren. Die Installation dauert normalerweise nur wenige Sekunden. Klicken Sie danach auf Aktivieren, um es auf Ihrer Website zu aktivieren.

Nun kommt der Teil, der die Leute manchmal verwirrt: Das Geolocation Addon benötigt einen Google Places API- oder Mapbox API-Schlüssel, damit das Kartenfeld ordnungsgemäß funktioniert.

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.

Sie führt Sie durch die Aktivierung der erforderlichen APIs für Google Places oder Mapbox und die anschließende Eingabe dieses Schlüssels in WPForms » Einstellungen » Geolocation.

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 ein neues Buchungsformular

Jetzt, da das Geolocation Addon aktiv ist, ist es an der Zeit, das eigentliche Buchungsformular zu erstellen. Gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen, um den Formular-Generator zu öffnen.

Hier sehen Sie einige Optionen. Wenn Sie Zeit sparen möchten, können Sie aus unseren über 2.100 WordPress-Formularvorlagen wie der Terminbuchungs-Formularvorlage wählen und auf Vorlage verwenden klicken.

Diese Vorlagen enthalten bereits gängige Buchungsfelder, sodass Sie nicht bei Null anfangen müssen. Wenn Sie jedoch lieber von Grund auf neu erstellen möchten, wählen Sie stattdessen Leeres Formular.

Eine weitere Option, wenn Sie nicht jedes Feld manuell einrichten möchten, aber benutzerdefinierte Anforderungen haben, ist, den WPForms AI Form Builder die Arbeit für Sie erledigen zu lassen.

Fahren Sie einfach mit der Maus über die lila Schaltfläche Mit KI generieren und klicken Sie auf Formular generieren. Sie gelangen zum KI-Formular-Generator-Bildschirm. Hier beschreiben Sie, welche Art von Formular Sie wünschen.

Sie können Ihre eigene Eingabeaufforderung eingeben oder aus den Vorschlägen auf der linken Seite wählen. Sobald Sie auf Generieren klicken, dauert es einige Sekunden, bis die KI Ihr Formular erstellt hat.

Von dort aus können Sie das Formularlayout ändern, neue Felder hinzufügen/entfernen und andere Anpassungen vornehmen. Sobald Sie mit Ihrem Formular zufrieden sind, klicken Sie einfach auf die Schaltfläche Speichern.

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

Nun kommt der spaßige Teil: das Hinzufügen der interaktiven Karte, damit Besucher alle Ihre Standorte auf einmal sehen und den für sie am besten geeigneten auswählen können.

Scrollen Sie im Formular-Generator auf der linken Seite nach unten zum Abschnitt Fancy Fields. Dort sehen Sie das Feld Karte. Ziehen Sie es in die Formularvorschau auf der rechten Seite.

Ich platziere die Karte normalerweise oben im Formular, damit die Leute ihre Optionen sofort sehen können, aber Sie können sie überall positionieren, wo es für Ihren Ablauf passt.

Sobald das Kartenfeld platziert ist, klicken Sie darauf, um das Bedienfeld Feldoptionen auf der linken Seite zu öffnen. Scrollen Sie nach unten, bis Sie den Abschnitt Standorte sehen. Hier fügen Sie alle Ihre Büros, Servicecenter oder Terminpunkte hinzu.

Geben Sie im Feld Adresse die Adresse Ihres ersten Standorts ein. Während Sie tippen, werden Autovervollständigungsvorschläge angezeigt. Klicken Sie auf den richtigen, um ihn auszuwählen. Dies stellt sicher, dass der Standort genau auf der Karte markiert wird.

Geben Sie diesem Standort als Nächstes einen benutzerdefinierten Namen. Etwas wie „Büro in der Innenstadt“ oder „Hauptservicecenter“ funktioniert gut. Dieser Name wird angezeigt, wenn Besucher auf den Kartenmarker klicken, machen Sie ihn also klar und erkennbar.

Sie können auch eine Beschreibung hinzufügen, wenn Sie zusätzliche Details wie Bürozeiten, Kontaktinformationen oder spezielle Hinweise angeben möchten. Ich fand dies hilfreich, wenn Standorte unterschiedliche Dienstleistungen oder Zeitpläne haben.

Um weitere Standorte hinzuzufügen, klicken Sie auf das Plus-Symbol (+) direkt unter Ihrem ersten Standort. Ein neuer Satz von Feldern wird angezeigt. Wiederholen Sie den gleichen Vorgang: Geben Sie die Adresse ein, wählen Sie sie aus der Autovervollständigung aus, fügen Sie einen Namen hinzu und füllen Sie bei Bedarf die Beschreibung aus.

Fügen Sie weiterhin Standorte hinzu, bis Sie jedes Büro oder jedes Servicecenter, das Sie auf der Karte haben möchten, aufgenommen haben. Es gibt hier keine harte Grenze, also wenn Sie fünf Standorte oder fünfzehn haben, können Sie sie alle hinzufügen.

Sobald Sie fertig sind, zeigt Ihre Karte automatisch alle Standorte mit einzelnen Markierungen an. Besucher können auf jede einzelne klicken, um den von Ihnen hinzugefügten Namen und die Beschreibung anzuzeigen.

Passen Sie Kartenmarkierungen für jeden Standort an

Nachdem Sie Ihre Standorte hinzugefügt haben, können Sie jeden einzelnen hervorheben, indem Sie die Kartenmarkierungen anpassen. Hier können Sie Ihrer Karte Persönlichkeit verleihen und Besuchern helfen, Ihre Standorte auf einen Blick zu unterscheiden.

Im Abschnitt „Standorte“ unter Feldoptionen sehen Sie neben jedem von Ihnen hinzugefügten Standort ein Dropdown-Menü für Symbol. Klicken Sie auf das Dropdown-Menü und Sie sehen zwei Optionen: Symbol oder Bild.

Wenn Sie Symbol wählen, können Sie aus Hunderten von Font Awesome-Symbolen wählen. Ich verwende normalerweise einfache Markierungen wie Karten-Pins oder Gebäudesymbole, aber Sie haben Optionen wie Kaffeetassen, Krankenhäuser oder Aktentaschen, wenn Sie etwas Spezifischeres suchen.

Direkt neben dem Symbolfeld sehen Sie eine Farbauswahl. Klicken Sie darauf, um die Farbe der Markierung zu ändern. Ich finde das besonders hilfreich, wenn Sie verschiedene Arten von Standorten haben. Zum Beispiel könnten Sie Blau für Büros, Grün für Einzelhandelsgeschäfte und Rot für Veranstaltungsorte verwenden.

Wenn Sie lieber Ihre eigene Grafik verwenden möchten, wählen Sie Bild und laden Sie eine benutzerdefinierte Markierung hoch. Dies funktioniert hervorragend, wenn Sie Ihr Branding anpassen oder etwas verwenden möchten, das Ihr Unternehmen wirklich repräsentiert.

Sie können auch die Markierungsgröße mit dem Dropdown-Menü Größe anpassen. Ich stelle meine normalerweise auf Mittel oder Groß ein, damit sie auf der Karte leicht zu erkennen sind, besonders wenn Sie viele Standorte gleichzeitig anzeigen.

Sobald Sie alle Ihre Markierungen angepasst haben, sieht Ihre Karte professionell und einfach zu navigieren aus. Besucher können genau sehen, wo sich jeder Standort befindet und welche Art von Dienstleistung oder Einrichtung er darstellt.

Standortauswahl für Buchungen aktivieren

Nachdem Sie Ihre Karte mit mehreren Standorten eingerichtet haben, ist es an der Zeit, diese Standorte auswählbar zu machen, damit Besucher tatsächlich wählen können, wo sie buchen möchten.

Suchen Sie im Bedienfeld für die Kartenfeldoptionen den Schalter Liste der Standorte anzeigen und schalten Sie ihn ein. Dies zeigt alle Ihre Standortadressen in einer übersichtlichen Liste direkt unter der Karte an.

Sie werden sofort feststellen, dass darunter etwas Nützliches erscheint: die Option Standortauswahl zulassen. (Dies wird nur angezeigt, sobald Sie zwei oder mehr Standorte zu Ihrer Karte hinzugefügt haben.) Schalten Sie auch diese ein.

Nachdem Sie diese Änderungen vorgenommen haben, geschieht Folgendes im Frontend. Radiobuttons erscheinen nun neben jedem Standort in der Liste unter Ihrer Karte.

Besucher können auf einen beliebigen Standort klicken, um ihn als bevorzugten Buchungsort auszuwählen. Die Karte wird aktualisiert, um ihre Wahl hervorzuheben, und macht deutlich, wohin sie gehen werden.

Wenn nun jemand das Formular absendet, wird der ausgewählte Standort zusammen mit allen anderen Buchungsdetails erfasst. Sie sehen genau, welches Büro, welches Servicecenter oder welche Veranstaltungsort sie ausgewählt haben.

Karteneinstellungen konfigurieren

Lassen Sie uns nun verfeinern, wie Ihre Karte aussieht und sich verhält. Mit diesem Schritt können Sie steuern, welche Kartensteuerelemente angezeigt werden und wie Besucher damit interagieren können.

Klicken Sie zunächst auf die Registerkarte Erweitert in den Optionen des Kartenfelds. Hier können Sie das Erlebnis wirklich verfeinern. Unter Darstellungseinstellungen sehen Sie Schalter für verschiedene Kartensteuerelemente.

Wenn Sie eine sauberere Benutzeroberfläche wünschen, können Sie Elemente wie die Steuerelemente für Vollbild, Kartentyp oder Street View ausblenden. Scrollen Sie dann nach unten zu Interaktive Einstellungen. Hier entscheiden Sie, wie viel Kontrolle Besucher über die Karte selbst haben.

Wenn Sie die Dinge einfach halten und versehentliches Scrollen oder Zoomen verhindern möchten, können Sie Ziehbar oder Scrollen zum Zoomen deaktivieren. Ich habe dies für Formulare als hilfreich empfunden, bei denen Sie nicht möchten, dass sich die Leute durch Herumschwenken ablenken lassen.

Stellen Sie sicher, dass Sie Miniaturansicht in Eintrag anzeigen aktivieren, bevor Sie fortfahren. Dies fügt eine kleine Karten-Vorschau zu Ihren Formulareinträgen im WordPress-Dashboard hinzu, was es sehr einfach macht, zu sehen, welchen Standort jemand ausgewählt hat, ohne den vollständigen Eintrag öffnen zu müssen.

Schritt 5: Richten Sie Benachrichtigungen und Bestätigungen ein

Sobald Ihr Formular für mehrere Standorte bereit ist, nehmen Sie sich ein paar Minuten Zeit, um Benachrichtigungen und Bestätigungen zu konfigurieren, bevor Sie live gehen. Beginnen Sie damit, im Formular-Builder zu Einstellungen » Benachrichtigungen zu gehen.

Standardmäßig sendet WPForms eine Benachrichtigung an Ihre WordPress-Admin-E-Mail, wenn jemand das Formular absendet. Sie können die Standard-Benachrichtigungseinstellungen, wie z. B. die Betreffzeile, bearbeiten oder bei Bedarf die Empfänger-E-Mails von hier aus ändern.

Wenn Sie Smart Tags verwenden, können Sie auch die E-Mail-Adresse des Benutzers benachrichtigen, wenn er ein Formular absendet, und ihn wissen lassen, dass Sie es erhalten haben und sich bald melden werden.

Dies gilt insbesondere für Formulare mit mehreren Standorten in WordPress. Hilfe zu diesem Schritt finden Sie in unserer Dokumentation, wie Sie Formularbenachrichtigungen in WordPress einrichten.

Sobald Sie fertig sind, navigieren Sie einfach zu Bestätigungen im Menü Einstellungen, um Antworten für erfolgreiche Formularübermittlungen einzurichten. Sie haben hier drei Optionen:

• Nachricht: Zeigt eine einfache Dankesnachricht direkt auf derselben Seite an. Ich verwende dies, wenn ich die Dinge schnell und unkompliziert halten möchte.
• Seite anzeigen: Leitet Besucher zu einer bestimmten Seite auf Ihrer Website weiter, z. B. zu einer detaillierten Bestätigungsseite mit nächsten Schritten oder Kontaktinformationen.
• URL aufrufen (Weiterleitung): Leitet zu einer externen URL weiter, nützlich, wenn Sie ein Drittanbieter-Buchungssystem oder eine benutzerdefinierte Landingpage verwenden.

Wählen Sie, was am besten zu Ihrem Workflow passt. Wenn Sie die Nachrichtenoption wählen, können Sie den Standardtext bearbeiten, um ihn spezifischer zu gestalten, z. B.: „Danke für Ihre Buchung! Wir senden Ihnen in Kürze eine Bestätigungs-E-Mail an die angegebene Adresse.“

Hilfe zu anderen Bestätigungstypen finden Sie in unserer Dokumentation zum Einrichten von Formularbestätigungen.

Schritt 6: Veröffentlichen Sie Ihr Buchungsformular für mehrere Standorte

Sobald Ihr Multi-Location-Buchungsformular fertig ist, ist es an der Zeit, es auf Ihrer Website einzubinden, wo Besucher es tatsächlich nutzen können. WPForms ermöglicht es Ihnen, Ihre Formulare an mehreren Stellen auf Ihrer Website einzufügen, einschließlich Ihrer Seiten, Blogbeiträge und Sidebar-Widgets.

Klicken Sie oben im Formular-Generator auf die Schaltfläche Einbetten. Ein Popup wird angezeigt, das zwei Optionen bietet: Sie können entweder eine neue Seite erstellen oder das Formular zu einer vorhandenen Seite hinzufügen.

Wenn Sie eine spezielle Buchungsseite erstellen, klicken Sie auf Neue Seite erstellen. Geben Sie Ihrer Seite einen Titel wie „Termin buchen“ oder „Besuch planen“ und klicken Sie dann auf Los geht’s!

WPForms öffnet den WordPress-Block-Editor mit Ihrem bereits eingebetteten Formular. Von hier aus können Sie Einführungstext über dem Formular hinzufügen, das Seitenlayout anpassen oder Ihr Formular etwas gestalten.

Klicken Sie einfach auf den Bereich um das eingebettete Formular im Seiten-Editor, um ein neues Bedienfeld auf der rechten Seite zu öffnen. Hier finden Sie alle grundlegenden und erweiterten Styling-Optionen für WPForms.

Um Ihr Formular schnell zu gestalten, können Sie unter dem Abschnitt Formular-Design ein fertiges Theme auswählen. In diesem Beispiel verwende ich das Tranquil-Theme (eines meiner Favoriten).

Probieren Sie gerne andere Themes aus; Sie haben viele Optionen. Wenn Sie gerne direkt experimentieren, können Sie auch manuell verschiedene Elemente des Formulars präziser anpassen.

Wenn die Karte gut aussieht und die Formularfelder wie erwartet funktionieren, klicken Sie auf Veröffentlichen. Ihr Multi-Location-Buchungsformular ist jetzt live und bereit, Termine zu sammeln.

FAQs zum Erstellen eines Multi-Location-WordPress-Buchungsformulars

Wenn Sie ein Multi-Location-Buchungsformular in WordPress einrichten, haben Sie wahrscheinlich ein paar Fragen. Ich habe die häufigsten unten beantwortet, damit Sie alles reibungslos zum Laufen bringen.

Was ist ein Multi-Location-Buchungsformular in WordPress?

Ein Multi-Location-Buchungsformular ermöglicht es Besuchern, bei der Terminvereinbarung oder Reservierung aus mehreren physischen Standorten zu wählen. Anstatt für jedes Büro oder jeden Veranstaltungsort separate Formulare zu erstellen, können Sie ein Formular mit einer interaktiven Karte verwenden, die alle Ihre Standorte auf einmal anzeigt.

Dies ist besonders hilfreich, wenn Sie ein Unternehmen mit mehreren Servicezentren, Veranstaltungsorten oder Terminorten betreiben. Besucher können sehen, wo sich jeder Standort befindet, den für sie günstigsten auswählen und direkt vor Ort buchen.

Wie hilft das Kartenfeld bei Buchungsformularen?

Das WPForms-Kartenfeld zeigt alle Ihre Standorte auf einer interaktiven Karte in Ihrem Formular an. Besucher können zoomen, schwenken und auf Markierungen klicken, um Details zu jedem Standort anzuzeigen.

Sobald sie einen Standort ausgewählt haben, wird diese Wahl in der Formularübermittlung erfasst. Sie können sie verwenden, um Buchungen an das richtige Team weiterzuleiten, standortspezifische Bestätigungs-E-Mails zu senden oder einfach Ihre Aufzeichnungen zu organisieren.

Kann ich die Kartenmarkierungen für jeden Standort anpassen?

Ja, das können Sie. Wenn Sie Standorte zu Ihrem Kartenfeld hinzufügen, erhält jeder eine eigene Markierung auf der Karte.

Sie können den Titel, die Adresse und die Beschreibung für jede Markierung anpassen. Dies hilft den Besuchern zu verstehen, was jeden Standort unterscheidet (z. B. Parkmöglichkeiten, Öffnungszeiten oder angebotene Dienstleistungen).

Kann ich basierend auf dem ausgewählten Standort unterschiedliche Benachrichtigungen senden?

Absolut. Sie können bedingte Logik in den Benachrichtigungseinstellungen Ihres Formulars einrichten, um verschiedene E-Mails zu senden, je nachdem, welchen Standort der Besucher auswählt.

Wenn beispielsweise jemand in Ihrem Büro in der Innenstadt bucht, geht die Benachrichtigung an Ihr Team in der Innenstadt. Wenn er den Standort in der Oberstadt wählt, wird sie stattdessen an dieses Team weitergeleitet.

Können Kunden mehrere Standorte in einer Buchung auswählen?

Nicht mit einem einzelnen Kartenfeld. Das Kartenfeld ist dafür ausgelegt, dass Besucher pro Übermittlung einen Standort auswählen. Wenn Ihr Geschäftsmodell die gleichzeitige Buchung mehrerer Standorte erfordert, müssten Sie für jede Auswahl separate Dropdown- oder Radio Button-Felder verwenden.

Funktioniert das Kartenfeld auf Mobilgeräten?

Ja, es funktioniert hervorragend auf Mobilgeräten. Die Karte ist vollständig responsiv, sodass Besucher sie genauso antippen, zoomen und mit ihr interagieren können wie auf dem Desktop.

Ich habe dies auf Telefonen und Tablets getestet, und die Erfahrung bleibt reibungslos. Ihre Besucher werden keine Probleme haben, einen Standort auszuwählen, unabhängig davon, welches Gerät sie verwenden.

Kann ich das Kartenfeld mit Zahlungsformularen verwenden?

Ja, das können Sie. Das Kartenfeld funktioniert neben Zahlungsfeldern wie Stripe oder PayPal Commerce.

Wenn Sie je nach Standort unterschiedliche Beträge berechnen, können Sie die bedingte Logik verwenden, um den Gesamtbetrag anzupassen.

Termine an einem Standort können beispielsweise aufgrund von Premium-Einrichtungen oder längeren Servicezeiten mehr kosten.

Als Nächstes: Versteckte Funktionen von WPForms, von denen Sie nichts wussten

WPForms ist vollgepackt mit Tools und Optionen, die nicht sofort ersichtlich sind, aber Ihren Workflow und die von Ihnen erstellten Formulare erheblich verbessern können.

Schauen Sie sich unseren Leitfaden an, um mehr über einige dieser versteckten Juwelen und Funktionen zu erfahren, die Ihnen vielleicht entgangen sind, aber das Potenzial haben, Ihre WordPress-Formulare auf die nächste Stufe zu heben.

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.