mega888{"id":1264,"date":"2021-04-20T20:53:39","date_gmt":"2021-04-20T20:53:39","guid":{"rendered":"https:\/\/www.inputwp.com\/?p=1264"},"modified":"2021-04-20T20:53:42","modified_gmt":"2021-04-20T20:53:42","slug":"integrated-booking-system-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.inputwp.com\/blog\/integrated-booking-system-in-wordpress\/","title":{"rendered":"How To Add an Integrated Booking System to WordPress? With 3 Different Forms"},"content":{"rendered":"\n

An integrated booking system in a WordPress site that deals with on-demand and booking based services can provide many different benefits. <\/p>\n\n\n\n

If you’re looking to integrate a booking system to your WordPress site, then in this tutorial, we’re going to show you how you can do it using the Date and Time Picker<\/strong><\/a> plugin with 3 different WordPress contact form builders.<\/p>\n\n\n\n

The form builders we’re going to use are Contact Form 7<\/a><\/strong>, WP Forms<\/a><\/strong>, and Divi Contact Form Module<\/a><\/strong>.<\/p>\n\n\n\n

If you’re using one of the above form builders on your site, you only have to follow the below simple steps. But first, let’s see what’s Date and Time Picker and how you can install it on your WordPress site.<\/p>\n\n\n\n \n\n\n\n

Introduction to Date and Time Picker With Installation<\/strong><\/h2>\n\n\n\n
The Date and Time Picker is a free WordPress plugin that allows users to create an online booking system using contact form builders. <\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
It converts input fields of the contact form into a date calendar and time picker. Customers can pick a date and time to make a reservation in the hotel or an appointment at a beauty salon or dentist. <\/p>\n\n\n\n
Thus, it allows website owners to use their contact forms as a reservation tool with Date and Time Picker’s different features.<\/p>\n\n\n\n \n\n\n\n
Features Date and Time Picker includes to create a website reservation system are:<\/strong><\/h3>\n\n\n\n
CSS selector<\/strong> \u2014 Use a class name or assign field id to turn any input field into a Date and Time Picker for an integrated booking system.<\/li>
Show calendar on the form<\/strong>.<\/li>
Show time range with the calendar<\/strong>.<\/li>
Inline Date and Time Picker field<\/strong> — Keep date calendar and time picker inline every time form gets loaded.<\/li>
Keep placeholder text<\/strong>.<\/li>
Prevent keyboard edits<\/strong>.<\/li>
Disable past dates, specific dates and weekdays.<\/strong><\/li>
Create time intervals<\/strong>.<\/li>
Create date slots<\/strong>.<\/li>
And a lot more options<\/strong> — To turn your contact form into a highly functional online booking system.<\/li><\/ul>\n\n\n\n \n\n\n\n
How to Install & Use Date and Time Picker to Create an Integrated Booking System<\/strong><\/h3>\n\n\n\n \n\n\n\n
Step 1: Search for Date and Time Picker and Install It<\/strong><\/h4>\n\n\n\n
To install Date and Time Picker on your site, first go to Plugins <\/strong>\u2192 Add New<\/strong><\/li><\/ul>\n\n\n\n
$\"Add$ <\/figure><\/div>\n\n\n\n
Then search Date and Time Picker, install the following plugin and after installation, activate it.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Once installed and activated, you’d see a new menu in the WordPress Dashboard with the title Input WP<\/strong>, the same as the following screenshot.<\/li><\/ul>\n\n\n\n
$\"Input$ <\/figure><\/div>\n\n\n\n
Move to the next step to create a date and time picker field that would later convert the input field in a date calendar and time picker for an integrated booking system.<\/li><\/ul>\n\n\n\n \n\n\n\n
Step 2: Create a New Field<\/strong><\/h4>\n\n\n\n
To create a new field for the date calendar and time picker, go to the Input WP. It will open a field editor with different rules and options. <\/li><\/ul>\n\n\n\n
$\"Date$ <\/figure><\/div>\n\n\n\n
Using this editor, you can create four types of Date and Time picker fields,
Date and Time Picker<\/strong> — It converts the input field into a date calendar and time picker.<\/li>
Time Picker<\/strong> — Converts the input field into a time picker only.<\/li>
Date Picker<\/strong> — Converts the input field into a date picker calendar only.<\/li>
Date Range<\/strong> — Allows you to connect two fields for date range requirements such as check-in and check-out. (Available with Pro Version<\/a><\/strong>.)<\/li><\/ul><\/li><\/ul>\n\n\n\n
Select Date and Time picker, and in the CSS Selector<\/strong> option, input a class name. For example, ‘.Bookings<\/strong>.’<\/li><\/ul>\n\n\n\n
$\"Creating$ <\/figure><\/div>\n\n\n\n \n\n\n\n
Step 3: Assign Field Rules and Save It<\/strong><\/h4>\n\n\n\n
Once given a class name to the CSS Selector, scroll down to explore further settings. <\/li><\/ul>\n\n\n\n
$\"Settings$ <\/figure><\/div>\n\n\n\n
The Date Picker option allows you to disable past dates; create a date slot using Minimum<\/strong> & Maximum<\/strong> Date<\/strong>. <\/li>
Change date format, advance current days to ‘n’ number of days using Days Offset<\/strong>, disable weekdays and specific dates.<\/li><\/ul>\n\n\n\n
$\"Settings$ <\/figure><\/div>\n\n\n\n
Time Picker options allow you to define time intervals using the Time Step feature. Create time range using Minimum<\/strong> & Maximum<\/strong> Time<\/strong>; change the time format, set a specific time for each weekday and do other more customization.<\/li><\/ul>\n\n\n\n
$\"General$ <\/figure><\/div>\n\n\n\n
The General setting provides you with the option to display the date and time picker inline, show field placeholder text, change language and more options for an integrated booking system.<\/li><\/ul>\n\n\n\n
Once defined the rules as required, scroll back up to the CSS Selector and click Save<\/strong>.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Then copy the Class name from CSS Selector and move to the next step.<\/li><\/ul>\n\n\n\n \n\n\n\n
How to Create an Integrated Booking System Using Contact Form 7<\/strong>?<\/h2>\n\n\n\n
To create an integrated booking system on your WordPress site using Date and Time Picker and Contact Form 7, first, you need to install Contact Form 7<\/a>. After installing it, follow the below steps,<\/p>\n\n\n\n \n\n\n\n
Step 1: Create a New Form<\/strong><\/h3>\n\n\n\n
On your WordPress Dashboard, go to the Contact <\/strong>\u2192 Add New<\/strong>.<\/li><\/ul>\n\n\n\n
$\"Add$ <\/figure><\/div>\n\n\n\n
It will open the form editor, where you can add fields for your integrated booking system’s form. But first, input its title and then add click the ‘text<\/strong>‘ button to add an input field.<\/li><\/ul>\n\n\n\n
$\"Inserting$ <\/figure><\/div>\n\n\n\n \n\n\n\n
Step 2: Assign Class Name<\/strong><\/h3>\n\n\n\n
Upon inserting an input field, a popup will appear to enter details about the field. Here, you need to paste the Class name you’ve copied before into the Class Attribute<\/strong> option.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Once entered the class name, click Insert Tag<\/strong>. After that, Save<\/strong> the form and move to the next step.<\/li><\/ul>\n\n\n\n \n\n\n\n
Step 3: Add Shortcode & Preview the Form<\/strong><\/h3>\n\n\n\n
As soon as you save the form, a shortcode will appear under the form title. Copy it, and go to the page or post where you want to display the integrated booking system.<\/li><\/ul>\n\n\n\n
$\"Copying$ <\/figure><\/div>\n\n\n\n
Now, on the page, insert Shortcode Block<\/a><\/strong> if you’re using Gutenberg editor, and paste the form’s shortcode.<\/li><\/ul>\n\n\n\n
$\"For$ <\/figure><\/div>\n\n\n\n
If you’re using Classic Editor, then change its view to Text<\/strong> and then simply paste the code.<\/li><\/ul>\n\n\n\n
$\"Added$ <\/figure><\/div>\n\n\n\n
Once added the code, Update<\/strong> or Publish<\/strong> your page, and view it on the front-end; it will work like the illustration below.<\/li><\/ul>\n\n\n\n
$\"Integrated$ <\/figure><\/div>\n\n\n\n \n\n\n\n
How to Create an Integrated Booking System Using WPForms<\/strong>?<\/h2>\n\n\n\n
To create an online booking system using WPForms & Date and Time Picker, first, install the free version of WPForms plugin<\/a>, and after that follow the below steps,<\/p>\n\n\n\n \n\n\n\n
Step 1: Create a New Form Using WPForms for an Online Booking System<\/strong><\/h3>\n\n\n\n
Go to the WPForms<\/strong> \u2192 Add New<\/strong>. <\/li><\/ul>\n\n\n\n
$\"Add$ <\/figure><\/div>\n\n\n\n
It opens the WPForms’ UI to create a new form. First, enter your form’s title in the Form Name<\/strong> field, and then click Simple Contact Form<\/strong> to load form builder with basic fields added by default.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Now, the form editor will present you with default and additional fields in the left sidebar that you can add to the form.<\/li><\/ul>\n\n\n\n
$\"WPForms$ <\/figure><\/div>\n\n\n\n
Add the Single Line Text<\/strong> field to the form.<\/li><\/ul>\n\n\n\n
$\"Inserting$ <\/figure><\/div>\n\n\n\n
Then click on the field, and go to the Advanced Options<\/strong>.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Here, in the CSS Classes<\/strong>, input the class name you’ve copied from the CSS Selector of Date and Time Picker.<\/li><\/ul>\n\n\n\n
$\"Add$ <\/figure><\/div>\n\n\n\n
Then Click Save<\/strong> and close the from editor.<\/li><\/ul>\n\n\n\n \n\n\n\n
Step 2: Copy the Shortcode and Publish Form<\/h3>\n\n\n\n
<\/p>\n\n\n\n
After saving the form, you’ll see the form in the Form Overview window. Copy the shortcode and go to the page or post where you want to display the reservation system.<\/li><\/ul>\n\n\n\n
$\"Copying$ <\/figure><\/div>\n\n\n\n
Similarly to Contact Form 7, insert the Shortcode Block<\/strong>, and paste the code you’ve copied. Then Publish<\/strong> or Update<\/strong> the page to get your booking system working on the front-end.<\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n \n\n\n\n
How to Create an Integrated Booking System Using Divi Contact Form Module?<\/strong><\/h2>\n\n\n\n
First, install Divi and its Visual Builder<\/a>; if you haven’t already, then follow the below steps,<\/p>\n\n\n\n \n\n\n\n
Step 1 : Assign Field ID<\/strong><\/h3>\n\n\n\n
To create an integrated booking system in WordPress using Divi Contact Form Module & Date and Time Picker, we have to define Field ID to the CSS Selector. We can’t use the class name, So, to do that, first, go to the Input WP<\/strong> \u2192 CSS Selector<\/strong>, and paste input[data-original_id=’field-id’]<\/strong><\/span>.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Replace field-id<\/strong> with the real field id you’d assign to the Divi Contact Form module’s input field. For example, input[data-original_id=’<\/span>Bookings<\/span>‘]<\/span><\/strong>.<\/li>
Once defined the field id, click Save<\/strong>, and move to the next step.<\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n \n\n\n\n
Step 2: <\/strong>Create Form With Divi Contact Form Module<\/h3>\n\n\n\n
Create a new page or edit an existing one.<\/li>
Click USE DIVI BUILDER<\/strong>,<\/li><\/ul>\n\n\n\n
$\"Created$ <\/figure><\/div>\n\n\n\n
Then select BUILD FROM SCRATCH<\/strong> by clicking Start Building<\/strong>.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Now, insert a new Row<\/strong>,<\/li><\/ul>\n\n\n\n
$\"Inserted$ <\/figure><\/div>\n\n\n\n
After inserting a new row, add the Contact Form Module<\/strong>,<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
After that click Add New Field<\/strong>, <\/li><\/ul>\n\n\n\n
$\"Adding$ <\/figure><\/div>\n\n\n\n
Now, in the Field ID<\/strong> of the Text settings, input the original field id, i.e., Bookings.<\/li><\/ul>\n\n\n\n
$\"Added$ <\/figure><\/div>\n\n\n\n
Here, you don’t have to paste the whole code we’ve entered in the CSS Selector. After entering the field id, give your field a title and save it and save the form.<\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
That’s it; you’ve successfully integrated an online booking system to your WordPress booking website using the Date and Time Picker<\/strong><\/a> plugin with 3 different contact form builders.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Upgrade to the Pro version <\/a>of Date and Time Picker to add more useful features to your integrated booking system. Such as Date range, Google Calendar integration, Enhanced styling options and more.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
An integrated booking system in a WordPress site that deals with on-demand and booking based services can provide many different benefits. If you’re looking to integrate a booking system to your WordPress site, then in this tutorial, we’re going to show you how you can do it using the Date and Time Picker plugin with […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/posts\/1264"}],"collection":[{"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/comments?post=1264"}],"version-history":[{"count":0,"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/posts\/1264\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/media?parent=1264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/categories?post=1264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inputwp.com\/wp-json\/wp\/v2\/tags?post=1264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Step 1: Create a New Form<\/strong><\/h3>\n\n\n\nOn your WordPress Dashboard, go to the Contact <\/strong>\u2192 Add New<\/strong>.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n

Step 1: Create a New Form Using WPForms for an Online Booking System<\/strong><\/h3>\n\n\n\nGo to the WPForms<\/strong> \u2192 Add New<\/strong>. <\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n