How to Create an Online Order Form in WordPress

Before you start building an online order form in WordPress, it's important to understand what this form is and what it can do for the website.

An online order form is a web form used to request products, services, or goods from an online business or retailer. The form itself is full of purchase information so that the goods and products are delivered to customers promptly.

Order forms usually include the following information:

• Full name of the client.

• Shipping information.

• Invoicing and payment details.

• A list of items being purchased.

• Item details, such as quantity, size, style, etc.

• Terms and conditions.

• Transportation costs.

• Total orders.

• The client then submits the online form for the business or company to process.

Creating your own online ordering form isn't as complicated as it sounds. In this tutorial, we will show you how to easily put one together with the help of a WordPress plugin that does most of the work for you.

We will be using WPForms, the best drag and drop online form creation tool for WordPress. WPForms allows you to create almost any type of online form, including:

• Survey form

• Typeform style forms

• Contact forms

• Register form

• Event registration form

And with WPForms smart form technology and easy payment integration, you can get up and running your online order form in minutes.

How to Create an Online Order Form in WordPress

To get started with WPForms, you'll need to download a Pro version to accept your customers' payments. After that, you will need to install and activate the WPForms plugin on your WordPress website.

If you are not sure how to install a plugin in WordPress, this step-by-step guide should be helpful.

With everything installed and activated, you're ready to move on to the next step and start building your online ordering form.

Now that you understand the purpose of an order form, how can you do it? We will cover that next.

Some of our readers have asked how to create an online order form to place an order on the site easily.

If you're running a business like a restaurant or a physical store, you might not want to create an entire online store. However, you may want to provide an easy way for a customer to order food or other goods for you to deliver.

In this post, we will show you how to create an online order form in WordPress. This will allow you to easily collect customer orders without adding official eCommerce software to your website.

Perhaps you recently decided to start a website for your business, and you are feeling a little overwhelmed.

Many businesses start an online store to not only collect orders but also accept payments and manage inventory. However, not every business needs a complete eCommerce website.

If you want customers to fill out an online order form, you can create that easily without a shopping cart solution.

A simple online order form allows you to accept payments online, on order receipt, or delivery.

In this tutorial, we will use WPForms to create an online ordering form as it allows you to do that easily with their drag and drop interface.

WPForms is the best WordPress form creation plugin on the market. Over 3 million websites use WPForms to easily create an online form and add it to their website (no coding skills required).

Configure the message your order form will send out

First, you need to install and activate the WPForms plugin. Need help installing the plugin? See our guide on how to install a WordPress plugin for detailed instructions.

Plugins are like apps for your WordPress website. If you are new to WordPress, check out our article on what WordPress plugins are and what you can do with them.

Once you have activated the WPForms plugin, you will see a new WPForms tab in your WordPress dashboard's admin sidebar.

You need to visit the Settings »WPForms page to enter your license key. You can find this information in your account on the WPForms website.

Now you're ready to create your online order form.

Just visit WPForms »Add a new page to create your first form.

Create a new form using WPForms

You will now see the form creation screen. Enter a name for your form and choose a template. We recommend the 'Payment / Order Form' template.

Choose the 'Payment/order form' template to get started.

Just move your cursor over the template description and click the "Create payment/order form" button.

Click the 'Create Payment / Order Form' button to create your form.

Your form will automatically be generated for you, and you will be taken straight into the WPForms form editor.

Your newly created online order form

Now you can edit your online order form the way you want. The different parts of the form are called "fields.", You can change, add, or delete fields on your form with one click.

The default template already includes fields for most of the information you might need, such as names, addresses, and phone numbers. However, you need to list your actual products.

Click on the 'Available Items' field to edit it.

Edit the 'Available Items' field in your online order form

Enter the name and price of each item that a customer can order from you. The price will not automatically show up on the form, so you may want to add it to the item name.

Edit the 'Available Items' field to change the names of items

To add more options, click the (+) icon wherever you want to add additional items.

Add more items to your online order form.

Note: You can add as many items as you want. However, the client will only be able to choose one option from this field.

If you have multiple option categories, you may want to copy the field to create the group.

You can copy the "Available items" field by clicking the "Copy" icon that appears when you run the cursor over it or when it is selected.

Copy the 'Available Items' field to create a new field on your order form

Make sure you also change the 'Labels' of the fields to something appropriate for each group.

