Form builder

Documentation Menu

The form builder

Check out our video tutorial for creating and setting up a form.

The form builder is a tab on the Edit Form page. The page is split into two columns. On the left, you have the Form and on the right, you have the available form fields that you can add to the form.

To add a form field to the form builder, simply click on it.

The form fields

Form fields are split into 3 categories.

Basic Form Elements

Text Field A regular field where the user can enter text.
Email Field An email field that will check if a valid email address is entered.
Phone Field A phone number field that will check if a valid phone number is entered.
Textarea Field A field where the user can enter multiple lines of text.
Dropdown Field A drop down field where the user can select one value from a list.
Checkbox Field A list with checkboxes where the user can select one or more options.
Radio Field A list with radio buttons where the user can select one option from the list.
Number Field A field that only allows numeric values to be entered.

Advanced Form Elements

HTML Field A field where you can enter HTML code. This can be used to improve the form layout or visually split it into multiple sections
Datepicker Field A field that opens a date picker when clicked. This does not replace or affect the date selection from the calendar.
Hidden Field A hidden text field that will not appear in the form. You can use this to add custom text or populate it dynamically
Captcha Field A Google reCaptcha field to help prevent spam. To use this you will have to add the reCaptcha API keys in the settings page.
Consent Field A consent checkbox, which allows you to link the text to your terms and conditions page. This field is always required.
Signature Field A signature field added by the Contracts add-on. The customer can sign and you can add his signature to the contract PDF. Only available if the Contracts add-on is installed.

Pricing Form Elements

All the fields in this section are related to the payment. They can be used to add additional services or charges to the form, affecting the final price of the booking.

The pricing form fields are only visible if Pricing is enabled from the plugin’s Settings page

Product Field A hidden field that adds a mandatory cost to the booking, eg. a Cleaning Fee.
Product Number Field Same as the simple number field, but it allows you to assign a price to it and multiply that price with the number in the input field.
Product Dropdown Field Same as the simple dropdown field, but it allows you to assign a price to each option.
Product Checkbox Field Same as the simple checkbox field, but it allows you to assign a price to each option.
Product Radio Field Same as the simple radio field, but it allows you to assign a price to each option.
Security Deposit Field Add a refundable security deposit to the booking. Only available if the Security Deposit option is enabled in the Settings page.
Coupon Field A field for entering the coupon code. This is only available if the Discounts & Coupons add-on is installed.
Inventory Field A dropdown field to allow the customer to select how many slots they want to book. This is only available if the Inventory add-on is installed.
Total Field A table with all the line items and the total price of the order, similar to a shopping cart.
Payment method Field A field for selecting the payment method. This displays all active payment methods.

Conditional Logic

For some fields, you can apply conditional logic. This means you can show or hide this field based on the values of other form fields.

Form field options

Once a field is added, you can click on it and it will open the field’s options.

Basic Options

Label The form field label
Required Whether or not the field requires the customer to enter a value or it can be left blank.
Options Available for Dropdown, Checkbox, and Radio fields. A list of options for the customer to select from. Pricing fields that have options will have an extra field for assigning a price to each value.
Price Calculation Available for Pricing fields only. How to calculate the price: per day or per booking.

Advanced Options

Placeholder A placeholder text that appears in the field
Default Value A default value that will be used to pre-fill the field
Description A short description that will appear below the form field
Layout The layout of the field. Can be Full width, or half-width aligned to the left or right. Useful for displaying long forms in columns.
Custom Class Add a custom CSS class to the field. Useful if you want to apply custom styling to the form
Multiplication Available only for Pricing fields. Allows you to select another form field to multiply the price by its value.
Custom “Total” Label Available only for Pricing fields. Replaces the field value line item in the “Total” field with a different value.
Date Format Available only for the Datepicker field. Changes the format of the date.
Hide Label An option to hide the field label. Works well in combination with the Placeholder option
Dynamic Population Allows the field to be dynamically populated

Translations

If you have translations enabled, here you will see a copy of all the Basic and Advanced fields that can be translated.

On the front-end, the form will look like this:

 

Was this article helpful?

Yes (6) No

We're sorry to see this article wasn't as helpful as we hoped it would be. Please let us know what you were looking for so that we can improve this documentation page.

Full CTA BG
Is WP Booking System a good fit for you?

Tell us about your business activity & plugin requirements and we'll let you know if WP Booking System is right for you.

Have a support question? Please use this form instead.