How to Make a WordPress Restaurant Website to Take Food Orders Online.

Tutorial Overview.

In this tutorial, I will show you how to take any restaurant menu and turn it into a dynamic menu that your customers can order online. Then I will explain how to set up the payment system to accept payments directly online.

Quickies.

• Things You Will Need to Make a Website to Take Online Food Orders.
• Install the Gravity Forms Plugin.
• Register Gravity Forms on Your Website.
• Create a Restaurant Menu With Gravity Forms.
• Set Up the Sections in Gravity Forms.
• Create a Simple Food Menu Item.
• Create a Variable Food Menu Item.
• How to Create a Field for Additional Order Instructions.
• Add a Total Price Field to the Order Form.
• Add the Billing Information Fields to the Order Form.
• Display the Order Menu on a Page.
• How to Format the Order Form.
• Display a Gravity Form with a Shortcode.
• Set Up Online Payments with Gravity Forms.

Things You Will Need to Make a Website to Take Online Food Orders.

• A Hosting Plan: I personally use SiteGround but there are many quality hosting providers out there: The Best WordPress Hosting in 2020.
• A Domain Name: If you don’t already have one, you can get one from your hosting provider.
• A WordPress Website: Here are instructions to set up a WordPress website if needed: How to Install WordPress.
• A WordPress Theme: WordPress comes with default themes so you are free to use one of them if you like. If you want to use a different theme, here are complete instructions: How to Install a WordPress Theme.
• A PayPal Account: You can use other merchant processor accounts but this tutorial will cover PayPal.
• An SSL: This will allow you to take payments online. Many hosting companies, like SiteGround, offer these for free.
• The Gravity Forms Plugin.
• A copy of your food menu with prices and descriptions.

At this stage, you should have a WordPress website up and running. If not, see the tutorials above to get one set up.

How to Install the Gravity Forms Plugin.

We will be using the Gravity Forms plugin to create the food menu and to set up payments. These instructions assume you have already purchased the Gravity Forms plugin. If not, go to gravityforms.com and get a copy.

1. Login to the Admin Dashboard of the WordPress website.
2. In the Admin Sidebar, go to Plugins > Add New.

3. In the top left of the page, click Upload Plugin.
4. Click Choose File and select the Gravity Forms plugin you purchased earlier. It should be in the .zip format.

5. Click Install Now.
6. Click Activate Plugin.
7. Now you need to register your copy of Gravity Forms.

How to Register Gravity Forms on Your Website.

1. If you are not already there, go to the Plugins page.
2. Locate the Gravity Forms plugin in the list of plugins and click Register.

3. Enter the License Key you were given when you purchased the Gravity Forms plugin. If you don’t know the license key, you may need to check your email or login to the account you created when you purchased the plugin.
4. Once you have entered your key, click Next.
5. It will lead you through a few steps to complete registration.

6. Now that Gravity Forms is installed we can start to create the restaurant menu.

I will be taking the following menu and turning it into a dynamic menu that my customers can order online.

How to Create a Restaurant Menu With Gravity Forms.

1. Click Create Form or in the Admin Sidebar, go to Forms > New Form.
2. Enter a title for your order form and click Create Form.

The Gravity Forms interface has all of the available fields listed on the right side of the page. Most of the fields we will be using will be from the Pricing Fields section for this tutorial. To add a field to the form, either click it one time or drag and drop it over to the left. If you need to delete a field, hover over the field and click the X in the upper right corner.

How to Set Up the Sections in Gravity Forms.

My menu has 5 sections: Starters, Salads, Sandwiches, Flatbread Pizza and Dessert. I will also add a section for Additional Order Information and Payment Info. These aren’t going to do anything except define the sections of the menu and page.

1. In the Standard Fields area on the right side of the page, click Section.

2. Hover on the Section Break field and click on the down arrow in the upper right corner.

3. In the Field Label field, enter the name of the section. You can enter a description for each section if you like.

4. Repeat this for each section on your order form and for Additional Order Information and Payment Info.

How to Create a Simple Food Menu Item.

A simple menu item has no additional options or choices. I will cover variable menu items in the next section.

1. In the Pricing Fields area, add a Product field to the form.

2. Hover over the field and click to open it.
3. In the Field Label field, enter the menu item name.
4. In the Description field, enter the description of the menu item.
5. In the Field Type field, set to Single Product.
6. In the Price field, enter the price of the menu item.

7. Repeat this process for each simple product on your menu.

How to Create a Variable Food Menu Item.

A variable menu item has additional options or choices.

1. In the Pricing Fields area, add a Product field to the form.

2. Hover over the field and click to open it.
3. In the Field Label field, enter the menu item name.
4. In the Description field, enter the description of the menu item.
5. In the Field Type field, set to Single Product.
6. In the Price field, enter the price of the menu item.

