fbpx

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

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
Add plugin in WordPress
  • 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.
Input WP in WordPress Dashboard
  • 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.
Date and Time picker settings
  • 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.
Settings for Date Picker
  • 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.
Settings for Time Picker
  • 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.
Add Contact Form
  • 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.
Copying Contact Form 7 Shortcode
  • 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.
Integrated Booking System
 

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 WPFormsAdd New.
Add new form using WPForms
  • 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.
WPForms Form Editor
  • 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.
Copying WPForms shortcode
  • 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 WPCSS 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,
Created a new page with Divi Builder
  • Then select BUILD FROM SCRATCH by clicking Start Building.
  • Now, insert a new Row,
Inserted a new row in the Divi Builder
  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *