So erstellen Sie ein WordPress-Buchungsformular für mehrere Standorte

Die Verwaltung von Buchungen an mehreren Standorten kann ohne die richtigen Tools zu einem Albtraum werden, insbesondere wenn Kunden vor der Buchung sehen möchten, wo Sie sich befinden.

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 Besuchern die Möglichkeit gibt, ihren bevorzugten Standort auszuwählen.

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

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

So erstellen Sie ein WordPress-Buchungsformular für mehrere Standorte

Um ein Buchungsformular für mehrere Standorte in WordPress zu erstellen, benötigen Sie ein Plugin, das diese Aufgabe übernimmt. Ich empfehle Ihnen WPForms. Befolgen Sie die folgenden Schritte, um loszulegen:

Schritt 1: Installieren Sie das WPForms Pro Plugin

WPForms ist ein großartiges Tool zum Erstellen 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 die Kombination aus leistungsstarken Formularfunktionen und integrierten Geolokalisierungstools. Sie müssen nicht mehrere Plugins zusammenfügen 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 Map Field enthält, die Sie für dieses Tutorial benötigen.

Um loszulegen, kaufen Sie die Pro-Lizenz. Dann installieren Sie WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie diesen Anweisungen, wie Sie ein Plugin zu WordPress hinzufügen.

Jetzt auf WPForms Pro upgraden 🙂

Schritt 2: Aktivieren Sie das Geolocation-Addon

Bevor Sie eine interaktive Karte zu Ihrem Buchungsformular hinzufügen können, müssen Sie das Geolocation Addon installieren. Dieses Addon ist die Grundlage für das Kartenfeld.

Um zu beginnen, gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Addons . Geben Sie in die Suchleiste „Geolocation“ ein, um das Addon schnell zu finden.

Sobald es angezeigt wird, klicken Sie auf „Addon installieren”. Die Installation dauert in der Regel nur wenige Sekunden. Klicken Sie anschließend auf „Aktivieren”, um es auf Ihrer Website zu aktivieren.

Nun kommt der Teil, der manchen Leuten manchmal Probleme bereitet: Das Geolocation-Addon benötigt einen Google Places API- oder Mapbox API-Schlüssel, damit das Feld „Karte“ ordnungsgemäß funktioniert.

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.

Es 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 » Geolokalisierung.

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: Neues Buchungsformular erstellen

Nachdem das Geolocation-Add-on nun 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 werden Ihnen mehrere Optionen angezeigt. Wenn Sie Zeit sparen möchten, können Sie eine unserer über 2.100 WordPress-Formularvorlagen auswählen, z. B. die Vorlage „Terminbuchungsformular“, und auf „Vorlage verwenden“ klicken.

Diese Vorlagen enthalten bereits gängige Buchungsfelder, sodass Sie nicht bei Null anfangen müssen. Wenn Sie jedoch lieber ganz von vorne beginnen möchten, wählen Sie stattdessen „Leeres Formular “.

Eine weitere Option, wenn Sie nicht jedes Feld manuell einrichten möchten, aber individuelle Anforderungen haben, besteht darin, dies vom WPForms AI Form Builder für Sie erledigen zu lassen.

Bewegen Sie einfach den Mauszeiger über die violette Schaltfläche „Mit KI generieren “ und klicken Sie auf „Formular generieren“. Sie gelangen zum Bildschirm des KI-Formular-Generators. 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 auswählen. Sobald Sie auf „Generieren“ klicken, benötigt die KI einige Sekunden, um Ihr Formular zu erstellen.

Von dort aus können Sie das Formularlayout ändern, neue Felder hinzufügen/entfernen und andere Anpassungen vornehmen. Wenn 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

Jetzt kommt der spaßige Teil: Fügen Sie die interaktive Karte hinzu, damit Besucher alle Ihre Standorte auf einen Blick sehen und den für sie am besten geeigneten auswählen können.

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

Normalerweise platziere ich die Karte oben auf dem Formular, damit die Leute ihre Optionen sofort sehen können, aber Sie können sie an jeder beliebigen Stelle positionieren, die für Ihren Ablauf sinnvoll ist.

Sobald das Feld „Karte“ eingefügt ist, klicken Sie darauf, um das Fenster „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, Servicezentren oder Terminorte hinzu.

