Make An Appointment Booking Website Using JetAppointment

Learn how to make a website with an appointment booking website where visitors can choose a service, a person, a date, and a time and put it on autopilot so you can fill all slots for the service you offer. You can also let them pay upfront through a payment provider.

This tool is great for barbers, massage salons, or any other business that lets people create an appointment.

We will do it using the plugins JetEngine, JetAppointment, JetElements, and JetPopup from Crocoblock.

First, we will get a Crocoblock subscription. Then we will install JetEngine, JetAppointment, JetElements, and JetPopup.

Then we will create 2 custom post types. Services and Barbers. But it can be anything. Houses, Listings, Appartments, Teachers. We will connect the services with the barbers so we can decide which barber offers which service. So for instance: Barber Roy can do haircuts and beard trims, but no mustache trims.

We will adjust the booking form so it will look better and is easier to fill in. We will style it to make it fit the design of the website. Then we will use JetPopup to place the form in a popup. We will trigger it in Elementor with a button element.

Then we will decide what should happen when a new booking is submitted. We will send a notification to WordPress, an email to the business owner, a confirmation email to the booker and we will redirect the booker to a thank you page.

Overview With Timestamps:
00:00 Intro
00:17 The Final Result
03:46 What We Will Cover In This Tutorial
07:59 The 4 Steps We Will Take
08:37 Get A Domain Name And Webhosting
17:03 Install Wordpress

19:29 The Frontend And Backend Of The Website
23:01 Make The Website Secure
23:20 Clean Up Your Wordpress Website
28:32 Wordpress Themes
30:18 Install A Complete Website

35:38 Get Crocoblock
41:14 Install JetEngine
41:47 Activate the License
42:11 Install More JetPlugins

44:07 Create Custom Post Types
48:57 Add Services and Barbers
52:12 SetUp JetAppointment
53:42 Configure the Opening Times

57:14 Single vs General Booking Form
58:10 JetAppointment Settings
01:00:27 Add Featured Images To Barbers

01:02:50 Jet Engine Forms
01:03:13 Add The Form In Elementor
01:06:12Link The Barbers To The Services
01:08:29 Fill In The Form

01:10:43 Adjust the Booking Form
01:13:49 Add Prices to the Services
01:15:32 Show The total price in the Form
01:17:54 Split the form into 4 parts

01:20:07 Create a Popup
01:26:07 Copy The Style Of The Popup
01:27:29 Adjust the Colors
01:34:17 Add A Trigger Button For The Popup
01:38:11 Adjust the form style in Elementor

01:46:20 Let the Booker Pay Upfront with WooCommerce

01:51:36 Introduction to Listings
01:57:19 Connect the Listing To The Form
02:00:36 Create a Second Listing
02:05:17 Change The Popup Area
02:05:58 Add a Back Button

02:09:23 Create an Email Template For The Shop Owner
02:16:22 Create a Confirmation Email Template For The Booker
02:18:47 Create a Thank You Page
02:22:37 Make The Form More Personal By Adding a Name
02:26:46Thank You

[nancoeelman]

Definately The best tutorial bult one critical thing missing and that is integration with calendar or how the client can see all the appointments!

[jimfahaddigital]

So far this is the best tutorial on JetAppointment 😍

[yeasinhossain]

Sure, you are the best tutor I have ever seen.

[williamreymundo]

You are the only one who really teach. A big mentor. Thanks.

[davewalker]

Awesome tutorial. Extremely detailed, with no fluff. I don't think I would've been able to do it without you. I'll send you a link to my sight when I'm done. Thanks, brother!

[scottwalker]

Great video Ferdy! The best part that I really enjoyed was the singing!

[Nathan-islp]

Ferdy you're the Man. So if you don't know, now you know.

[TayabBhatti]

Thanks, Ferdy 👏You are my LOVE 💖 I learned a lot from your all tutorials. Thanks Again Ferdy.

[WillInvest-tw]

The price per slot isn't showing as an option after selecting meta dataat "1:54" how do i fix this?

[johnrodrigueznow]

Thank you, Ferdy - What is the best way to take a deposit for "no-shows" and have full payment later if they do show?

[aqqibansari]

I love u
Mr. Ferdy Korpershoek. Your video tutorial alaways awsome!! You are genious...

[Enriquemdmr]

What if I want to make a reservation of more than one service?

[snoussiradouane-xpro]

You are great, thanks for sharing your knowledge and good humor.

Hi There
Thx for the great Tutorial, but i have one huge Problem, the Appointment ist not listet in the Appointment List.

Where is my Fault?

[pedroalvarezcasale]

my services prices are appear incorrect at checkout, I've done everything as instructed. Does anybody have any ideas on where to find a solution?

[andylloyd]

I have followed along with this video but on my form the Services Select field is empty! I have created everything correctly in the post types and added the services yet for booking forms Services select field is still empty.

[filippo]

Mhhhh... can we setup different locking time for services? For example. People sometimes make just beard. So it will be like 20mins locked. Not 1h or 1.30h. Each service must lock different times. So if you lock haircut and beard it will be 20min for beard and 45min for haircut. Its not good locking 1h or 1.30h flat for all single services. Its missing also the adding to a calendar the booking. For client and owner

[kitkat-hazelnut]

How does cancelling work? Also, which of the croco-plugins are needed for this type of website?

[JelleSchuermans-Tunity]

Hi Ferdy, apparently this way of forms is not usable (legacy) anymore, maybe you can update to the new way: JetFormBuilder?

[andrewbarber]

I don't normal leave comments but well done awesome tutorial. Singing a bit of surprise 😁