How to Create a Booking Form with WooCommerce Integration

Navigate to the WordPress Dashboard > Bookings > Settings > General tab. 

The “Plain” Booking mode is set by default.

Select the Custom Post Type (CPT) that will be used for recording and storing the booking orders in the Booking orders post type and the CPT that will be used as booking instances in the Booking instance post type drop-down lists, respectively.

In the given case, we set the “Rooms” CPT as the Booking instance post type and the embed WooCommerce “Orders” CPT as the Booking orders post type.

Then, enable the WooCommerce integration and the Two-way WooCommerce orders sync toggles.

Once selected, the settings will be activated automatically.

Create a form

Navigate to WordPress Dashboard > JetFormBuilder > Add New tab to create a new form. The form will be open in the Gutenberg editor. 

The Form Creation Tutorial details the main fields and settings of the form-building process.

Initially, the form includes the Welcome block, which allows the application of the pre-created or AI-generated forms.

Press the “Start from scratch” button to develop a custom form.

The Welcome block will be closed, and the Hidden Field, the Text Field, and the Action Button will be added by default.

Add the form’s title (“Booking form” in the given tutorial).

In this case, the booking form will contain the Text Field to enter the client’s name, the Check-in/Check-out dates Field to select the booking period, the Number Field to input the number of guests, the Checkbox Fields to tick the needed services, and the Calculated Field to calculate the total price.

Add the Text Fields

In this tutorial, we customized the default Text Field block to get the client’s first name. Then, we added the Text Field twice to get the clients’ last names and their emails.

Finally, we navigated to the Settings block of the Text Field and specified the necessary settings for the Text Fields. In the given case, we:

• unrolled the General tab of the Text Field settings and added the FIELD LABELs; the FORM FIELD NAME fields were filled automatically;
• selected the “Text” and “Email” options from the Field > FIELD TYPE drop-down menu for the appropriate text fields.

Add the Check-in/Check-out dates field

Find the Check-in/Check-out dates field and drag and drop it where needed. Then, navigate to the field settings and adjust them, i.e., the layout or position, labels, placeholders, and more. Here, we set the following:

• typed the field’s label (“Check In and Out Dates” in this case) in the General > FIELD LABEL field;
• picked the “Inline” FIELDS POSITION;
• selected the “Separate fields for check in and check out dates layouts” option in the Field Settings > LAYOUT drop-down list;
• set the date format, date separator, and the first day of the week in the Field Settings > DATE FORMAT, Field Settings > DATE FIELD SEPARATOR, and Field Settings > FIRST DAY OF THE WEEK drop-down lists.

Add the Number Field

We added the Number Field to allow users to input the number of guests manually. To do this, we found the Number Field block and dragged and dropped it into the form. Then, we specified its name, the MIN/MAX VALUEs, and the STEP settings.

Add the Columns

If needed, add the Columns block and divide the layout into some parts of the same or different width.

Add the Checkbox Fields

In this case, we added the Checkbox Fields to allow users to select some of the needed options. 

We dragged and dropped the Checkbox Field into the form. The “Manual Input” setting from the Fill Options from drop-down list is set by default. Here, we added the block field’s name (“MEALS”) in the General > FORM FIELD NAME field. Also, we clicked the “Manage Items” button, and the Edit Manual Options pop-up appeared. 

In this pop-up, we press the “Add new Option” button to add a checkbox variant. 

Fill in the LABEL, VALUE, and CALCULATE fields for each option in the pop-up. In this case, we typed the “Breakfast, USD 15” text into the LABEL field, and the numerical values into the VALUE field (in this case, the “15” text). We left the CALCULATED field empty because the value for calculations will be taken from the VALUE field.

Finally, we pressed the “Add new Option” button to add another row.

Press the “Update” button to close the pop-up.

Next, we added another Checkbox Field to allow the selection of additional services and managed its settings the same way.

Add the Calculated Field

Find the Calculated Field block and drag and drop it where needed. Read the tutorial to learn How to Combine Hidden and Repeater Fields with the Calculated Field.

Type text in the FIELD LABEL field of the settings and the FIELD NAME field will be filled out automatically.

For better usability, add the prefix into the CALCULATED VALUE PREFIX field (here, the “Total price: $” text).

Then, press the “wrench” icon to add the needed fields or macros to the Calculated Field.

Add the formula to calculate. For example, the Calculated Field below multiplies the input data and the embedded booking macros; we added the formula that has the following compounds:

