Bookings For Gravity Forms

1.Introduction of Plugin #

Gravity Booking plugin provides a platform to manage appointments via google calendar. Appointment can be booked online from any listed category of services along with its type. Once a customer visit on his/her appointment so email will get routed to him/her and logs will be registered in admin panel.

2.Features List #

  • Easy installation and configuration
  • Proficient and simple booking process
  • Unlimited staff, services categories, and their time slots can be added
  • Customer can select any ‘service category’ for appointment from the list of services 
  • Customer can select any ‘service type’ related to the selected service category
  • Customer can select any ‘staff’ from the list with whom service will be delivered
  • Variable ’time and day’ can be selected from available days of selected staff
  • Booked Appointment can be seen in Calendar as well as List View
  • Holiday’s can be marked against every individual staff
  • Payment will get done through ‘payment gateway’. All payment gateways of gravity form add-on can be utilized as payment gateway activation
  • Customer can add appointment to Google Calendar
  • Synchronize all your appointments to Google Calendar
  • Conditional Logic.
  • ‘Emails triggers’ to admin and customers on specified cases 
  • Export all data of ‘Appointments’, ‘Service Categories’, ‘Services’, ‘Customers’ and ‘Payments’ in CSV & PDF file format
  • Gravity Forms Booking supports multistep forms as well.
  • Gravity Forms Booking also includes support for Gravity Forms Preview Add-on.
  • Gravity Forms Booking also supports RTL functionality.
  • Also Mobile Responsive works well on Mobile and Tablet devices.

3.Pre-Requisites #

  1. Gravity Forms
    Plugin can be downloaded from ‘Gravity Forms’ website and activate it
  2. Gravity Forms Booking Add-on
    Once the plugin is downloaded then:
  • Go to WordPress Admin > Plugins > Add New and Upload Plugin
  • Attach the downloaded file at ‘Choose File’ option
  • Click on ‘Install Now’

4.Configuration of Forms #

  • Go to ‘Forms’ Tab
  • Click on ‘New Form’

  • Go to ‘Forms’ Tab
  • Click on ‘New Form’
  • Give ‘Title’ to form
  • Give ‘Description’ (optional)
  • Click on ‘Create Form’


  • Then form will be opened, now following fields needs to be dragged in form
  • Go to ‘Advanced Field’ option and drag ‘Name’ and ‘Email’

  • Then go to ‘Booking Fields’ and drag ‘Service Category’, ‘Booking Services’, ‘Booking Providers’, ‘Booking Calendar; and ‘Booking Cost’

  • Give label names to all the dragged fields

  • Thus, your form will be created
  • Then go to ‘Settings’ on same form
  • In ‘Settings’ go to ‘Gravity Forms Booking’ and set the ‘general settings’

5.Major Functionalities #

Dashboard will display following settings:

  1. Total number of customers that have done transactions 
  2. Total number of services that are available
  3. Total number of staff that are available to serve the appointments
  4. Total amount of income that has received in a day
  5. Payment details chart will show cash on delivery collection
  6. Appointment status chart will show ‘pending payments’, ‘awaited payments’, ‘cancelled appointments’, ‘visited appointments’
  7. Staff wise earning will show which staff earns the most and least
  8. Staff wise total no of appointments will show which staff is getting higher number of appointments 
  9. Service wise total earning will show that which service is earning the most
  10. Service wise total number of appointments will show which service is getting most number of appointments

5.1.Calendar #

  • Go to ‘Gravity Forms Booking’ tab
  • Then ‘Calendar’
  • Here Admin can see all the status of ‘appointments’ and by clicking on any event, details for that specific ‘Appointment’ will get displayed

5.1.1.Booking an Appointment #

  • Go to ‘Gravity form Bookings’
  • Then ‘Appointments’
  • Admin can see all the details along with status of appointments. Here admin will perform actions against every appointment that includes ‘Confirm’, ‘Cancel’, ‘Visited’, ‘Deleted

 

  • Moreover, appointments can be booked by admin from this section
  • Click on ‘New Appointment’

 

  • Following screen will appear, admin will fill the required fields

 

  • Appointments details can be downloaded in CSV or PDF file format by clicking on this button

  • Downloaded file will show the data as shown below

5.1.2.Pending Appointment #

By clicking on pending appointment, user will be routed to pending appointment page

5.1.3.Awaiting Appointment #

By clicking on awaiting appointment, user will be routed to awaiting appointment page

5.1.4.Completed Appointment #

By clicking on completed appointment, user will be routed to completed appointment page

5.1.5.Cancelled Appointment #

By clicking on cancelled appointment, user will be routed to cancelled appointment page

5.2.Conditional Logic #

  • For Conditional Logic go to form Settings.
  • Add the field for which you want Conditional Logic (For example Radio Buttons).

  • Enter the field and go to the Advanced tab.
  • Click Enable Conditional Logic.

  • Select the booking field for which you want Conditional Logic (For example Booking Services).

  • Select the Booking Service and click Update.

