How to Create a Booking Form

Navigate to the PayPal developer’s site, log in to your account, and copy the Client ID and Secret Key data.

For an in-depth understanding of how to obtain the Client ID and Secret Key data, read the How to Enable and Set Up Payment Gateways tutorial.

Then, enter your WordPress website and move to the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab.

Activate the Enable Gateways and Enable Test Mode toggles. This action sets the sandbox mode to simulate transactions during payment processing.

Once activated, these toggles enable the PayPal Gateway Api section with two fields: the Client ID and Secret Key fields. 

Paste the copied data to the Client ID and Secret Key fields.

Once completed, press the “Save” button.

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

The “Plain” Booking mode is set by default.

Select the 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.

Such settings can also be adjusted during the booking setup.

In this case, we used the previously created “Booking Orders” and “Rooms” CPTs built by the JetEngine plugin to store the booking orders and as the booking instances.

The “Booking Orders” CPT includes the same fields that the form for booking will have (i.e., the First Name, Last Name, Guests, and more fields), except the Check-in/Check-out dates field.

For an in-depth understanding of the main CPT features, read the How to Create Custom Post Types in WordPress tutorial.

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;
• clicked the asterisk sign on the field’s toolbar to make it required for filling.

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;
• clicked the asterisk sign on the field’s toolbar to make it required for filling.

Add the Number Field

We added the Number Field to allow users to manually input the number of guests. 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 Column

If needed, add the Column 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, then typed the numerical values into the VALUE field (in this case, the “15” text). The CALCULATED fields were left empty because data 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 save the options and 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, whereas the FIELD NAME field will be filled in 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.

note text=’The JetFormBuilder plugin has embedded booking macros for flexible pricing management, including seasonal prices, rates, and outlet prices. In particular, the booking item price is multiplied by the number of days/nights specified in the Check-in/Check-out dates field.’

Customize the Submit Button

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

Finally, press the “Publish/Update” button.

Unfold the Gateway Setting block of the JetForm settings. Tick the “PayPal CheckOut” option and press the “Edit” button to open the Edit PayPal Checkout Settings pop-up.

Activate the Use Global Settings toggle in the Edit PayPal Checkout Settings pop-up. Then, the CLIENT ID and SECRET FIELDS will be filled in automatically and will display the data entered in the Client ID and Secret Key fields of the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab.

Click the “Sync Action Token” button. Once synchronization is completed, the text on this button turns to “Access Token updated” and the CURRENCY CODE and PRICE/AMOUNT FIELD.

In this tutorial, we typed the “USD” text to specify the used currency and selected the added “Total” Calculated Field accordingly.

More details on getting payments in different currencies can be found in the Currency codes tutorial.

Press the “Update” button in the pop-up to save the settings.

Set the “Save Form Record” Post Submit Action

Navigate to the JetForm settings and unroll the Post Submit Actions tab. The “Save Form Record” option is set by default. This option allows for collecting and managing data via the JetFormBuilder Dashboard.

Read the How to Use Save Form Record Action And Manage Form Submissions tutorial for an in-depth understanding of the “Save Form Action” Post Submit Action features and settings.

Set the “Insert/Update Post” Post Submit Action

Press the “Add Action” button and select the “Insert/Update Post” option in the drop-down menu.

Next, press the “pencil” icon to edit this action. A pop-up window will appear, allowing you to select the necessary POST TYPE (in this case, the “Booking Orders” CPT) and add the submitted information from the form. The POST STATUS is set to “Published,” which means that this status will be set for all created “Booking Orders” CPT posts.

Finally, we navigated to the FIELDS MAP block of this pop-up, which contains the fields of the enlisted form and drop-down lists near them. Then we selected the “Post Meta” option in the drop-down lists, chose the “Booking Orders” CPT field, which corresponds to each form’s field, and typed the “Booking Orders” meta field names into the appeared bars. 

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

Then, click the “criss crossed lines” icon under the “Insert/Update Post” Post Submit Action to open the Edit Action Conditions & Events pop-up. Click the Events match tab in this pop-up and select the “GATEWAY.SUCCESS” event in the drop-down list.

Finally, press the “Update” button to save the event and close the Edit Action Conditions & Events pop-up.

Set the “Apartment Booking” Post Submit Action

Press the “New Action” button and pick the “Apartment Booking” option from the drop-down list.

Also, press the “pencil” icon to edit this action.

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;

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

