Create a Webflow reservation system with Jotform for your restaurant

If you are looking for a new and simple reservation system for your restaurant and you are not very agile with digital, you are in the right place!

In this article we would like to share with you a tool that will allow you to quickly and easily set up a reservation system for your restaurant.

Jotform is a no-noce tool for creating custom web forms. This tool has many features to create and manage simple and complex forms:

• Page or card form
• Multiple field formats (email, phone, etc.)
• Multiple field types (lists, texts, numbers, etc.)
• Customisation (colours, shapes, images, etc.)
• Forms management (spreadsheet, statistics, pdf generator, etc.)
• Workflows (mailings, reminders, notifications, etc.)
• Advanced features (approval system, form rules and conditions, etc.)

Among all these functionalities, one in particular interests us for creating a restaurant reservation system: the calendar

1. Create a new Jotform

Start by creating a form from scratch from your main Jotform interface.

• Click on "Create a form" at the top left
• Choose to "Start from scratch
• Select the "Classic Form". A card form will split your booking system into several steps, but we prefer to stay on a single page to simplify and speed up the booking process.

You are now in the form creation area of Jotform, which will allow you to start building your custom booking system.

2. Set up your reservation system

2.1 Adding fields for booking

Several types of settings will be needed to build this reservation system. This will depend on the way you work with reservations in your restaurant.

Start by adding a new field by clicking on the "+ Add Item" button on the left of your screen. Adding fields is done by drag and drop from the elements to the form:

• Full name" field to collect the name of the reservation
• Telephone" or "Short text" items to retrieve the telephone number
• Add a "Drop-down"item to collect the number of place settings
• Finally you can retrieve the email address with the "Email" element

To make these different fields mandatory you will need to access the settings for each field by clicking on the"⚙️ Properties" icon for the field. Then activate the "Mandatory" button in the general settings.

2.2 Setting up the online booking calendar

Now you can add the booking field that will allow your customers to choose their booking date and time. To do this, start by adding an "Appointment" element to your form. Go directly to the appointment settings to set up the booking system according to your needs:

General

Add a title, e.g. "Reservation request" and make this field mandatory.

Availability

Choose the time intervals you wish to display. For example every hour, half hour, 15 minutes, etc. You can customise this time range. You can then set up booking ranges. For example from 12:00 to 14:30 and from 19:00 to 21:30.

Boundaries

You have the possibility to program sliding days, for example to display booking possibilities only for the next 60 days. This is a way to limit no-shows. You can also add periods when the restaurant is closed so as not to offer reservations on these dates.

Advances

For your booking system to work, you will need to set your "Appointment Type" to "Group " and not "Individual" as is the default. This will allow several clients to book at the same time. You can limit the number of bookings in each time slot. For example, no more than 20 online bookings at a time, in the 12:00 slot.

Also define :

• the "Europe/Paris" time zone
• the date format French MM/DD/YYYY
• the start day of the week on "Monday
• the " 24-hour" time format

That's it, the new reservation system for your restaurant is programmed! Go to the design now.

2.3 Advanced booking features

You can add advanced features to your booking system, for example:

E-mails

To set up a confirmation email following the booking

Conditions

To customise the thank you page or display fields according to certain criteria, etc.

Thank you page

To customise your thank you page unconditionally, or choose to redirect to a URL.

Integration

To connect your booking system to hundreds of no-code tools like Gmail, Google Drive, Mailchimp, Airtable, Zapier, etc.

Approval flow

To create an approval flow according to certain booking conditions. For example, if you want to be able to confirm or reject a booking for more than 5 people, while a booking for less than 5 people will be confirmed automatically.

2.4 Customise the booking form

Once your restaurant's reservation system is technically operational, all you have to do is design it in the colours of your graphic charter.

To access the customisation features of the booking system, click on the blue brush at the top right. A customisation window will then open, in which you can :

• Customise the colours of the page, the form, the buttons, the font
• Customise the style by changing the spacing between sections, font size, etc.
• Choose a predefinedtheme

Use your imagination to create a reservation system that will fit perfectly into your Webflow site.

3. Integrate your reservation system into Webflow

Let's move on to the integration of the reservation system into your restaurant's Webflow site. From your Jotform form, go to the "Publish" tab. Jotform offers you to integrate your reservation system in different ways:

• Via a URL : you can integrate this link directly into a text or a Webflow button. This URL will redirect your visitors from your site to the booking page.
• Via an embed : the booking system will be integrated as is in Webflow and your customers will be able to interact directly with the form from your site. The embed code is to be integrated directly into an "Embed" element from the Webflow designer. Once the code is added to your page, save and publish your site to have access to the form. This embed also exists in IFRAME version. Choose the one that suits you best for your restaurant.
• Via a floating button: the floating button will be located on all the pages of your restaurant's website and will aim to simplify the booking process. You will need to embed the code directly into your Webflow project settings Project Settings > Embed Code > Head Code. Save and publish your site to test your button.
• Via a pop-up: the pop-up is a new web page that will open following a click on a link on your site. Add this pop-up in the same way as a classic embed.
• Via a lightbox : the lightbox works on the same principle as the pop-up with a window that opens, except that it is not a web page. The integration principle is the same as for a classic embed.