Creating a Booking Form App

Having a website booking form with availability is an often requested feature.

This is what we’re aiming for:

It’s now possible and super easy to build this using ProcFu’s mini apps. Here’s how …

Podio Bookings App

In Podio we need a Bookings app with a date field. The date field should have time enabled, but end date disabled. It should also be set to show up in calendars

For this example, I’m also adding a text field for the person’s name, and an email field for their email address. Naturally, you can have as many fields as you want and/or need.

We’ll also need the ical feed of this calendar. You can get from from App Settings > Add to calendar > iCal > Calendar URL.

The Mini App

For the mini app for this booking system, we’ll set the authentication to “None”. Note that this is super dangerous for most mini apps because it gives full access. However, since we’re only allowing the creation of a booking, it’s safe here.

Now we’ll work backwards.

When someone completes a booking, we’ll need a simple confirmation screen.

We’ll also need a screen to create a new booking, which on submit goes to the confirmation screen.

There are a few tricks employed here, working with the “@[pf_datepicker]” token, which will contain the date and time of the last date picker event (coming in the next screen).

We pre-fill the date field with “@[pf_datepicker]” and hide it from the user.

In the header, we include the date and time they selected, but instead of boring “yyyy-mm-dd hh:mm:ss”, we use javascript for format it. The code is:

<script>
  var date = new Date("@[pf_datepicker]").toString();
  //date = date.split("(")[0];
  document.write("<h3>Confirm your Booking for:<br>"+date+"</h3>");
</script>

Lastly, we’ll need a date picker screen to let users pick a date and time, which on submit goes to the booking creation screen.

To explain some of the settings above:

• Daily Hours is the hours you want to be available, eg “08:00-17:00” or “09:00-12:00,14:00-17:30” etc

• The Availability Interval determines the granularity of start times. Eg, at 30 mins, users will be able to select 09:00, 09:30, etc. At 1 hour, they will only be able to select 09:00, 10:00, etc.

• The Booking Size is the length of the booking to be made.

• Block Weekends prohibits users from selecting Saturdays, Sundays, or Both

• The Busy Calendar ICAL feed is the URL of the Podio calendar you retrieved earlier. This tells the app which times are taken, and therefore no bookings can be made to fall in these busy times. Note that you can provide multiple ical feeds separated by commas (eg if you want to also exclude any times from your personal Google Calendar, etc).

Don't forget to wire all the screens together.

The End Result Booking Mechanism

The result is a nice and simple booking app that let’s users select a time from the calendar and book, but not select any times which are already busy.