WPForms Booking

Introduction of Plugin

WP Forms Booking plugin provides a platform to manage appointments via Google Calendar. Appointments can be booked online from any listed services category, along with their type. Once a customer visits on his/her appointment, an email will get routed to him/her, and logs will be registered in the admin panel.  

New 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 ‘service type’ related to the selected service category
• 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.’ All payment gateways of WP Forms add-ons can be utilized as payment gateway activation
• Customers can add appointments to Google Calendar
• Synchronise all your appointments to Google Calendar
• Conditional Logic.
• ‘Email triggers’ to admin, customers, and staff on specified cases.
• Also, Mobile Responsive works well on Mobile and Tablet devices.
• The calendar is now available in the WPForms Booking, where the admin sets the Staff and Service, and the customer has to select the appointment date only.
• The admin OR staff can now set the time zones for the specific staff so that the customer can book the appointment according to their time zones.
• Timeslots can now be set for all the days of the week for the staff. 
• The admin OR staff can now change the appointment status.
• The admin can now assign staff’s off days.
• Add Price and Appointment policies in General Settings
• Add Display tab in settings for calendar display color in General Settings
• Add Full Day Appointment.
• Allow Decimal in Price.
• Add “Email Configuration” in General Settings

Installation Guide

WP Forms

• Download the WP Forms Pro plugin.
• Navigate to the WordPress Admin Dashboard → Plugins → Add New.

• Upload and activate the WP Forms Pro plugin.

WP Forms Booking

• Download the WP Form Bookings addon.
• Once the plugin is downloaded, go to the WordPress Admin dashboard.
• 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 box that appears below.
• Select the zip file that you have downloaded and upload it.
• Click on the Install Now button. This will start the plugin installation.
• Click on the Activate Plugin button.

Getting Started

• Once the plugin is installed and activated, navigate to the WordPress Admin Dashboard → WPForms Booking.

Service Categories

• The first step is to add the Service Category.
• Navigate to the WordPress Admin Dashboard → WPForms Booking → Service Category.

Add New Category

• In–Service Category section, enter the category name and slug, slug will auto-create if not entered, click on the Add New Category button.

Once the category is created, you can see the categories in Services; when creating a service, you can assign a specific category to service

Edit Category

• Click on the Quick Edit button to change the category name.

• Now, you are in the Edit category section.
• Enter the new category name.
• Click on the Update Category button to save the changes.

Delete the category

To delete a category, click on the ‘Delete’ button.

• A pop-up confirmation box will appear.
• Click on the OK button to delete.

Search Category

You can search your category through the category name or slug.

Locations

The second step is to add the Locations, you can add locations by entering Location, Address, Phone, and Description. Locations will depend depend on services. You can add staff locations and assign multiple locations to Service.

• Navigate to the WordPress Admin Dashboard → WPForms Booking → Location.

Add new location

• In the locations section, click on the Add Location button, located at the top right corner of the page to add a new service, a pop-up will appear with locations fields

• Now, you’re in the Add Location section.
• Enter a Location name (Required field)
• Enter Phone, Address, and Description
• Click on the Save button

A confirmation message will appear in the pop-up for 2 seconds, which shows that the Location has been added succes

Created locations will display on the main page of the location with a Location ID , Location Name, and Address.

Now, your added locations are displayed in the locations table.

Edit Location

• From “Actions” click on the Edit button to edit the location details.

Now, you are in the Edit location section.

• Enter details that you want to update.
• Click on the Save button.

After updating the location name, the location name will be updated in all modules.

Delete Location 

• From “Actions”, click the delete button to permanently delete the location.

When clicking on the delete button a pop-up will appear with the message  “Are you sure? You won’t be able to revert this!”With No, Cancel, and Yes Delete it! 

When click on No, cancel button, the location will not delete and show the message in the pop-up.

When you click on Yes, Delete it, delete successfully message will appear in a pop-up

Services

The third step is to add the Services so that these services can be added to the service categories.

• Navigate to the WordPress Admin Dashboard → WPForms Booking → Service.

Add Service

Now, you’re in the Add Service section.

• Add Service Name (Required field)
• Enter Service Price (numbers, decimal)
• Select Service Category (Required field)
• Select Location (Multiple locations can be selected)
• Click on the Save button

**Notice*: If you didn’t enter the service price it will take the amount “0”, you can add multiple locations, if no location is selected it means this service is available for all locations.