5.3.Appointments #

  • Go to ‘Gravity form Bookings’
  • Then ‘Appointments’
  • Admin can see all the details along with status of appointments. Here admin will perform actions against every appointment that includes ‘Confirm’, ‘Cancel’, ‘Visited’, ‘Deleted’

  • Moreover, appointments can be booked by admin from this section
  • Click on ‘New Appointment’

  • Following screen will appear, admin will fill the required fields

  • Appointments details can be downloaded in CSV or PDF file format by clicking on this button

  • Downloaded file will show the data as shown below

5.4.Service Category #

Admin will add categories of services here, therefore one staff can be allocated on different service categories

  • Go to ‘Gravity Forms Booking’ Tab
  • Then in ‘Services Categories’
  • Click on ‘New Category’

  • Following form will open.
  • Give ‘Title’ to the Category and Save it

5.5.Services #

Services
Admin will enter the service name here, service will be mapped in any service category

  • Now go to ‘Services’ Tab
  • Click on ‘New Service’

  • Then ‘Select Category’ from dropdown (categories will appear from the list that had added by admin in previous screen)
  • Give ‘Title’ to the service
  • Set ‘Price’ of service
  • Save it

  • Added services can be edit or deleted

5.6.Staff #

Admin needs to add staff so that they can be allocated to listed services 

  • Go to ‘Staff’ tab and click on ‘New Staff Member’

  • Fill the required details and save the form, then new ‘Staff’ will be added

  • Added staff can be edit or deleted

  • By clicking on ‘Edit’ button on any added staff, following screen will appear
  • Admin can set basic details in ‘Details’ Section
  • Set any other ‘staff name’ in place of ‘Transfer Appointments’.  Incase this staff needs to be deleted so all the pending appointments of this staff will be transferred to designated staff

  • Next is to connect the staff with google calendar 
  • In Details Section click on ‘Connect’ button

  • Then go to ‘Services’ Section
  • Added services will be displayed. Admin can checkmark those services which need to assign to this staff and save it

  • Click on ‘Add’ on the ‘day’ which will be available for appointments. Therefore, those days will appear as available on calendar along with its time slot.

  • By clicking on ‘add’ button following screen will appear. Set details on this form

  • Added days can be deleted by clicking on ‘Clear’ button
  • Let’s suppose we want to clear the details for Sunday, so following pop up will appear

  • Click on ‘Yes, clear it’ and it will remove all the details that were added against Sunday and on booking calendar, this day will not be available for booking

 ‘Days off’ Section

  • Click on any day and it will be marked as ‘holiday’ on booking calendar  
  • Click again on marked day to removed it from holiday

  • Holiday will be seen on ‘Admin’s Calendar

5.6.1.Customers #

  • List of customers will appear here who has booked any appointment
  • Admin can edit the details of any customer or can delete them

5.6.2.Payments #

  • In this section admin can see the ‘Payment Status’ of all appointments

5.6.3.Emails Notification #

  • Go to ‘Email Notifications’ tab
  • Enter or amend the email body on those conditions where admin wants to trigger the email alert
  • If email body kept empty then notifications will not be routed
  • If we expand any email template from listed items so it will be shown like that:

  • There is an option of pre-define tags for specific data that can be utilized in any email template

5.7.General Settings #

Email will be sent to client by utilizing following particulars:

  • Go to ‘Gravity Forms Booking’ tab
  • Then ‘Settings’ tab
  • Click on ‘Company’ Section
  • Fill the details for ‘Company Settings’

  • Next thing is to give details for ‘Email Configuration’ 
  • ‘Sender Email’ will be the email address through which email notifications will be sent to client
  • Save it

5.8.Gravity Bookings Synchronization with Google Calendar #

Introduction

Gravity Bookings Add-on allows Staff Members to synchronize their appointments with Google Calendar so that they can also manage their appointments with Google Calendar.

Settings

  • Go to the ‘Gravity Forms Booking’ tab.
  • Click on the ‘Settings’ tab.
  • Then click on the ‘Google Calendar
  • Enter your ‘Client ID’ and ‘Client Secret’ from your Google Calendar Console

Then Click on the ‘Save Calendar Settings’ in order to save settings.

How to Get Client ID and Client Secret ID

  • Select a Project or Create a new project by clicking on the option ‘Select a Project’, after that a window will pop-up. Then click on the ‘New Project’ option.

  • Enter your Project Name.
  • Browse your Organization and Location OR choose the option, “No Organization”
  • Click on the ‘Create’ button.

  • Navigate to the left and click on ‘Library

  • Search for ‘Calendar API and make sure it’s enabled.

  • After that, Navigate to the left and click on ‘OAuth Consent Screen’ from the Dashboard.

  • Select the ‘External’ radio button.
  • Then Click on the ‘Create’ button.

  • Add an ‘Application Name’ in the App name field.
  • Enter your User Support and Developer email address.
  • Then click on the Save and Continue button.

  • Navigate through the menu on the left and click on ‘Credentials’.
  • Click on the ‘Create Credentials button.
  • Select ‘OAuth Client ID’ from the dropdown menu.

  • Copy your ‘Client ID’ and ‘Client Secret ID’ and Paste it into the Google Calendar Setting tab in the Gravity Forms Booking.