If you want the client to choose two or more options in a field, you'll need to use a different field type.

Click on the 'Add Field' tab, then scroll down to 'Payment fields' where you'll find the 'Checkbox Items' field. Drag and drop this into place on your form.

Add a check box field so that a customer can select multiple items at the same time.

Now you can edit that field as before, entering the names and prices for your items. Customers can check as many items as they want to order.

If you want to display an image of your product, that's really easy too. Just click on the box "Use image selection":

Add a picture of your product to the online order form.

For each item, click the 'Upload an image' button to add an image from your computer or your WordPress Media Library.

Upload an image for a product you offer

Your images will not be resized or compressed by WPForms, so it is important to upload them at the right size. They must all be the same size and not exceed 250 × 250 pixels.

Ideally, you should also optimize your images for the web.

Lastly, you may want to edit the 'Comments or Messages' field at the bottom of the form so that it's not required. Not all users want to add a message.

Just click on the field and then uncheck the 'Required' box on the right to make this field optional.

Make the 'Comment / Message' field optional instead of required.

You can follow this process for any field that you want to be optional. You can indicate which fields are required to have a red asterisk next to the field label.

Once you're happy with your form design, you can move on to configuring your form's settings. You should first save the form by clicking the 'Save' button at the top of the screen:

The 'Save' button of WPForms appears at the top right of your screen.

Configure the message Your order form will send out

First, click the 'Settings' tab on the left side of your screen. This will open your form settings.

The 'Settings' tab in WPForms

Next, click on the 'Notifications' tab to change the email notifications for your form. By default, completed order forms will be emailed to the admin address for your WordPress site.

You may want to change this or copy the order forms to multiple locations. You can enter email addresses or other addresses in the "Send to email address" box. If you are entering multiple email addresses, separate them with a comma.

Enter the email addresses to which you want to send the form, separated by commas

You may also want to change the subject line not to be the same for every order.

Here, we have changed the email subject to "Customer orders from" and then the customer's name. We used 'Show smart tags' to insert a name field in the subject line.

You can also change any other details you want.

We also strongly recommend setting up email notifications for your customers. This helps them remind them of what they ordered and let them know that you have received their order.

To set up new email notifications, click the 'Add new alert' button.

You will want 'Send to email address' as the customer's email account. Remove {admin_email} from this box. Click "Show smart tags" and select the "Email" field.

You will also want to enter other details for the email. We recommend that you use subject lines like "Your orders with" and your company name.

In the "Message" field, you might want to add a message to your customer. The {all_fields} tag will provide all of the information that the customer entered on the form.

What if you just wanted to include some customer information in the email? Or if you want to place their order details first and include their delivery details at the bottom of the email? It would help if you used Smart Tags to add any form fields to your form.

After you are done setting up notifications, click the 'Save' button at the screen's top.

Tip: To go back to the first notification you were editing, scroll down the screen.

Add an order form to your website.

The final step is to add an order to your website.

Just select the page you want to add your form to or create a new page in Page »Add New.

Next, click the (+) icon to add a new block (wherever you want your form) and look for the 'WPForms' block. It's under the ‘Widgets’ section of the blocks, or you can just type ‘WPForms’ in the search bar to find it.

You should see a WPForms block. Click the 'Choose a form' drop-down menu and choose your form.

You will then see a preview of the form itself in the WordPress editor.

When you're ready, save and publish (or update) your page. You can view it live on your website to see your form in action. Before sharing it with a client, we recommend testing the form to make sure it works as you expect.

You should also check if you received an email notification when the form was submitted. If not, check out our post on how to fix WordPress failing to send emails.

Even if you miss an email or accidentally delete it, WPForms will save the WordPress database's form data. You can find all of your orders by going to WPForm »Entries in your WordPress dashboard.

Click on your form name, and then you will see a list of entries. You can click 'View' next to any of these to see details.

That's it! We hope this article helped you learn how to create an online order form in WordPress. You may also like our guide on the best business phone services and must-have WordPress plugins for small businesses.

Set up an online order form notification

We'll now move on to configuring your online order form settings, starting with form messages. Notify sending emails whenever your form is completed.

To set these up, go to Settings »Notifications, and you will see the options available to you.

By default, WPForms automatically sends you email notifications when a client fills out your form. But if you don't want this option, you can disable it by selecting Disable from the drop-down box.

online ordering form notification in WPForms for WordPress

