Make An Appointment Booking Website Using JetAppointment
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- 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.
Example website: jetappointment.cbexample.com
Crocoblock: ferdykorp.com/cb
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 - แนวปฏิบัติและการใช้ชีวิต
![[TH] 2024 PMWC x EWC Main Tournament Day 3 | PUBG MOBILE WORLD CUP x ESPORTS WORLD CUP](http://i.ytimg.com/vi/3EM6gpHgLk4/mqdefault.jpg)
![[TH] 2024 PMWC x EWC Main Tournament Day 1 | PUBG MOBILE WORLD CUP x ESPORTS WORLD CUP](http://i.ytimg.com/vi/f5Coja1zCzo/mqdefault.jpg)
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!
You are the only one who really teach. A big mentor. Thanks.
So far this is the best tutorial on JetAppointment 😍
Definately The best tutorial bult one critical thing missing and that is integration with calendar or how the client can see all the appointments!
I was about to write same thing.. An easy way to do it?
Somebody has solve this issue?
I use a webhook to push the bookings to my CRM in GoHighLevel
I love all things you provide us in this amazing channel thank you brother
Excellent video and the way you explained it, thank you very much for everything.
You are great , thanks for sharing your knowledge and good humor.
Great video Ferdy! The best part that I really enjoyed was the singing!
Ferdy. Great tutorial as usual. Using Hello Theme I note that when the time slots appear (using the default wizard created form) they have no indication of when they are selected e.g. box round them, colour changed, etc. All that happens when mouse moves over is that the cursor changes to a hand. However if selected and then saved the correct time slot is saved.
Also add new fields to the appointment and in the form - both with the same column names and case - and they appear in the form. Enter details and save. But when I look at details in the booking made they are empty despite being compulsory. Thoughts please as could not see any reference to this other than making sure the fields are added? Thanks.
Hi Ferdy. Love your tutorials. Keep it up! May I ask you a question? How can the plugin handle a service where multiple people can attend? For example, a yoga class that can have from 1 to 9 clients in the same time slot?
Quelle belle démonstration ! BRAVO ... Many thanks for your share
Awesome tutorial, thank you
Awesome tutortial, best ever I have learnt !!
I love u
Mr. Ferdy Korpershoek. Your video tutorial alaways awsome!! You are genious...
Hi Ferdy, thank you for your interesting video's. Is it possible to order the listing of services alphabetically?
Sure, you are the best tutor I have ever seen.
Thanks, Ferdy Greaaaaaaaaaaaat. 👏You are my LOVE 💖 I learned a lot from your all tutorials. Thanks Again Ferdy.
Ferdy you're the Man. So if you don't know, now you know.
Thanks Nathan 😊
I appreciate this great video, from Argentina I send you a big goal hug. I have had a doubt regarding whether I want to add a shampoo or some oils, I should do it from the DB>Tools so that it can be added to the service later in the final form. Thanks again
I don't normal leave comments but well done awesome tutorial. Singing a bit of surprise 😁
Ferdy great tutorial!, but I wanted to ask you the following consult: Where would I have to create the Custom Post Types and install JetEngine and Jet Appointment (Main Domain or Subdomain?), if I wanted to put a calendar on the homepage of my MAIN DOMAIN but I would want my customer to pay in the shop (located on my subdomain) .
Hey! This video is one of your best. But how can this be made to function as a multi-vendor service booking website? Thanks!
Hi. This is a great tutorial. I have a question, how do you show the booking inside the checkout page, I'm a bit lost. because on the your order column , my booking details are not even shown and my calculated field also not shown on the checkout page. is there any way you can help me with this problem? thank you so much
Thank you, Ferdy - What is the best way to take a deposit for "no-shows" and have full payment later if they do show?
Hi nice tutorial, but would you be doing an updated version as there has been so many changes ?
Very Excellent . Thanks Ferdy
Revisted this video and whilst editing test site on one PC followed through your video pausing where necessary. So much easier and now have a similar looking booking system working with emails sent, and appointments in database. So many thanks for that as learned a lot. My only question remains is at beginning of video shows completion of the form and then a popup appears with "Thank you for your order". But in the end of the video I could not see where that was created or indeed invoked from. Does anyone know?
Awesome tutorial!!!
hi ferdy. just came across your videos. Thank you so much for what you're doing!
i wanted to ask you... the popup styler i downloaded from your website is not setup to open with elementor but rather the normal block builder. Am i missing something?
Also, do you happen to have the styler for the red and black website you used to demonstrate in this video? i got pretty far following the tutorial but some parts of the style i just cant get.Appreciate your help!
Hi Ferdy! Heb je perse jet-theme core nodig? of zijn de andere 3 plugins ook genoeg?
Thank you for this!
can i use this plugin with any page builder?
thank youuuu
Can I place more than one booking system on the same site? Every page is different and a completely different system?
Great Ferdy. How can we make an appointment website for the portfolio to show our clients?
Hello Ferdy
For a client of ours we need to have a reservation system, we saw yours which seems to be a good choice, however we have some doubts that could be clarified, I ask:
In the types of services we need them to have a family tree + sub-families + sub-sub families up to 7 to 10 levels descending does your system do that or is the service created in a single item?
Thank you very much in advance
Fernando Oliveira
Thank you so much!
thanks for the great vid Ferdy. is there a way to add a calendar or appt system in my WP community so, EACH user can use it as their own, and schedule separate appointment with another user? ie, like using google-calendar. and each user log in their own, then see their schedule, and can send out invite to other for meeting
Can someone please explain how to do it on static single service? I can't edit the service page with elementor to add the form widget.
Ferdy good morning. listen would you be so kind and choose a travel theme or a tour activity tutorial that includes a booking engine and a payment gateway. your videos are the best out there you don't stop delivering day after day. I have been ripped off many times contracting my tour and airport transfers website and I had to take up courses to DYI and all thanks to you. By the way I am in Punta Cana Dominican Republic.
Dude! you rock..
Cheers Ferdy xx
How would I make it so more time slots can be chosen? Booking rooms, same principle - but booking a room and then choose more than 1 time slot. Cant find it.
hey ferdy, weet jij misschien hoe je de calender in jet appointment kan veranderen naar een Nederlandse calender?
Zo dat de dagen niet in het engels zijn maar nederlands
Hello, from Peru I want to say congratulations for your videos that I am learning, it would be interesting if you can another tutorial to create a rental website or reserve a rental on the day and time, it would be spectacular, that you follow the successes.
you are really so helpful man love to see you
Happy to hear that!
@@ferdycom I can't receive the booking email from both sides the sender and the receiver can you help me
hi Ferdy :)
What program do you use to run the localhost? in 1:12:52 Min
thx
How does cancelling work? Also, which of the croco-plugins are needed for this type of website?
I upgraded to Astra Pro and Elementor Pro and now I just get 500 errors... apparently my hosting says there’s a conflict between them and I have to deactivate Elementor & Pro to adjust Astra. Stupid, seeing as the free version worked fine. 😒
Hello Ferdy! Thank you for the video!
I have two questions.
1 - Is possivel to create tree post types, for example: 1) Services 1 2) Services 2 3) Providers and create the combination Service 1 - Providers and Service 2 -> Providers?
2 - I was wondering if it's possible to change the price of one certain service depending on who is doing it.
Thank you again
I have the same business case - creates drop down menu next to the service on different categories - that allowed me to create pricing. Still in Dev though
Hi. Does this plugin have the ability to order more than one service and several? For example, a client wants not only to get a haircut, but also to shave. There is a multiple service selection function and the time of the service is also added? That is, 1 service half an hour + 2 service half an hour so that they are summed up together at once? But if need to make a new order for the second service, then it's not serious. No one will order like that, they will just spit on the site and go to competitors.
hello man, can you help me, How can I remove the "Appointment details" part or change the name to Portuguese?
when I click on one of the hours, this part appears at the bottom and I can't change the name or remove it.
Thank you so much Cristiano Bieber Gomez 😅, You're really amazing, Helpful Tutorial
Thanks. Very much.
Hi Ferdy,
I hope you are well.
I am browsing from 3 days about finding a crocoblock jet appointement micro to display total numbe of hours selected by user.
For Example:
User goes to appointement calender and select date of 20 March and then they selected time for appointement from 8am to 11am.
In this case user has selected 3 hours. Any micro who will display the number 3 or selected hours number.
Any help is appreciated. Thanks:)
@Ferdy Korpershoek and also I can't receive the booking email from both sides the sender and the receiver can you help me
Hi ferdy, great video! How do you work when you have only one staff member for 5 different kinds of appointments? They are all different in length and are planned at fixed hours. Do I make a separate provider for each kind of appointment that is actually the same person? 😅 Many thanks in advance!
You spoke as a Pakistani
thank you very much for the tutorial. can i request for a website tutorial using jetbooking which is integrated with woocommerce?
Hi Ferdy, apparently this way of forms is not usable (legacy) anymore, maybe you can update to the new way: JetFormBuilder?
Hi! Are you still using Crocoblock? I see you did your last tutorial about it more than 1 year ago. Can we expect more tutorials about Crocoblock ? I am asking because they are super helpful. Thanks
Hi Ferdy, I am looking for a booking plugin that gives a confirmation ID, none of them I've seen so far gives that. Do you know of Any?
great video
Does it work with Divi?
Does it also connect with google calendar?
Is there a cancel action? to cancel appointment. thanks
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.
Nice, how about a video on JetBooking Ferdy.....
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
Awesome 🔥🎉
Can appointment services be synced to each product with WooCommerce?
Hello Mr Ferdy, I like you video, but how make a booking product on Real Estate with down payment?
If somebody want to buy a properti, they just only click of menu Booking + down payment . This menu have integration on payment gateway too.
How can I disable previous dates from date picker?
Hello Ferdy, thank you for your great work!
Do you know if it is possible to change the label of the „next“ button? Because I speak another language and would like to have that button in my language. Thanks for the help!
You can edit it at the page break. Check at 2:06:00
@@Trymaz i‘m such an idiot... wow. Thank you!
What if I want to make a reservation of more than one service?
why did you created another column (name) for database at "2:25"?
The price per slot isn't showing as an option after selecting meta dataat "1:54" how do i fix this?
Hello guys!
Can anybody help me? I'm using elementor pro + jetengine + JetAppointment. I'm testing the system. I book an appointment and it is successfully, but in the backend the appointment is not showing and in the calendar the booked appointment is free.
Ferdy, Can you make a Car rental Booking Website Tutorial with crocoblock
Is it possible to categorize your services?
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?
Bro please make a Research journal free website
Thanks.
This is also very nice video
anyone, is there away to remove the background pics and upload our own?
If I want to use it for a single person and for a single service. How can I do this?
What's about Indian's we could get the discounts
Hi Ferdy! Can i still use booking plugin if i have the blocksy theme ?
Yes, you can 😊
Hi Ferdy, don't really get it: I have Elementor Pro and need simple Appointment functionality. What is the functionality provided by the mere JetAppointmens only? None? Does it ONLY do something with all the other plug-ins bought? thank you.
JetAppointment is an appointment plugin. You can style the plugin with Elementor Pro.
thank you, Ferdy. So do I need JetEngine to get it working or not?
Ik volg nauwgezet de instructievideo over jetappointment in de barbershop website maar krijg wanneer ik het form plaats geen services of providers te zien in het keuzemenu.
Waaraan kan dit liggen aub?
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?
I am also getting the same error. Did you solve the problem?
In the static booking form, the service is not showing so I can not select the service and also providers as well as I have done as per the tutorial
go to jetappointment settings in the dashboard and make sure "services post type" and "provider post type" are selected right
Hi, ferdy I want to add the popup trigger button when I search the element I can't get the green colour button can you help me
The green button is the "Button Widget" from Crocoblock, part of the JetElements pack.
@@ciitrusdigital thanks you
Does anyone know of a notification of appoint to remind customers is possible
Your best bet would probably be syncing the appointments to Google Calendar, then using Zapier to grab the appointment date and send out an email when the appointment gets close.
Great..
Good afternoon
How to use it for short one day training courses
Offered at various location
How to limit number of participant for group products?
Hi ! I have a question... I do not understand why the services do not appear in the form (min 01:08:52)
Im in the same position. Did you manage to fix this?
didnt u upload this video before ? like 2 months ago ?
The barbershop one.
I only liked after the singing part 🤣🤣
I only use one service but my form doesn't submit, can someone please help?
I am also getting the same error. Did you solve the problem?
In een eerdere video raadde je Siteground aan om te hosten. Waarom nu Namehero?
Siteground is een stuk duurder geworden, accepteert niet meer alle landen en ze hebben iDeal afgeschaft. Ze passen niet meer in de visie van dit kanaal. Helaas.
I am unable to find template
I'm trying to create the email template, I feel like I done everything well but I never actually receive the email.. Does anybody have that problem too? Thanks
PLEASE :'(
@@clementgarcin9839 me too
I success after reinstalled wordpress
How do you sell this website? Like do you keep paying for the webhost yourself annually?
You can decide what you do. I recommend to let website owners host their own website.
@@ferdycom Thank you so much Ferdy ❤️