This article explains how to use the standard booking form field shortcodes in Booking Calendar’s Advanced (CF7-style) form mode. These shortcodes define the fields users fill out when making a booking. You can customize them with parameters for default values, placeholder text, sizes, CSS styling, and more.
1) Text field – [text]
Single-line text input.
Minimal example:
[text first_name ""]
Example with size, maxlength, placeholder, and CSS class:
[text firstname 10/30 id:fname class:input-lg placeholder:Your_name "John"]
- 10 = size (optional)
- 30 = maxlength (optional)
placeholder:Your_name
— underscores replace spaces
2) Textarea – [textarea]
Multi-line text area.
Minimal example:
[textarea comments ""]
Example with columns, rows, placeholder:
[textarea details 40/5 placeholder:Enter_details_here]
- 40 = columns (optional)
- 5 = rows (optional)
placeholder:Enter_details_here
— underscores replace spaces
3) Select box – [selectbox]
Dropdown menu for single choice.
Overview & option values (Title@@Value)
Each option has a display title and an optional stored value in Title@@Value
format. If no
@@Value
is given, the title is used as value.
Minimal example:
[selectbox service "Cleaning" "Consultation" "Other"]
Example with default value and custom IDs/classes:
[selectbox service default:CONSULT id:svc class:input-md
"Cleaning@@CLEAN" "Consultation@@CONSULT" "Other@@OTHER"]
4) Checkbox – [checkbox]
Multiple selectable options (user can choose several).
Overview & option values (Title@@Value)
Same Title@@Value
format as select boxes. Note: The default:
parameter supports only a single value for checkboxes.
Minimal example:
[checkbox extras "WiFi" "Parking" "Breakfast"]
Example with default and stored values:
[checkbox extras default:opt_wifi
"WiFi@@opt_wifi" "Parking@@opt_parking" "Breakfast@@opt_breakfast"]
5) Radio buttons – [radio]
List of mutually exclusive options (user picks one).
Overview & option values (Title@@Value)
Same Title@@Value
format as select boxes. Use default:
with the stored value you want pre-selected.
Minimal example:
[radio gender "Male" "Female"]
Example with default and stored values:
[radio gender default:option_b "Option A@@option_a" "Option B@@option_b"]
6) Captcha – [captcha]
Generates a built-in anti-spam verification code.
Minimal example:
[captcha]
7) Submit button – [submit]
Button to send the booking form.
Minimal example:
[submit "Send Booking"]
Example with ID and class:
[submit id:submit-btn class:btn-primary "Book Now"]
8) Additional field parameters
id:HTMLID
— custom HTMLid
attribute.class:CSS_CLASS
— custom CSS class for styling.placeholder:Your_text
— for text/textarea; use underscores for spaces.use_label_element
— wraps inputs in<label>
.label_first
— shows label before input (for radio/checkbox).- Size & maxlength:
size/maxlength
for text;cols/rows
for textarea.
9) Using “Content of booking fields data” form
This form is located at the bottom of WP Booking Calendar → Settings → Booking Form → Booking Form Fields (right after the booking form configuration form).
It defines how booking data appears in:
- The “Booking Data” column on the booking listing page.
- Email templates when you use the
[content]
shortcode.
Rules:
- Use
[field_name]
to insert the value of a specific booking form field. - You can use HTML for formatting (e.g.,
<b>
,<br>
), but avoid heavy layouts. - Each
[field_name]
must match the field name from your booking form configuration above.
Example:
<div class="standard-content-form">
<b>First Name</b>: <f>[name]</f><br>
<b>Last Name</b>: <f>[secondname]</f><br>
<b>Email</b>: <f>[email]</f><br>
<b>Phone</b>: <f>[phone]</f><br>
<b>Adults</b>: <f>[visitors]</f><br>
<b>Children</b>: <f>[children]</f><br>
<b>Details</b>: <f>[details]</f>
</div>