A confirmation message will appear in the pop-up for 2 seconds, which shows that the Service has been added successfully.

 Created service will display on the main page of the Service table along with a Service ID, Service  Name, Price & Category

Edit Service

From “Actions” click on the Edit button to edit the service details.

Now, you are in the Edit location section.

• Enter details that you want to edit.
• Click on the Save button to update the Service details

Delete Service

From “Actions”, click the delete button to permanently delete the service.

When clicking on the delete button from service table a pop-up will appear with the message  “Are you sure? You won’t be able to revert this!”With No, Cancel, and Yes Delete it!

When click on No, cancel button, the location will not delete and show the message in the pop-up.

When you click on Yes, Delete it, delete successfully message will appear in a pop-up

Search Service

You can search the services by Service ID & Name from search bar.

Bulk Delete Service

You can also Bulk delete the services by select all services or specific services from checkbox and bulk delete.

Staff

The next step is to add Staff Members, Services , Locations and Date Time of appointment can be assign to Staff so the Staff member can see their services , locations Date time of appointment also customer can select the Staff member according to Service and Location.

Add New Staff

Navigate to the WordPress Admin Dashboard → WPForms Booking → Staff → Click on Add Staff.

When click on Add Staff button a pop-up will open and you will see the following tabs inthe pop-up

• Details
• Services
• Timings
• Add Holidays
• Remove Holidays

Add Basic info Staff

In Details tab you will see the following fields:

• First Name (Required)
• Last Name (Required)
• Email (Required)
• Password (Required)
• Phone
• Profession
• Location
• Note

• Enter Staff First Name 
• Enter Staff Last Name.
• Enter Staff Email.
• Enter Staff Password.
• Enter Staff Phone
• Enter Staff Profession.
• Select Staff Location (If specific locations are selected, Staff will only be available for specific locations if no Location is selected, Staff will be available for all locations)
• Enter Note
• Click on the Save button to save and submit the Staff basic info

After submitting the Basic info, click on Save button, you will see the “Staff created successfully message” and Staff will receive email notification with his/her details with login credentials.

After that, Staff will be able to log in with their credentials and see their Basic Info,  Services, Timings, Add Holidays, Remove Holidays, which are assigned or added  by the admin.

Select Services for Staff

In the Services tab admin would be able to assign the Services to Staff, override the Service price only for specific Staff.

Now, this Staff is only available for Nutrition Guide and Cardiology Services. For this Staff, only the Nutrition guide service price will be $5.00, and the Cardiology service price will be $ 10.55 after overriding the original price.

Select Timings for Staff

• Select a city from the drop-down menu to set a Timezone in the Timings tab.

Appointments in the calendar on Front-End will display as per Timezone.

If “New York” selected then appointment will available on calendar as per New York time

**Notice* If no Timezone is selected then it will take the WordPress timezone which is set from Settings > General

Booking Type (Custom slots OR Full Day)

In custom slots, appointment is depend on appointment Time Duration , Time Slot Interval , Start Time , End Time and Add break if you want to add.

In Full Day, appointment is only depend on Days and slots capacity not Time. Example: Hotel Room booking

• Select Custom Slots
• Enter Time Slot Duration (minutes) Example: 60 (1 hour)
• Enter Time Slot Interval
• Add Time Slot
• Enter Slots capacity (Example: No. of persons at a time)
• Add Break (If you want, you can leave it if you do not want break in appointment)
• Click on Save Button

Front-End Impact:

• Select Booking Type: Full Day
• Select Days from Time Slot

**Notce* In Full Day appointment only Days and Slots capacity  will work, not Time Duration, Time Interval and Break.

Front-End Impact:

Add Holidays:

In Add Holidays, you can select date range in calendar to Add Holidays for Staff so the appointment will not display on holidays days.

• Go to Add Holidays tab
• Select Date for holidays

Front-End Impact:

Remove Holidays:

In Remove Holidays, you can select date range in calendar to remove Holidays as well.

Add Customers

Admin can add customer details from the Customers section.

• Navigate to the WordPress Admin Dashboard → WPForms Booking → Customers

Click on Add Customers button

In the Customers Details tab you will see the following fields:

• First Name (Required)
• Last Name
• Phone
• Email (Required)
• Gender
• Date of Birth
• Password (if empty it will generate auto password)
• Note

Once the customer is created, the customer will receive email notification with details and customer login credentials.

