Pushing Podio

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:

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

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:

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.

(c) 2022 Globi Web Solutions | Join the Discussion in our Podio Workspace.