7. In the Pricing Fields area, add an Option field below the variable menu item.

8. Hover over the option field and click to open it.
9. In the Field Label field, enter the item name.
10. In the Description field, enter the description of the menu item choice.
11. In the Product Field Mapping field, choose the menu item that these choices are for.
12. In the Field Type field, select the type of field you like.
13. In the Choices fields, enter the choices for the menu item. If there is an additional price for the item, enter it in the price field next to the choice.
14. Repeat this process for each complex product on your menu.

How to Create a Field for Additional Order Instructions.

Many people have special requests when they order food. This is a way to handle that if you want to give the option.

1. In the Standard Fields area, add a Paragraph Text field to the bottom of the form.

2. Hover over the field and click to open it.
3. In the Field Label field, enter Additional Order Instructions or whatever you want to call it.
4. In the Description field, enter some instructions if needed.

Add a Total Price Field to the Order Form.

1. In the Pricing Fields area, add a Total field to the form.

2. You can rename it if you like but this will now display the total price of the order.

Add the Billing Information Fields to the Order Form.

Complete this section if you are going to accept payments online. If you are only accepting payment upon pickup or delivery you can skip this part.

1. In the Advanced Fields area, add the Name, Email and Address fields to the form.
2. Make all of the fields required.

2. We will use these fields later when we set up the payment portion.
3. Publish, Update or Save the form.

How to Display the Order Menu on a Page.

If the Page is Already Created.

WordPress has many themes and plugins that provide page builders to create and edit your pages. For this tutorial I will use the default Gutenberg editor. If your website uses a different editor these steps will vary but should be fairly simple to figure out.

1. In the Admin Sidebar, click Pages.
2. Locate and click on the page you want to add the order form to.
3. In the upper right corner, click on the Add Block button.

4. In the Embeds section, click on the Gravity Forms block.

5. Select the form you want to use on the page.
6. Publish, Update or Save the page.
7. View the page on the frontend of the website and you will see the order form.

If you Need to Create a Page.

WordPress has many themes and plugins that provide page builders to create and edit your pages. For this tutorial I will use the default Gutenberg editor. If your website uses a different editor these steps will vary but should be fairly simple to figure out.

1. In the Admin Sidebar, click Pages > Add New.
2. Where it says Add Title, enter the name of the page.
3. In the upper right corner, click on the Add Block button.

4. In the Embeds section, click on the Gravity Forms block.

5. Select the form you want to use on the page.
6. Publish, Update or Save the page.
7. View the page on the frontend of the website and you will see the order form.

How to Display a Gravity Form with a Shortcode.

1. This is the basic syntax for Gravity Forms shortcodes:

[gravityform id="1"]

2. To get the id of your form, in the Admin Sidebar, click Forms and the id will be listed to the right of your form.

3. Replace the id from the shortcode above with the id of your form and copy/paste it onto the page you want to display the form on.
4. There are some additional parameters you can use in your shortcode. See all additional parameters here.

If the above methods did not work in your case, here are in-depth instructions on How to Display Gravity Forms on Your Website.

How to Format the Order Form.

You should now have an order form on your website that looks something like this:

This is ok but I want the descriptions to go directly under the menu item names.

1. In the Admin Sidebar, click Forms.
2. Hover on your form and click Form Settings.

3. There are a number of settings you can edit here but I am changing Description Placement to Above Inputs.

If you want to take payment upon pickup or delivery, you won’t need to complete the following steps. If you want to allow your customers to pay directly on your website continue on.

How to Set Up Online Payments with Gravity Forms.

You will need a merchant processing account for this part. You can integrate Gravity Forms with many merchant processors but a couple of the easiest are PayPal, Stripe, Authorize.net, and Square. I will show you how to set it up with PayPal but the others are pretty easy to install and set up.

1. In the Admin Sidebar go to Forms > Add-Ons.

2. Locate the PayPal add-on and click Install.

3. Click Activate Plugin.
4. In the Admin Sidebar click Forms.
5. Hover on your form then Settings > PayPal.

6. Now we need to setup a PayPal feed.
7. Next to PayPal Feeds, click Add New.
8. Next to Name, enter a name for the feed.
9. Next to PayPal Email Address, enter your PayPal email address.
10. Next to Mode, select test.
11. Next to Transaction Type, select Products and Services. This will reveal some additional fields.

12. Next to Payment Amount, select Form Total.
13. Under Other Settings > Billing Information, the PayPal Field should match up with the Billing Information Fields you created earlier.

14. The rest of the settings are optional. Hover over the question mark to get more info.
15. Click Update Settings.

Additional Posts.

Web Development

---

How to Use Google Tag Manager.

Read More

WordPress

---

How to Use Gravity Forms Ready Classes.

Read More

WordPress

---

How to Change the WordPress Database Prefix.

Read More