How To Create and Customize Food Order Form in WordPress

Food business today means going beyond just serving delicious meals. You also need a smooth and hassle-free way for customers to place their orders. 

Instead of relying on phone calls or handwritten notes, a food order form is an efficient way for customers to place orders directly.

With advanced features like visual food menu selection, selecting add-ons, calculation, payment options, and confirmation emails, we will demonstrate an easy way to create an online food order form in WordPress.

Why do you need an online food order form?

In one line, an online food order form is a quick and easy option to place orders online. Customers can simply browse, pick their food item, pay instantly, and place their order without any hassle.

Here is a breakdown of how an online restaurant order form can help in your food business:

• Customers can order anytime, even outside business hours.
• You can avoid miscommunication from handwritten or verbal orders.
• It keeps things organized by providing all the information in one place.
• Payments can be collected upfront, which means fewer cancellations.

Which fields should you include in a food order form? (Planning stage)

Before jumping into tools and plugins to create the form, let’s first sort out and list down what you’ll need to include. 

While planning the form fields, focus should be on keeping it simple but detailed enough to collect everything you need to fulfill an order.

For this tutorial, we have decided on the following fields for an online food order form:

✅ Customer’s contact information fields

Information like customer name and contact details is essential (kind of mandatory) for your food order form. So we are including these fields: First Name, Last Name, Email Address, and Phone Number.

✅ Food selection fields

Here, we will add the food menu with options to select the items for the users. For this, you can use the image select field, where the user can see a visual of the food item and select their menu.

You can also use the Select field to provide the customer an option to include add-ons like cheese, extra cheese, crispy, etc.

Also, use the Number field to set the quantity of the order.

Besides, you can also show the total order amount by calculating the total price.

✅ Delivery details fields 

If you have a food delivery service, add fields related to delivery, including the recipient’s name and address. The address details may include a text field for the primary address, a select field to choose the state or division name, and a number field to enter the ZIP code.

✅Payment options

To let the customers pay while ordering their food, you can add the Payment Method field to the food order form.

✅Submit / Cancel buttons

At the end, add the submit button for the users to finalize their order. Also, consider adding an option to cancel the order with another button.

How to create a food order form in WordPress with Elementor (Execution stage)

Let’s now start building the WordPress food order form. To use the advanced form fields and features, we will use MetForm. 

This one is an Elementor form builder, which lets you create WordPress forms in the most flexible way with features like reCAPTCHA spam protection, payment integration, CRM integrations, pre-designed templates, confirmation email, and so on.

So we will first install the plugins, then create the plugin with all the above-mentioned fields and options.

Prerequisite: Installing Required Plugins

To use the MetForm, you need to have the Elementor plugin installed on your WordPress site. After that, install the free and pro versions of the MetForm plugin.

📥Required Plugins:

1. Elementor: Download Plugin
2. MetForm Free version: Download Plugin
3. MetForm Pro version: Get the Plugin

Method 1: Use a WordPress Food Order Form Template

The biggest advantage of using MetForm is, you can use professionally designed, pre-built WordPress food order form template to quickly build the form, instead of building it from the ground up.

To create a restaurant order form in this case, you can use the MetForm’s food order form template.

1. From your WordPress dashboard, go to MetForm → Forms.
2. Click the Add New Form button at the top-left.
3. Then a pop-up will appear to create a form. Firstly, enter the form name.
4. Choose General Form as the form type.
5. Browse through the templates and pick the Food Order Form template.
6. Finally, click Edit Form and start customizing.

Now you can customize the restaurant food order form template if you want, make changes to match it to your brand style, and you are ready to go.

Method 2: Create a food order form with a blank canvas in Elementor

Alternatively, start with a blank food order form template to build it from scratch.

With Elementor and MetForm, you can create a WordPress form with all the essential fields, customize the appearance, and add advanced functionalities like payment, image selection, and so on.

Step 1: Create a form with a blank food order form template

To create a form in Elementor using MetForm, follow the steps below:

1. Log in to your WordPress dashboard and head over to MetForm → Forms.
2. From there, click the Add New Form button at the top-left.
3. A pop-up will appear where you can give your form a name.
4. Next, set the form type to General Form.
5. This time, choose the Blank Template to start from scratch.
6. Then hit the Edit Form button.