Admin can see the registered customer details in the Customer table with the Customer ID, Name, Phone, and Email

**Notice* During appointment booking from Front-End, if the WPForms field is in the form, a customer can also be created after submitting the appointment form.

Update Customers

From Action click on the edit icon

Now you can edit the customer’s details, if leave the password empty password will not change

After updating customer details, the customer will receive a new email notification.

**Notice* If the admin change the password from the customer’s details updated password will send to previous customers

You can also see the registered customers in Users > All Users with WPFB Customer role

• Go to Users > All Users
• Search the customer from the search bar

Search Customers

You can search for customers through Customer ID OR Customer Name.

Customer’s Dashboard

Customer can see their appointment details while login with his/her credentials.

• To log in with customer, create a page and paste this shortcode [wpfb_customer_appointments]

• After create a page, open the page in which you are not login with any user.
• Click on page title, you will see the click here to login

When you click on “Click here to login button”, enter username OR email of the customer and password.

Now you can your booked appointment with ID, Date/Time, Location you selected, Service you choose, Staff you chose, No. of Slots you entered , Appointment amount, and Status.

Staff Login Dashboard

Staff can see all the appointment details that are assigned to Staff also Staff can see their details,  update all their details, override service price  if from General settings Price Policy is set to Staff, confirmed appointments if  from General Settings Appointment Policy is set to Staff

**Notice* Price Policy: Staff and Appointment Policy: Staff doesn’t mean Admin cannot override service price from Staff and cannot Confirmed appointment, Staff mean both admin and Staff have rights to override the service price and confirmed appointments.

• To login with Staff simply enter your environment URL and add wp-admin or wp-login
• Enter Staff email or username and password

In Staff you will see the Dashboard in Dashboard, you staff can connect and disconnect Google Calendar we will explain google calendar integration in Google Calendar integration section, and Staff can see the Appointments that are assigned to Staff also see their own Details in Staff.

Dashboard:

Staff:

Staff can search appointments by Booking ID.

• To view details of the appointment, click on i button from Actions

Staff can filter appointments from filters.

 Staff Details

Staff can their details from Staff and update Service, Timings , Add Holidays as admin can update Staff details, only override service price and confirmed depend on General settings.

• Click on Staff from left panel

Now Staff can their own details.

From Action click on edit button to update Staff details.

Now Staff can update their details like Assign and Unassign services, update Timings, Add and remove Holidays etc.

**Notice* Price Policy: Staff and Appointment Policy: Staff doesn’t mean Admin cannot override service price from Staff and cannot Confirmed appointment, Staff mean both admin and Staff have rights to override the service price and confirmed appointments.

 Appointments (Admin) 

In the Appointments module, the admin can see all the appointments details, and change appointment status  (Confirmed, Cancelled, Pending, and Visited)

Admin can also see Total Customers, Total Services, Total Staff, Total Collection (Amount)

• Go to Appointment from WPForms Booking menu.

Click on i button to see the appointment details.

Search Appointments (Admin)

Admin can search Appointments by Booking ID

 Change Appointment Status (Admin)

If the Appointment is cancelled Total Collection will be minus.

When the appointment status is cancelled, admin can delete an appointment permanently and cannot change the appointment status.

Admin can also change appointment status to Confirmed , Pending, Visited if the appointment status is in pending amount will not count on Total Collection until the appointment status is Confirmed.

**Notice* Once the appointment Status is Visited then appointment status cannot changed

Filters Appointment (Admin)

Select date to filter appointments as per your requirements.

Dashboard (Reports)

Admin can see in reports Appointment status chart , Staff Wise Earning, Staff Wise Total no. of Appointments , Service Wise Total Earning.

• Go to WPForms Booking > Dashboard

Appointment Status Chart (Reports)

 In Appointment Status chart you will see the Appointment status in pie chart

Staff wise Chart (Reports)

Admin can see each Staff earnings in amount in Staff Wise  graph, all the staff will show in graph when hover on staff it show the amount

Staff wise Total no. of Appointments (Reports)

Admin can see each Staff Total number of appointments in Staff Wise Total no.Appointments, all the staff will show in graph when hovering on staff it shows the Total no.of appointment of each Staff.

**Notice* If the Appointment deleted, no of appointment will minus from Staff Wise Total no. of appointment graph

Service wise Total Earning (Reports)

Admin can see each Service Earning in graph all the services  will show in graph when hover on Service it shows the Total no.of amounts  of each Service.