5.9.How to Connect ‘Staff’ with Google Calendar #

  • Next step is to connect ‘Staff’ with Google Calendar
  • Click on the ‘Staff’ below Gravity Forms Booking.
  • Click on the ‘Edit’ on any Staff.

 

  • In the detail section, click on the ‘Connect’ button.

 

  • Sign in with your Google account.

 

  • After signing in, the following screen will appear, click on ‘Allow’.

 

  • After clicking ‘Allow’ Button, the staff will get connected to the Google Calendar.

 

  • Now as a Staff, you can manage the scheduled appointments from your google calendar.

 

5.10.Payment Gateway #

Note:

If you want to process your payments through the Square payment gateway, read this technical documentation. To use this feature buy Square for Gravity Forms.

Square for Gravity Forms features include:
  • Process simple (one-time) payments.
  • Process recurring (automatic payments).
  • Sandbox support With the latest version of SQUARE V2 API.
  • Muli-form support/step forms support.
Here, Stripe gateway is shown for reference 
  • For payment gateway configuration go to ‘Forms’ tab
  • Then ‘Add-on’
  • Then ‘Active’ any payment add-on according to your desire

  • Next step is to go in ‘Forms’ tab
  • Then ‘Settings’
  • Then ‘Stripe’
  • After configuration, click on ‘Connect’ button

To configure stripe visit https://docs.gravityforms.com/downloading-installing-the-stripe-add-on/

 

6.Create Page #

  • Go to ‘Pages’ Tab
  • Click on ‘Add New’
  • Give ‘Title’ to page
  • Click on ‘+’ sign and select ‘Forms’ option

  • All forms that you have made will get listed. Select any ‘form’ and ‘Publish’ the page

7.Cutomer End Replace with Booking an Appointment #

7.1.Customer End Appointment Form #

  • Appointment form

  • On successful transaction, following message will appear and email notification will be sent to the user.
  • By clicking “Add to My Calendar”,  Google login will appear and after logging-in, the appointment will add to your Google calendar.

a

  • An appointment is shown in Google Calendar.

 

  • An email has received when Admin has confirmed the appointment

  • All appointment that has booked by the client can be seen at ‘Customer Appointment’ tab

7.2.Admin End Appointment #

  • Admin can see the appointment details in ‘appointments’ tab

  • First of all, Admin will mark the status as ‘confirm’, following pop up will appear upon clicking on ‘Confirm’ option

  • Then status will be marked as ‘Visited’, following pop up message will appear upon clicking on ‘Visit’ option

  • Once the appointment is marked as ‘Visited’ then its status will be changed

  • The payment status of this transaction will get shown in ‘Payments’ tab of admin

  • On all of these events, customer will get notified via email

8.Gravity Bookings Demo Login #

  • This process allows the Customer and Staff to check their schedule, the Customer login will redirect the user to the details of the booked appointment. Similarly, the Staff login page will redirect the staff member to view the appointments schedule for them.
Customer Login
  • The customer visits the Booking page and books an appointment according to his choice.

  • Once the form is filled, click on the Submit button.
  • Now go to the Customer Appointments page.
  • The link to generate the password will be received on the email entered by the customer on the booking form, click the link to get the password (User registration Add-on should be activated to complete this process).

  • Now login with your username and password to view your appointment details
  • All the details of the appointment are now visible.

Staff Login 
  • The staff can view their appointment schedule and details as well.
  • Staff would log in using his respective username and password.

  • Once logged in to the Dashboard, go to Gravity Booking > Appointments

Demo:
Staff Credentials:

9.Changelog #

Version 1.0.4
FIX – General settings not showing for new GravityForms version
IMPROVE – User settings and general settings save for new GravityForms version.
Added – Compatibility With Gravity Form New Version 2.5

Version 1.0.3
FIX – Current date not selected in new appointment
FIX – bootstrap.css overwriting theme’s css
NEW – Settings for appointments to select days prior to booking
NEW – Settings to set time interval

Version 1.0.1
TWEAK – Calendar will be greyed out if service not selected.
TWEAK – Added add to calendar button on gravity forms thankyou page for customers.
TWEAK – RTL supported frontend.
TWEAK – Submit button color same as calendar ui color.
FIX – Access token refresh issue.
FIX – Calendar two way sync issue staff id not storing in db.
FIX – Full appointment calendar not showing appointments on dates.

Version 1.0
Initial release

Help Guide Powered by Documentor
Suggest Edit

Leave a Reply

Scroll to Top