Add appointment booking to your website with this app. It features a form with various inputs, including a datepicker and time slot selector. It is perfect for agencies, salons, and service providers who need quick and simple booking.

After customers submit the form, their appointment information is automatically sent as an email by using Smart Forms.

Customization

You can mark time slots as unavailable by giving the radio inputs the disabled attribute. To mark days as holidays, edit the appointment-form.js file and add the respective dates to the holidays array, and they will be unavailable in the date picker.

The app uses the vanillajs-datepicker library. It is customizable via CSS and it even supports a variety of localization files for translating the UI to another language. We've included the English locale in our demo.

Limitations

The demo uses static HTML and a bit of JavaScript to showcase specific UI interactions such as unavailable time slots or calendar off-days and holidays. For these to actually work, you or a developer will need to integrate them with a database and a backend language like PHP, Python, etc, to render these options dynamically.

If you don't have access to a developer or wish to have the simplest possible integration, you can use the app as is and just show all time slots as available. Then the website owner will be expected to reach back to the user after the form is submitted, to confirm the booking or to reschedule.

Get started

Download the .bsdesign file from the button above, and open it in Bootstrap Studio. You will then need to set up the Smart Forms recipient, and modify the design to fit your needs.