**Notice* If the Appointment status is pening and canceled, amount will not add in graph until the appointment status is confirmed.

Calendar (Admin)

In Calendar admin would be able to see all the appointments in calendar with appointment status colour (Pending, Confirmed, Visited, Cancelled)

When you first go to the Calendar page it will show all the appointments and if you filter the  appointments by selecting Location , Services & Staff it will show only selected staff appointments.

• Go to WPForms Booking > Calendar

Filters appointment Calendar (Admin)

• Go to Calendar
• Select Location from filter
• Select Services from filter
• Select Staff from filter

In Filters Service will load on selecting Locations and Staff will load selecting on Services

**Notice* Time zone will change in calendar  according to Staff and latest appointment time zone

 Settings (General Settings)

General settings allows an admin to change Price Policy (Staff/Admin) , change Appointment Policy (Staff/Admin), Start Day of Week (Monday/Sunday), Default Time Slot Duration (Minutes), Default Time Interval (Minutes), Time Slots on Calendar (Right/Left), Prior Months to Book Appointment

• Go to Settings > General Settings

• Click on General Settings

General Settings > Price Policy (Admin)

Allow staff/admin to give rights to set the price for any service. Default is Admin, ifAdmin set, Staff would not be able to change service price and if Staff is set both admin and staff would be able to change the Service Price.

Impact:

You can see in GIF Staff cannot override(change service) price