• (%check_in_and_out_dates%*%META::_apartment_price%*%guests%) 一 the number of booking days (the form field “check_in_and_out_dates”), the booking macro that returns the price per 1 day/night, and the number of guests (the form field “guests”) are multiplied.
• (%guests%*%check_in_out_dates%*%meals%) 一 the form fields “guests,” “check_in_and_out_dates,” and “meals” are multiplied.
• (%additional_services%) 一 the form field “additional_services” is added.

Customize the Submit Button

The Action Button is added to the form by default. To customize the button text (here, the “Submit” text) and Button Action Type, navigate to the Settings block and type the necessary text (in this case, we typed the “Book a Stay” text).

Set the “Save Form Record” Post Submit Action Setting

Navigate to the JetForm settings and unroll the Post Submit Actions tab. The “Save Form Record” option is set by default. We left this option enabled to collect data via the JetFormBuilder Dashboard.

Read the tutorial How to Use Save Form Record Action And Manage Form Submissions to learn how to manage the “Save Form Action” Post Submit Action settings.

Set the “Apartment Booking” Post Submit Action

Next, press the “New Action” button and pick the “Apartment Booking” Post Submit Action. Click the “pencil” icon under the “Booking Apartment” Post Submit Action. Then, the pop-up window will appear.

In this case, we selected the following options in the Edit Action pop-up:

• the “post_id” form field as an option from the APARTMENT ID FIELD;
• the “CHECK IN AND OUT DATES” form field as an option from the CHECK-IN/CHECK-OUT DATE FIELD;
• the “TOTAL” form field as the WOOCOMMERCE PRICE FIELD.

Press the “Set up” button on the right of the WOOCOMMERCE ORDER DETAILS field. 

The Set up WooСommerce order details pop-up will open. 

alt text: apartment booking edit action pop-up

The pop-up allows for adding the fields that will be shown in the WooCommerce order. In the given tutorial, the Check in and Check out items will be displayed.

If needed, press the “Add new item” button on the pop-up to add other items (i.e., the “Booked Instance Name,” “Form Field,” etc.) that will be added to the order.

Once you have added all the data, click the “Update” button to close this pop-up. This action will return you to the “Edit Action” pop-up.

Then, we scrolled down the Edit Action pop-up to the WOOCOMMERCE CHECKOUT FIELDS MAP block, which allows you to connect the WooCommerce checkout fields to appropriate form fields.

Here, we unrolled the drop-down list near the billing_first_name field and picked the “FIRST NAME” option that corresponds to the appropriate form’s field. In the same way, we added the “LAST NAME” and the “EMAIL” fields.

Press the “Update” button to save changes and close the pop-up.

Finally, press the “Publish/Update” button to save the form.

Set the “Send Email” Post Submit Action

This is the last Post Submit Action we set for the form. For the previous actions, add another action (the “Send Email” action at this stage) and unroll its settings.

Select the “Email from submitted form field” MAIL TO option and select the needed field from the FROM FIELD drop-down list. Then, type the SUBJECT of the email and choose the “Plain text” CONTENT TYPE. Finally, fill in the CONTENT field and select the form’s fields that will be added to the text.

More details on how to manage the “Send Email” Post Submit Action can be found in the Send Email tutorial.

The built form can be added to single pages in the Elementor and Gutenberg editors or the Bricks theme. 

This tutorial explains How to Create a WordPress Single Post Page Template.

Create a single page for CPT and navigate to the single settings to set it (here, the “Rooms” CPT posts) as a source for this single page via the Post Type drop-down list.

You can drag and drop the JetForm widget to the location you need. Then, you can select the previously built form from the drop-down list and customize its appearance.

Read the How to Display the Booking Form on the Single Post Page to learn how to add booking forms to single pages.

The Form on the front end

Navigate to the front end and check if the form works correctly.

Fill in the form fields.

After pressing the “BOOK A STAY” button, you will be redirected to the checkout page.

Add the needed data and scroll down the form.

Finally, press the “PLACE ORDER” button.

WooCommerce Orders

The next stage is checking the backend data. First, we navigated to the WordPress Dashboard > WooCommerce > Orders tab, which lists all placed orders.

Click the name of the needed order to unroll it and observe the order details.

JetFormBuilder Form Records Data

Since we set the “Save Form Record” Post Submit Action, the JetFormBuilder plugin will save the submitted form data.

Navigate to the WordPress Dashboard > JetFormBuilder > Form Records tab. This tab displays all submitted forms and their statuses. 

To get more details about the submission of the specific form, hover the cursor over its name and press the “Edit” link below it.

Email

Finally, open your mailbox and check if you received the email.