Moderne Buchungsformulare

Dieser Artikel erklärt, wie Sie die Such-, Dienstleistungs-, Mitarbeiter- und Tags-Formulare von Bookly erstellen, anpassen und veröffentlichen.

• Suchformular: Kunden wählen zuerst ein Datum und sehen dann die verfügbaren Dienstleistungen und Mitarbeiter. Demo ansehen.
• Dienstleistungsformular: Kunden durchsuchen Dienstleistungen in einer Katalogansicht. Demo ansehen.
• Mitarbeiterformular: Kunden wählen zuerst einen Mitarbeiter. Demo ansehen.
• Tags-Formular: Kunden grenzen die Auswahl an Dienstleistungen mithilfe von Tags in einem oder mehreren Filterschritten ein.

Hilfe bei der Auswahl eines Formulars finden Sie unter Buchungsformular auswählen. Informationen zur Buchung im Chat finden Sie unter AI Assistant-Buchungsformular.

Bookly bietet auch ein Stornierungsformular zum Stornieren von Terminen und ein Checkout-Formular zum Bezahlen über einen direkten Link. Die Einrichtung wird separat unter Stornierungsformular und Checkout-Formular beschrieben.

Bevor Sie beginnen

Richten Sie Ihre Dienstleistungen ein, weisen Sie diese Mitarbeitern zu und konfigurieren Sie deren Arbeitszeiten. Diese Einstellungen bestimmen, was Kunden wann buchen können.

Für ein Tags-Formular weisen Sie Ihren Dienstleistungen außerdem unter Bookly > Dienstleistungen Tags zu. Siehe Tags-Formular weiter unten.

Modernes Buchungsformular erstellen

1. Gehen Sie zu Bookly > Darstellung.
2. Wählen Sie Suchformular, Dienstleistungsformular, Mitarbeiterformular oder Tags-Formular und klicken Sie auf Neues Formular hinzufügen.
3. Klicken Sie in der Vorschau auf ein Element, um dessen Text oder Einstellungen im rechten Bereich zu bearbeiten. Über die Tabs oberhalb der Vorschau wechseln Sie zwischen den Buchungsschritten.
4. Öffnen Sie das Drei-Punkte-Menü im Formulareditor und wählen Sie Einstellungen, um den Titel und die Darstellung des Formulars festzulegen.
5. Klicken Sie auf Speichern. Sie können später zum Editor zurückkehren, um die unten beschriebenen Einstellungen anzupassen.

Buchungsformular speichern und veröffentlichen

1. Klicken Sie nach dem Speichern des Formulars auf Zurück, um zur Liste der Formulare zurückzukehren.
2. Suchen Sie die Karte Ihres Formulars und kopieren Sie den Shortcode über das Kartenmenü.
3. Fügen Sie den Shortcode einer WordPress-Seite oder einem Beitrag hinzu. Verwenden Sie im WordPress-Blockeditor einen Shortcode-Block.
4. Sehen Sie sich die Seite in der Vorschau an und veröffentlichen oder aktualisieren Sie sie, sobald das Formular fertig ist.

Ein Shortcode kann beispielsweise so aussehen: [bookly-search-form my-form] oder [bookly-services-form my-form-413]. Kopieren Sie den für Ihr Formular erzeugten Shortcode und nicht eines dieser Beispiele.

Der Slug ist die Kennung des Formulars, zum Beispiel my-form im ersten Beispiel. Nach dem Speichern finden Sie ihn in den Einstellungen des Formulars.

Sie können separate Formulare für bestimmte Dienstleistungen oder Mitarbeiter erstellen und auf verschiedenen Seiten platzieren. Alle über diese Formulare erstellten Termine erscheinen im selben Bookly-Kalender.

Weitere Möglichkeiten, ein Formular auf einer Seite einzufügen, finden Sie unter Buchungsformular veröffentlichen.

Buchungsformular konfigurieren

Öffnen Sie Ihr Formular unter Bookly > Darstellung, um es anzupassen. Die folgenden Beispiele zeigen hauptsächlich das Suchformular; die verfügbaren Schritte und Bedienelemente hängen vom Formulartyp ab.

Beschriftungen und Formularelemente