Geben Sie im Feld „Adresse“ die Adresse Ihres ersten Standorts ein. Während der Eingabe werden Ihnen Vorschläge zur automatischen Vervollständigung angezeigt. Klicken Sie auf den richtigen Vorschlag, um ihn auszuwählen. So wird sichergestellt, dass der Standort genau auf der Karte markiert wird.

Geben Sie diesem Standort anschließend einen benutzerdefinierten Namen. Etwas wie „Büro in der Innenstadt“ oder „Hauptservicezentrum“ eignet sich gut. Dieser Name wird angezeigt, wenn Besucher auf die Markierung auf der Karte klicken. Wählen Sie daher einen klaren und leicht erkennbaren Namen.

Sie können auch eine Beschreibung hinzufügen, wenn Sie zusätzliche Details wie Öffnungszeiten, Kontaktinformationen oder besondere Hinweise angeben möchten. Ich finde dies hilfreich, wenn Standorte unterschiedliche Dienstleistungen oder Öffnungszeiten haben.

Um weitere Standorte hinzuzufügen, klicken Sie auf das Plus-Symbol (+) direkt unter Ihrem ersten Standort. Es erscheint eine neue Reihe von Feldern. 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 geben Sie bei Bedarf eine Beschreibung ein.

Fügen Sie so lange Standorte hinzu, bis Sie alle gewünschten Büros oder Servicezentren auf der Karte eingezeichnet haben. Es gibt keine feste Begrenzung, sodass Sie sowohl fünf als auch fünfzehn Standorte hinzufügen können.

Sobald Sie fertig sind, werden auf Ihrer Karte automatisch alle Orte mit individuellen Markierungen angezeigt. Besucher können auf jede Markierung klicken, um den von Ihnen hinzugefügten Namen und die Beschreibung anzuzeigen.

Kartenmarkierungen für jeden Standort anpassen

Nachdem Sie Ihre Standorte hinzugefügt haben, können Sie jeden einzelnen hervorheben, indem Sie die Kartenmarkierungen anpassen. So verleihen Sie Ihrer Karte eine persönliche Note und helfen Besuchern, Ihre Standorte auf einen Blick zu unterscheiden.

Im Abschnitt „Standorte“ unter „Feldoptionen“ sehen Sie neben jedem hinzugefügten Standort ein Dropdown-Menü „Symbol “. Klicken Sie auf das Dropdown-Menü, um zwei Optionen anzuzeigen: „Symbol“ oder „Bild“.

Wenn Sie „Symbol“ auswählen, können Sie aus Hunderten von Font Awesome-Symbolen wählen. Ich verwende normalerweise einfache Markierungen wie Kartenstifte oder Gebäudesymbole, aber Sie haben auch 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 dies besonders hilfreich, wenn Sie verschiedene Arten von Standorten haben. Sie könnten beispielsweise 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 eignet sich hervorragend, wenn Sie Ihre Marke hervorheben oder etwas verwenden möchten, das Ihr Unternehmen wirklich repräsentiert.

Sie können die Markierungsgröße auch über das Dropdown-Menü „Größe“ anpassen. Ich stelle meine Markierungen normalerweise auf „Mittel“ oder „Groß“ ein, damit sie auf der Karte gut zu erkennen sind, insbesondere wenn Sie viele Standorte gleichzeitig anzeigen.

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

Standortauswahl für Buchungen aktivieren

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

Suchen Sie im Optionsfeld „Karte“ nach der Umschaltfläche „Liste der Standorte anzeigen“ und aktivieren Sie diese. Daraufhin werden alle Ihre Standortadressen in einer übersichtlichen Liste direkt unterhalb der Karte angezeigt.

Direkt darunter sehen Sie eine nützliche Option: „Standortauswahl zulassen “. (Diese Option wird nur angezeigt, wenn Sie Ihrer Karte zwei oder mehr Standorte hinzugefügt haben.) Aktivieren Sie diese Option ebenfalls.

Nachdem Sie diese Änderungen vorgenommen haben, geschieht Folgendes auf der Benutzeroberfläche: Neben jedem Standort in der Liste unterhalb Ihrer Karte werden nun Optionsfelder angezeigt.