You can also send notifications to others in your business by adding their email addresses in the Send To Email Address field.

Also, you can easily send notifications to customers whenever they fill out a form. You will want to reassure your customers that their order has been received and that you are processing.

You can use smart tags in WPForms to set this up.

Next to the Send to the email address field, you'll see an option called Show smart tags. This shows the available tags for that particular field.

Click Email, and the tag will be automatically entered in the field. This tag is directly related to the email address your customers enter when they fill out your form.

Now edit the rest of the form to include the following fields:

• Email subject: This is one of the first things people will see in their inbox. You can describe the purpose of the form by writing, for example, "Your order has been received."

• From the name. Email from? Your brand or company name is a good choice for this field to let customers know it's not spam.

• From Email: Again, your company email or sales department email address should be here, so customers know where the email is coming from and who they can contact.

• Reply. Give customers a way to get in touch with you if they have any problems by adding your contact email here.

• Message: Include a personalized message explaining why customers are receiving this email and what next steps they should take. You can also add details about their order by inserting the {all_fields} tag.

If you want to send your order online from an email receipt automatically, this step-by-step guide will show you how.

Save your changes and go to the confirmation message.

The acknowledgment section gives you 3 types of messages that you can display to your customers after they've successfully submitted your form.

Here are 3 types of confirmation messages you can choose from:

• Message. This is the default WPForm validation type. This displays a simple success message telling the client their form has been submitted.

• Page Display. The Page Display option takes visitors to a specific page on your website after completing your form. You can learn how to redirect customers to the thank you page here.

• Go to the URL (Redirect). This type of acknowledgment is often used to send a client to another website after the form has been submitted.

To customize these settings from your form editor, click Settings »Confirm. Then choose your confirmation type from the drop-down list provided and edit your message.

For help setting up your confirmation message, see the WPForms documentation. And make sure to save your changes before proceeding.

Along with sending an email receipt to a customer, you'll want to show them an on-screen confirmation, so they know their order has been sent.

You can do this in the Settings »Confirm tab.

The default confirmation is “Thank you for contacting us! We will contact you shortly. "

You can change this to whatever you want, and you can also use the visual editor here to format your text.

Alternatively, you can redirect a customer to the "Thank you" page on your website or even to another website.

After you've set up the confirmation message, click 'Save' at the top of the screen.

Integrate Payment with your Order Form (Optional)

If you want to receive payment through your order form, you need to integrate it with a payment processor.

WPForms integrates very easily with two popular payment processors, PayPal and Stripe. Customers can pay via their PayPal account or by entering their credit card details.

We'll use PayPal in this guide, but the process for Stripe is similar.

First, you need to exit the form builder. You can do this by clicking 'X' in the top right. You will be prompted to save your form if you have unsaved changes.

Next, visit the WPForms »Addons page in your WordPress dashboard. Scroll down to ‘PayPal Standard Addon’ and click on the ‘Install Addon’ button below it.

The addon will then automatically install and activate.

Go back to your form that you can find in WPForms »All Forms. Now click on the 'Payments' tab.

Click on ‘PayPal Standard,’ then fill in the details of the form. First, you'll need to check the box "Enable PayPal Standard payments" and enter your business's PayPal email address.

Set the "Mode" drop-down menu to "Manufacturing" and set "Form of payment" to "Products and services."

If you're collecting shipping addresses through the order form, you can change "Shipping" to "No Address Required."

You don't need to enter a 'cancellation URL,' but you may want to create a page on your website to send customers to if they don't complete the checkout process.

Click the 'Save' button when you're done.

Now, when a user submits the form, they are automatically sent to PayPal for payment. You don't need to add any additional fields to your form or do anything else.

Publish your online order template to WordPress

Time to publish your online order form, is that pretty cool? What's even more interesting is that WPForms allows you to publish your forms in multiple locations on your website.

This means you can display your form in posts, pages, sidebars, and other widget-ready areas on your WordPress site.

To publish your form on a page, create a new page first by going to Page »Add New from your dashboard and title it.

Then click the plus icon to add a new content block to the page.

Then click on the block to add it to your page.

Next, you will need to select your online order form from the drop-down box provided.

But you are not done yet. No good order template is complete without a way to track and measure submissions. We'll find that out next.

Track form analysis

It's all well and good to have a nice online order form, but if no one else fills out and buys your product, it's a wasted effort.