Klicken Sie in der Vorschau auf den Text, das Feld oder ein anderes Element, das Sie ändern möchten, und bearbeiten Sie dessen Einstellungen im rechten Bereich.

Für ein Dropdown-Feld Dienstleistung oder Mitarbeiter können Sie einen Standardwert festlegen und bestimmen, ob das Feld angezeigt wird. Um es auszublenden, wählen Sie einen Standardwert und deaktivieren Sie Anzeigen.

Formulareinstellungen und Darstellung

Öffnen Sie das Drei-Punkte-Menü im Formulareditor und wählen Sie Einstellungen. Hier können Sie den Titel des Formulars bearbeiten, die Hauptfarbe wählen und ein vorgefertigtes Theme anwenden. Wählen Sie dazu ein Theme, passen Sie bei Bedarf die Farben an und klicken Sie auf Design anwenden.

In allen modernen Buchungsformularen können Sie über die Darstellungseinstellungen außerdem:

• Ein adaptives Karten-Raster aktivieren.
• Den Formularhintergrund transparent machen.
• Die Position von Filtern und Kalender ändern.
• Die Eckenrundung und Kartenschatten anpassen.
• Die Formularrahmen ausblenden.

Für weitere Anpassungen der Darstellung öffnen Sie dasselbe Drei-Punkte-Menü und wählen Sie Benutzerdefiniertes CSS.

Klicken Sie nach dem Vornehmen von Änderungen auf Speichern.

Ursprüngliche Ansicht des Buchungsformulars

Unter Einstellungen legen Sie mit Ursprüngliche Ansicht fest, wie Kunden das Formular öffnen:

• Formular: Das Formular wird direkt auf der Seite angezeigt.
• Schaltfläche: Das Formular öffnet sich in einem modalen Fenster, wenn ein Kunde auf eine Schaltfläche klickt. Legen Sie den Schaltflächentext unter Titel der Schaltfläche fest.

Verfügbare Tage im Kalender

Klicken Sie in der Vorschau auf den Kalenderbereich, um festzulegen, wie die Tage angezeigt werden:

• Termine nach Zeitplan anzeigen: Zeigt die Arbeitstage der Mitarbeiter an, auch wenn an einem Tag keine Zeitfenster mehr verfügbar sind.
• Termine ohne verfügbare Zeitfenster deaktivieren: Zeigt Tage ohne verfügbare Zeitfenster ausgegraut an. In diesem Modus hängt die Ladezeit von der Anzahl der Termine, Mitarbeiter, Dienstleistungen und Standorte ab.

Darstellung und Inhalt der Dienstleistungskarten

Klicken Sie im Suchformular in der Vorschau auf eine Dienstleistungskarte, um sie anzupassen:

• Breite: Passen Sie die Kartenbreite mit dem Schieberegler an.
• Überschriftengröße: Passen Sie die Höhe des Bereichs an, in dem das Dienstleistungsbild angezeigt wird.
• Abzeichen zeigen: Zeigt den Namen des Mitarbeiters oben auf der Karte an.
• Karteninhalt: Wählen Sie die anzuzeigenden Eigenschaften und ziehen Sie sie in die gewünschte Reihenfolge.

Ausgeblendete Dienstleistungen

Klicken Sie im Suchformular auf eine Dienstleistungskarte und suchen Sie im rechten Bereich nach Ausgeblendete Dienstleistungen. Wählen Sie die Dienstleistungen aus, die Sie in diesem Formular ausblenden möchten.

Kartenanzeigemodus

Im selben Bereich bestimmt Kartenanzeigemodus, welche Karten das Suchformular anzeigt:

• Nur Karten mit Zeitfenstern anzeigen: Zeigt nur Kombinationen aus Dienstleistung, Mitarbeiter und Standort mit verfügbaren Zeitfenstern am ausgewählten Tag.
• Alle verfügbaren Karten anzeigen: Zeigt auch Karten ohne verfügbare Zeitfenster an. Bei diesen Karten sehen Kunden die Meldung „Keine Zeitfenster verfügbar“.

Zum Kalender hinzufügen

Aktivieren Sie im letzten Schritt des Buchungsvorgangs Zum Kalender hinzufügen, damit Kunden ihre Termine zu Google, Outlook, Apple oder Yahoo Calendar hinzufügen können.

