Setup Restaurant Layout For Your Orane Site

Add The Restaurant Layout:

To setup restaurant style page in your Orane site, you need to add a new page from your WordPress dashboard, click backend editor and choose the Restaurant template. This will load the restaurant template in this page and you are ready to customize it to your needs.
rest

Set the page template to full width:

Now you need to set your Page Template to Page – Full Width:
fullwidth

Customize The Template:

You can easily customize all the Visual Composer elements present in the page like menu items images, portfolio images and reservation form just like any other Visual Composer Element.

menu

Seat Reservation Form:

To setup the seat resevation form you need to create a Contact Form 7 form, from the contact page:
contact

You can use the following code inside the contact form textarea to complete the form:

Date (required)
[date* date-769]

Number Of Guests
[select* menu-693 "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]

Additional Requests
[textarea textarea-969 placeholder "Message"]

[submit "Book Your Table"]



Save the form and take a note of the contact form id from the shortcode above it:
id
You’ll need this id in the Reservation Form element.

Using The ID in Reservation Form:

When you edit the Reserve A Seat element, you’ll notice Contact Form 7 Shortcode ID field where you can use the id (1117 in my case) to complete the process.
reserve

Adding Date Picker in your reservation form:

A date picker would come in useful in the reservation form, since the contact form 7 doesnt come with a in-built date picker, we need to add this plugin called Contact Form 7 Datepicker to do it. Add this plugin to your wordpress from the Plugins page by searching for Contact Form 7 Datepicker and activate it. That is all, the date field now looks like this when it is clicked:
date