How to Create a Quick-Booking Form with the Wix Bookings API (Part 1/2) | Velo by Wix

Today I'll show you how to use the WIX Bookings API to create a quick booking form for your services and manage booking requests from your own admin page. This tutorial is divided into two videos. This video will focus on building your form so clients can book appointments for the current week. Before you begin, make sure code is enabled. Next, make sure you can accept online payments for your services. Then go to your service listing and add two buttons with text like Request Consultation and Admin. Request Consultation will open the QuickBooking form inside a Lightbox. The Admin button will open your admin page where you can review, approve or dismiss pending requests. Now use a Lightbox for your form. Go to Add Lightbox and choose one you like. Next, add fields so clients can enter their details. Go to Add User Input and choose an Input element. Select the element and click Set Input type. Under Text Settings, choose Placeholder Text and change it to Full name. Then from the Properties panel, change the ID to Name Input. Add two more input elements for Email Address and Age, and change their IDs to email input and age input, respectively. These IDs will be used later in your code. Next, add two drop down input elements. Like the other User Input elements, go to Add User Input and choose two drop down elements. You'll use the first dropdown to display available dates for a given service. Change this placeholder text to Pick a day. Then from the Properties panel, change the ID to Day Picker. From the second drop down, clients will be able to pick an appointment time slot. Change this placeholder text to Pick a time and change the ID to slot picker. You'll use these IDs later in your code. Next, add text to the bottom of your form and include a message like some information is missing or incorrect. This way your clients will know if they're missing info on their form. Change the ID of this element to Error Message. Now add a checkbox. Go to Add User Input Selection and choose a checkbox. Change the text to something like I accept the Terms of Service. Then select the checkbox and change its ID to Agreement Checkbox. This checkbox gives your clients the chance to accept your Terms of Service. Then add a Submit button so clients can complete their booking request. Add text to the button that tells clients what you want them to do, like Request Consultation. Then Change the button's ID to submit button. All of these IDs will be used later in your code. Now select all the elements in your form to group them. Then click Group Elements. From the Properties panel, change the ID of This group to Form Group. This will make your form easier to work with when adding code. Lastly, add a text element for your thank you message. When you're done, change the ID to thank you text, then select Hidden on Load. This action hides your message until a client clicks the Submit button. Now create a new database collection. From the Site Structure sidebar on the left, go to Database, click Plus, then New Collection. Name the collection pending appointments under. What's this database collection for? Choose Custom Use from the drop down and click Set Custom Permissions. For the sake of this example, we'll simplify and choose anyone for every field. When creating your final site, make sure to choose the right permissions for your case. When you're done, click Set and Create Collection. This collection will be used to store pending requests, which you'll be able to view and manage from an admin page. Next, set up each field in your collection. First, you'll add fields that store your client info. For now, ignore the Title field. Click the plus here to add a new field. Under Field name, write email and make sure the type is text. Then click Add. Add a field for Name and another for Age. For the Age field, make sure to select Number under Field type. Next, add a Status field. This field will show if an appointment is pending, approved, or dismissed. Since you won't need the Title field, let's remove it. Go to the Email field and hover over the right side of the cell. Here three dots will appear. Click on them to open a drop down menu and select Set as Primary field. This field will automatically move to the left of the collection with a lock icon, meaning it's now your primary field. Then delete the Title field, hover over the right side of the Title cell, click on the dots and select Move to Trash from the dropdown. Now it's time to add your code. Select the Lightbox and open the code panel at the bottom of your page here. Then import two WIX Bookings and WIX Data. WIX Bookings lets you check for available time slots in your Bookings collection, while WIX Data lets you check and add appointments to the Pending Appointments collection. Now add a global variable, ServiceID. This variable stores a unique ID for services in the Pending Appointments collection. You'll use this variable with the WIX Bookings module to check for service availability and book appointments. To find a service id, go to your Site Structure sidebar. Under database, click Bookings and select Services. At the top of this collection, click Visible Fields. From the dropdown, check the Service ID box to make it visible in your collection. Then from the Service ID field, choose the service you want to use for the QuickBooking form, like free Consultation. Right click on the Cell here and click Copy. Back in the code panel, add or paste your Service ID to the Service ID variable. Now you'll be able to use this ID with Bookings API functions throughout your code. Next, add another global variable, slotsmap. This variable stores open timeslots. Now you'll add code to get available dates and times for your service in the upcoming week. Clients will be able to view this info from the drop down menu in your QuickBooking form. You may see some errors in the next few lines of code, but that's okay. You'll be adding helper functions later on to resolve these. In the onready function, add a variable today and assign it to NewDate. This variable represents the current day. Then add an array Days of the week in this array, list all the days of the week. You'll use this array to populate the Day Picker dropdown. Next, assign the Day picker Property to the GetWeekdays function. This function returns an array of the days of the week starting from today. You'll write this function later, using today as an argument. For now, map these days into a label using the Days of the Week array, and a value label is how these days will appear to clients on the form, and value is how these options will be referenced in your code. Next, add an OnChange event handler to the day picker. This event triggers when clients choose a day from the Day picker dropdown. Then add the variable SelectedDate to create a date object from the event target value. This object is based on the date clients choose. Use the Find Available Slots function to populate the slot picker with open timeslots for the selected date. You'll write this function later in your code. Then add an onclick event to the Submit button and pass the Validate and Submit form function. This function checks if clients have completed the form. If the form is submitted correctly, the function will send a booking request to the Pending Appointments collection. If not, clients will see the error message. Now create an async function Find Available slots. This function runs whenever a client selects an appointment date and lets you adapt open timeslots according to the selected date. Add a date string argument, then clear the global variable slots map. Next, create a start dateTime variable using the getmidnight function with date string. Add another variable for endDateTime using the getnextmidnight function with datestring These helper functions get the start and end time over a 24 hour period from the day a client selects. You'll write these functions later in your code, then create an object Options with Start DateTime and End DateTime as properties. Bundling these properties into one object makes it easier to work with in your code. Now create an available slots variable. Use the Await command and call the function called getnonpendingavailableslots. With the global service ID and options as parameters, this function gets all available time slots for the client's chosen date, filtering out any pending appointments. Available slots will be assigned the result of the function or free appointment slots that will appear in the slot picker dropdown for clients to choose from. You'll write a function for this later in your code. Next, create an if condition to check for available time slots. Use the Options property to to clear the slot picker array. Define the placeholder text as no sessions for this day. Then set the selected index to undefined and disable it. Now, if a client selects a date with no availability, they'll see the message no sessions for this day. The client will have to choose another date to continue with their booking. Then add an else statement. This logic is used when available times are found for a client's selected date. Assign the slot picker options to available slots and map each slot. Add each slot to the global slots map with its slot ID as a key. You'll use this later in your code. Next, create a new variable starttime. Assign this variable to the start of each day using StartDateTime as a property. Then add another variable, timestring. Assign it to the gettimeofday function with starttime as a parameter. This helper function formats the time into AM pm. Return each slot with a label assigned to timestring and the value of the slot id. This loads the slot picker dropdown with available time slots. Next, add the placeholder text for this field. Pick a time reset selected index, assign it as undefined, and enable it. Now clients will be able to pick an available time for their booking. Then create an async function Validate and Submit form. This function runs when clients click the Submit button. Additionally, it checks if clients completed the form. If the form is valid, the function enters client details into the Pending appointments collection as a new item. For this function, hide the error message text element. The error message will only appear if the form is invalid. Then disable the Submit button. This will prevent clients from clicking Submit during the validation and form submission process. Next, create the array form fields and add the IDs for each user input element from the form. Then create a condition to validate the form fields array with the every method, use $W with input inside a template literal to check if each field is valid. If all the fields are valid, the statement returns as true. Then you'll add each field to the Pending Appointments collection as a new item. Next, create a slot variable and assign it to the slots map using the value of the slots picker as a reference. This gives you the correct slot object from the slots map. Then create a new request and assign keys with matching inputs. For example, assign name with name, input email with email, Input age with age. Input requested slot with the slot variable for status. Assign it to a string pending. All the values from these inputs will appear in the Pending Appointments collection as a booking request. Then type Await and use Wix data.insert, with the pending Appointments collection and new request as parameters. This makes the validation function wait until a booking request is added to the collection before continuing. Once the collection is updated with data for a new booking request, the form group is hidden and your thank you text message appears. Next, close the if statement and add an else statement. Here you'll show the error message and enable the submit button. Now, if one of the form fields isn't validated, the error message text will appear, telling clients to check their details and resubmit the form. Create another async function. Get non pending available slots. Add requested service ID and options as parameters. This function will use the service ID to return an array of all the available slots, filtering out those that are pending approval. Add a pending variable. Await the results from getpending Appointments, assign them to the variable, and map each appointment to its requested slot ID. This gets the IDs of all the appointments labeled pending in the Pending Appointments collection. Then create an available slots variable with the Await command. Use wixbookings getservice Availability with requested Service ID and options as parameters. This gets all open slots for the dates clients requested. Next, filter out all pending slots from available slots in the array. This returns only open time slots for the client's selected date, preventing the possibility of double booking. Next, create an async function getpendingappointments. Set it to return the results from the WIX data query of the Pending Appointments collection. Use Find and Items Filter to locate and filter the collection and return only items that have a pending status. You're done adding the core functionality to your QuickBooking form. All you have left to write are a few Date helper functions first, add the getmidnight function. This function receives the date a client selects and returns midnight the beginning of that day. Then add the getnextmidnight function. This function returns the beginning of the next day. You'll use these two functions to get the range of open timeslots for a client's selected date. Then create the getweekdays function with startdate as a parameter. Add an empty array for the weekdays. Next, create a current variable and assign it to the getmidnight function. This variable represents the start of a day that the client selects. Then create a For loop that iterates seven times, going over each day of the current week and adding it to the Day picker dropdown in the form. This loop adds an ID and the current date value to the weekdays array and restarts the next day using the getnextmidnight function. When the loop finishes running, it returns an array of the weekdays. Finally, add a gettimeofday function using the JavaScript Date function. This receives a time and returns it formatted as AM PM when populating the Slot Picker option. Now you're all set. Go to your homepage and select the Request Consultation button, then link it to your QuickBook lightbox. Click Save, then Preview to see your QuickBooking form in action. From your service listing, click Request Consultation to open the QuickBooking form, then fill in your personal details. Pick a date from the dropdown, find a time that works for you, and click on the checkbox to accept the terms of service. When you've completed the form, click Request Consultation. Your request has been submitted. It will appear in your Pending Appointments collection as a new item under the Status field. It'll be labeled as Pending until an admin Approve or dismiss the booking request. Check out the second video in this tutorial to learn how to create and manage your own admin page. This video is always here, so come back and watch it again whenever you need help. You can also visit our documentation page for tutorials, articles, example code, and more.