Kategorie-, mitarbeiter- oder dienstleistungsspezifische Formulare

Für Dienstleistungsformulare und Mitarbeiterformulare können Sie festlegen, welche Kategorien, Dienstleistungen oder Mitarbeiter Kunden sehen:

1. Öffnen Sie das Formular unter Bookly > Darstellung.
2. Wählen Sie den entsprechenden Schritt und klicken Sie in der Vorschau auf eine Kategorie-, Dienstleistungs- oder Mitarbeiterkarte.
3. Wählen Sie im rechten Bereich Benutzerdefiniert und dann die anzuzeigenden Elemente.
4. Klicken Sie auf Speichern.

Schritte für Kategorien oder Dienstleistungen ausblenden

Öffnen Sie bei Formularen mit diesen Schritten das Drei-Punkte-Menü und wählen Sie Einstellungen. Aktivieren Sie nach Bedarf Schritt “Kategorien” ausblenden oder Schritt “Dienstleistungen” ausblenden und klicken Sie auf Speichern.

Videoanleitung: Dienstleistungsformular

Sehen Sie sich an, wie Sie ein Dienstleistungsformular einrichten:

Tags-Formular

Mit einem Tags-Formular können Kunden die Liste der Dienstleistungen in einem oder mehreren Filterschritten eingrenzen. Weisen Sie Ihren Dienstleistungen unter Bookly > Dienstleistungen Tags zu und wählen Sie dann, welche Tags in jedem Schritt des Formulars angeboten werden.

Sie könnten beispielsweise im ersten Schritt Haare, Nägel und Massage anbieten und im zweiten Vollständig und Express. Wählt ein Kunde Massage und Express, zeigt das Formular nur Dienstleistungen mit beiden Tags an.

Diese Filterschritte basieren auf den Tags, die Sie Dienstleistungen zuweisen; Sie müssen nicht für jede Kombination eine passende Kategorie erstellen.

Filterschritte erstellen

1. Wählen Sie unter Bookly > Darstellung das Tags-Formular und klicken Sie auf Neues Formular hinzufügen.
2. Klicken Sie auf dem Tab Tags auf Unterpunkt hinzufügen.
3. Wählen Sie die Tags aus, die in diesem Filterschritt angezeigt werden sollen.
4. Fügen Sie weitere Unterpunkte hinzu, wenn Sie zusätzliche Filterschritte benötigen. Um einen Tag aus einem Schritt zu entfernen, klicken Sie im Unterpunkt darauf.
5. Klicken Sie auf Speichern.

Haupteinstellungen

Konfigurieren Sie die folgenden Einstellungen für Ihre Schritte zur Tag-Auswahl:

• Abschnittstitel: Der Text, der Kunden in diesem Schritt angezeigt wird.
• Überspringen zulassen: Ermöglicht Kunden, den Schritt zur Tag-Auswahl zu überspringen.
• Titel der Schaltfläche zum Überspringen: Der Text auf der Schaltfläche zum Überspringen.
• Breite / Überschriftengröße / Texthöhe: Die Größe der Tag-Karten.

Konfigurieren Sie Titel, Beschreibung und Bild jedes Tags unter Bookly > Dienstleistungen.

Wenn das Formular fertig ist, speichern Sie es und fügen Sie seinen Shortcode einer Seite hinzu.

Buchungsformular prüfen

Bevor Sie die Seite mit Kunden teilen:

1. Öffnen Sie sie als Besucher und prüfen Sie das Formular sowohl auf einem Computer als auch auf einem Smartphone.
2. Prüfen Sie, ob die gewünschten Dienstleistungen und Mitarbeiter angezeigt werden und ausgeblendete Felder die erwarteten Standardwerte verwenden.
3. Führen Sie eine Testbuchung bis zum letzten Schritt durch.
4. Prüfen Sie, ob der Termin korrekt im Bookly-Kalender erscheint.

Häufige Fragen durchsuchen

• Wie blende ich die Felder Kategorie/Dienstleistung/Mitarbeiter im Buchungsformular aus?
• Wie entferne ich den Zahlungsschritt aus dem Buchungsformular?
• Alle Shortcodes