Besucher können auf einen beliebigen Ort klicken, um ihn als bevorzugten Buchungsort auszuwählen. Die Karte wird aktualisiert, um ihre Auswahl hervorzuheben, sodass klar ersichtlich ist, wohin sie sich begeben 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 welchen Veranstaltungsort die Person ausgewählt hat.

Einstellungen für die Kartenanzeige konfigurieren

Nun wollen wir das Aussehen und Verhalten Ihrer Karte verfeinern. In diesem Schritt können Sie festlegen, welche Kartensteuerelemente angezeigt werden und wie Besucher mit der Karte interagieren können.

Klicken Sie zunächst auf die Registerkarte „Erweitert“ in den Kartenfeldoptionen. Hier können Sie das Erlebnis wirklich individuell gestalten. Unter „Präsentationseinstellungen“ finden Sie Schaltflächen für verschiedene Kartensteuerungen.

Wenn Sie eine übersichtlichere Benutzeroberfläche wünschen, können Sie Elemente wie Vollbild, Kartentyp oder Street View -Steuerelemente ausblenden. Scrollen Sie anschließend nach unten zu „Interaktive Einstellungen“. Hier legen Sie fest, wie viel Kontrolle Besucher über die Karte selbst haben.

Wenn Sie die Dinge einfach halten und versehentliches Scrollen oder Ziehen verhindern möchten, können Sie „Draggable“ oder „Scroll to Zoom“ deaktivieren. Ich finde dies hilfreich für Formulare, bei denen Sie nicht möchten, dass die Benutzer durch Verschieben abgelenkt werden.

Bevor Sie fortfahren, stellen Sie sicher, dass Sie „Miniaturansicht in Eintrag anzeigen“ aktivieren. Dadurch wird Ihren Formulareinträgen im WordPress-Dashboard eine kleine Kartenvorschau hinzugefügt, sodass Sie ganz einfach sehen können, welchen Standort jemand ausgewählt hat, ohne den vollständigen Eintrag öffnen zu müssen.

Schritt 5: Benachrichtigungen und Bestätigungen einrichten

Sobald Ihr Buchungsformular für mehrere Standorte fertig ist, nehmen Sie sich ein paar Minuten Zeit, um Benachrichtigungen und Bestätigungen zu konfigurieren, bevor Sie es live schalten. Beginnen Sie dazu im Formular-Generator mit „Einstellungen“ » „Benachrichtigungen “.

Standardmäßig sendet WPForms eine Benachrichtigung an Ihre WordPress-Admin-E-Mail-Adresse, sobald jemand das Formular absendet. Sie können die Standard-Benachrichtigungseinstellungen, wie z. B. die Betreffzeile, bearbeiten oder die E-Mail-Adressen der Empfänger nach Bedarf hier ändern.

Wenn SieSmart Tags verwenden, können Sie den Benutzer auch per E-Mail benachrichtigen, wenn er ein Formular absendet, um ihm mitzuteilen, dass Sie es erhalten haben und sich in Kürze mit ihm in Verbindung setzen werden.

Dies gilt insbesondere für Formulare mit mehreren Standorten in WordPress. Hilfe zu diesem Schritt finden Sie in unserer Dokumentationzum Einrichten von Formularbenachrichtigungen in WordPress.

Anschließend navigieren Sie einfach zu„Bestätigungen“im Menü„Einstellungen“, um Antworten für erfolgreiche Formularübermittlungen einzurichten. Hier haben Sie drei Optionen:

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

Wählen Sie die Option, die am besten zu Ihrem Arbeitsablauf passt. Wenn Sie sich für die Nachrichtenoption entscheiden, können Sie den Standardtext durch einen spezifischeren Text ersetzen, z. B.: „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.“

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

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

Sobald Ihr Buchungsformular für mehrere Standorte fertig ist, können Sie es auf Ihrer Website einbinden, wo Besucher es tatsächlich nutzen können. Mit WPForms können Sie Ihre Formulare an mehreren Stellen auf Ihrer Website einfügen, darunter auf Ihren Seiten, in Blogbeiträgen undin Sidebar-Widgets.

Klicken Sie oben im Formular-Generator auf die Schaltfläche „Einbetten “. Es erscheint ein Popup-Fenster mit zwei Optionen: Sie können entweder eine neue Seite erstellen oder das Formular zu einer bestehenden Seite hinzufügen.