As it was for the “Insert/Update Post” Post Submit Action, click the “criss crossed lines” icon under the “Apartment Booking” Post Submit Action and set the “DEFAULT.PROCESS” Event in the Edit Action Conditions & Events pop-up. 

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.

Press the “New Action” button and select the “Send Email” option in the drop-down menu. Press the “pencil” icon to open the “Send Email” settings pop-up.

Pick the “Email from submitted form field” MAIL TO 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. 

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

Click the “criss crossed lines” icon under the “Send Email” Post Submit Action and set the “GATEWAY.SUCCESS” Event in the Edit Action Conditions & Events pop-up. 

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

The built form is available for adding to the single pages in the Elementor and Gutenberg editors or the Bricks theme. Here, we develop a single page to be edited in Elementor.

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

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

Design the single page according to your needs. Then, drag and drop the JetForm widget to the required location. 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 and press the “Book a Stay” button.

Once completed, you will be redirected to the PayPal page with the proposition to pay for the booking.

After completing the payment, you will get an email with the purchase details.

Email

Then, enter your mailbox and check if you received the email.

JetFormBuilder Payments

Return to your site. Then, navigate to the WordPress Dashboard > JetFormBuilder > Payments path. The JetFormBuilder Payments tab collects all payments and their data.

Hover over the payment’s name and press the “View” link. Then, observe the payment 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 status. 

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

CPT posts

To check how the form creates the pre-specified CPT posts, navigate to the appropriate tab of the WordPress Dashboard (Booking Orders tab in this case). Then, unroll the created post.

Booking tab

The JetBooking plugin collects all orders in the WordPress Dashboard > Booking tab. Press the “Info” icon to unroll the booking data or the “Edit” button to amend something. 

That’s it. Now you know how to build booking forms using the JetFormBuilder and JetEngine plugins, manage the form’s Post-Submit Actions to add CPT posts for recording the order data, sending emails, and providing payment via a gateway on your WordPress website.

JetEngine Booking Form (Legacy)

Activate the Forms (Legacy) toggle

Proceed with creating a booking form using the JetEngine plugin. First, navigate to the WordPress Dashboard > JetEngine > JetEngine > Modules and enable the Forms (Legacy) toggle. 

Press the “Save” button.

Then, move to the newly-appeared Forms tab in the JetEngine dashboard and unroll this tab. Press the “Add New” button on the top of the tab to create a new form.

Add Fields to the Form

As for our particular case, we’ve created a form called Form for Room. Let’s overview it closer. For our tutorial, we created such fields as Number of People, which could be selected by the visitor, First Name and Last Name, and e-mail.

For more details about using the form’s functionality, read the How to build a form layout tutorial.

We added the Check-in/check-out dates field to the form and set the “Separate fields for check in and check out dates” option for Layout, “Inline” Fields position, added field labels and placeholders, picked the Date format, Date field separator, and First date of the week, as well as typed the field’s Name (in this case, the “Booking Dates”).  

Once completed, press the “Apply Changes” button.

Keep the Hidden field in the booking form

By default, the booking form creates a hidden field called post_id. Don’t delete it, as we will need it further. 

In addition, we inserted the Post Title and Order ID Hidden fields.

Set the Insert/Update Post notification

Let’s move to set up the booking form’s Notifications Settings block.

The “Send Email” Notification is set by default. We will adjust this notification later.

Add a new notification and choose the Insert /Update Post, which means that the information from the submitted form will be added to the CPT we’ll specify. Then, set the Post Type for collecting the order data (the “Orders” CPT, in this case).

Below, you can see the Fields Map, which stands for pulling the meta fields from the created CPT to which we want the information to be added. As for the “Orders” CPT, we haven’t created any meta fields, which is why we only have post_id.

Save the changes and proceed to add a new notification.

Set the Apartment booking notification

Add another notification and choose the “Apartment booking” Type. Then, in the Apartment ID field, you need to select your post_ID. It’s information from the hidden field.

Next, there’s a field called “Check-in/Check-out date“. Here, you need to select the corresponding field from the form (in this case, the “Booking Dates” field).

Adjust the Send Email notification

Lastly, we need to set up the Send Email notification in the booking form.

It allows sending an email to the customer after they have successfully booked the housing. 

Return to the Send Email notification and unroll it. Then, select the corresponding email option in the Mail to field. 

For more details, follow the How to Adjust Send Email Notification in Form Widget tutorial, where you can learn more about the notification settings.