how-to-create-a-restaurant-online-order-form-in-wordpress_o

How to Create a Restaurant Online Order Form with WordPress

Are you looking for a WordPress restaurant ordering system or just an easy, simple way to let people order from your restaurant online?

Your website can easily start making your business more money if you let customers order take-out or delivery online. So in this post, we’ve put together a step-by-step, beginner-friendly tutorial on how to create a restaurant online order form with WordPress.

Click Here to Make Your Restaurant Online Order Form Now

Here’s a quick breakdown of this tutorial to help you navigate each step:

WPForms is the best WordPress Form Builder plugin. Get it for free!
  1. Generate a Takeout Order Form
  2. Customize Your Restaurant Online Order Form
  3. Configure Your Form Settings
  4. Configure Your Form Notifications
  5. Customize Your Form Confirmations
  6. Configure the Payment Settings
  7. Add Your Restaurant Online Order Form to Your Site

Why Is Online Ordering Better?

There are a lot of reasons why you might consider adding online ordering to your restaurant website. Here are a few:

  • To keep an income flowing into your business if you are forced to close for dine-in
  • You’ll get even more accurate orders when customers put in their own online orders
  • You can expand your business reach by letting more customers discover your restaurant and try your food without dining in
  • You’ll build an email list and can digitally market to your customers with things like coupons or online contests
  • Employee productivity could increase with less time taking orders over the phone

It’s pretty obvious that offering online ordering for your restaurant is a good idea, so let’s not waste any more time and jump right into how to turn your website in a WordPress restaurant ordering system.

Trying to keep costs low? Read our post on how to reduce SaaS bills to help you find ways to cut costs with open-source alternatives.

How to Create a Restaurant Online Order Form with WordPress

If you want to turn your site into a WordPress restaurant ordering system, it’s actually quite easy. You can do it by simply creating a restaurant online order form with WordPress.

Here are the steps to build you restaurant online order form:

Step 1: Generate a Takeout Order Form

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, you’ll need to install and activate the Form Templates Pack addon. With this addon, you’ll be able to access the pre-built takeout order form template, as well as tons of other industry-specific templates for creating customized forms for your site.

This saves you a lot of time since you won’t have to start from scratch and manually add fields to a basic contact form.

From the WPForms addons page, search for the Form Templates Pack.

search wpforms addons

Click Install Addon and Activate.

Form Templates Pack Addon and wordpress job application form plugin

Next, go to WPForms » Add New to create a new form.

On the setup screen, name your form and scroll down to the bottom of the templates screen where it says Additional Templates.

Type “Takeout” into the search bar and the take order form template will appear.

additional templates for takeout order form

Click on the template and WPForms will automatically make a takeout order form template for you.

takeout order form online template

Pretty awesome, right? Let’s go ahead and customize this form.

Step 2: Customize Your Form

WPForms makes customizing forms easy to do.

This form comes with the following fields in this order:

  • Dropdown
  • Multiple Choice
  • Name (First and Last)
  • Email
  • Phone
  • Address

Unless you’re a pizza place, you’ll probably need to customize your template a bit to match your particular menu.

It’s easy to do this. First, go ahead and remove the first 2 fields by clicking on the red arrow on the top right corner of each field.

how to remove fields on restaurant online order form

Once those first 2 fields are gone, head to the left-hand panel and scroll to the bottom under Payment Fields. Find the Multiple Items field and drag it onto your form.

add multiple items payment field to restaurant online order form

Once you’ve added the Multiple Items field, click on the field and head to the left-hand panel to edit each item name and price.

We suggest you use each Multiple Item field to list a different menu item under the label, and then list the different options and price under Items. Here’s an example:

takeout order form customizations

One of the coolest things you can do is add image choices to your online restaurant menu, too. Just click on the box Use image choices to add them.

click on use image choices to add pictures to menu

Now, Click on the Upload Image button under each item to choose an image for each menu item.

upload image buton

Now, repeat this for each different item.

online order form with images for restaurant (1)

You can repeat this entire step for each menu item.

Now let’s add one more field to your form, the Total field. You can find it under Payment Fields.

Drag the Total field from the left-hand panel onto your form on the right, wherever you’d like it.

add total field to restaurant online ordering systems

When you’re done customizing your restaurant online ordering system form, click save in the top right corner.

Step 3: Configure Your Form Settings

To start, go to Settings » General.

online restaurant ordering system form settings

Here you can configure the following:

  • Form Name — Change the name of your form here if you’d like.
  • Form Description — Give your form a description.
  • Submit Button Text — Customize the copy on the submit button.
  • Spam Prevention — Stop contact form spam with the honeypot feature or Google reCAPTCHA. The honeypot feature is automatically enabled on all WordPress forms so if you decide to use another form of spam prevention, unclick this option.
  • AJAX Forms — Enable AJAX settings with no page reload.
  • GDPR Enhancements — You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. Check out our step-by-step instructions on how to add a GDPR agreement field to your simple contact form.

When you’re done, click Save.

Step 4: Configure Your Form Notifications

When you receive an order from your restaurant website, it’s important your team is notified right away.

Notifications are a great way to send an email whenever a restaurant online form is submitted on your website.

