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, y 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 nombre and address. The address details may include a texto field for the primary address, a seleccionar 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 Método de pago 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: Descargar complemento
2. MetForm Free version: Descargar complemento
3. MetForm Pro version: Obtenga el complemento

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. Haga clic en el Agregar nuevo Form button at the top-left.
3. Then a pop-up will appear to create a form. Firstly, enter the form name.
4. Elegir Forma general as the form type.
5. Browse through the templates and pick the Food Order Form plantilla.
6. Finalmente, haga clic Editar formulario 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 Forma general.
5. This time, choose the Blank Template to start from scratch.
6. Then hit the Editar formulario botón.

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 Nombre de pila y Apellido. 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. Mostrar etiqueta: 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. Etiqueta: 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 Marcador de posición y texto de ayuda 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 o 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. Título: Name of the food item. (You can also mention the price here.)
2. Miniatura: Upload a thumbnail image for the item.
3. Avance: You can also add a preview image.
4. Valor de la opción: 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 es burger-price. When use select a item, the input field value of that field (i.e. price) will be called in the calculation.

De manera similar para el 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 Ajustes section. There you can add Expresión con operadores y entradas.. 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.

Para el Full name y DIRECCIÓN, we have used the Text Field. For these fields, you can: 

1. Mostrar etiqueta 
2. Selecciona el Posición 
3. Enter the field Etiqueta
4. Field Name
5. Marcador de lugar
6. and Help text

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

Para el 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. 

Tu puedes fácilmente 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

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

1. Log in to your PayPal account and go to Configuración > Configuración de cuenta.
2. Abierto Pagos del sitio web.
3. Encender Auto Return for Website Payments and add your site URL.
4. Permitir Payment Data Transfer.
5. Once enabled, your Token de identidad de PayPal will appear.

Ahora, copia la ficha 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 pestaña.
• Entra tu E-mail de Paypal that you have used for your PayPal account.
• Luego ingresa al  Token de identidad de PayPal that you’ve generated previously.
• Enable sandbox mode para probar métodos de pago.
• Finalmente, haga clic en el Guardar cambios botón.

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

• Ir a MetForm → Forms in dashboard.
• Clickea en el Editar option for the form.
• In the Form settings, switch to the Pago pestaña.
• Elegir el Moneda predeterminada (e.g., USD).
• Turn the toggle button to EN for PayPal.
• Luego haga clic en el Guardar cambios botón.

✔️ 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 Método de pago por defecto.

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

Tú también puedes 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. Clickea en el Editar 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.

• Asunto del email: Add a clear and catchy subject line.
• Email de: Enter the email address that will appear as the sender.
• Responder por correo electrónico a: 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.
• Guardar cambios: 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.

Preguntas frecuentes

Terminando

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.