You may not realize this, but abandoning the form is one of the biggest challenges website owners face.

In fact, the average quit rate is around 68%. That means many people fill out your form, then leave it right before they click Submit.

But there are ways to deal with form skipping, and it starts with tracking your order form's analytics accurately.

Most website owners use Google Analytics. But tracking form skipping in Google Analytics isn't a walk in the park. It isn't obvious! That's why our favorite way to track this kind of data is to use MonsterInsights.

With MonsterInsights, you can quickly set up Google Analytics for your WordPress site in minutes and really start to understand the data you collect. It's also a great companion to WPForms.

MonsterInsights makes tracking form skipping much simpler. You can set the form tracking in the event category as well as action.

Furthermore, the MonsterInsight reports are displayed right in your WordPress dashboard. So no longer have to click between windows and tabs to get the information you need.

You can learn all about how to track form skipping in WordPress with MonsterInsights in this easy step-by-step guide.

And there you have it!

In this article, you learned how to create an online order form for your WordPress website, as well as the best way to track your results.

Now all that is left to do is turn those abandoned visitors into paying customers.

bePOS - The Most Powerful POS System For Merchants

• Kitchen Display System: Get quick order status updates & Avoid any lost or forgotten tickets left at the printer.

• Staff Management: Easy to manage, track, measure, schedule; Maintain payroll details & Personalize accounts with employee-specific settings.

• Cloud-based: Stay synced anytime, anywhere & Enhance customer experience with only one information database.

• Menu Management: Add, clone, and organize menu items & Easy to modify to react with customer special order.

• Cash management: Account for and manage cash in the till with simple pay-ins and pay-outs

• CRM: Record the customer's profiles and buying history & Drive repeat business by rewarding loyal customers.

• Inventory Management: Track recipes against menu item; Determine ingredient-level food costs with ease & Auto-updated with in-service alerts.

• Instant reporting: Post sales data daily, save time, and reduce errors & Draw insights from comprehensive end-of-day summaries and other detailed reports.

Moreover, bePOS have some special features that no POS System contain:

• Track Costs: Track recipes against menu items and determine ingredient-level food costs with ease

• Menu Engineer: Track recipes against menu items and determine ingredient-level food costs with ease

• Improve Service: Keep staff aware of inventory levels automatically with in-service alerts.

• Define Ingredients: Easily create and track ingredients, with costing and unit measure information.

• Create Recipes: Associate common ingredients with menu items using tap-to-create recipes

• Track Inventory: Easily update all menu items with ingredients in its recipe, especially; with Restaurant Inventory Management features, you can create and manage a limitless number of ingredients with the unit cost and retail price, mark any menu item out of stock, and straightforward inventory reports. Also, you can customize menu items with varied & detailed ingredients and inventory countdown. With purchase and order, you can easily report on inventory levels and suggest re-stock options.

Besides, if your restaurant needs more hardware, bePOS is considered to be the best solution for you, which includes:

• iPad & iPad STAND: Apple tablet can operate as the POS terminal. Staff can take it to the table or leave stationary at a counter. Case (or stand) enclosures for your iPad, protect it from breakage, and safely secure a counter to prevent theft.

• Cash drawer: This hardware bundle will help you build the perfect wireless experience. The cash drawer can connect through one of our supported printers and serial drawers.

• iPhone & iPad: This is a small and portable version of your tablet POS system, which allows your employee to work on the move. The fast and reliable printer has innovative functionalities for POS environments. The small size makes it ideal for customers with limited counter space.

• LAN receipt printer.

Using bePOS brings you better communication with display ticket times to keep track of turn around, which helps staff see what’s cooking and what’s ready to go. It reduces less hardware with display ticket times to keep track of turn around and help staff see what’s cooking and what’s ready to go.

bePOS helps create an ultimate service with display ticket times to keep track of turnaround, which helps staff see what’s cooking and what’s ready to go. Get reports tailored to table-service restaurants: revenue centers, item and modifier sales, customer frequency, employee sales. If it hits the bottom line, we’ve got a report for it.

Try bePOS now, and we promise to give you the best experience ever! The food delivery market is spreading among consumers. Furthermore, it is a potential area for investment. If you want to create your own food delivery website, you have two options. You can use a template for your future website and hire a development team to customize it to your needs. Alternatively, you can hire a team to develop a completely custom solution for ordering and delivering food, which can be expensive but beneficial.