restaurant online order form notifications

If you use smart tags, you can also send a notification to the user when they fill this out, letting them know you received their order and someone will begin working on it shortly. This assures people their request has gone through.

Are you keeping track of who is coming to your website and from where? Make sure to read our guide on how to add Google Analytics to WordPress.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

And if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.

Custom Email Header

Note: Since file attachment can often hurt email deliverability, WPForms doesn’t attach files in emails. For example, if an email provider only allows a maximum of 10MB for the attachment but the user uploads a file size higher than 10MB, the email won’t be delivered. Instead, we send the file uploads via email as links.

Notification Email Links

This is a great way to send online food orders to your restaurant staff to make sure they jump on things quickly!

Step 5: Customize Your Form Confirmations

Form confirmations are messages that display to site visitors once they submit a food order on your website. They let people know that their request has gone through and offer you the chance to let them know what the next steps are.

WPForms has 3 confirmation types to choose from:

  1. Message — This is the default confirmation type in WPForms. When a site visitor submits a request, a simple message confirmation will appear letting them know their order was processed. Check out some great success messages to help boost user happiness.
  2. Show Page — This confirmation type will take site visitors to a specific web page on your site thanking them for ordering. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to read our article on creating effective Thank You pages.
  3. Go to URL (Redirect) — This option is for when you want to send site visitors to a different website.

Let’s see how to set up a simple form confirmation in WPForms so you can customize the message site visitors will see when they fill out your form.

To start, click on the Confirmation tab in the Form Editor under Settings.

Next, select the type of confirmation you’d like to create. For this example, we’ll select Message.

customize online restaurant ordering system confirmation message

Then, customize the confirmation message to your liking and click Save.

For help with other confirmation types, see our documentation on setting up form confirmations.

Step 6: Configure the Payment Settings

In order for customers to pay for their restaurant order online, you’ll need to have at least one payment platform on your website.

You can choose between Stripe or Paypal, or use both.

Check out or post on how to use Stripe on your website or, see how to use PayPal on your WordPress site.

For this example, we’ll use Stripe. Once you’ve completed the setup of Stripe via the tutorials above, simply drag the Stripe Credit Card field from Payment Fields onto the form.

add stripe to restaurant online order form system

Click save. Now you’re ready to add your restaurant online ordering form to your website.

Need more employees for your restaurant? Find them online by creating a job application form on WordPress.

Step 7: Add Your Restaurant Online Order Form to Your Site

After you’ve created your form, you need to add it to your WordPress website. WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.

Let’s take a look at the most common placement option: page/post embedding.

To begin, create a new page or post in WordPress, or go to the update settings on an existing one.

After that, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.

create a restaurant online ordering system page

The handy WPForms widget will appear inside of your block. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select your Takeout Order Form.

select restaurant order form

Then, publish or update your post or page so your restaurant order form will appear on your website.

To view form entries after they’ve been submitted, check out this complete guide to form entries. For example, you can view, search for, filter, print, and delete any form entries, making the process that much easier.

In addition, you can use our Zapier addon to automatically save file uploads to cloud services like Google Drive and Dropbox.

Click Here to Make Your Restaurant Online Order Form Now

Final Thoughts on a WordPress Restaurant Order System

Well, there you have it. After reading this post, you now know how to easily build a WordPress restaurant ordering system by creating a restaurant online order form in WordPress.

We hope this tutorial helped you and your restaurant. You may also be interested in heading over to our post on the best WordPress restaurant themes.

So, what are you waiting for? Give WPForms a try today. WPForms Pro comes with a free online ordering system for restaurants using the takeout order form, plus a 14-day money back guarantee.

And if you enjoyed this post, make sure to follow us on Facebook and Twitter for more free WordPress tutorials.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thank you, very interesting! I am looking for something similar, 3 important questions:

    1. Are the data stored in a database?
    2. Can I EASILY export data to xls format? (Does it handle special Hungarian fonts correctly???)
    3. Can this database be exported AUTOMATICALLY to an external place, eg, MS drive/ Dropbox, or sent by email etc

    Many thanks in advance
    agnes

    1. Hi Agnes!
      Thanks for your questions.
      Yes, the data will be stored in your site Database with any of our paid licenses. You will also able to see the form entries in your WordPress dashboard and also export them to CSV file.
      With our Zapier addon, you can absolutely send the data to a third-party service (e.g. Dropbox, Google Drive, etc).
      I hope this helps.
      Have a good one 🙂

  2. If someone need to order 5 same pizzas does it calculate by itself or I have to make a make drop menu and my calculations in the fields?

    1. Hi Massimo!
      Currently, our forms do not have the ability to run the calculations required for product quantities. I do agree it would be super helpful, though, and it’s certainly on our radar as we plan out our roadmap for the future. I’ll add your request to that, as well.
      In the meantime, you might consider leveraging the Dropdown Items field to do what you’re asking for in a slightly different way. You can check out the tutorial on how to do that here.

      Basically, you’d create a Dropdown Items field for each product and fill in the dropdown options with various quantities and associated prices. This would allow you to offer both multiple products and various quantities of each of those products.
      I hope this helps.
      Have a good one 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.