How to create an order form in WordPress

How to Create an Online Order Form for Small Business in WordPress

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 for small business in WordPress in a few easy steps.

Make an Online Order Form Now

What Is An Order Form?

An order form allows customers to place orders and purchase an item from a company. Busineses use order forms to simplify the ordering process and collect requests for orders online. Some form builder tools allow you to connect your order form with a payment service so customers can immediately pay you online while placing an order.

How to Create an Online Order Form in WordPress

We’ve created a video that shows you how to create an order form in WordPress.

WPForms is the best WordPress Form Builder plugin. Get it for free!

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.

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.

WPForms

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.

add new form

On the setup screen, name your order form (you’re free to give it any name you want).

Name order form

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.

PayPal payment form template

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.

Install PayPal standard addon

The addon will take just 5 seconds to install, and then the template will load for you. Here’s what it looks like:

WordPress order form template

As you can see, this is the perfect online order form for small business. It’s simple, neat, and uncluttered which is just what you’d 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.

Shirt items

To change the price, simply enter a number in the column next to each item.

Order item price

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.

Add or remove order 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.

display price of order items

And last but not 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.

toggle on product images

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.

Upload image for order item

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.

Deleting a field

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.

Adding a Checkbox Items field to your 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.

Checkbox field options

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.

Opening the notifications settings in the form builder

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.

Send to email address

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.

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.

name smart tag in subject

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.

Adding a new email notification

This will display a popup box where you’ll need to name your notification to distinguish it from the default notification.

Naming a new email 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.

Accessing Smart Tags for an email notification

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.

Selecting the Smart Tag for the Email field in an email notification

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.

Adding the {all_fields} Smart Tag to an email notification

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:

  1. Message
  2. Show Page
  3. 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.

Order confirmations

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.

Choosing the Message confirmation type

Then, customize the confirmation message to your liking, and click Save when you’re done.order form confirmation

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.

WPForms integrates with PayPal, Authorize.Net, Square, and Stripe payment processors for accepting payments.

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.

PayPal Standard payments settings in the form builder

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.

Embed form button

To embed the WordPress order form in a new page, click Click New Page.

embed wpforms on a new page

Now input a name for the new page and press Let’s Go.

Embed in a new page

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.

Publish order form

Now you can view your published order form live on your site. Notice when you select items on your form the price changes automatically.

Order form publish

When any user fills out this form, they’ll be redirected to PayPal to make the payment.

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

Make an Online Order Form Now

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. To add the Dropdown field, simply click on it from the left hand pane in the form builder or drag and drop it where you need it on your form.

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.

Make an Online Order Form Now

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.

And don’t forget, if you like this article, then please follow us on social media with Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.