Wenn Sie eine spezielle Buchungsseite erstellen möchten, 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 einen Einführungstext über dem Formular hinzufügen, das Seitenlayout anpassen oder Ihr Formular ein wenig gestalten.

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

Um die Gestaltung Ihres Formulars zu beschleunigen, können Sie unter „Formular-Design“ ein vorgefertigtes Design auswählen. In diesem Beispiel verwende ich das Design „Tranquil“ (eines meiner Lieblingsdesigns).

Probieren Sie ruhig andere Themen aus, Sie haben viele Möglichkeiten. Wenn Sie gerne direkt experimentieren, können Sie verschiedene Elemente des Formulars auch manuell genauer anpassen.

Wenn die Karte gut aussieht und die Formularfelder wie erwartet funktionieren, können Sie die Seite veröffentlichen. Ihr Buchungsformular für mehrere Standorte ist nun live und bereit, Termine zu sammeln.

Häufig gestellte Fragen zur Erstellung eines WordPress-Buchungsformulars für mehrere Standorte

Wenn Sie ein Buchungsformular für mehrere Standorte in WordPress einrichten, haben Sie wahrscheinlich einige Fragen. Ich habe die häufigsten Fragen unten beantwortet, damit alles reibungslos funktioniert.

Was ist ein Buchungsformular für mehrere Standorte in WordPress?

Ein Buchungsformular für mehrere Standorte ermöglicht es Besuchern, bei der Terminvereinbarung oder Reservierung aus mehreren physischen Standorten auszuwählen. Anstatt für jedes Büro oder jeden Veranstaltungsort separate Formulare zu erstellen, können Sie ein einziges Formular mit einer interaktiven Karte verwenden, auf der alle Ihre Standorte gleichzeitig angezeigt werden.

Dies ist besonders hilfreich, wenn Sie ein Unternehmen mit mehreren Servicezentren, Veranstaltungsräumen oder Terminorten betreiben. Besucher können sehen, wo sich die einzelnen Standorte befinden, den für sie günstigsten auswählen und direkt vor Ort buchen.

Wie hilft das Feld „Karte“ bei Buchungsformularen?

Das WPForms-Kartenfeld zeigt alle Ihre Standorte auf einer interaktiven Karte innerhalb Ihres Formulars 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 Auswahl in der Formularübermittlung erfasst. Sie können diese Informationen nutzen, um Buchungen an das richtige Team weiterzuleiten, standortspezifische Bestätigungs-E-Mails zu versenden oder einfach Ihre Unterlagen zu organisieren.

Kann ich die Kartenmarkierungen für jeden Standort individuell anpassen?

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

Sie können den Titel, die Adresse und die Beschreibung für jede Markierung individuell anpassen. So können Besucher besser verstehen, was den jeweiligen Standort auszeichnet (z. B. Parkmöglichkeiten, Öffnungszeiten oder angebotene Dienstleistungen).

Kann ich je nach ausgewähltem Standort unterschiedliche Benachrichtigungen versenden?

Selbstverständlich. Sie können in den Benachrichtigungseinstellungen Ihres Formulars eine bedingte Logik einrichten, um je nach dem vom Besucher ausgewählten Standort unterschiedliche E-Mails zu versenden.

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

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

Nicht mit einem einzigen Kartenfeld. Das Kartenfeld ist so konzipiert, dass Besucher pro Eingabe einen Standort auswählen können. Wenn Ihr Geschäftsmodell die gleichzeitige Buchung mehrerer Standorte erfordert, müssen Sie für jede Auswahl separate Dropdown- oder Optionsfeldfelder verwenden.

Funktioniert das Feld „Karte“ auf Mobilgeräten?

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

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

Kann ich das Feld „Karte“ mit Zahlungsformularen verwenden?

Ja, das ist möglich. Das Feld „Karte“ funktioniert zusammen mit Zahlungsfeldern wie Stripe oder PayPal Commerce.

Wenn Sie je nach Standort unterschiedliche Beträge berechnen, können Sie die Summe mithilfe bedingter Logik anpassen.

Beispielsweise können Termine an einem Standort aufgrund hochwertiger Einrichtungen oder längerer Servicezeiten teurer sein.

Als Nächstes: Verborgene Funktionen von WPForms, die Sie noch nicht kannten

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

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

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.