{"id":18302,"date":"2020-02-14T13:52:22","date_gmt":"2020-02-14T13:52:22","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18302"},"modified":"2026-01-15T09:03:05","modified_gmt":"2026-01-15T09:03:05","slug":"how-to-create-a-booking-form","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-a-booking-form\/","title":{"rendered":"How to Create a Booking Form"},"content":{"rendered":"\n
<\/svg><\/div>
Things to know<\/div>

The \"Plain\" Booking mode<\/strong> of the JetBooking <\/i>plugin allows using forms with or without WooCommerce<\/i> integration. In contrast to the booking form described herein, the WooCommerce<\/i> -integrated booking form allows connecting the booking system to a WooCommerce<\/i> checkout. Read more about such forms in the How to Create a Booking Form with WooCommerce Integration tutorial.Read more about such forms in the How to Create a Booking Form with WooCommerce Integration<\/a> tutorial.<\/p><\/div><\/div>\n\n\n\n

Also, you can apply the \u201cWooCommerce based\u201d Booking mode<\/strong> to expand the WooCommerce<\/em> functionality (e.g., apply seasonal\/weekly prices, rates, additional products, and range prices; to allow selecting predefined additional booking services; to calculate total price considering the input number of guests and ordered services, as well as to manage orders via the JetBooking and WooCommerce<\/em> dashboards). More details are available in the How to Use Booking with WooCommerce Based Mode<\/strong><\/a> tutorial.<\/p>\n<\/div><\/div>\n\n\n\n

Enable the JetFormBuilder\u2019s Gateway Settings<\/strong> <\/h2>\n\n\n\n
\n

Navigate to the PayPal developer\u2019s site<\/a>, log in to your account, and copy the Client ID<\/strong> and Secret Key<\/strong> data.<\/p>\n\n\n\n

For an in-depth understanding of how to obtain the Client ID<\/strong> and Secret Key<\/strong> data, read the How to Enable and Set Up Payment Gateways<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Then, log in to your WordPress website and go to the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways <\/em><\/strong>tab.<\/p>\n\n\n\n

Activate the Enable Gateways<\/strong> and Enable Test Mode<\/strong> toggles. The second action sets the sandbox mode to simulate transactions during payment processing.<\/p>\n\n\n\n

Once activated, these toggles enable the PayPal Gateway API<\/strong> section, which includes two fields: Client ID<\/strong> and Secret Key<\/strong>. Paste the copied data here.<\/p>\n\n\n\n

\"jetformbuilder<\/a><\/div>\n\n\n\n

Once completed, press the “Save<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Enable the JetBooking Settings<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard ><\/em><\/strong> Bookings > Settings > <\/em><\/strong>General<\/em><\/strong><\/a> tab. <\/p>\n\n\n\n

The “Plain” Booking mode<\/strong> is set by default.<\/p>\n\n\n\n

Select the CPT<\/strong> that will be used for recording and storing the booking orders in the Booking orders post type<\/strong> and the CPT<\/strong> that will be used as booking instances in the Booking instance post type<\/strong> drop-down lists, respectively.<\/p>\n\n\n\n

Such settings can also be adjusted during the booking setup<\/strong><\/a>.<\/p>\n\n\n\n

\"enabling<\/a><\/div>\n\n\n\n

In this case, we use the previously created “Booking Orders” and “Rooms” CPT<\/strong>s, built by the JetEngine<\/em><\/a> plugin, to store the booking orders and as the booking instances.<\/p>\n\n\n\n

The “Booking Orders” CPT<\/strong> includes the same fields as the booking form (i.e.,\u00a0First Name<\/strong>,\u00a0Last Name<\/strong>,\u00a0Guests<\/strong>, and more), except for\u00a0<\/span>the Check-in\/Check-out dates<\/strong> field.
To learn more about the main CPT<\/strong> features, read the How to Create Custom Post Types in WordPress<\/a> tutorial.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Booking Form <\/strong><\/h2>\n\n\n\n
\n

In this chapter, we explain how to insert the needed fields, manage their settings, and set Post Submit Actions<\/a>. <\/p>\n\n\n\n

For more details on the main fields and settings of the form-building process, read the Form Creation<\/a> tutorial.<\/p>\n\n\n\n

Configure the form\u2019s field settings<\/strong><\/h3>\n\n\n\n

First, navigate to WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong> to create a new form. The form will be open in the Gutenberg editor. <\/p>\n\n\n\n

Initially, the form includes the Welcome<\/strong><\/a> block, which allows the application of the pre-created or AI-generated forms<\/a>.<\/p>\n\n\n\n

Press the “Start from scratch<\/strong>” button to build a custom form.<\/p>\n\n\n\n

\"jetformbuilder<\/a><\/div>\n\n\n\n

The Welcome<\/strong> block will be closed, and the Hidden Field<\/strong><\/a>, the Text Field<\/strong><\/a>, and the Action Button<\/strong><\/a> will be added by default.<\/p>\n\n\n\n

\"default<\/a><\/div>\n\n\n\n

Add the form’s title (“Booking form” in the given tutorial).<\/p>\n\n\n\n

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

Next, we customize the default Text Field<\/strong> block to get the client’s first name. Then\u00a0we add the\u00a0Text Field<\/strong>\u00a0twice to collect the clients’ last names and email addresses<\/span>.<\/p>\n\n\n\n

Finally, we navigate to the Settings<\/strong> block of the Text<\/strong> Field<\/strong> and specify the necessary settings for the Text Fields<\/strong>. In the given case, we:<\/p>\n\n\n\n