Booking Forms
Universal Booking Form Guide
The [clisyc_booking_form] is the core shortcode of the system. It is “smart” software that automatically detects your settings to show the correct interface to your customers.
Whether you offer standard appointments (Time Slots) or multi-day rentals (Date Range), this single shortcode handles both.
1. Basic Usage
To display the default booking interface configured in your plugin settings, use the following code:
[clisyc_booking_form]
2. Choosing a Booking Mode
By default, the form uses the “Auto” mode. However, you can force a specific layout regardless of the global settings by using the mode attribute:
- Time-Slot Calendar: Displays a classic calendar where users pick specific times (e.g., 2:00 PM).
- [clisyc_booking_form mode="calendar"]
- Availability Search: Displays a search form for multi-day bookings (e.g., Check-in to Check-out).
- [clisyc_booking_form mode="search"]
3. Visibility Options
You can allow your users to see which slots are already taken. This is useful for high-transparency scheduling.
- Show Booked Toggle: Adds a checkbox to the sidebar allowing users to toggle “Show booked slots” on or off.
- [clisyc_booking_form show_booked_toggle="true"]
- Set Default State: If the toggle is enabled, you can choose to have booked slots visible the moment the page loads.
- [clisyc_booking_form show_booked_toggle="true" show_booked_default="true"]
4. Smart Context Detection
One of the most powerful features of this shortcode is Context Detection.
- If you place [clisyc_booking_form] on a specific Service or Property page, the form will automatically hide the other filters and focus only on that specific item.
- You do not need to provide an ID; the system detects where it is being displayed automatically.
Example Implementations
The Standard Appointment Page
Best for coaching, consultations, or hair salons:
[clisyc_booking_form mode="calendar" show_booked_toggle="true"]
The Rental Search Portal
Best for a “Find a Room” or “Rent Equipment” page:
[clisyc_booking_form mode="search"]
🟢 Live Demo
Below is a live rendering of the universal form set to “calendar” mode:
Loading Booking Form...
Search Results Guide
The [clisyc_search_results] shortcode is used to display a filterable list of items (like Properties, Boats, or Equipment) that are available for a specific date range. It acts as the “Destination” page for your search forms.
1. The Two-Page Workflow
This shortcode does not work alone. It is designed to be the second step in a two-page booking process:
- Search Page: Contains [clisyc_booking_form mode="search"]. When a user enters their dates and clicks “Search,” they are sent to the Results Page.
- Results Page: Contains [clisyc_search_results]. This page reads the dates from the URL and displays only the items that are not already booked during that time.
2. Basic Usage
Simply create a new page (e.g., “Available Properties”) and paste the following code:
[clisyc_search_results]
3. Setup Requirements
To make the “Search” button on your site point to the correct results, you must link them in the Admin:
- Navigate to Client Sync > Settings > Behavior.
- Find the Search Results Page dropdown.
- Select the page where you placed the [clisyc_search_results] shortcode.
- Click Save.
4. How it Displays
The shortcode automatically generates a modern grid of cards. Each card includes:
- The item’s Featured Image.
- The Title and Description.
- Custom Attributes (like “Bedrooms” or “Length”) if they are marked as “Filterable” in the Dimension Attributes settings.
- A “View & Book” button that leads to the item’s individual page.
5. Advanced Filtering
The results page is dynamic. If a user changes the sorting (e.g., “Newest First”) or selects specific attributes (e.g., “Show only 3-bedroom homes”) in the sidebar, this shortcode automatically updates to show the correct items without refreshing the page.
Example Setup
The Results Page
Place this on your results page to show all available matches:
[clisyc_search_results]
The Search Sidebar
You can place a search form in a sidebar or at the top of the results page so users can refine their dates:
[clisyc_booking_form mode="search"]
🟢 Live Demo
Below is a live rendering of the search results grid (note: if no search has been performed, it will display all published items by default):