Do you need to add an order form to your WordPress website?
If you’re selling products and services, adding an order form can make it easy for your customers to order from you online and make payments.
In this article, we’ll show you how to create an online order form in WordPress in 7 easy steps.
Video Guide: How to Create a WordPress Order Form
We’ve created a video that shows you how to create an order form in WordPress.
If you would prefer to read the instructions for how to create an online order form, we’ll walk through the process in the steps below.
How to Create an Online Order Form in WordPress
Creating an order form in WordPress is very easy.
In This Article
- Video Guide: How to Create a WordPress Order Form
- Step 1: Install WPForms
- Step 2: Load the Online Order Form Template
- Step 3: Customize the WordPress Order Form Fields
- Step 4: Customize Your Online Order Form Notifications
- Step 5: Configure Your Form Confirmations
- Step 6: Connect a Payment Provider With Order Form
- Step 7: Add the Online Order Form to Your Site
Let’s jump into it.
Step 1: Install WPForms
Firstly, you’re going to need a form builder plugin that enables you to easily create an order form.
WPForms is the most user-friendly WordPress forms plugin, perfect for a task like creating order forms. There are several pricing plans available, but we recommend getting WPForms Pro because it lets you add payment options to your online order form.
Once you’ve purchased the plan, go ahead and install WPForms on your WordPress site.
Great! You can now immediately begin creating an order form and connect it with a payment gateway.
Step 2: Load the Online Order Form Template
When WPForms Pro is installed on your site, go to WPForms » Add New from your WordPress dashboard to create a new form.
On the setup screen, name your order form (you’re free to give it any name you want).
Now, to make this task super easy and quick, select an order form template. WPForms has over 400 form templates. We’re going to use a PayPal payment form template for this example. This online order form template is perfect for small businesses.
When you select this template, you’ll get a popup asking you to install the PayPal Standard addon (which is required for this template to work). Click on Yes, Install and Active to continue.
The addon will take just 5 seconds to install, and then the template will load for you. Here’s what it looks like:
As you can see, this online order form template is simple, neat, and uncluttered. And that’s just what we want! The more concise a form is, the easier it is for users to fill it out and attain their goals.
Let’s customize some of the fields in this template so they can be even more helpful for customers.
Step 3: Customize the WordPress Order Form Fields
By default, the order form template has a Multiple Items field that allows users to select a product from a list of choices.
To make the form specific to your products and services, you can add the actual names of your products and set a price for each.
Click the Multiple Items field to open its Field Options. Here, you can change the label of the field and the names of the items to match your products.
To change the price, simply enter a number in the column next to each item.
If you want to add more items to this field or delete an existing item, simply use the plus (+) and minus (-) buttons next to each item.
You may also want to show the price tag of each product next to their names, so customers can see the individual price of each product before placing their order.
Simply click the Show price after item labels toggle switch to display the price tags next to each item on the form frontend.
And last but not the least, you can add an image for each choice so people can see what they’re ordering. Click on the Use image choices toggle to enable this feature.
When enabled, this feature will reveal an image upload button for each product, which you can use to upload an image to go with your product on the order form.
It’s important to remember that the Multiple Item field that’s added by default in this template only lets users select one item at a time.
If you want to allow your users to order multiple products using the same WordPress order form, you can use the Checkbox Items field instead.
To do this, first delete the default Multiple Item field by hovering your mouse over the field and clicking the red trash can icon.
A popup will appear asking you to confirm that you want to delete this field. Press OK to continue.
Now, focus on the left-hand pane and scroll down to the bottom to find Payment Fields. Pick the Checkbox Items field and drag and drop it onto the form.
When you’ve placed the field where you want it on your form, you can customize its settings exactly as you did with the Multiple Items field.
Now, users can order multiple products from a single form. The Total field will calculate the total price of all the items selected by the user, so they can see in real-time the total cost of the order.
Make sure to Save your changes when you’re done customizing your WordPress order form.
Step 4: Customize Your Online Order Form Notifications
When a user submits an order form, WPForms will automatically send a notification to you (the admin). You can customize this email so that it includes useful information that allows you to easily find order confirmation emails for each person that fills your form.
Start by clicking on the Settings tab in the Form Builder and then click Notifications.
If you’d like to send a copy of the order email to multiple members of the team, you can add their email addresses separated by commas within the Send to Email Address field.
It’s also a good idea to use Smart Tags in the subject line so that every order email doesn’t look the same. One easy way to do that is by adding the Name Smart Tag in the email subject. This means that each order email will have the name of the customer that filled the form.
You can add Smart Tags by clicking on Show Smart Tags.
This will open a list of available fields that you can use as a Smart Tag. In this example, we’re going to use the Name field as our Smart Tag.
Now, every email notification you receive from this online order form will contain the name of the customer in the subject line. This is a great way of making it easier to track order emails by name.
In addition, if you use Smart Tags, you can even send a form notification to a customer to let them know their order has been received.
To set up a separate notification for customers, click on the Add New Notification button on the top-right.
This will display a popup box where you’ll need to name your notification to distinguish it from the default notification.
Then, use the Smart Tags to include the email address of the person that filled out the online order form in Send To Email Address field. Click Show Smart Tags in the Send To Email Address field.
Then, select the Smart Tag for the Email field. This will allow WPForms to retrieve the email address provided by the customer in the order form and send them the notification on this email address.
Similarly, you can customize all the different parts of your WordPress order form email notifications using plain text and Smart Tags as you see fit.
For more help with smart tags, check out this tutorial on how to use Smart Tags in WPForms.
Notifications in WPForms are extremely flexible. You might want to check out this guide on how to create multiple form notifications in WPForms.
Step 5: Configure Your Form Confirmations
Form confirmations are messages that display for customers once they submit an order form.
There are three confirmation types you can choose from:
- Show Page
- Go to URL (Redirect)
Let’s see how to set up a simple form confirmation in WPForms so you can customize the message users will see after submitting their orders.
First, click on the Confirmations tab in the Form Editor under Settings.
Next, select the type of confirmation you’d like to create. For this example, we’ll select Message, which is the simplest way to display a confirmation.
Then, customize the confirmation message to your liking, and click Save when you’re done.
Excellent! We’re almost finished.
Note: The confirmation message won’t appear if you connect PayPal as your gateway provider. In that case, the user will simply be redirected to their PayPal account to make the payment.
Step 6: Connect a Payment Provider With Order Form
In order to accept payments for orders, you’ll have to connect a payment service with WPForms.
For this example, we’re going to use PayPal to process orders. Remember that you earlier installed the PayPal Standard addon before loading the order form template?
This is where that will come in handy!
You just need to provide your PayPal address and enable the gateway in your form to set it up now.
Go to Payments » PayPal Standard.
Now you’ll need to Enable PayPal Standard Payments, enter your PayPal email address, select the Production mode, choose Products and Services, and adjust other settings as needed.
After you’re done configuring the payment settings, click Save to store your changes.
You don’t need to include any payment fields in your form with PayPal. Once you enable PayPal payments, the user will be automatically redirected to PayPal to complete their purchase after submitting your form.
Be sure to check out our tutorial on allowing customers to choose their payment method if you want to offer more than one payment option.
Now you’re ready to add your simple order form to your site.
Step 7: Add the Online Order Form to Your Site
WPForms makes it super easy to embed your order form on your WordPress site.
Click on the Embed button on the top.
To embed the WordPress order form in a new page, click Click New Page.
Now input a name for the new page and press Let’s Go.
You’ll now see your WordPress block editor with the block already added for the order form you just created within the page.
When you’re ready to launch, click on the Publish button.
Now you can view your published order form live on your site. Notice when you select items on your form the price changes automatically.
When any user fills out this form, they’ll be redirected to PayPal to make the payment.
And there you have it! You now know how to create an order form in WordPress and accept online payments with it.
As an additional, optional step, you may want to keep users on your website even after they make an order, increasing their chances of making extra orders. Learn how to do this by redirecting users to another page on your website or another website after they submit a form.
If you’re a nonprofit, you can follow similar steps as above to create a donation form for your nonprofit.
FAQs on Creating Online Order Forms
Here are some of the frequently asked questions concerning creating WordPress order forms:
How to Make a Dropdown Order Form on WordPress
WPForms has a Dropdown field that you can include in your order form. In the example above, we used a Multiple Items field to mention the list of available items that the user can order.
But you can use the Dropdown field instead of Multiple Items to list your available products. The dropdown menu provides the advantage of keeping your forms short and concise when there are a lot of options to choose from.
So if your list of available items is long, consider adding the Dropdown field to your form using WPForms easy drag and drop form interface.
Next, Make More Money from Your Website
Want to start making more money off your own website? You may want to check out our post on the best WordPress affiliate plugins.
Are your WordPress email settings configured the right way? Make sure to check out our guide on adjusting email settings in WordPress to make sure your outgoing emails are working properly.
Don’t wait to start building your online order form. Get started with the most powerful WordPress form plugin today. Looking for a free order form? WPForms Pro comes with a free online order form template and a 14-day money-back guarantee.