Whilst we are updating the visual design of a booking process that is inspired by our members app, Custom Forms remains a powerful way to take bookings from the public. On the settings page in Habu you can create a series of questions in the way that you want and set various default options, these are then automatically turned into a form that looks something like this. 

When someone completes a form, the booking will appear directly in Habu and a contact will be created (unless their email already exists).

On your website you can either create a button with a link to the form or you can use the iFrame method to make it appear directly (see below). You can see examples on a quick site we built called The Factory.  

This will display existing bookings in the form and prevent people from requesting times or spaces that are not available. 

Do you want booking to arrive as Unconfirmed or Confirmed. Only confirmed bookings will appear in the availability calendar.

It is common for hubs to set this as External Booking for a general form. You can also create a variety of forms with different questions and different types. 

If selected booking can only be made in this space

This option appears is removed when an end time is added to the list of questions. 

Each question maps to a different field within Habu. For example, if you add Contact Address as a question this will of course be the address of the contact in Habu. 

You can drag to reorder the questions (a little fiddly), change the way questions are asked, add helper text as well as set required fields.

The vision is to create a fully automated workflow by adding a Stripe [pay now] button. Give us a shout if you want this sooner

To create a link or a button on your website you will need the address or the url of the public form. This can be found at the top of your browser (Chrome, Safari or Firefox) in the address bar.  

To embed the form directly on your website you will need to copy the URL (as above) and paste it into a iFrame Generator such as this one. On the iFrame generator you will need to specify the height and the width (e.g. 600px) that looks good for your form, you can check this out by pressing 'preview' in the generator. If your form is long you might want to enable scrolling or make sure to specify an appropriate length that shows all the questions.

Next you will need to take the final code and 'embed' this in your website. It should look something like this:

<iframe src="https://demo.habu.co/forms/1766b77d-2a4b-4548-91b1-ec4bf1a31240" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="800px" width="600px"></iframe>

The following video is less than a minute and shows the entire process. Remember that this works differently depending on how you created your website, we used Webflow.