General Settings > Price Policy (staff

Allow staff/admin to give rights to set the price for any service. Default is Admin, ifAdmin set, Staff would not able to change service price and if Staff is set both admin and staff would be able to change the Service Price.

Impact:

General Settings > Appointment Policy (Admin)

Allow staff/admin to give rights to confirm appointments assigned to them. Default is Admin,  if Admin set, Staff would not able to change the Appointments status  and if Staff is set both admin and staff would be able to change Appointments status

• Select Appointment Policy (Admin) click on save button

Impact:

You can see there is no option to change the appointment status, Staff don’t have rights to change the appointment status if the Appointment policy is Admin

General Settings > Appointment Policy (Staff)

Allow staff/admin to give rights to confirm appointments assigned to them. The default is Admin,  if Admin set, Staff would not able to change the Appointments status and if Staff is set both admin and staff would be able to change the Appointments status.

• Select Appointment Policy (Staff) and click on the save button

Impact:

You can see now appointment can change appointment status, Confirmed appointments

Start Day of Week

Admin can set Start Day of Week (Monday OR Sunday), so in the calendar Day will start as per Day of Week whether set Monday OR Sunday

• Go to General Settings
• Select Monday OR Sunday from Start Day of Week
• Click On Save button
• Go to calendar from Front-End and check
• Go to calendar from backend and check the calendar

Front-End Calendar Impact:

Back-End Calendar Impact:

General Settings (Time Slots Duration & Time Slot Interval)

• Go to General Settings
• Enter Time Slots Duration in minutes
• Enter Time Slot Interval in minutes
• Go to Staff > Timings

Admin can set Time slots duration and Time slot interval globally for Staff, In Staff > Timings if no time duration and time interval are set general Settings time will apply.

General Settings Screenshot:

Staff Screenshot:

General Settings > Timeslots on Calendar (Right/Bottom)

• Go to General Settings
• Select Right OR Bottom from Timeslots on Calendar

• Go to the Appointment booking form page
• Click on the date from the calendar

General Settings > Prior Months to Book Appointment

No. of months allowed to book appointments. It cannot be zero. The default is 3.if set to 5 only 5 months will display on the calendar.

Front-End Impact:

Settings > Display Settings

Admin can use the Display setting to define the colour scheme of the calendar on the front end.

From Display Settings, you can change the following colour

• Calendar BG Colour Gradient
• Calendar Border Colour,
• Calendar Header BG Colour
• Calendar Header Text Colour
• Calendar Text Colour
• Calendar Selected Text Colour
• Calendar Selected Text BG Colour
• Calendar Available Days Text Colour
• Calendar Available Days BG Colour
• Calendar Holiday Days Text Colour
• Calendar Holiday Days BG Colour

Front-End Impact:

 Settings > Labels

You can use the Labels setting to change the labels of Locations, Service, and Staffs on the front end.

• Go to Settings > Labels

Front-End Impact: 

Settings >  Email Configuration

You can use the Email Configuration settings to set Sender Name and Sender Email, which will display in email notifications.

• Go to Settings > Email Configuration

• Enter any Sender Name
• Enter the email address from which the sender will send the email. Email should be of domain
• Click on Save button

Now you can see the same Sender Name and Sender Email, if both fields is empty by Default it will show the original Sender Name and Sender Email.

 WP Forms Booking Synchronisation with Google Calendar 

WP Forms Booking allows its users to manage their appointments using Google Calendar by providing them the functionality to synchronise with Google Calendar

Settings 

• Navigate to the WordPress Admin Dashboard → WP Forms Booking → Settings.

• Click on the Google Calendar tab.

Get Client ID and Client Secret

• To get the Client ID and Client Secret, go to https://console.developers.google.com/.
• Log in with your Gmail Account.

• Click on Select a Project located on the top bar.
• A pop-up window will appear.
• Click on Create a new project.

• After successfully creating your project, go to the API and Services tab located on the left side.
• Click on Library.

• Type Calendar API in the search bar.
• Select Google Calendar API from the results.

• Check for Google Calendar API is enabled.
• If Google Calendar API is not enabled, then click on the Enable button.

• After that,  go to the API and Services tab.
• Click on the OAuth consent screen

• In the OAuth consent screen section, select the External option in the User Type.
• Click on the Create button to proceed.

• In the next step, add application information.
• Add Application Name in the App name field.
• Add User Support Email.

• In the next step, add application information.
• Add Application Name in the App name field.
• Add User Support Email.

• Now, click on the Credentials in the API and Services tab.

• In Credentials, click on Create Credentials button.
• Click on OAuth Client ID.

• In Create OAuth Client ID, select Web Application from the Application Type drop-down menu.
• Insert Name for your OAuth 2.0 client.
• In Authorised redirect URIs, click on the ADD URI button. Enter the redirect URI. This redirect URI can be found on your WordPress Admin Dashboard → WPForms Booking → Settings → Google Calendar. Go to line 8 and copy the Redirect URI.
• If you want to enable add to my calendar functionality, then click on ADD URI again and enter the URI in Authorised redirect URIs. This Authorised redirect URI is found in line 9.

• A pop-up will appear which will show you that your OAuth client has been created.
• Copy Your Client ID and Your Client Secret.
• Click on OK  to close the popup.

• Now, go back to WordPress Admin Dashboard → WP Forms Booking → Settings → Google Calendar.
• Enabled Google Calendar
• Paste the copied Client ID and Client Secret.
• Click on the Save Calendar Settings button

Connect Staff Member with Google Calendar

• Our next step is to connect the Staff member with the google calendar.
• Navigate to the WordPress Admin Dashboard
• Login with Staff
• Go to Dashboard
• Click on Connect With Google Calendar

• Sign in with your Gmail account.
• Click on the Next button to proceed.

• Click on the Allow button to grant permissions.

The staff member appointment calendar is now successfully connected with Google Calendar.

• Go to Google calendar and see the booked appointments

Connect with Google Calendar after an appointment

After submitting an appointment you can connect with google calendar

• Click on Add To My Calendar
• Sign in with your Gmail account.
• Click on the Next button to proceed.

Form Configuration 

Backend Configuration 

• To create a new form with WP Forms Booking functionalities, navigate to WordPress Admin Dashboard → WP Forms → Add New.

• Click on Add New to create a new form.
• WPform builder will appear to you

Enter Form Name.

Choose a form’s Template.

Form editor will be opened.

• Go to the Add Fields sections located on the right side of the screen.
• At the bottom of the section you will find WPFB Calendar by expanding the Booking Fields.

• Drag and drop the WPFB Calendar field in the form.
• You will see three fields, Location(s), Service(s), and Staff(s)

• Now, select a field and go to Field Options on the left side of the screen.
• Add Field Label

• You can hide Location, Service, and Staff

If there is No location for Service you can hide the Locations fields from General Settings, so the location field will not display on Front-End

Click on the Save button to Save the form.

WP Forms Booking Settings

Now, click on Settings on the most left side.

• Select Customer Name from drop-down.
• Select Customer Email from drop-down.
• Select Customer Phone from drop-down.
• Click on Save button.
• Select WPFB Settings from the Settings.

To display the page on the Front-end

• Go to page New page
• Click on short-code and add WP Forms shortcode.

• Select Form from the dropdown which you have created from WP From and added WPFB fields.

• Click on the Save button and preview the form.