In Booking Calendar Business Large or higher versions, you can define capacity for booking resources and deduct availability based on the selected number of visitors.
Before starting, please check this article about capacity configuration in the Booking Calendar plugin.
Sometimes you may want to show separate fields for Adults and Children, while Booking Calendar still deducts capacity from the total number of visitors.
In the new Form Builder, this can be done by using:
- a visible Adults select field,
- a visible Children select field,
- a hidden Visitors select field,
- a small JavaScript snippet that automatically updates the Visitors field.
The hidden Visitors field is the field used for capacity deduction.
1. Configure fields in the Form Builder
Open WP Booking Calendar > Settings > Form Builder and add these fields:
Adults field
- Field type: Select
- Field name:
adults - CSS class:
adults
Children field
- Field type: Select
- Field name:
children - CSS class:
children
Visitors field
- Field type: Select
- Field name:
visitors - CSS class:
wpbc_hide_field wpbc_visitors_field visitors
Make sure the Visitors field contains all possible total values. For example, if Adults can be from 1 to 4 and Children can be from 0 to 3, then Visitors should contain values from 1 to 7 or higher.
2. Add CSS and JavaScript to the booking page
Add a standard WordPress HTML Block to the page where you inserted the booking form. Then paste this CSS and JavaScript inside that HTML Block:
Paste the following CSS and JavaScript into a WordPress Custom HTML block on the same page where the booking form is inserted:
<style>
.bfb_element:has(.wpbc_hide_field) {
display: none !important;
}
</style>
<script>
jQuery(document).ready(function() {
jQuery('select.adults').on('change', wpbc_set_visitors_number);
jQuery('select.children').on('change', wpbc_set_visitors_number);
wpbc_set_visitors_number();
});
function wpbc_set_visitors_number() {
var s_adults = parseInt(jQuery('select.adults option:selected').val(), 10) || 0;
var s_children = parseInt(jQuery('select.children option:selected').val(), 10) || 0;
var s_visitors = s_adults + s_children;
jQuery("select.visitors option[value='" + s_visitors + "']").prop('selected', true);
var bk_type = jQuery("input[name^='bk_type']").val();
if (typeof(wpbc_show_cost_hints_after_few_seconds) == 'function') {
wpbc_show_cost_hints_after_few_seconds(bk_type);
}
}
</script>3. How it works
When the visitor changes the number of Adults or Children, the JavaScript calculates the total number of visitors and automatically selects the same value in the hidden Visitors field.
For example:
- Adults:
2 - Children:
1 - Hidden Visitors value:
3
Booking Calendar then uses the hidden Visitors value for capacity deduction.
4. Testing with Form Builder export/import
You can test this configuration by importing a prepared Form Builder configuration.
- Open WP Booking Calendar > Settings > Form Builder.
- Open the Debug tab.
- Select the Import sub-tab.
- Paste the exported Form Builder JSON configuration.
- Import it and test the booking form.
Example of prepared Form Builder configuration:
[
{
"page": 1,
"content": [
{
"type": "section",
"data": {
"id": "section-7-1773321976469",
"label": "Section",
"html_id": "",
"cssclass": "",
"col_styles": "[{\"gap\":\"20px\"},{\"gap\":\"33px\"}]",
"columns": [
{
"width": "48.5%",
"items": [
{
"type": "field",
"data": {
"id": "calendar",
"type": "calendar",
"usage_key": "calendar",
"usagenumber": 1,
"resource_id": 1,
"months": 1,
"label": "Select Date",
"min_width": "250px",
"name": "calendar",
"wpbc-cal-init": 1,
"wpbc-cal-loaded-rid": 1
}
},
{
"type": "field",
"data": {
"id": "divider_horizontal",
"type": "divider",
"usage_key": "divider",
"orientation": "horizontal",
"line_style": "solid",
"thickness_px": 1,
"length": "100%",
"align": "center",
"color": "#e0e0e0",
"label": "Divider_horizontal",
"name": "divider_horizontal",
"margin_top_px": 2,
"margin_bottom_px": 2,
"margin_left_px": 2,
"margin_right_px": 2,
"cssclass_extra": "",
"html_id": ""
}
},
{
"type": "field",
"data": {
"id": "selected_dates_hint",
"type": "selected_dates_hint",
"usage_key": "selected_dates_hint",
"prefix_text": "Dates:",
"help": "",
"label": "Dates:",
"name": "selected_dates_hint",
"html_id": "",
"cssclass": ""
}
}
]
},
{
"width": "48.5%",
"items": [
{
"type": "field",
"data": {
"id": "select",
"type": "select",
"usage_key": "select",
"label": "Adults",
"name": "adults",
"min_width": "240px",
"html_id": "",
"cssclass": "adults",
"placeholder": "--- Select ---",
"options": [
{
"label": "1",
"value": "1",
"selected": true
},
{
"label": "2",
"value": "2",
"selected": false
},
{
"label": "3",
"value": "3",
"selected": false
},
{
"label": "4",
"value": "4",
"selected": false
}
]
}
},
{
"type": "field",
"data": {
"id": "select-69q",
"type": "select",
"usage_key": "select",
"label": "Children",
"name": "children",
"min_width": "240px",
"html_id": "",
"cssclass": "children",
"placeholder": "--- Select ---",
"options": [
{
"label": "0",
"value": "0",
"selected": true
},
{
"label": "1",
"value": "1",
"selected": false
},
{
"label": "2",
"value": "2",
"selected": false
},
{
"label": "3",
"value": "3",
"selected": false
}
]
}
},
{
"type": "field",
"data": {
"id": "select-4li",
"type": "select",
"usage_key": "select",
"label": "Visitors",
"name": "visitors",
"min_width": "240px",
"html_id": "",
"cssclass": "wpbc_hide_field wpbc_visitors_field visitors",
"placeholder": "--- Select ---",
"options": [
{
"label": "1",
"value": "1",
"selected": true
},
{
"label": "2",
"value": "2",
"selected": false
},
{
"label": "3",
"value": "3",
"selected": false
},
{
"label": "4",
"value": "4",
"selected": false
},
{
"label": "5",
"value": "5",
"selected": false
},
{
"label": "6",
"value": "6",
"selected": false
},
{
"label": "7",
"value": "7",
"selected": false
},
{
"label": "8",
"value": "8",
"selected": false
}
],
"value_differs": ""
}
},
{
"type": "field",
"data": {
"id": "text-firstname",
"type": "text",
"usage_key": "text-firstname",
"label": "First Name",
"name": "firstname",
"placeholder": "Example: \"John\"",
"required": 1,
"help": "Enter your first name.",
"cssclass": "firstname",
"min_width": "8em",
"html_id": ""
}
},
{
"type": "field",
"data": {
"id": "text-secondname",
"type": "text",
"usage_key": "text-secondname",
"label": "Last Name",
"name": "secondname",
"placeholder": "Example: \"Smith\"",
"required": 1,
"help": "Enter your last name.",
"cssclass": "secondname lastname",
"min_width": "8em",
"html_id": ""
}
},
{
"type": "field",
"data": {
"id": "email",
"type": "email",
"usage_key": "email",
"label": "Email",
"usagenumber": 1,
"name": "email",
"html_id": "",
"cssclass": "",
"required": true,
"help": "Enter your email address."
}
},
{
"type": "field",
"data": {
"id": "text",
"type": "text",
"usage_key": "text",
"label": "Phone",
"name": "phone",
"cssclass": "",
"html_id": "",
"placeholder": "(000) 999 - 10 - 20",
"help": "Enter contact phone number"
}
},
{
"type": "field",
"data": {
"id": "textarea",
"type": "textarea",
"usage_key": "textarea",
"min_width": "260px",
"label": "Details",
"name": "details",
"cssclass": "",
"html_id": ""
}
},
{
"type": "field",
"data": {
"id": "accept_terms",
"type": "accept_terms",
"usage_key": "accept_terms",
"label": "Accept Terms",
"name": "accept_terms",
"required": 1,
"links": [
{
"key": "terms",
"text": "terms",
"link_type": "url",
"destination": "https://server.com/terms/",
"target": "_blank",
"cssclass": ""
},
{
"key": "conditions",
"text": "conditions",
"link_type": "url",
"destination": "https://server.com/conditions/",
"target": "_blank",
"cssclass": ""
}
]
}
}
]
}
]
}
},
{
"type": "section",
"data": {
"id": "section-13-1773062424785",
"label": "Section",
"html_id": "",
"cssclass": "",
"col_styles": "[{\"dir\":\"row\",\"wrap\":\"wrap\",\"jc\":\"flex-end\",\"ai\":\"flex-end\",\"gap\":\"10px\",\"aself\":\"flex-end\"}]",
"columns": [
{
"width": "100%",
"items": [
{
"type": "field",
"data": {
"id": "divider_horizontal-2",
"type": "divider",
"usage_key": "divider_horizontal",
"orientation": "horizontal",
"line_style": "solid",
"thickness_px": 1,
"length": "100%",
"align": "center",
"color": "#e0e0e0",
"label": "Divider_horizontal",
"name": "divider_horizontal-2",
"margin_top_px": 2,
"margin_bottom_px": 2,
"margin_left_px": 2,
"margin_right_px": 2,
"cssclass_extra": "",
"html_id": ""
}
},
{
"type": "field",
"data": {
"id": "submit",
"type": "submit",
"usage_key": "submit",
"usagenumber": 1,
"label": "Send",
"name": "submit",
"cssclass": "wpbc_bfb__btn wpbc_bfb__btn--primary",
"html_id": ""
}
}
]
}
]
}
}
]
}
]
Capacity configuration in the Booking Calendar.
Import / Export booking forms in Booking Calendar.