The Live Form Editor in BookingHub lets you create and customize booking forms visually, with instant live preview. Whether you’re managing service bookings, events, rentals, or hotel reservations, this editor gives you complete control over your form’s content, style, layout, and structure.
🧭 Interface Overview
The Live Form Editor is designed with a clear three-column layout:
Left Sidebar: Contains four main tabs — Form, Style, Steps, Settings.
Center Panel: Displays the live preview of your form. All changes are instantly reflected here.
Right Sidebar: Displays contextual options based on the selected tab.
This layout allows you to edit and preview simultaneously, making form building fast and user-friendly.
🔹 1. Form Tab
Use this tab to build the structure and fields of your form.
Available Sections:
Services: Select services users can book.
Locations: Select locations where services/events are available.
Staff: Select staff members for user selection.
Extras: Select optional add-ons for services (e.g., additional features or upgrades).
User Form: Customize the customer information fields, such as name, email, phone, and any additional details you wish to collect.
🎨 2. Style Tab
Customize the visual appearance of your form.
Design Options:
Colors: Change background, button, input, and label colors.
Typography: Set fonts, font sizes, font weights, and letter spacing.
Spacing: Adjust padding and margins of sections and fields.
Layout: Choose form alignment, width, and field arrangement.
Every change updates in real time in the center preview panel.
🪜 3. Steps Tab
This tab helps you configure the multi-step form flow and stepper appearance.
Step Flow Options:
Define the order of steps (e.g., Services → Staff → Customer Info → Payment).
Enable/disable specific steps depending on your form’s logic and business needs.
Rearrange or rename steps for better clarity.
Stepper Design Customization:
Choose between different stepper layouts (e.g., horizontal bar, vertical sidebar, numbered steps).
Style the stepper appearance by adjusting:
Active/inactive step colors
Step icons or labels
Progress bar visuals
Align the stepper to match your overall form design.
This tab combines both functional flow and visual presentation of your form steps.
⚙️ 4. Settings Tab
Fine-tune global layout, behavior, and visibility settings.
Layout & Display:
Form Width & Height – Set fixed or responsive dimensions.
Form Layout Types:
Default – Standard embedded form layout
Floating – Floating trigger button that opens the form
Lightbox – Open form in a modal popup
Side-Modal – Slide-in form from the side
Visibility Controls:
Show/Hide Elements:
Service Categories
Language Switcher
Login Button
Service Search
Filters
Sort Options
View Switcher (Grid/List)
Timezone Display
Toggle these on/off to simplify or enhance the user interface.
Additional Options:
Info Box – Display extra information about the service or form.
Summary Sidebar – Show a real-time summary of the selection (services, price, time, etc.).
Import / Export – Export your current form settings or import configurations from another form for fast duplication.
This tab allows you to fully control how your form behaves and interacts with users.
💾 Saving Your Form
When you’re done customizing:
Click the Save button at the top right.
To copy the form shortcode, click the three dots icon (…) next to the Save button.
Paste this shortcode anywhere on your website to embed the form — in a post, page, or widget.
✅ Best Practices
Always assign at least one service, one location and one staff to make the form functional.
Use the Steps Tab to simplify long forms and increase conversion.
Match form styling to your brand using the Style Tab.
Test your form on desktop and mobile using the live preview.