You’ll now be taken to the Elementor editor, where you can start building your form, in this case, a blank food order form template for WordPress.

Step 2: Add Customer’s Contact Information

As decided earlier, we will start by adding the Name field and contact info fields (Email and Telephone number).

☑️ Name Fields 

We will use two separate form fields for First Name and Last Name. Search for both fields in the widget search bar and add them to the food order form design.

For each name field, MetForm gives you the following options:

1. Show Label: Choose whether you want to display the labels (First Name / Last Name).
2. Label Position: Decide if the label should appear above the field or to the left.
3. Label: Set the text that will appear as the field’s label. 
4. Fixed Field Name: Assign a backend name that will be used to identify the field at the backend. (For the Name field, this value this fixed).

Also, you can add a Placeholder and Help Text for better user guidance.

For the customization, change the colors, typography, padding, and margin for the labels, input text, placeholder, and help text separately.

☑️ Email and Telephone Number (Contact Info)

To collect the contact information, we will use the Email and Number fields.

For the email field:

• Show Logged-in Email: If enabled, it automatically fills in the user’s email address with the ID they are logged into the browser.
• Unique Email: If you want to limit users to making only one reservation per email, enable this option.

Like the name fields, the Email and Telephone Number fields also come with customizable settings. You can show or hide the label, set its position, and define the Label, Name, Placeholder, and Help Text for each field.

Step 3: Add Food Menu and Selection option

This is the heart of the form. Here’s where customers choose what they want to order. You can use a simple select field or a radio button. However, for a smart option, you can use the Image Select field from MetForm.

✅ Image Select field

In the image select field, you can show a picture of the food item with the item’s name and price. Here are the options you have with this form field:

👉 Display Option: Set the layout orientation to Horizontal or Vertical.

👉 Select Type: For the Single Select, the user can select only one item. For the Multi Select, the user can select multiple options.

👉 Image Select Options: You can add food items and their properties, including:

1. Title: Name of the food item. (You can also mention the price here.)
2. Thumbnail: Upload a thumbnail image for the item.
3. Preview: You can also add a preview image.
4. Option Value: Add the price value, which will be stored or sent in the mail to the recipient.
5. Option Status: If set to Active, the user can select the option. Otherwise, if set to Disable, the user can see the option but can’t select it.

✅ Select field (Flavor add-on)

Create a dropdown list of the add-ons. For each of the dropdown items you have the following options:

1. Input Field Text: Enter the name of add-on item.
2. Input Field Value: Enter the price of the item.
3. Status: Set it to Enable or Disable based on the availability.
4. Select it default: Decide whether you want the have the item selected by default.

✅ Number field (Select Quantity)

Let the customer enter the quantity of their food order. Use MetForm’s Number field widget for this. Like other form fields, you can set the position, label, name, and placeholder for the number field.

✅ Calculation (Total Price)

For a better user experience, you can calculate the total order value and show it in the form. With MetForm, you can simply use the Calculation feature and show the total amount the customer has to pay. Here, to show the total price of user’s food order, we will consider the price of the main menu, selected add-on, and the quantity of the order.

To calculate the values, copy the value names of the respective fields. For example, the name of the Image Select Field is burger-price. When use select a item, the input field value of that field (i.e. price) will be called in the calculation.

Similarly for the Flavor Add-on, the name of the field is burger-flavour. When used in calculation field, the input field value of the selected dropdown item. For the Select Quantity the name ID is _quantity.

Now in the Calculation field, expand the Settings section. There you can add Expression with operators and inputs. For this form, we will add the following formula: (burger-price + burger-flavour) × quantity

This means, the form will add the price of the main menu and add-ons and multiply the sum with the order quantity.

To learn how to use the MetForm Calculation field, read the documentation of this feature.

Step 4: Include Delivery Details

If you deliver the food as well, you can enable the delivery option. In this form, we have added a toggle switch with the “Need Delivery?” label. 

When the customer toggles it to YES, the following feilds will appear: Full Name, Delivery Address, Select State, and Zip code.

This is basically works with the conditional logic, where the appearance of the feilds depends on the actions taken by the user.

For the Full name and Address, we have used the Text Field. For these fields, you can: 

1. Show Label 
2. Set the Position 
3. Enter the field Label
4. Field Name
5. Place holder
6. and Help text

