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, I 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 nazwa and address. The address details may include a tekst field for the primary address, a wybierać 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 Metoda płatności 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. Elementora: Pobierz wtyczkę
2. MetForm Free version: Pobierz wtyczkę
3. MetForm Pro version: Pobierz wtyczkę

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. Kliknij Dodaj nowe Form button at the top-left.
3. Then a pop-up will appear to create a form. Firstly, enter the form name.
4. Wybierać Formularz ogólny as the form type.
5. Browse through the templates and pick the Food Order Form szablon.
6. Na koniec kliknij Edytuj formularz 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 Formularz ogólny.
5. This time, choose the Blank Template to start from scratch.
6. Then hit the Edytuj formularz przycisk.

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 Imię I Nazwisko. 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. Pokaż etykietę: 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. Etykieta: 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 Symbol zastępczy I Tekst pomocy 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 Poziomy Lub 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. Tytuł: Name of the food item. (You can also mention the price here.)
2. Miniaturka: Upload a thumbnail image for the item.
3. Zapowiedź: You can also add a preview image.
4. Wartość opcji: 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 Jest burger-price. When use select a item, the input field value of that field (i.e. price) will be called in the calculation.

Podobnie dla 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 Ustawienia section. There you can add Wyrażenie z operatorami i danymi wejściowymi. 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.

Dla Full name I Adres, we have used the Text Field. For these fields, you can: 

1. Pokaż etykietę 
2. Ustaw Pozycja 
3. Enter the field Etykieta
4. Field Name
5. Uchwyt miejsca
6. and Help text

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

Dla 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. 

Możesz z łatwością 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

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

1. Log in to your PayPal account and go to Ustawienia > Ustawienia konta.
2. otwarty Płatności internetowe.
3. Włączyć coś Auto Return for Website Payments and add your site URL.
4. Włączać Payment Data Transfer.
5. Once enabled, your Token tożsamości PayPal will appear.

Teraz, skopiuj 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 patka.
• Wprowadź swój Paypal email that you have used for your PayPal account.
• Następnie wprowadź  Token tożsamości PayPal that you’ve generated previously.
• Enable sandbox mode do testowania metod płatności.
• Na koniec kliknij przycisk Zapisz zmiany przycisk.

✔️ 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,

• Iść do MetForm → Forms in dashboard.
• Kliknij na Edytować option for the form.
• In the Form settings, switch to the Zapłata patka.
• Wybierz domyślna waluta (e.g., USD).
• Turn the toggle button to NA for PayPal.
• Następnie kliknij Zapisz zmiany przycisk.

✔️ 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 Domyślna metoda płatności.

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

Możesz również 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. Kliknij na Edytować 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.

• Temat emaila: Add a clear and catchy subject line.
• E-mail z: Enter the email address that will appear as the sender.
• Odpowiedź e-mail do: 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.
• Zapisz zmiany: 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.

Często zadawane pytania

Podsumowanie

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.