How to Create a Reservation Form

Bouffe comes with a ready made reservation form. You can get an online reservation for your venue through this form. If you have imported the demo content, the reservation page containing this form will be imported automatically. However, if you have not imported the demo content, you can create this form in 3 different ways.

Elementor Form Widget #

If you have Elementor Pro version you will get a form builder widget. With this form widget, you can easily create a reservation form, add the fields you want and customize the form.

Step 1 – Navigate to the Pages from WordPress dashboard.

Step 2 – Open the page you want to edit.

You can create it on a new page instead.

Step 3 – You will see the available elements in the left menu of the Elementor page editor.

If you don’t see this, switch to the page builder editor.

Step 4 – Find the ‘Form’ widget using the search form. Drag and drop the ‘Form’ widget onto the page. The widget will be added to the page.

Step 4 – Create a reservation form with Elementor interface. You can add the fields you need. Then you can edit the element and have the design and content you want.

Contact Form 7 Form #

You can create a completely free form for your reservation form with Contact Form 7, just like in Bouffe’s demo. This will come with demo content anyway.

Step 1 – Navigate to the Contact > Add New from WordPress dashboard.

Step 2 – Create a reservation form with CF7 interface. You can add the fields you need. You can find reservation form codes for Contact Form 7 below, like Bouffe’s demo. You can use the codes below if you wish.

<div class="gt-grid gt-grid-3 gt-spacing-20 gt-align-center">
	<div class="gt-grid-col">
		<label>Date</label>
		[date* date placeholder "Select Date"]
	</div>
	<div class="gt-grid-col">
		<label>Time</label>
		[select* time include_blank "11:00 AM" "11:30 AM" "12:00 PM" "12:30 PM" "01:00 PM" "01:30 PM" "02:00 PM" "02:30 PM" "03:00 PM" "03:30 PM" "04:00 PM" "04:30 PM" "05:00 PM" "05:30 PM" "06:00 PM" "06:30 PM" "07:00 PM" "07:30 PM" "08:00 PM" "08:30 PM" "09:00 PM" "09:30 PM" "10:00 PM" "10:30 PM"]
	</div>
	<div class="gt-grid-col">
		<label>Seats</label>
		[number* seat min:1 max:12 "1"]
	</div>
	<div class="gt-grid-col">
		<label>Your Name</label>
		[text* your-name]
	</div>
	<div class="gt-grid-col">
		<label>Email</label>
		[email* email]
	</div>
	<div class="gt-grid-col">
		<label>Phone</label>
		[tel* phone]
	</div>
	<div class="gt-grid-col gt-grid-col-12">
		<label>Special Requests</label>
		[textarea your-message x6]
	</div>
	<div class="gt-grid-col gt-grid-col-12">
		[submit class:gt-button class:gt-style-2 class:gt-inline "Book Now"]
	</div>
</div>

Make sure that all settings of the Contact Form 7 form are made. (Form, mail settings, etc.)

Step 3 – Copy the shortcode of the form.

Step 4 – Navigate to the Pages from WordPress dashboard.

Step 5 – Open the page you want to edit.

You can create it on a new page instead.

Step 6 – You will see the available elements in the left menu of the Elementor page editor.

If you don’t see this, switch to the page builder editor.

Step 7 – Find the ‘Shortcode’ widget using the search form. Drag and drop the ‘Shortcode’ widget onto the page. The widget will be added to the page.

Step 8 – Paste the copied shortcode into this widget. The form will be added into the page.

Online Reservation Systems (OpenTable, Eat App, etc.) #

There are many applications and websites that offer online reservation services. You may want to use them and they are suitable solutions for most businesses. These applications give you a code and a reservation form is created in the section where you add this code to your website. How will you add the code? Let’s follow the steps!

Step 1 – Copy the code provided to you.

Step 2 – Navigate to the Pages from WordPress dashboard.

Step 3 – Open the page you want to edit.

You can create it on a new page instead.

Step 4 – You will see the available elements in the left menu of the Elementor page editor.

If you don’t see this, switch to the page builder editor.

Step 5 – Find the ‘HTML’ widget using the search form. Drag and drop the ‘HTML’ widget onto the page. The widget will be added to the page.

Step 6 – Paste the copied code into this widget. The form will be added into the page.