For the State, we have used a Select Field. For this field, you have the option to add a Dropdown List. For each dropdown item, you’ll need to fill in the input field text with the State name, add an input field value, set the status to either enabled or disabled, and choose if it should be the default selection.

For the Zip Code, you can use the number form field.

Step 5: Add an Option for Advanced Payment

With MetForm’s payment field, you have the option to accept payment during form submission. 

You can easily set up payment methods using gateways like Stripe or PayPal, specify payment amounts, and set conditions. For this guide, we will show you the process of adding PayPal integration to this form.

✔️ Generate PayPal Identity Token

To accept PayPal payments in WordPress forms, you need to generate an identification token:

1. Log in to your PayPal account and go to Settings > Account Settings.
2. Open Website payments.
3. Turn on Auto Return for Website Payments and add your site URL.
4. Enable Payment Data Transfer.
5. Once enabled, your PayPal Identity Token will appear.

Now, copy the token and switch to your WordPress dashboard.

✔️ Set up PayPal integration in WordPress

Now you can connect PayPal with your WordPress site using the token.

• In WordPress dashboard, go to MetForm→ Settings.
• Go to the Payment settings and switch to the PayPal tab.
• Enter your PayPal email that you have used for your PayPal account.
• Then enter the  PayPal Identity Token that you’ve generated previously.
• Enable sandbox mode for testing payment methods.
• Finally, click on the Save Changes button.

✔️ Enable PayPal payment for the food order form

After that, you need to enable the PayPal payment method for your WordPress food order form. For that,

• Go to MetForm → Forms in dashboard.
• Click on the Edit option for the form.
• In the Form settings, switch to the Payment tab.
• Choose the Default Currency (e.g., USD).
• Turn the toggle button to ON for PayPal.
• Then click on the Save Changes button.

✔️ Add a Payment button to WordPress Form

Now you will be able to accept payments in your food order form with the PayPal gateway. To do that, you’ll need to add a PayPal payment button to the form.

Here’s how you can set it up:

1. Open the food order form in the Elementor editor.
2. In the editor, search for the Payment widget.
3. Drag the payment widget into the widget to design section.
4. In the left-side bar for the widget, choose PayPal as the payment method.
5. Finally, set PayPal as the Default payment method.

Now, the customers can pay in advance while making the order.

You can also set up the Stripe payment for your WordPress food order form with MetForm.

Step 6: Submit Button for Form Submission

Simply drag the MetForm Submit Button widget into your form, then update the button text with something like Order Now or Place Order. 

You can style it any way you like, using Elementor’s design options. Once clicked, this button completes the food order. If you enable the confirmation email option, an automated email will be sent to the user’s email with a copy of their form entries.

Send an order confirmation email to the customer

To give your customers a better experience, it’s a good idea to send them a confirmation email right after they submit the food order form. 

You can send an automated confirmation email to the user with MetForm. For a form created with MetForm, you can enable the option from the Form settings.

1. From your WordPress dashboard, go to MetForm → Form.
2. Click on the Edit option for the food order form. A Form Settings pop-up will open.
3. Switch to the Confirmation tab and turn on the Confirmation mail to user option.

Now you can configure and set up the email.

• Email Subject: Add a clear and catchy subject line.
• Email From: Enter the email address that will appear as the sender.
• Email Reply To: Set the email where you want customer replies to go.
• Thank you message: Write a friendly message confirming their reservation and thanking them. It helps leave a positive impression.
• Send a copy of the submitted form: Enable this if you want the customer to receive a copy of their submission for reassurance.
• Save Changes: Click on this button to finalize the changes.

You can design a customized confirmation email with EmailKit. Here is how you can edit and customize MetForm’s confirmation emails.

Preview of the restaurant food order form (Final outcome)

So here is the preview of a WordPress food order form you have just created.

Once a user submits a form, you will have all the information listed in your WordPress dashboard. Just go to MetForm → Entries and access to all the data submitted by your customers.

FAQs

Wrapping up

Having a user-friendly and visually appealing food order form is kind of essential for any modern food business.

With the steps explained in this guide, creating on WordPress food order form is quite easy. While you can kick-start with sample food order form templates with MetForm, you can add advanced features like order calculation, payment gateways, and confirmation emails to the form.