How to Create An Appointment Booking Website

what i have for you today is a tutorial on how to create an appointment booking website using gutenberg blog so if you own a business like a clinic a barber shop a law firm or any business that requires a simple booking system i have you covered i've been longing to do this tutorial for a while and i finally got a chance to do it i'm going to show you how you can create a page like this from scratch and then i will show you how you can create a slide-in pop-up to display your booking system your clients or patients can select a service from this list select a dentist select a date book a time slot enter their contact details and then the booking is confirmed so that's what we're to do today if you want to follow along with this tutorial i have all the images and videos for you to download i'd love a link in the description and without further ado let's get started with this tutorial [Music] hey this is jack and if this is your first time watching a video from my channel i share a lot of wordpress tutorials mainly focusing on using gutenberg blogs so that your site will pass call web vitals and get higher rankings on search engines and if that's what you're looking for then subscribe to the channel and hit the bell notification now before everything else i believe you already have a website in place so i don't want to waste your time going through how to set up web hosting and wordpress i believe that's the job for the support team of those web hosting providers but just in case you want to start afresh or you want me to recommend a fast and cheap web hosting service for your sites i recommend a2 hosting i have tested them against many other popular web hosting providers and they seem to be the fastest of all if you want to check out how i did the test in a fair and objective environment you can check out this video over here their plans start from 2.99 per month so they are not only fast they are cheap too if you want to check them out you can use this link to get the latest discounts anyway let's get right into the tutorial okay let's do this let's quickly whip up a design like this and i'm doing this on another domain a totally blank wordpress install and as you can see this is how i like to set up my wordpress gutenberg workspace i have the live page on the right and i have the back end on the left so the first thing we need to do is to install the themes and plugins right so let's go to appearance and under teams and as you can see these are the themes that are installed on my website i want to remove them in a while but let's add new and let's search for bloxy let's go and install this and activate now some of you may ask why use bloxy in this case rather than cadence and the reason for this is because on bloxy you can have this light and effect over here while in cadence you can have this effect but you need to rely on the pro version of cadence blocks which is another level of membership so to keep this simple i would like to have this as a team feature but we'll still need the bloxy pro version to have the content blocks but anyway let me just remove all these unnecessary themes for housekeeping i'll just have bloxy as the only theme and then let's go to plugins and add new now there are a couple of pro plugins we need to install let me click on upload plugin and i'll drag in block c pro now if you want to get block c you can use this link with this code to get a 10 discount the reason why i like bloxy is because it has a lot of inbuilt features just like the feature i showed you earlier but anyway let's go back here and let's install and activate the plugin now we need the license key so over at the blockchain accounts let's copy this license key and let's paste it here and once you activate the license key immediately you will see this content blocks here which is what we need in this tutorial next let's install another plugin let's go to plugins and add new and then i want to upload another plugin this time around i want to drag in stackable pro let's install this and activate now stackable just went through a complete overhaul of their blocks and it is on a new version called stackable 3.0 and to be honest with you they are inline to be the best gutenberg block plugin for building sites if you want to check them out you can use this link with this code they have a lot of design templates and a lot of cool good blocks we will explore them in a while but what we need is the license key here so that we can go back here and paste the license key here once the license is activated you'll be brought back to this page and now we are ready to design this page from scratch very quickly so the first thing we need to do is to design a header for it to look like this we have the menu one here and then we have some buttons here with a logo and that's what we need so let's go to appearance and customize and before everything let's refresh this page this is how the blank bloxy theme looks like and then let's go to header now let me walk you through a little if this is your first time on the team like bloxy so as you can see here there are three rows that you can add some content to it these are all happening on the header we have a logo here that is represented by this my wordpress and then let me expand this out a little you will see this menu one that is represented by this sample page because we have not created a menu yet and then we have a search function here that is represented by this so if i wanted logo over here i would just click and drag this logo over to this position and you'll see the my wordpress here and then for this menu one if i want the menu to appear right here i can click and drag it over to this position i don't need the search feature but i need a button so i'll just click and drag this button feature and put it over here now i need a second button here so let's go over to this button feature and clone this item so that we have this button two right here let's click and drag it right here cool we have two buttons now for this button one i don't want these two buttons to have the same design so i'll just select this ghost design which will look like this that's cool and then let me change up the logo let's click on the logo and then let's select logo now i have pre-uploaded these images and if you want to follow along with this tutorial i've left a link in the description you can just click it and download all the images so this is the logo image and for the purpose of search engine optimization i want to paste an alt text over here this could be the name of your business or whatever and then i'll click on select and you can see the logo here but i don't want this my wordpress which is represented by this site title so i will toggle this off and the logo is a little small so i will just expand this maybe make it 80 pixels i think it's good enough now i want to change the background color here so that the logo will be visible let's go to this main row and click on this settings here and let's go to design for the background we want to paste in this color code and this looks cool already next we want to change the color of this menu items and these buttons so let's go back all the way to the front and let's go to colors now this is the global color palette which means if you change these colors everything else on your website that is drawing the color code from this color palette will be changed as well let me give you an example now if i click on this color one and i paste in this color code you can see that the color of the button has now changed and then for this color too it was this blue color here if i change it to the same color but make it a little darker you can see that this changes as well the same goes for this it was blue color initially so this is what the global color palette does for this dark color i want to change it to this color code and we are done let's publish this next we gotta add the menu item so we have general cosmetic surgical and about so let's go to this menu item as you can see as i hover to the menu item this little icon will appear if we click on this it will bring us to the setting of this menu item now we need to head back to the wordpress dashboard so that we can add the menu items so let's go back to this but let me right click and open up in the new tab and let's go to appearance and menus now we need to give this menu a name it could be anything but i'll just put it as menu one and i will select this because this is represented by this which is right here so if i add the menu items here it will automatically appear on a page so let's create the menu now we don't have any pages to link to at this moment because this is a completely blank page so we will add custom links for the url i'll just put a hashtag so that when someone clicks on the link it will not bring them to anywhere else but they will stay on the page for the link tags we have general let's add menu create another menu item we have cosmetics and we have surgical and finally we have about cool we are done let's save menu and let's go back to our customizer let's publish this first before we refresh this page and here we go all the items are here but it is kind of hidden because of the color blend so let's click on this menu settings and let's go to design over here the font color let's turn this white and here we go let's publish this and let's see how it looks like on a live page this is looking cool but let's change the text over here let's click on this button for the button text i want to change this to contact and for this button i want to change this to book now now let's edit the mobile header as you can see it doesn't look really nice so i will bring this logo to the middle click into it i will make this a little smaller and then as for the trigger which is this little icon here i can turn it to this design but as for the color let's click on design i want to make it this color so it will be visible but i want a book now button here so let me drag this trigger over to the left and then let's head back here i want to bring this button to right here and that's good enough let's publish this refresh the live page and we have this cool looking header the next thing we need to do is to design all these page elements i'll do this very quickly but we first need to create a new page let's go back to the wordpress dashboard and under pages let's add new we'll give this page a name it could be anything but i prefer if you put it as your business name so for this case it is dentist booking this is the name of the business for this example let's just publish a blank page and then we can head back to wordpress dashboard and under settings reading over here your homepage displays i want to make this a static page and for the home page i want to select this dentist booking page that we have just created now we need to publish that blank page first before this will appear and then let's save changes and as we refresh the live page this will be gone and this will reflect whatever you add to this page now we don't want the page title to appear so let's click on this bloxy page settings and over here the page title let's disable this and update refresh and this title will be gone now let's quickly add an element let's browse all scroll all the way down to the bottom that's where all the stackable blocks are let's look for something called columns we want one column so let's click on this now over here let me expand this list view so we can see all the layers as you can see this column layer is nested over this columns layer we want to select the base layer so that we can adjust the length of it to full width now each layer here will have its own setting so if i want to add a background color i want to make sure that the base layer is selected let's go to blocks and on the background i want to turn this on so you'll see the background here i want a background color to be this and then i want to add a new block within that column so let's click on this let's browse all let's scroll down all the way and let's search for something called heading now i want to type in some text let's say free teeth whitening with first visit and i want to centralize this for this text i want to change the typography to a font called emphasis and this is how it looks like let me change the size to maybe 30. i think that's good enough let's update this and let's refresh to see how it looks like so this is how it looks like there is still a white space over here so what we need to do is to go back to the base layer over here the columns let's scroll down and under size and spacing if you have never designed a web page before you need to understand margins because margins takes care of the spaces outside of the element and then for paddings it takes care of the spaces within the element let me show you what i mean so let's say i want to move this entire element up i need to adjust the margins so for the top margin i'll put this a negative number so maybe negative 50. as you can see everything shifted let's try to update this and refresh now nothing has happened and i know the reason why we need to go back to wordpress customizer let's go back to the front and under pages we want to click on this and then over here content area vertical spacing we want to disable it and let's publish this let's refresh this and you will see everything is now in line so cool we are done with this section let's go back to the page let's quickly add another element browse all scroll down all the way to the bottom let's search for something called hero over here let's click on this we want to select the default style and then let us open the list view you can see that under the hero layer we have the heading the text button group and button so for the heading let's change this you deserve a great smile and then i want to change this typography to episodes and then i want to increase the size of this to maybe 55 to make a statement and then this text over here let's change this to great smile begins with a great dentist and then as for the button i'll change this text to book now alright cool now i want to change this text to white let's click on this and turn this white this as well let's turn this white under typography and then as for the button let's scroll down a little under the button colors i want to turn this to this color and now we can add a background but before that let's click on this hero layer and we want to turn this to full width and then as for the container background i want to add a video so let's click on this again i have this video for you to download so i'll just click on this and select now you'll see the video here let's update this and refresh the live page and see how it looks like the same thing we have this white space here which we don't want so let's see how we can handle this let's click on this the hero section under the block size and spacing the margin we want to put it as negative 50. let's update this again refresh cool i think we are in line and then the next thing we need to do is to have this section here so let's go back here and then let's add a new block let's browse all scroll down all the way to the bottom where we can find actually let's click on this design library let it load for a while so that we can see the design let's go to categories let's look for something that is suitable so we have this feature block here let's select this so that this will be imported now let's click on this layer here and then i want to shift this image over to the right let's click on this move right and everything will be shifted now let's click on this image and then i want to select this image cool but this is a little too big so i will go over to the image fit i'll put this as contain that's good and then next i want to change this to hello we are dentist booking and we can add some feeder text here and we can change this to about us now for the heading i want to change the typography to this dm sheriff display let's update this refresh and see how it looks like cool we have this done see how easy it is with stackable and the next thing we need is this section called our services so let's go back here let's add a new block let's open up the design library let's go to service and i want to select maybe this let's click on this layout and let's edit from here the heading i want a size to be 55 but the typography i want this to be dm sheriff display and then over here i want to remove everything keeping just the columns so i would add a new block let's browse all scroll all the way to the bottom and let's search for something called image box over here let's click on this let's select the default layout and as you can see as you hover there's some text that will appear but first let's add an image let's say this is the service one let's select this over here we have general dentistry for example i will put this as teeth whitening dentures and crowns okay and we want to remove this subtitle so cool let's update this first and see on the live page we have something like this which is cool so what we want to do is to duplicate this over to number two and number three so let's click on this image make sure to expand this and we want to select the entire image box not just the image and then over here under the options we want to click this and we want to copy it now go back to the second column let's remove all these elements and we want to add a new block let's select paragraph and we want to right click and paste this here cool and then let's change this up let's click on the image we want to select number two this is going to be cosmetic we can have this as whitening for you dentists don't hold me to this i'm not a dentist so i'm not very sure about the services then we can have this as botox and then in visa line okay i hope i spelled this correctly next the same thing i want to select this image box layer open this options and then we want to copy this go to the third column let's remove all these elements and then let's add a paragraph so that we can right click paste now let's select the image let's put this services tree and we have surgical here we can change this to this and implants okay let's update this and refresh the live page and we have this cool looking services here we forgot to change this to our services and we need a separator here so let's go to the bottom here let's add a new block let's browse all let's search for separator now let's bring this separator up so let's click on this move up and here we go now if we want to design this separator let's open this up for the background color we can select this and then as you can see that's the 24 pixels of padding we want to remove the padding so that these two elements can blend in so let's click here and drag it up next we want to change this background to this color so that it will match and it will blend together let's open up the list view let's go to this columns here and then let's toggle this background on we want to select the same color and as for the services we want to change the text color to white let's update this and see how it looks like on the live page cool i think this is good enough now let's add another separator let's select this separator here and then let's scroll down we want to flip this above so let's flip this vertically and then we want to change the background color to this so that it will match and over here the padding we want to click and drag it up updates refresh we are done with this section next what do we have we have a testimonial area so let's go back here let's open this up actually just go to design library and then under categories let's go to testimonial and then let's select this layout let's change this up a little the typography is what we need and as for the color let's select this and i'll just leave this text as it is this is just a template site so obviously if you have real testimonials you can add information here this is just to show you how simple it is for you to design a page with stackable next what do we have we have meet the team here we have james jane and julia so let's close this over here we don't want to select this block because this block is nested under this entire column here as you can see if i select this block you are actually selecting a nested layer so we want to have a layer that is completely out of the nested layers as you can see over here let's click on this layer and open up the design library and let's go to team let's select this here now let's go to this header make it centralized change the typography let's select this and change the size to 55 we want this color and as for the image let's click on this let's select james obviously for seo purposes you can put this as maybe dr james select this and then as for this we can have dr jane select and as for the third dentist let's select this and have it as dr julia so we have dr james dr jane and dr julia and as for the position we can have we can just put it as dentists or maybe certified than this i don't know don't hold me to this okay that's cool i'll leave all the text as it is let's update this refresh and we have this done maybe this text i want to shift it to the middle so let's click on this text and shift it to the middle all right cool now as you can see here there is just this faint background over at this testimonial section so we don't want that let's select this make sure the base layer is selected which is this columns under the block the background we want to have this as transparent and then you will see the background gone let's update this refresh and now the background has blended i think we are done let's see what's next and we have the map and the location here so let's hit back over here on a new layer let's go to design library again let's go to feature and we want to select the same layout as before select this column bring this image over to the right select this image and let's put in the map and then as we scroll down the image feed we want to make this contain and then over at the heading let's change the text to the business name let's change the typography and the size now the location put in some awesome text let's hit enter let's add a new block here let's search for something called icon list actually let's not build this from scratch let's open up the design library let's search for something appropriate actually we can have this here so we don't need to design everything from scratch again let's delete this let's select this block go to design library under list let's select this for the image let's put this as the map image feed let's make this as contain and then as for this title i want to change the typography and increase the size now i can put in the address change the size of this a little bigger and then let's hit enter to put in some text and over here we have the feature let's click on this icon and let's search for an appropriate icon so maybe let's select this and for the second icon let's search for map and we have this and for the third let's search for phone and we have this now over on the right under the icons and numbers we can change the color of the icon to green and then as for the size we can bring this up a little maybe 2.5 and we can add the text here so we can have a call we can have get directions and we can text in and as for the typography let's change the text to this color so cool let's update this refresh and we have this here so i think we are done with this design layout the next thing we gotta do is to do the booking features so let's go [Music] now let me show you how easy it is to create a booking system with plugins from croco block it is probably the only provider that offers a booking system with many dynamic features in gutenberg if you ask me for a recommendation on a premium plugin i would recommend this in your arsenal of plugins because you can do more than just booking you can create a real estate listing site with it a car listing site an e-commerce platform with many sellers a hotel booking system and more i recommend getting this all-inclusive plan so that you can get all these plugins now not all plugins are gutenberg ready as you can see there are certain plugins that are meant for elementor only and these are the ones that are meant for gutenberg but i believe they are putting a lot more focus on gutenberg going forward so if you would like to follow along with this tutorial you can use this link to get the jet appointment the jet engine the jet style manager as well as the jet form builder or you can just get all inclusive if you think you are going to build more than just a booking site now the way to style gutenberg booking forms is still in the early stage and there are some limitations which i will share with you in a while but if you just want a simple appointment booking system this will do just fine so let's head back to our wordpress dashboard let's go to plugins and add new and we want to upload plugin i'll drag in the plugin we need we first need the jet engine let's install this and activate it let's add new again and upload plugin we would install the jet appointments booking nyx and then we'll install the jet style manager and finally the jet form builder cool that's all we need now first things first we need to create custom post type for our dentist as well as the services we provide so let's go to jet engine and let's go to post types let's add new now for the post type name we'll first create one for dentist and hit tab let's expand all this i think these are fine let's just add post type and immediately you will see here there is this dentist menu item now but if you don't like this icon right let's do it again let's go to the post types and we want to delete this let's add new again and then let's go to labels over here the menu icon we want to change this let's search for something like this maybe and then let's add the post type so now over here you can see with the dentist menu item we have this icon here this is just for your reference your patients or customers will not see this so we gotta add new dentist now who do we have we have dr james let's just publish this let's head back add another dentist we have dr jane and we have dr julia cool but this doctor we need to quickly edit this we need to put a dot right here let's update this so everything is consistent now we need another custom post type so let's go to jet engine let's go to pulse types again and then add new this time around we want to put in services tab and then under advanced settings let's go to the menu icon let's search for maybe hearts select this and add post type cool now we have the services here let's add new now what do we have on the site we have general dentistry let's publish this add new next we have cosmetics add new again and then we have surgical cool we have all this here now we are ready to build the booking form let's go to appointments and setup now over here the services post type we want to select the services which we have just created over here and then we want to add providers which are the dentists so we will select the dentist and next now these are all the database and they are basically the information you collect from whoever they are booking from your system so we are collecting the email the dates the slots and everything but what i feel is missing is the phone number because i want to call my patients if they are not showing up so i'll just create user underscore phone and then i'll create another so this is user underscore first name and we're done let's click next and over here the time format you can select either this or maybe you want the am pm but this is the upper case so let's for example select this now the slot duration is the average time for an appointment to complete so for example each dental appointment would take probably around 45 minutes not sure why is this the case but anyway you can see it here and then for the buffer time slot this is the before slot so there is some buffer time before the appointment but usually you will need a buffer time after the appointment because you will probably need to key in some follow-up actions or some private patient information so you'll probably need 15 minutes so what this means is that whenever somebody books an appointment the appointment will take 45 minutes and you will take another 15 minutes to clear up the whole appointment which in total takes one hour so if another person were to book another appointment it will be in the next hour okay we are done with this and for the working hours on monday to friday it is this timing obviously you can change it if you want to but i'll just leave it as it is and saturday if you're open half day you can just end here so maybe from 8 am to to maybe 12. so let's save this now over on this days off you can maybe add christmas if you're not working on the day so for example let's add days let's put this as christmas and then for example you're not working from 24 december and then you're just starting to work on 26 so we'll end it on 25th let's save this so on the appointment calendar nobody can select slots on that day sorry the date is not correct okay i understand why so it's on 25th december previously was on 25th october so here it is and then next for the woocommerce integration i don't think we need it because usually for dentist appointments you just pay on the spot you don't necessarily need your patients to pay upfront so i would not activate this in this use case and then for the single service booking form this basically segregates the services this is for you to input a form on the single service page which means it will restrict you to only that service for example if you're on the page of general dentistry it will restrict you to only booking the general dentistry service we don't really need this we need a dynamic form which is this so i'll just toggle this off and the next thing is we want to create a form in you can either choose jet engine forms or jet form builder if you want to leverage on the gutenberg styling you will select this jet form builder and let's finish this now as we hover to the jet form builder and go to forms you will see this form created now this is the short code for you to paste on any page you want this form to appear so let's just take an example let's create a new page give this page a name and then right click and paste this shortcode and then publish i just want to show you how it looks like and then let's view page now this is how it looks like by default you can select the service and then as for the provider we don't see any dentist yet because we need to set it so let's go back over here let's go to dentist and let's edit dr julia now over here select services we can type in general surgical maybe she can only provide this to service so let's update this let's head back and then for dr jane let's search for general dentistry surgical and cosmetics so she can provide everything let's update and let's go to dr james dr james can provide everything as well so general cosmetics and surgical cool let's update this and then let's go to the appointment form and refresh now as you can see under cosmetics we can only see dr james and dr jane because dr julia cannot provide cosmetic services and if we select surgical all three doctors are in as well as general dentistry all the doctors are able to provide this service let's select for example dr jane let's select a date click on this now there's no indication that you have selected this but on the back end it is already selected we'll fix this in a while don't worry about that and then we can provide an email address so for example i'll put in my email and then let's submit now cool the form is successfully submitted and then let's go back to our wordpress dashboard and let's go to appointments if we click on appointment we can see this information right here okay that's cool now the thing is if we want to edit the form here's what we can do let's go to forms let's edit this now for example if you want to style this section here this is for you to select the service you can actually click on this you can change the size of the text to maybe 18 and the text color you can change it to maybe green so if we update this and we go to the page and we refresh we can see the changes here now what if this is overwhelming and we want our patients and customers to select one field at a time we can go back to this form and then we want to add blog browse all let's scroll down these are all the blocks from croco block we want to select this form break field so if we click on this we'll have this button here called nyx so if we want to change this we can say this is continue and then let's open up the settings this is the first few so we don't need a previous page button let me show you how it works let's update this and as we refresh you can see we can select the services and then we can continue and if we want to include a form break view again over here let's duplicate this and bring this down but this time around we need a previous page button so let's put this as back and as we update and refresh we can select a service continue these buttons look ugly we'll fix it in a while let's select a provider continue and here we go now we can add other gutenberg blocks as well so for example over here this is for us to select a provider so let's say after this we have a heading let's say this is step two select a dentist and let's style this maybe 30 pixels and let's duplicate this bring this up this is step one select a service let's duplicate this again bring this down here right after the form break this is step three make an appointment and then let's create another let's bring this down here provide your contact information this is step four okay let's update refresh okay step one select a service continue step two select a dentist make an appointment we need a break here so over here let's browse all search for a form break field but we want to bring it up right before step 4 and then we need a previous page change this to continue let's update refresh this is just in case somebody changed their mind they want to select a different service they can go back and as you can see i have not selected a provider and i can just continue so we want to restrict this so we will select this field and then we want to toggle this on for this as well we want to toggle this on and this as well let's update and let's try this again let's continue i have not selected a provider and i cannot continue right here so i have to select a dentist and then we can continue so these are the basic functionalities and where do we want to put this booking form we can either put this on a completely new page like this so that when somebody clicks on book now for example this button they will be sent to a completely new page or you can do it another way you can trigger a slide in pop-up when somebody clicks on book now let me show you how all we need is just to get this short code and then let's go to bloxy under content blocks we want to add new we want to select this pop-up template let's give this a name for example booking form and let's create content block now we want to select this the bloxy page settings and the pop-up position will appear on the right and then i want the pop-up size to be max with a 400 i think that is fine we'll leave this and then for the pop-up animation i want it to slide in from the right i'll leave this trigger condition and i'll add display conditions i'll place this on the entire website if somebody triggers this so over on this let's maybe add some styling to it maybe we can write in book noun or maybe put a heading and maybe i want to change this typography so i'll just select settings under typography i'll put in maybe a lex brush and then next i want to add the shortcode cool we're done let's update this now let's head back this is the link we need so if somebody clicks on the button this content block will trigger we want to place that trigger on this button so let's go to appearance and customize let's go to header and for the book now button which is button number two let's click on this and over here the click behavior let's open pop-up and we have this pop-up template we don't even need that link so let's publish this and then let's head over to the page let's go to the main page refresh if we click on book now we can see this small section coming up here so what we can do to style this is to go back to the content blocks and edit this we can maybe put everything into a container so let's say i will add a column a one column and then i will copy this remove this block let me open this up and then within the column we want to nest the heading within it next for the short code let's copy and remove this block hit enter so we have another text here that is nested under the columns and paste this shortcode here and then under the columns i want to go to block size and spacing under the padding click on this to open up these positions and for the top i want to put maybe 150 and for the bottom i will put maybe 150 as well let's update this go to the page refresh and if we click on this it expands out a little bit more let's put this maybe 350 this as 350 as well and let's update this refresh click on book now so we are close but it still kind of looks ugly we need to bring this in all the way to the corner so let's go to this bloxy settings let's go to design the pop-up offset we want to turn this zero so that the gap will close up and then as for the container overflow we want to put this as visible in case the form has many elements and it is hidden if we select this the content will still be visible and then for the close button we want to put it inside so as we update this and let's refresh this page click on this book now you can see this looks much better now what if you want to add the first name and the phone right here let's head back to the wordpress dashboard let's go to the jet form builder under forms let's edit this now over at the bottom let's add another block let's browse all let's select a text field let's click on this put this as required for the field name we'll put this as user phone remember this is the database we have created we want to select this settings and for the field label i'll put this as phone number okay let's duplicate another for this we want the user first name and the field label we want this as first name let's bring this up let's bring this up as well and let's update this now there's one more very important thing we need to do under post submit actions as you can see here we can insert appointment we need to click on this and over here the user phone we want to copy this and place it here this as well because this is the database name we have created and whatever your patients or customer types in we want it to store on this database so let's update this and let's head back to our form refresh this click on this book now we can select surgical for example let's continue select dr james and then on the 21st of october i will select 12 and i have my name my email address and my phone number let's submit cool now let's go back to the wordpress dashboard and under appointments let's click on appointments and here we go we have selected surgical and we have inputted this email address and if we click on this edit we can see that the user phone is typed in here so that if the patient did not show or if you want to call the patient for more information before the appointment you can do so and this is the user's first name and we're basically done now there's one more thing to do which is to go to the content blocks we want to copy this we want people to click on this and it triggers that form so here we go let's go to the pages let's click on all pages this is the front page let's edit this we can actually delete this if we want to and here it is let's click on this book now for the link just place this here remember to hit this submit otherwise the link would not register let's update and let's go to the page and refresh so this can be placed on any button so if we click on this book now button this will appear you can place the trigger on whatever button so that's basically it this is the entire booking system now let's style these buttons because this looks ugly now to style this we need to rely on custom css which i have prepared for you we can't style this on gutenberg but i've raised this up with them i hope they'll do something about it but for now let's head over to the customizer let's go to appearance and customize and right at the bottom we have this additional css let's right click i'll paste this here don't worry you don't have to type everything in i've left a link in the description for you to download this code now over here you can change the color of the background we can change the colors over here wherever has this color codes you can change it to your liking so let's publish this first and let's go to the front page and refresh and let's see how it works so if i click on book now you can see that the button has changed right now and if you want to change this color you can do so let's go to the customize let's say that this um next page because this is for the next page this is for the previous page and this is for the time slot so if we want to change this to black so let's for example um black the color of black is six zeros let's publish this let's head over to the page and refresh if you click on book now you can see that the button has now changed to black so let's continue with this and let's select dr james let's continue and do you remember when we have selected this and when we select the time slot the selected time slot is invisible so we don't have an indication whether we have selected the time slot or not so now if i click on this you can see the selected time slot has this background so these are all the fixes in the custom css and there you have it this is how you add a cool booking system to your site now let's discuss the limitations we have because if croco block can fix this your patients or customers will have an awesome booking experience [Music] so let me quickly describe the limitations of croco blocks right now so over here if i click on book now you see we have this very nice looking design template over here so what i did was if i go back to the dashboard over here and this is actually a feature of jet engine forms so if i go to the jet engine forms instead of using the form from jet form builder if i get into it if i open up this service id as i select radio i actually have this option to use a custom item template which i've created this list of services so if i go to jet engine and open up this listing let me show you what i did if i go to this list of services i've created something like this which basically reflects this but if i head over to the forms from jet from builder if i edit this and go to this service section i don't see anywhere that i can add the custom list okay so this is one of the issue there is another big issue so let's say that i go back to the jet engine listing and as you can see i've created a list of dentists that basically looks like this it is similar to this design over here i want to make this consistent right so if i go to the jet engine forms right let's go over to jet engine forms and then let's edit this if i select this appointment provider over here you can see i can use custom template for items so if i select yes and then i select the list of dentists apply changes updates this will happen because i think originally this plugin is made for elementor so if it didn't find the elementor plugin this will happen but never mind about this and what if i go to the jet form builder and we go to this service provider as you can see over here we have the option to use the custom template for items as well and if i select this list of dentists i update this and if i actually put this onto a page let's say i add a new post and i paste a short code here and let's publish it is getting an error as well so i have highlighted this issue to croco block and i really hope that they will make some changes to this because once we can use custom listings on forms it is going to be a game changer because we can have so many other design options to it instead of following the plain boring form from jet appointment krakow blogs is going to be a huge asset to the gutenberg community and once they have ironed out those issues it is going to be such a huge game changer and when it does happen i'll create another video tutorial on this anyway i hope you've enjoyed this tutorial and feel free to share with me your thoughts on this also if you can do me a little favor and smash that thumbs up button that will be amazing thank you so much for watching take care and as always stay safe [Music] you

Channel: Jack Cao

Views: 1,819

Keywords: wordpress booking plugin, booking plugin wordpress, appointment booking website, appointment booking wordpress, appointment booking system, appointment booking website wordpress, appointment booking plugin wordpress, salon booking wordpress plugin tutorial, wordpress tutorial for beginners 2021, easy appointments wordpress plugin, wordpress booking system, how to make appointment booking website with wordpress, how to make a booking website with wordpress, crocoblock tutorial

Id: JZ0ZHT7-JoU

Length: 59min 15sec (3555 seconds)

Published: Thu Oct 21 2021