Contact Form 7 Booking

Estimated reading: 46 minutes 2617 views

Purpose

Contact Form 7 Booking plugin provides a platform to manage appointments via google calendar. Appointments can be booked online from any listed category of services along with their type. Once a customer visits on their appointment so email will get routed to them and logs will be registered in the admin panel.

Installation Guide

Log in to your WordPress Admin Panel.
Navigate to the WordPress Admin Dashboard → Plugins → Add New.

Click on the Upload Plugin button on the top left corner of your screen.
Next, click the Choose file button in the below box.
Select the zip file that you have downloaded and upload it.
Click on the Activate Plugin button.

Prerequisite:

Contact Form 7 plugin needs to be installed & active in order to use the Contact Form 7 Booking plugin.
You can easily get contact form 7 from WordPress. (https://wordpress.org/plugins/contact-form-7/).

Features

Easy installation and configuration
The proficient and simple booking process
Unlimited staff, services categories, and their time slots can be added
Admin can add locations for Services
Admin can assign locations to Staff
Customers can select any ‘staff’ from the list with whom service will be delivered
Time and day can be selected from available days of selected staff
Booked Appointment can be seen in Calendar as well as in Appointment
Holidays can be marked against every individual staff
Payment will get done through the ‘payment gateway’. Contact Form 7 Square by WPExperts.io add-ons can be utilized as payment gateway activation
Customers can add appointments to Google Calendar
Synchronize all your appointments to Google Calendar
Conditional Logic.
‘Emails triggers’ to admin , customers and staffs on specified cases
Also Mobile Responsive works well on Mobile and Tablet devices.
The admin OR staff can set the time zones for the specific staff so that the customer can book the appointment according to their time zones.
Timeslots can be set for all the days of the week for the staff.
The admin OR staff can change the appointment status.
The admin can assign the off days of the staff.
Added Price and Appointment policies in General Settings
Added Display tab in settings for calendar display color in General Settings
Added Full Day Appointment.
Allow Decimal in Price.
Added Email Configuration in General Settings

Getting Started

Dashboard

Navigate to WordPress Admin Dashboard → CF Booking → Dashboard.

Now you’re on the Dashboard page.
All the Reports will appear on this page.

Forms

Navigate to WordPress Admin Dashboard → Contact → Contact Forms.

Now you’re on the Forms page.
Click on Add New or Edit the existing form.

Click on the Edit button to edit in existing form.

Here admin can see the basic template of form and can set them according to their requirements.

Notice: During appointment booking from Front-End, you need to add the following text fields with the name “cfb-fname” “cfb-lname” “cfb-email” and “cfb-phone” which will connect with customer details in booking. Make sure cfb-fname and cfb-email are mandatory fields for creating a customer.

Navigate and click on Booking in form, a pop-up will appear select according to your requirements.
Navigate and click on Save.

Navigate to WordPress Admin Dashboard → Pages → Add New.

A new page would open.
Add the Title of the page.

Click on the sign ➕ to add blocks.
Select the Contact Forms 7 element.

Now select the form from the dropdown menu.

Once done, click on the Publish button.

Once done, click on the Publish button.

Front-End Impact

Navigate to the website.
Go to the Contact Form Booking page.

Select the Location, Service, and Staff according to the configuration mentioned above.
Now, a calendar will appear. Select the date on the calendar accordingly.
Now select the slot of a specific date.
The total amount will appear in the Total section.
Once done, click on the Submit button.

Once the Booking is successful, a message will appear on the form page.

Configuration

Service Category

Navigate to WordPress Admin Dashboard → CF Booking → Service Categories.

Now you’re on the Service Category page.

Add Service Category

On the page’s left hand, the Administrator can Add New Category.

Enter the Name and Slug of the category.
Click on the Add New Category button

Once done, a notification will appear at the top titled “Item added”.

Also, the Category added will appear on the right-hand of the page.

Edit Service Category

Click on the Quick Edit button to change the Name and Slug of the category.

Click on the Quick Edit button to change the Name and Slug of the category.

Delete Service Category

Click the Delete button to remove the category.

Once done, a popup will appear at the top of the page.
Click on the OK button to delete the category.

The Service Category is deleted successfully.

Search Service Category

A search bar is present below the Category heading.

Enter the name of the Service Category in the search bar and click on the icon or press the Enter button.

Once done, all the service categories will appear according to the keyword entered in the search bar.

Location

Navigate to WordPress Admin Dashboard → CF Booking → Location.

Now you’re on the Location page.

Add Location

Click on the Add Location button.

A Location Details popup will appear.

Fill in the required fields and click on the Save button.

Once the operation is successful, the location will be added to the Location page.

Edit Location

Click on the Edit button in the Actions column.

Change any field according to your requirement.
Once done, click on the Save button.

Once the operation is successful, the location will be updated on the Location page.

Delete Location

Click on the Delete button in the Actions column against any specific location.

A popup will appear.
Click on the Yes, delete it! button.

A popup will appear indicating that the location has been deleted successfully.
Click on the OK button.

Click on the OK button.
Now you’ll be on the Location page and see that the deleted location is now removed.

Search Location

A search bar is present below the Location heading.

Enter the location’s name in the search bar, click on the icon, or press the Enter button.

Once done, all the locations will appear according to the keyword entered in the search bar.

Service

Navigate to WordPress Admin Dashboard → Contact Form Booking → Service.

Now you’re on the Service page.

Add Service

Click on the Add Service button.

A Service Details popup will appear.

Add the Service Name.
Add the Service Price.
Select the Service Category from the dropdown menu.

Fill in the required fields and click on the Save button.

Note: If the Location section is left empty, then it will select all locations set by the admin in Location Settings.

Once the operation is successful, the location will be added to the Service page.

Edit Service

Click on the Edit button in the Actions column.

A Service Details popup will appear.

Change any field according to your requirement.
Once done, click on the Save button.

Once the operation is successful, the service will be updated on the Service page.

Delete Service

Click on the Delete button in the Actions column against any specific service.

A popup will appear.
Click on the Yes, delete it! button.

A popup will appear indicating that the service has been deleted successfully.
Click on the OK button.

Click on the OK button.
Now you’ll be on the Service page and see that the deleted service is now removed.

Search Service

A search bar is present below the Service heading.

Enter the service’s name in the search bar, click on the icon, or press the Enter button.

Once done, all the services will appear according to the keyword entered in the search bar.

Staff

Navigate to WordPress Admin Dashboard → Contact Form Booking → Staff.

Now you’re on the Staff page.

Add Staff

Click on the Add Staff button.

A popup will appear.
There are five tabs in the popup.
Details
Services
Timings
Add Holidays
Remove Holidays

Details

The first tab is the Details tab.
In the Details tab, all the fields about the users are mentioned.

Fill in all the fields according to your requirement.
Enter the First Name.
Enter the Last Name.
Enter the Email.
Enter the Password.
Enter the Phone.
Enter the Profession.
Select the Location. Multiple locations can be selected in the Location field. If specific locations are selected, the specific staff will only be available for specific locations. If no location is selected, specific staff will be available for all locations.
Enter the Note.

Services

The second tab is the Services tab.
In the Services tab, all the services will be mentioned that were configured in the WordPress Admin Dashboard → Contact Form Booking → Services section.

Checkmark the Services checkbox.

The Administrator can also override the Service Price only for specific staff. If not, the price would be the same as configured in the Service section.

Timings

The third tab is the Timings tab.

Select Time Zone

Navigate to the Select Time Zone option.
In the Select Time Zone option, select the city from the dropdown menu to set the timezone.

NOTE: If no Timezone is selected, it will take the WordPress timezone, which is set from WordPress Admin Dashboard → Settings→ General.

Booking Type

Now navigate to the Booking Type option.
Click on the Booking Type option.

There are two sub-options available:

Custom Slots
Full Day

1. Custom Slots – Timings

Select Custom Slots in the Booking Type option.
When Custom Slots are selected, the Time Slot Duration, Time Interval, Start Time, End Time, and Add Break fields will be activated.

Time Slot Duration

Navigate to the Time Slot Duration option.
Enter the time slot in minutes.
For Example: If we enter 180, it would mean 180 Minutes = 3 Hours.

Time Slot Interval

Navigate to the Time Slot Interval option.
Enter the time interval in minutes.
For Example: If we enter 60, it would mean 60 Minutes = 1 Hour.

Navigate to the Time Slot Interval section.
Checkmark the checkbox against the days on which the staff is available.

In the Start Time and End Time options, the Administrator can enter the time manually by clicking on the field.

The Administrator can also add the time by clicking on the Clock icon.

Enter the Slot Capacity against each day.
The Slot Capacity means that the maximum number of people can be at a time.

The Administrator can also add the break by clicking on the Add Break option.

Once done, an Add Break field will appear below.
Click on the field and select the available breaks from the dropdown menu.
The Administrator can add multiple breaks for the specific

Click on the Save button to apply your changes.

Front-End Impact

The Customer will navigate to the website.
Go to the Bookings Form page.
Select the Location, Service, and Staff according to the configuration mentioned above.

2. Full Day – Timings

Select Full Day in the Booking Type option.
When Full Day is selected, the Time Slot Duration, Time Interval, Start Time, End Time, and Add Break fields will be deactivated.
Click on the Save button to apply your changes.

Front-End Impact

The Customer will navigate to the website.
Go to the Bookings Form page.
Select the Location, Service, and Staff according to the configuration mentioned above.
Now, a calendar will appear. Select the date on the calendar accordingly.
If the Customer selects the date on any day so a Full Day Time Slot will appear.
There are no breaks in the Fulldays Time Slots.
The Customer will select any date and the Full Day Time Slot, then the Customer will enter the number of slots they want to book. The total number of slots left will appear on the selected Custom Slot.

Add Holidays

Navigate to the Add Holidays option.

Click on the available dates you want to select.
You can scroll through the dates to select all the dates and then again click to deselect them.
Once done, click on the Add Holiday button.
The dates which were added as holidays will now appear in red color.

Front-End Impact

The Customer will navigate to the website.
Go to the Bookings Form page.
Select the Location, Service, and Staff according to the configuration mentioned above.
Now, a calendar will appear.
We can see that the dates which were added as holidays will now be locked, and the Customer cannot book an appointment on those specific dates.

Remove Holidays

Navigate to the Remove Holidays option.

All the dates which will appear in red color are holidays.
Click on the available dates you want to select.
You can scroll through the dates to select all the dates and then again click to deselect them.
Once done, click on the Remove Holiday button.
The dates on which the holiday was removed will now not be available in the remove holiday section.

Front-End Impact

The Customer will navigate to the website.
Go to the Bookings Form page.
Select the Location, Service, and Staff according to the configuration mentioned above.
Now, a calendar will appear.
We can see that the dates which were added as holidays will now be locked, and the Customer cannot book an appointment on those specific dates.

Once the operation is successful, the staff will be added to the Staff page.

Edit Staff

Click on the Edit button in the Actions column.

A popup will appear.

Change any field according to your requirement.
Once done, click on the Save button.

Once the operation is successful, the service will be updated on the Service page.

Delete Staff

Click on the Delete button in the Actions column against any specific staff.

A popup will appear.
Click on the Yes, delete it! button

A popup will appear indicating that the staff has been deleted successfully.
Click on the OK button.

Click on the OK button.
Now you’ll be on the Staff page and see that the deleted staff is now removed.

Search Staff

A search bar is present below the Staff heading.

Enter the staff’s name in the search bar, click on the icon, or press the Enter button.

Once done, all the staff will appear according to the keyword entered in the search bar.

Customer

Navigate to WordPress Admin Dashboard → Contact Form Booking → Customers

Now you’re on the Customer page.

Add Customer

Click on the Add Customer button.

A Customer Details popup will appear.
Fill in all the fields according to your requirement.
Enter the First Name.
Enter the Last Name.
Enter the Phone.
Enter the Email.
Select the Gender from the dropdown menu.
Enter the Date of Birth.
Enter the Password.
Enter the Note.

Fill in the required fields and click on the Save button.

Once the operation is successful, the customer will be added to the Customer page.

Edit Customer

Click on the Edit button in the Actions column.

A Customer Details popup will appear.

Change any field according to your requirement.
Once done, click on the Save button

Once the operation is successful, the customer will be added to the Customer page.

Delete Customer

Click on the Delete button in the Actions column against any specific customer.

A popup will appear.
Click on the Yes, delete it! button.

A popup will appear indicating that the service has been deleted successfully.
Click on the OK button.

Now you’ll be on the Customer page and see that the deleted customer is now removed.

Search Customer

A search bar is present below the Customer heading.

Enter the customer’s name in the search bar, click on the icon, or press the Enter button.

Once done, all the customers will appear according to the keyword entered in the search bar.

Appointment – Booking Form

Navigate to the form on the Front-End.
Go to the Bookings Form section.
Select the Location, Service, and Staff according to your requirement.
Now, a calendar will appear. Select the date on the calendar accordingly.
Now select the slot on that specific date.
The total amount will appear in the Total section.
Once done, click on the Submit button.

Once the Booking is successful, a message will appear on the form page.

Customer Dashboard – Shortcode

The Customers can view their appointment details by logging in with their credentials.
The Administrator will have to paste a shortcode that will enable this functionality.
Navigate to WordPress Admin Dashboard →Pages →Add New.

A new page would open.
Add the Title of the page.

Click on the sign ➕ to add blocks.
Select the Shortcode element.

Once done, we can see that a shortcode [cfb_customer_appointments] will be added to the page.

Click on the Publish button.

Front-End Impact

On the website, go to the Customer Dashboard page where the shortcode is pasted.
If you’re not logged in, a Click here hyperlink will be present on the page. Click on the hyperlink so you’ll be navigated to the login Page.

Log in with the customer credentials.
Once done, you’ll be redirected to the Customer Dashboard page on the website.

The customer can cancel the booking request by clicking on the Cancel Request button in the Status section.

A popup will appear.
Enter the reason for cancellation of the appointment in the textbox.
Click on the Confirm button.

A popup will appear indicating that the specific appointment has been canceled successfully.
Click on the OK button.

The status of the appointment will now appear as CANCELED in the Status section on Customer Dashboard.

NOTE: If no Appointment is booked, then a text message “No appointments found.” will appear on the Customer Dashboard page.

Staff Dashboard – Login

The Staff will have access to all appointment information assigned to them.
They can View and Update their Personal Details, Modify Service Prices if the Price Policy option is set to Staff in the General Settings tab, and change the status of the Appointment if the Appointment Policy option is set to Staff in the General Settings tab.

Staff – Dashboard

The Staff will land on the Dashboard page once logged in.
In the Google Calendar Integration tab, the Staff can Connect and Disconnect their Google Calendar.

NOTE: The Google Calendar Integration is explained below in the Google Calander Integration section.

Staff – Appointment

Navigate to WordPress Admin Dashboard → Appointment.

Now the Staff is on the Appointment page.
They can only view appointments assigned to them.

The Staff can change the Status of the Appointment if the Appointment Policy option is set to Staff by the Administrator in the General Settings tab.

once the Appointment Policy option is set to Staff by the Administrator in the General Settings tab, the Status field will become editable.

Click on the dropdown menu to change the status of the appointment.

Staff – Staff

Navigate to WordPress Admin Dashboard → Staff.

Now, the staff is on the Staff page.

Click on the Edit button in the Actions column.

A popup will appear.
The staff can update their details in the Details tab, Assign and Unassign the services in the Services tab, update the timings and booking type in the Timings tab, Add holidays in the Add Holidays tab, and delete holidays in the Remove Holidays tab.

The staff cannot edit the prices of the services in the Services tab.

The Staff can modify the service prices if the Price Policy option is set to Staff by the Administrator in the General Settings tab.

Once the Price Policy option is set to Staff by the Administrator in the General Settings tab, the services price field will become editable.

Appointment – Administrator Dashboard

Navigate to WordPress Admin Dashboard → Contact Form Booking → Appointment.

Now you’re on the Appointment page.
On the Appointment page, the Administrator can see the Total Customers, Total Services, Total Staff, and Total Amount Collection tabs at the top of the page.

On the Appointment page, the Administrator can see details regarding the details of the appointment like Booking ID, Appointment Date, Customer Name, Staff Name, Service, Payment, and Status of the Appointment.

In the Actions section, click on the 🛈 icon.

Once done, all the Appointment details will appear.

Status Change Appointment

On the Appointment page, the Administrator can change the status of the appointments from the dropdown menu.

Status – Pending

Whenever an appointment is created, the status of the appointment is Pending by default.

Status – Confirmed

Go to the Status section and click on the dropdown menu.
Select the Confirmed option from the dropdown menu.
A popup will appear.
Click on the Yes, Change it! button.
A popup will appear indicating that the appointment status has been changed successfully.
Click on the OK button.
Once the status is moved from Pending to Confirmed, the appointment payment is added to the Total Collection tab.

Status – Visited

Go to the Status section and click on the dropdown menu.
Select the Visited option from the dropdown menu.
A popup will appear.
Click on the Yes, Change it! button.
A popup indicates that the appointment status has been changed successfully.
Click on the OK button.

Once the status is moved from Confirmed to Visited, the appointment will be locked now. The Administrator cannot change the status of the appointment anymore.

Status – Canceled

Go to the Status section and click on the dropdown menu.
Select the Canceled option from the dropdown menu.
A popup will appear.
Click on the Yes, Change it! button.
A popup indicates that the appointment status has been changed successfully.
Click on the OK button.
Once the status is moved from Confirmed to Canceled, the appointment payment is deducted from the Total Collection tab.

Also, the appointment will be locked now once its status is set to Canceled.
The Administrator cannot change the status of the appointment anymore.

The Administrator can only delete the canceled appointment.
Click on the Delete icon in the Actions column.

A popup will appear.
Click on the Yes, delete it! button.

A popup will appear indicating that the appointment has been deleted successfully.
Click on the OK button.

Now you’ll be on the Appointment page and see that the deleted appointment is now removed.

NOTE: If the Customer cancels the appointment via the Customer Dashboard page, then the Reason option will appear in the Status section. Click on the Reason option.

A popup will appear with the reason that was entered by the customer while canceling the appointment. Click on the OK button.

Search Appointment

A search bar is present below the Appointment heading.

Enter the Booking ID, Customer, Staff and Services of any appointment in the search bar, click on the icon, or press the Enter button.

Once done, the appointment will appear according to the Booking ID entered in the search bar.

Date Filter

A date filter is present beside the search bar.
Click on the date filter and select the date to filter appointments.

A dropdown menu will appear.
The following options will appear in the dropdown menu: Today, Tomorrow, This Week, This Month, Last Month, This Year, Last Year, and Custom Range.
Select any option according to your requirement.

If the Administrator selects the Custom Range option, a calendar will appear.
Select the date range in the calendar and click on the Apply button.
Once done, all the appointments will appear, which were filtered between the date range.

Dashboard

Navigate to WordPress Admin Dashboard → Contact Form Booking → Dashboard.

Now you’re on the Dashboard page.
We can see a Dashboard is present at the top of the page in which the Administrator can see the Total Customers, Total Services, Total Staff, and Total Amount Collection tabs.
Also, four different graphs are present, which visualize the data according to the website.

Appointment Status Chart

In the Appointment Status Chart, we can see that all the appointments are displayed in a chart form indicating the total no. of appointments according to the status.
We can hover over the chart, and it will display the total no. of appointments accordingly to which area we are hovering

The Administrator can also filter out the chart by clicking on the Status Bar available above the chart. This will exclude the appointments in the chart.
For Example: If we click on the Canceled and the Visited status bar in the chart, then all the appointments whose status was Canceled and Visited will disappear from the chart.
Click on the Canceled and Visited Status Bar again, and it will appear on the chart again.

Staff Wise Earning

In the Staff Wise Earning, we can see all the Staff and their earnings in graphical form.
We can hover over the graphs of each staff, and it will display the total earning of each individual staff.

Staff Wise Total no. of Appointments

In the Staff Wise Total no. of Appointments, we can see all the Staff and their appointments in graphical form
We can hover over the graphs of each staff, and it will display the total no. of appointments of each individual staff.

Calendar

Navigate to WordPress Admin Dashboard → Contact Form Booking → Calendar.

Now you’re on the Calendar page.
On the Calendar page, we can see a color indicator is present, which will highlight the status of the appointments on the calendar.

Also the Timezone of the Administrator website will appear.

The Administrator can hover over each appointment in the calendar, and it will display the details of the appointment, which are Customer Name, Service, Staff Name, and Time.

Three filters are present at the top of the page, which are Location, Service, and Staff.
The Administrator can filter out the appointments by applying filters accordingly.

Settings

Navigate to WordPress Admin Dashboard → Contact Form Booking → Settings.

Now you’re on the Settings page.

General Settings

Click on the General Settings tab.
Once done, a side menu will appear on the right-hand side of the page.
All the General Settings options will be available in this side menu.

Price Policy

In the Price Policy option, two sub options are available in the dropdown menu.

Only the Administrator can modify the service prices if the Price Policy option is set to Admin.

The Staff can also modify the service prices via the staff’s dashboard if the Price Policy option is set to Staff.

Back-End Impact on Staff’s Dashboard

The Staff will log in to the website
Once done, the staff will navigate to WordPress Admin Dashboard → Staff.

Now, the staff is on the Staff page.

Click on the Edit button in the Actions column.

A popup will appear.
The staff will navigate to the Services tab.

Staff Dashboard when the Price Policy option is not set to Staff

We can see that the staff cannot change the price of the services since they are locked.

Staff Dashboard when the Price Policy option is set Staff

We can see that the staff can now change the price of the services since the field is now editable.

NOTE: When the Price Policy option is set to Staff, that means now the Staff can also modify the service prices via the Staff’s Dashboard. However, the Administrator can always modify the service prices via the Admin’s Dashboard.

Appointment Policy

In the Appointment Policy option, two sub-options are available in the dropdown menu.

Only the Administrator can change the status of any appointment if the Appointment Policy option is set to Admin.

The Staff can also change the status of only their appointments via the staff’s dashboard if the Appointment Policy option is set to Staff.

Back-End Impact on Staff’s Dashboard

The Staff will log in to the website.
Once done, navigate to WordPress Admin Dashboard → Appointment.

Now the Staff is on the Appointment page.
They can only view appointments assigned to them.

Staff Dashboard when the Appointment Policy option is not set to Staff

We can only view the appointments assigned to them and cannot change the status of the appointments since they are locked.

Staff Dashboard when the Appointment Policy option is set Staff

We can see that the staff can now change the status of their appointments since the status field will become editable.

Click on the dropdown menu to change the status of the appointment.

Start Day of Week

In the Start Day of Week option, two sub options are available in the dropdown menu.
The Administrator can select the start day of the week as Monday or Sunday, which will appear in the calendar on the Bookings Form page and Admin’s Dashboard.

Start Day of Week – Monday

Monday will appear as the starting day of the week if the Administrator sets Monday in the Start Day of Week option.

Front-End Impact – Bookings Form page

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.
We can see that in the calendar, the starting day of the week is Monday.

Back-End Impact – Calendar section

The Admin will navigate to WordPress Admin Dashboard → Contact Form Booking → Calendar.

Now you’re on the Calendar page.
On the Calendar page, we can see that the starting day of the week is Monday.

Start Day of Week – Sunday

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.
We can see that in the calendar, the starting day of the week is Sunday.

Back-End Impact – Calendar section

The Admin will navigate to WordPress Admin Dashboard → Contact Form Booking → Calendar.

Now you’re on the Calendar page.
On the Calendar page, we can see that the starting day of the week is Sunday.

Time Slot Duration (minutes)

In this option, the Administrator can set Time Slots Duration globally for Staff.

Enter the Time Slot Duration in minutes.
For Example: If we enter 180, it would mean 180 Minutes = 3 Hours.
Click on the Save button.

Back-End Impact – Calendar section

Navigate to WordPress Admin Dashboard → Contact Form Booking → Staff.

Now you’re on the Staff page
Click on the Add Staff button.

A popup will appear.
Navigate to the Timings tab.
Navigate to the Time Slot Interval option.
We can see what we entered will now appear in the Time Slot Interval field as default.

Time Slot Format on Calendar

In the Timeslots Format on Calendar option, two suboptions are available in the dropdown menu.
The Administrator can select the time format of the timeslots (12 Hours or 24 Hours) on the calendar of the Bookings Form page.

Timeslots Format on Calendar – 24 Hours

The timeslots format will appear in 24 Hours on the calendar if the Administrator sets 24 Hours in the Timeslots Format on Calendar option.

Front-End Impact – Bookings Form page

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.
Select the date on the calendar.
The timeslots format will now appear in the 24 Hours format in the calendar.

Timeslots Format on Calendar – 12 Hours

The timeslots format will appear in 12 Hours on the calendar if the Administrator sets 12 Hours in the Timeslots Format on Calendar option.

Front-End Impact – Bookings Form page

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.
Select the date on the calendar.
The timeslots format will now appear in the 12 Hours format in the calendar.

Time Slots on Calendar

In the Time Slots on Calendar option, two sub options are available in the dropdown menu.
The Administrator can select the position of the time slots on the calendar of the Bookings Form page.

Timeslots on Calendar – Right

The timeslots will appear on the right side of the calendar if the Administrator sets Right in the Timeslots on Calendar option.

Front-End Impact – Bookings Form page

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.
Select the date on the calendar.
The timeslots will now appear on the Right side of the calendar.

Time Slots on Calendar – Bottom

The time slots will appear at the bottom of the calendar if the Administrator sets Bottom in the Time Slots on Calendar option.

Front-End Impact – Bookings Form page

The customer will navigate to the Bookings Form page on the website.The customer will fill out the form according to his requirement, and a calendar will appear.Select the date on the calendar.The time slots will now appear at the Bottom of the calendar.

Prior Months to Book Appointment

In the Prior Months to Book Appointment option, the administrator will set the no. of months allowed to book the appointments on the Booking Forms page.

Set the no. of months according to your requirement.

Front-End Impact

The customer will navigate to the Bookings Form page on the website
The customer will fill out the form according to his requirement, and a calendar will appear
Now, we can click on the arrow keys present with the month’s section
Click on the arrow keys to move forward or backward.

Note: Admin can set the Prior Month for Customer to book an appointment in advance, but on customer-end it will include the remaining days of the current month as well.

Display Settings

Click on the Display Settings tab.
Once done, a side menu will appear on the right-hand side of the page.
All the Display Settings options will be available in this side menu.

Calendar Background Color Gradient

In the Calendar Background Color Gradient option, we can set the color of the background color gradient of the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Border Color

In the Calendar Border Color option, we can set the color of the border color of the calendar.

Click on the color grid and select the color according to your requirement.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Before

After

Calendar Header Background Color

In the Calendar Border Color option, we can set the color of the border color of the calendar.

Click on the color grid and select the color according to your requirement
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Header Text Color

In the Calendar Header Background Color option, we can set the color of the header text color of the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Text Color

In the Calendar Text Color option, we can set the color of the calendar text color.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Selected Text Color

In the Calendar Selected Text Color option, we can set the color of the selected text in the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Text Color

In the Calendar Selected Text Background Color option, we can set the background color of the selected text in the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Available Days Text Color

In the Calendar Available Days Text Color option, we can set the color of the available days text in the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Available Days Text Color

In the Calendar Available Days Text Color option, we can set the color of the available days text in the calendar.

Click on the color grid and select the color according to your requirement
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Holiday Days Text Color

In the Calendar Holiday Days Text Color option, we can set the text color of the holidays in the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Calendar Holiday Days Background Color

In the Calendar Holiday Days Background Color option, we can set the background color of the holidays in the calendar.

Click on the color grid and select the color according to your requirement.
Once done, click on the Save button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.
The customer will fill out the form according to his requirement, and a calendar will appear.

Before

After

Labels

Click on the Labels tab.

Once done, a side menu will appear on the right-hand side of the page.
All the Labels Settings options will be available in this side menu.
We can set the labels of the Location, Service, and Staff, which will appear on the Bookings Form page on the Front-End.

Once done, click on the Save button.

A popup will appear indicating that the settings have been saved successfully
Click on the OK button.

Front-End Impact

The customer will navigate to the Bookings Form page on the website.

Before

After

Company

Click on the Company tab.

Once done, a side menu will appear on the right-hand side of the page.
All the Company Settings options will be available in this side menu.
We can set the details of the company, like Name, Address, Phone Number, Email ID, and Website URL, which will appear on the Email.

Once done, click on the Save button.

A popup will appear indicating that the settings have been saved successfully.
Click on the OK button.

Front-End Impact

We can see the Name, Address, Phone Number, Email ID, and Website URL of the company in the Email, which was configured in the Company Settings tab.

Email Configuration

Click on the Email Configuration tab.

Once done, a side menu will appear on the right-hand side of the page.
All the Email Configuration options will be available in this side menu.
We can set the Sender Name and Sender Email, which will appear on the Email.

Once done, click on the Save button.

A popup will appear indicating that the settings have been saved successfully.
Click on the OK button.

Front-End Impact

We can see the Sender Name and Sender Email in the Email, which was configured in the Email Configuration tab.

Google Calendar

Click on the Google Calendar tab.

Once done, a side menu will appear on the right-hand side of the page.
All the Google Calendar options will be available in this side menu.
We can set the Enable Google Calendar option available.
In order to enable the Google Calendar, enter the Client ID and Secret Key in their respective fields.

Get Client ID and Secret Key

In order to get the Client ID and Secret Key, navigate to https://console.developers.google.com/.
Log in with your Gmail account.

Log in with your Gmail account.
Navigate to the APIs & Services section and then go to the Enabled APIs & services tab.
Click on the CREATE PROJECT tab to create your project.

Enter the Project Name and Location.
Once done, click on the CREATE button.

The project is created successfully.
Click on the ENABLE APIS AND SERVICES button.

Click on the Google Calendar API tab.

Now you’re on the Product details page.
Click on the ENABLE button.

A text will appear titled “API Enabled” text will appear once the Google Calendar API is enabled.

Now navigate to the OAuth consent screen tab.

Select the External radio button.
Once done, click on the CREATE button.

Enter the App name and User support email in the App information section.
Enter the Email addresses in the Developer contact information section.

Once done, click on the SAVE AND CONTINUE button.

Make sure the status is In production in the Publishing status section.

Now navigate to the Credentials tab.

Now you’re in the Credentials tab.
Click on the CREATE CREDENTIALS button.

Click on the OAuth Client ID option from the dropdown menu.

Now you’re in the Create OAuth Client ID section.
Click on the Application type and select Web Application from the dropdown menu.

Click on the ADD URI button in the Authorized redirect URIs section.

Now copy the URI which was mentioned in the 8th point of the Instructions section of the Google Calendar Settings tab

Paste the URIs 1 in the respective field.
Once done, click on the CREATE button.

A popup will appear indicating that the OAuth Client is now created successfully.
You can copy the Client ID and the Client Secret key from the popup.
Click on the OK button.

Click on the Application Name in the OAuth 2.0 Clients IDS section to view its details.

All the details of that specific application will appear, and on the right-hand side of the page, we can see the Client ID and the Client Secret key.
Copy the Client ID and the Client Secret key.

Now navigate back to the Google Calendar tab.
Click on the Enable radio button in the Enable Google Calendar option.
Enter the Client ID and Secret Key in their respective fields.
Click on the Save button.

A popup will appear indicating that the settings have been saved successfully.
Click on the OK button.

Staff Connectivity Google Calendar

The Staff will log in to the website.The Staff will land on the Dashboard page once logged in.
In the Google Calendar Integration tab, the Staff can Connect and Disconnect their Google Calendar
Click on the Connect With Google Calendar button.

The Staff will enter the email and click on the Next button.

Click on the Continue button.

We can see that the Google Calender is now connected.

Once the Google Calendar is connected successfully, navigate to the Calendar which was connected.

All the appointments will appear on the calendar accordingly.

Click on the appointments to view its details.

Customer Connectivity Google Calendar

In the Google Cloud page, Navigate to the APIs & Services section and then go to the Credentials tab.
Click on the Application Name in the OAuth 2.0 Clients IDS section to view its details.

Click on the ADD URI button in the Authorized redirect URIs section.

Enter the URL of the Bookings Form page in the URIs 2 field.
Once done, click on the SAVE button.

The Customer will navigate to the website.
Go to the Bookings Form page.
Select the Location, Service, and Staff according to the configuration mentioned above.
Now, a calendar will appear. Select the date on the calendar accordingly.
Now select the slot on that specific date.
The total amount will appear in the Total section.
Once done, click on the Submit button.

Once the Booking is successful, a message will appear on the form page
A hyperlink will appear as Add To My Calendar. Click on this hyperlink.

The Customer will enter the email and click on the Next button.

The Customer will enter the password and click on the Next button.

Click on the Continue button.

Once the Google Calendar is connected successfully, navigate to the Calendar which was connected.

All the appointments will appear on the calendar accordingly.

Click on the appointments to view its details.

Email Notifications

Navigate to WordPress Admin Dashboard → Contact Form Booking → Email Notifications.

Now you’re on the Email Notification page.
All the codes used for email notifications are present.

Eight events are mentioned on which the email is triggered.
Click on any event to view the email template of that specific event.

We can Enable or Disable the Email Template.
We can Edit the SUBJECT of the email.
We can change the message according to requirements and add or subtract the Email Codes in the message.
Once the changes are done, click on the Save button.

A popup will appear indicating that the email notification settings have been saved successfully.
Click on the OK button.