How To Add an Integrated Booking System to WordPress? With 3 Different Forms

Blog
April 20, 2021

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 3 different WordPress contact form builders.

The form builders we’re going to use are Contact Form 7, WP Forms, and Divi Contact Form Module.

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.

Introduction to Date and Time Picker With Installation

The Date and Time Picker is a free WordPress plugin that allows users to create an online booking system using contact form builders.

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.

Thus, it allows website owners to use their contact forms as a reservation tool with Date and Time Picker’s different features.

Features Date and Time Picker includes to create a website reservation system are:

CSS selector — Use a class name or assign field id to turn any input field into a Date and Time Picker for an integrated booking system.
Show calendar on the form.
Show time range with the calendar.
Inline Date and Time Picker field — Keep date calendar and time picker inline every time form gets loaded.
Keep placeholder text.
Prevent keyboard edits.
Disable past dates, specific dates and weekdays.
Create time intervals.
Create date slots.
And a lot more options — To turn your contact form into a highly functional online booking system.

How to Install & Use Date and Time Picker to Create an Integrated Booking System

Step 1: Search for Date and Time Picker and Install It

To install Date and Time Picker on your site, first go to Plugins → Add New

Then search Date and Time Picker, install the following plugin and after installation, activate it.

Once installed and activated, you’d see a new menu in the WordPress Dashboard with the title Input WP, the same as the following screenshot.

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.

Step 2: Create a New Field

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.

Using this editor, you can create four types of Date and Time picker fields,
- Date and Time Picker — It converts the input field into a date calendar and time picker.
- Time Picker — Converts the input field into a time picker only.
- Date Picker — Converts the input field into a date picker calendar only.
- Date Range — Allows you to connect two fields for date range requirements such as check-in and check-out. (Available with Pro Version.)

Select Date and Time picker, and in the CSS Selector option, input a class name. For example, ‘.Bookings.’

Creating a date and time picker field using Date and Time Picker plugin for an integrated booking system

Step 3: Assign Field Rules and Save It

Once given a class name to the CSS Selector, scroll down to explore further settings.

The Date Picker option allows you to disable past dates; create a date slot using Minimum & Maximum Date.
Change date format, advance current days to ‘n’ number of days using Days Offset, disable weekdays and specific dates.

Time Picker options allow you to define time intervals using the Time Step feature. Create time range using Minimum & Maximum Time; change the time format, set a specific time for each weekday and do other more customization.

General settings of Date and Time Picker

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.

Once defined the rules as required, scroll back up to the CSS Selector and click Save.

Then copy the Class name from CSS Selector and move to the next step.

How to Create an Integrated Booking System Using Contact Form 7?

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. After installing it, follow the below steps,

Step 1: Create a New Form

On your WordPress Dashboard, go to the Contact → Add New.

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‘ button to add an input field.

Inserting an input field to the Contact Form 7

Step 2: Assign Class Name

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 option.

Once entered the class name, click Insert Tag. After that, Save the form and move to the next step.

Step 3: Add Shortcode & Preview the Form

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.

Now, on the page, insert Shortcode Block if you’re using Gutenberg editor, and paste the form’s shortcode.

For booking system to appear inserted Shortcode and pasted it

If you’re using Classic Editor, then change its view to Text and then simply paste the code.

Added Integrated Booking System's Form Shortcode in Classic Editor

Once added the code, Update or Publish your page, and view it on the front-end; it will work like the illustration below.

How to Create an Integrated Booking System Using WPForms?

To create an online booking system using WPForms & Date and Time Picker, first, install the free version of WPForms plugin, and after that follow the below steps,

Step 1: Create a New Form Using WPForms for an Online Booking System

Go to the WPForms → Add New.

It opens the WPForms’ UI to create a new form. First, enter your form’s title in the Form Name field, and then click Simple Contact Form to load form builder with basic fields added by default.

Now, the form editor will present you with default and additional fields in the left sidebar that you can add to the form.

Add the Single Line Text field to the form.

Inserting Single Line Text Field into a WPForm

Then click on the field, and go to the Advanced Options.

Here, in the CSS Classes, input the class name you’ve copied from the CSS Selector of Date and Time Picker.

Add Class Name for integrated booking system in WPForms

Then Click Save and close the from editor.

Step 2: Copy the Shortcode and Publish Form

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.

Similarly to Contact Form 7, insert the Shortcode Block, and paste the code you’ve copied. Then Publish or Update the page to get your booking system working on the front-end.

How to Create an Integrated Booking System Using Divi Contact Form Module?

First, install Divi and its Visual Builder; if you haven’t already, then follow the below steps,

Step 1 : Assign Field ID

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 → CSS Selector, and paste input[data-original_id=’field-id’].

Replace field-id with the real field id you’d assign to the Divi Contact Form module’s input field. For example, input[data-original_id=’Bookings‘].
Once defined the field id, click Save, and move to the next step.

Step 2: Create Form With Divi Contact Form Module

Create a new page or edit an existing one.
Click USE DIVI BUILDER,

Then select BUILD FROM SCRATCH by clicking Start Building.

Now, insert a new Row,

After inserting a new row, add the Contact Form Module,

After that click Add New Field,

Adding new field to the Divi Contact Form Module

Now, in the Field ID of the Text settings, input the original field id, i.e., Bookings.

Added Field Id to the Divi Contact Form Module

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.

That’s it; you’ve successfully integrated an online booking system to your WordPress booking website using the Date and Time Picker plugin with 3 different contact form builders.

Upgrade to the Pro version 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.