The basics of building an order form

In this article we will explain the basics of how to use AForms Eats by building a basic order form for a restaurant step by step.

For “Basic”, we’ ll assume that the delivery method is take-out. (For delivery, see the bottom of the page)

So let’s get started.

Opening the Form Builder

Click “Add New” in the form list screen to open the form builder.
When you open the Form Builder, there are four tabs. Each of them has the following roles:

The “General” tab is okay in its default state.
So, we are going to register products in the “Details” tab.
Open the “Details” tab.

Registering products

From the component list on the left side of the screen, you can add components to the form.
AForms Eats is designed to display products by groups, so please register the groups in the form first.
The groups are, for example, “salad”, “hamburg steak”, “pasta”, and so on.

To set up a group, it is sufficient to enter only the name.
After entering the name, please click the “Commit Changes” button at the bottom of the screen to commit the content.

Next, let’s add products to the group.
Selecting a group enables you to select the “Product Item” in the component list, so please click on it and add products.

In the product settings, you can build a reasonable form by entering only three things: photo, name, and price.

By clicking “Preview” in the upper right corner of the screen, you can see a simple preview of the order form.
It is better to register products while checking the preview to reduce mistakes.
Please do not forget to save the form before opening the preview.

Building an input form

Next, let’s build the “form” part of the order form, that is, the part that the customer enters.
This is done using the “Attributes” tab.

Unlike the previous “Details” tab, there is no “groups and products” structure here.
So, you just need to add the components to the form according to what you need to enter.

In this article, we will illustrate a typical case.

Since we are assuming take-out, customers will come to the store to pick up their items.
You need to call the customer who comes to pick up the product, so ask him/her to enter his/her name in the “Name” component.

You also need to contact the customer in case they do not come to pick it up. So, you should ask him/her to enter the phone number in the “Phone Number” component.

Next is where the customer is asked to enter when they can come and pick it up. You need to add a “Dropdown” component and enter the options in the setting item “Options”.
For example, “11:00 AM,12:00 AM,1:00 PM” would result in a drop-down menu with the choices “11:00 AM”, “12:00 AM”, and “1:00 PM”.

It may be a good idea to provide a communication field so that customers can enter any message they want.
Adding the “Text” component, please change the setting item “Required” to “Optional” and the setting item “Number of lines” to “Multiple lines”.
Now customers can send miscellaneous messages such as, “I’ll be a little late, but I’ll be sure to pick it up” or “No mustard, please”.

Getting notification mails

Setting up notifications to be sent by email when an order is submitted through the form.
This is done using the “Mail” tab.

The mail function of AForms Eats is designed to send order confirmation emails (thank-you emails) to customers.
However, if you enter the mail address of the restaurant staff in the “Notification address” field, they will also receive a copy of the thank-you email.

By default, the email body is too simple to be useful.
So, it is better to add {{details}}, {{total}}, and {{attributes}} so that the order contents, price, and customer information will be included in the email.

Attaching a Form to a Page

Now the form is complete.
The order form built with AForms Eats can be embedded in a post or page of WordPress.
You can find the shortcode in the “General” tab of the form builder, and please embed it in the post or page.

After embedding it, please open the page in a browser and check if it is done the way you want.

Hints

In the case of omitting the Confirmation Screen

The order form built with AForms Eats will initially display the Confirmation Screen.
To omit the Confirmation Screen, please set the setting item “Show Confirmation Screen” to “Don’t Display” in the General tab of the Form Builder.

In the case of displaying the order completion screen

This is the case when you want to display the “Thank you for your order” screen (order completion screen) to the customer who submitted the order form.
In this case, you should build the order completion page in WordPress in advance, and set the URL of that page in the form builder.
The setup point is the setting item “Thanks URL” in the General tab.

For home-delivery (delivery address)

This is for a order form for home-delivery, not take-out.
For home-delivery, you will need to have the customer enter the delivery address.
Please add the “Address” component in the attributes tab of the Form Builder.

For home-delivery (delivery fee)

In addition to the above, in case a delivery fee is to be added to the order price.
In that case, please add “Auto Item” in the details tab of the form builder.
This is a component that adds a detail line with fixed content to the detail lines.
Please set the “Name” field to “Delivery fee” etc. and the “Price” field to the delivery fee.

We, the developers of AForms Eats, are in Japan, and in Japan, the tax rate is different for meals than for general charges like delivery fees.
If you need to change the tax rate for delivery fees, please see “Tax Rates Settings”.
AForms Eats is able to handle multiple tax rates.

Sending an order confirmation email

This is the case when you want to send an order confirmation email when a customer ordered from the form.
In this case, you need to ask the customer to enter his/her mail address, so please add the “Mail Address” component in the “Attributes” tab of the Form Builder.

AForms Eats will send an auto-reply email if an mail address is entered when the customer submits the form.

The content of the auto-reply email can be setup in the Mail tab of the Form Builder.