Marketing · Gutenberg
Booking Form block for WordPress
Appointment booking form with calendar date picker, time slot selection, service type and confirmation message.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Appointment booking form with calendar date picker, time slot selection, service type and confirmation message.
Inspector panels on this block: Form Content, Services, Time Slots, Form Fields, Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Marketing → search “Booking Form” (block name `blockenberg/booking-form` in block.json). Style it in the sidebar after insert.
How to use Booking Form block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Booking Form”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Form Content. Set “Service name”, “Duration (min)”, “Price”, “Form Title”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Service name | Text field in the inspector. |
| Duration (min) | Text field in the inspector. |
| Price | Text field in the inspector. |
| Form Title | Text field in the inspector. block.json default: Book an Appointment. Saved as `formTitle`. |
| Form Subtitle | Text field in the inspector. block.json default: Choose your preferred date and time.. Saved as `formSubtitle`. |
| Submit Button Label | Text field in the inspector. block.json default: Confirm Booking. Saved as `submitLabel`. |
| Confirmation Title | Text field in the inspector. block.json default: Booking Confirmed! 🎉. Saved as `confirmationTitle`. |
| Confirmation Message | Multiline text field in the inspector. block.json default: Thank you! We've received your booking and will send a confirmation email shortly.. Saved as `confirmationMsg`. |
| Show service selector | On/off toggle in the inspector. On by default. Saved as `showServiceSelect`. |
| Show price | On/off toggle in the inspector. On by default. Saved as `showPrice`. |
| Time slots (one per line, HH:MM) | Multiline text field in the inspector. |
| Name field | On/off toggle in the inspector. On by default. Saved as `showNameField`. |
| Email field | On/off toggle in the inspector. On by default. Saved as `showEmailField`. |
| Phone field | On/off toggle in the inspector. On by default. Saved as `showPhoneField`. |
| Notes / message field | On/off toggle in the inspector. On by default. Saved as `showNotes`. |
| Form Width (px) | Numeric range control in the inspector. Range 360–900. block.json default: 600. Saved as `formWidth`. |
| Form Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `formRadius`. |
| Input Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `inputRadius`. |
| Calendar Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `calendarRadius`. |
| Form Background | Color control in the inspector. block.json default: #ffffff. Saved as `formBg`. |
| Form Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `formBorder`. |
| Calendar Background | Color control in the inspector. block.json default: #f8fafc. Saved as `calendarBg`. |
| Calendar Header BG | Color control in the inspector. block.json default: #6366f1. Saved as `calendarHeaderBg`. |
| Calendar Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `calendarHeaderColor`. |
| Selected Day BG | Color control in the inspector. block.json default: #6366f1. Saved as `selectedDayBg`. |
| Selected Day Text | Color control in the inspector. block.json default: #ffffff. Saved as `selectedDayColor`. |
| Time Slot BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `slotBg`. |
| Selected Slot BG | Color control in the inspector. block.json default: #6366f1. Saved as `slotSelectedBg`. |
| Selected Slot Text | Color control in the inspector. block.json default: #ffffff. Saved as `slotSelectedColor`. |
| Input Background | Color control in the inspector. block.json default: #f8fafc. Saved as `inputBg`. |
| Input Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `inputBorder`. |
| Submit Button BG | Color control in the inspector. block.json default: #6366f1. Saved as `btnBg`. |
| Submit Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Text Color | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Muted Color | Color control in the inspector. block.json default: #64748b. Saved as `mutedColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Appointment booking form with calendar date picker, time slot selection, service type and confirmation message — that is the job of Booking Form, not a generic content block.
- Use it when you need the editor control labeled “Service name”, which exists on this block’s inspector.
- It matches pages about booking, appointment, calendar.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Booking Form block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Booking Form”. It sits under Marketing. After insert, open Form Content and set “Service name”, “Duration (min)”, “Price”, “Form Title”.
What makes Booking Form different from other Blockenberg blocks?
Appointment booking form with calendar date picker, time slot selection, service type and confirmation message. Inspector labels on this block include “Service name”, “Duration (min)”, “Price”, “Form Title”.
Is the Booking Form Gutenberg block free?
Yes. Booking Form ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Booking Form to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Form Content, Services, Time Slots, Form Fields).
Related marketing blocks
Multi-Step Form
A wizard-style multi-step lead capture form with step indicator, per-step fields, and success message.
Split Form
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Affiliate Section
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Age Gate
Age verification overlay that protects page content behind a customizable age confirmation dialog.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Booking Form from the Gutenberg inserter.