Shortcodes & Popup
Embed booking forms anywhere on your site with simple shortcodes
Shortcodes Overview
WP Booking System Pro provides three shortcodes that let you place booking functionality on any page, post, or widget area. No coding required — just paste a shortcode and publish.
Available Shortcodes
[booking_form]Embeds the full inline booking form[booking_popup]Adds a button that opens the booking form in a popup[booking_calendar]Displays a read-only availability calendar[booking_form] — Inline Booking Form
Basic Usage
Drop this shortcode into any page or post to display the full booking form inline.
[booking_form]Parameters
Pre-select a service
[booking_form service="massage"]Uses the service slug. Skips the service-selection step.
Pre-select a staff member
[booking_form staff="jane"]Combine parameters
[booking_form service="haircut" staff="jane"][booking_popup] — Popup Booking Button
Basic Usage
Renders a styled button. When clicked, the booking form opens in a centered popup overlay.
[booking_popup]Why use a popup?
- - Saves page space — form appears on demand
- - Higher conversion rates with focused experience
- - Professional, modern appearance
- - Mobile-friendly responsive design
Parameters
Custom button text
[booking_popup text="Schedule Appointment"]Pre-select a service
[booking_popup service="massage" text="Book Massage"]Custom styling
[booking_popup text="Book Now" animation="slide" width="600" background_color="#e74c3c"]Animation Options
Smooth opacity transition
Form slides from top
Form scales up from center
[booking_calendar] — Availability Calendar
Basic Usage
Displays a read-only calendar showing available and booked dates. Useful for letting visitors check availability before booking.
[booking_calendar]Filter by service
[booking_calendar service="massage"]Advanced: Custom CSS
Styling Your Forms
All shortcode output uses well-scoped CSS classes you can override in your theme or via the Settings → Custom CSS field.
Example: Custom Button
.wp-booking-btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}Available CSS Classes
- -
.wp-booking-form— Main form container - -
.wp-booking-step— Individual form steps - -
.wp-booking-btn-primary— Primary buttons
- -
.wp-booking-popup-overlay— Popup background - -
.wp-booking-popup-container— Popup form - -
.time-slot— Time selection buttons
You're All Set!
Your booking shortcodes are ready to use. Paste them into any page, post, or widget area and publish.
Next: Set Up PaymentsQuick Reference
| Shortcode | Purpose | Key Parameters |
|---|---|---|
[booking_form] | Inline booking form | service, staff |
[booking_popup] | Popup booking button | text, service, animation, width, background_color |
[booking_calendar] | Availability calendar | service |