WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a Simple Order Form

How to Create a Simple Order Form in WordPress (Step by Step)

Last updated on May 31, 2018 by Lindsay Liedke

Do you need to create a simple order form on your WordPress site? With WPForms, you can create an order form that accepts online payments from customers when they submit their order.

You can also create an order form that gets the order information from customers, but allows you to collect payment for the order later. In this article, we’ll show you how to create both a simple order form with online payments and without.

Here are some quick links for you so you can check out which simple order form you want to create for your site:

If you don’t like the video, or need more instructions, then please continue reading.

How to Create a Simple Order Form with Online Payments

Here we’re going to show you how to create a WordPress order form that will accept credit card and PayPal payments. If you want to accept online payments for orders through your site’s order form, this is the place to be.

Step 1: Create a Simple Order Form in WordPress
The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New to create a new form.

On the setup screen, name your form and select the Billing/Order form template.

Billing-Order Form Template

Next, you’ll want to modify what items are available to order.

To do this, scroll down to the “Available Items” section in the preview screen on the right and click on it.

This will open up the “Field Options” in the left panel. Here you can rename the field, add or remove order items, and change the prices.

Customize Available Items

If you want to give people images to choose from when filling out your order form, click on the Use image choices checkbox in the Form Editor.

Use Image Choice Checkbox

When you do this, you’ll be able to upload images to go alongside your items, giving people a visual look at what they’re ordering.

For help with this step, check out our tutorial on how to add image choices to your WordPress forms.

Lastly, you can add additional fields to your order form by dragging them from the left hand side to the right hand side.

Click Save when you’re done.

Step 2: Configure Your Order Form Notifications
There are two settings to configure in your simple order form. The first is the Notifications setting. Notifications are a great way to send an email when your form is submitted.

You can send an email notification to yourself, which WPForms does automatically unless you disable form notifications. You can also send a notification to a member of your team by adding their email to the Send to Email Address field.

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.

Let’s take a look at how to set up one form notification that will be sent out to a customer after they submit an order form on your website.

Start by clicking on the Settings tab in the Form Builder and then click Notifications.

Next, you’ll want to customize which email address will receive a notification when a new order is submitted.

To include the email address of the person that filled out the order form, which is your customer, click Show Smart Tags in the Send To Email Address field.

Form Notification Smart Tags

Click on Email so WPForms knows to send a notification to the email address that was entered on the order form submission.

Form Notification Smart Tags, Email

Next, you can change your notification’s email subject to be more specific. In addition, you can customize the “From Name”, “From Email”, and “Reply-To” emails.

And don’t forget to include a personalized message if the email is going to anyone but yourself.

If you want to include all of the information found in the form fields of the submitted order form, use the {all_fields} smart tag.

For more help with smart tags, check out this tutorial on how to use smart tags in WPForms.

Form Notification Customization

By changing these fields, you’ll know that whoever receives the email notification will know exactly what the notification is for and who it came from.

To send out more than one email notification when an order form is submitted on your website, check out these step by step instructions on how to create multiple form notifications in WordPress forms.

Better yet, if you want, you can send an automatic WordPress order form email receipt to all customers that submit an order.

Step 3: Configure Your Order Form Confirmations
The second setting to configure deals with 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. This is the default confirmation type in WPForms. When a customer submits an order form, a simple message confirmation will appear letting them know their form was processed. Look here for some great success messages to help boost customer happiness.
  2. Show Page. This confirmation type will take customers to a specific web page on your site thanking them for their order. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to check out our article on creating effective Thank You pages for boosting customer loyalty.
  3. Go to URL (Redirect). This option is used when you want to send customers to a different website.

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 Confirmation tab in the Form Editor under Settings.

Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.

Form Confirmation Type

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

For help with the other confirmation types, see our documentation on setting up form confirmations.

Step 4: Configure the Payment Settings
Lastly, you’ll need to configure the payment settings for your order form by connecting to your payment provider so you can collect online payments from customers.

WPForms integrates with both PayPal and Stripe for accepting payments.
To configure the payments settings on your order form, you’ll first have to install and activate the right payment addon.

For easy step by step instructions, check out our tutorial on installing and using the PayPal addon. If you want to use Stripe, you’ll find similar instructions for installing and using the Stripe addon here.

Once you’ve done that, click the Payments tab in the Form Editor.

In our example, we’ll set up PayPal to process orders.

Payment Settings

After clicking PayPal, you’ll need to enter your PayPal email address, select the Production mode, choose Products and Services, and adjust other settings as needed.

PayPal Settings

After you’re done configuring the payment settings, click Save to store your changes.

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 on your site.

Step 5: Add Your Simple Order Form to Your Site
WPForms allows you to add your forms to many places on your website like blog posts, pages, and your sidebar (widget-ready areas).

First let’s take a look at the most common post / page embed option.

Start by creating a new post or page in WordPress and then click on the Add Form button.

Then, select your simple order form from the dropdown menu and click Add Form.

Add Simple Order Form

Next, publish your post or page so your order form will appear on your website.

To add a simple order form to your site in the sidebar widget area, go to Appearance » Widgets and add a WPForms widget to your sidebar.

After that, select the Billing / Order Form from the drop-down menu.

WPForms Widget

Click Save.

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

Final Order Form with Payment

And there you have it! You now know how to create a simple order form in WordPress that accepts online payments.

How to Create a Simple Order Form without Online Payments

There are a few reasons why you might want to avoid collecting payment for orders from your customers through your order form:

  • You don’t like the idea of accepting credit cards through your website
  • Your customers prefer to send checks, money orders, or directly deposit funds from their bank account into yours
  • Payment plans are an option for your customers
  • You prefer to send official invoices to customers requesting payment

No matter the reason for not wanting to accept online payments, WPForms makes it easy for you to create a simple order form without payment.

Let’s take a look at how to do just that.

Step 1: Create a Simple Order Form in WordPress
The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New, name your form, and click on the Billing/Order Form template.

Billing-Order Form Template

In the Form Editor, you’ll be able to customize what items are available for customers to order.

To do this, scroll down to the “Available Items” section in the preview screen on the right and click on it.

This will open up the “Field Options” in the left panel. Here you can rename the field, add or remove order items, and change the prices.

Customize Available Items

If you want to give people images to choose from when filling out your order form, click on the Use image choices checkbox in the Form Editor.

Use Image Choice Checkbox

Doing this will give you the ability to upload images to complement the items you have for sale, while also showing customers an image of the item they’re wanting to purchase.

For help with this step, check out our tutorial on how to add image choices to your WordPress forms.

Lastly, you can add additional fields to your order form by dragging them from the left hand side to the right hand side. This is good for collecting additional information from your customers that relate to their order.

Click Save when you’re done.

Step 2: Configure Your Order Form Notifications
Next, you’ll need to configure your form’s email notifications so you can send customers an email receipt for their order.

This is done by sending multiple notifications at once – one to yourself or the team member in charge of orders so you know an order has been submitted, and one to your customer.

By default, WPForms automatically sends the admin email associated with your WordPress site a form notification unless you turn notifications off. However, to send your customer an email notification as well, you’ll need to add another notification.

To do this, click on the Notifications tab under Settings in the Form Editor. Then, click on the Add New Notification button.

Notification Settings for No Payment

A popup modal will appear. Here you can name your additional notification whatever you want since it’s just for your reference. Then, click Okay.

Receipt

To send this notification to the customer that filled out the order form, click Show Smart Tags next to the Send To Email Address field. Then click on Email.

Smart Tags

This will tell WPForms that whatever email address was entered on the order form that was submitted should receive a notification.

Next, you can change your notification’s email subject line. In addition, you can customize the “From Name”, “From Email”, and “Reply-To” emails so your customer knows exactly what the email notification they receive is about.

You can also customize the notification message. If you want to include all of the form field information the customer filled out on your order for, use the {all_fields} smart tag and add whatever additional message you’d like to add.

Thank You Message

For more help with smart tags, check out this tutorial on how to use smart tags in WPForms.

Click Save.

Step 3: Configure Your Order Form Confirmations
The next thing you’ll need to do is set up the confirmation message that customers will see after submitting their order.

There are several confirmation types you can set up in your forms, including:

  • A confirmation message that will show after a form submission
  • Redirection to another page on your website, such as a “Thank You” page
  • Go to URL redirect, for times you want to redirect customers to another website

For help with all three of these options, take a look at our useful tutorial on setting up form confirmations in WordPress.

In our example, we’ll set up a simple message confirmation that customers will see once they submit the order form.

First, click on the Confirmation tab in the Form Editor under Settings.

Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.

Form Confirmation Type

Then, customize the confirmation message and click Save.

Step 4: Add Your Simple Order Form to Your Site
WPForms allows you to add your forms to many places on your website like blog posts, pages, and your sidebar (widget-ready areas).

First let’s take a look at the most common post / page embed option.

Start by creating a new post or page in WordPress and then click on the Add Form button.

Then, select your simple order form from the dropdown menu and click Add Form.

Add Simple Order Form

Next, publish your post or page so your order form will appear on your website for site visitors to see.

To add a simple order form to your site in the sidebar widget area, go to Appearance » Widgets.

Then, add a WPForms widget to your sidebar. After that, select the Billing / Order Form from the drop-down menu and save your changes to the widgets area.

WPForms Widget

Click Save.

And there you have it! You now know how to create a simple order form in WordPress without online payments.

For help with creating invoices, be sure to read our guide on how to generate FreshBooks invoices from your WordPress forms. This way you can make sure your customers pay you for their orders.

It’s also good to know you can boost your email marketing efforts by adding the option for customers to join your mailing list while filling out your WordPress order form whether you accept online payments or not.

In fact, WPForms integrates with email marketing services such as MailChimp, GetResponse, and AWeber, all of which are perfect for helping you get more subscribers.

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

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

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. Excellent. This step by step approach takes the confusion out of such an important issue. Anything that helps us get paid is always welcome information. Such knowledge puts us over the wall while others are contemplating the first step.Your assistance is greatly appreciated. Thank you.

  3. Form would be more helpful if you could check more than 1 entry on multi-choice module. Having a tough time building a form that allows for multi-items purchase.

      1. Hi Jared, do I get it right that there is no way to change the order form in a way that my customers can order more than one item?

      2. Hi Bettina,

        You can absolutely set up your order forms so that customers can order more than one item. A form can include as many items fields as you’d like, and each items field allows one item to be selected.

        So what many of our users will do is include a Dropdown Items field for each product. Then they will fill in the dropdown options with various quantities and associated prices. That way, it’s possible to include both many different items and multiple quantities of each item.

        I hope this helps! If you’d like more details about this, please feel free to get in touch 🙂

  4. Is it possible to us WPForms and integrate with an add to cart button on the site and have the WPForm recognize a cart in the checkout process?

  5. Is it possible to add a product to the cart using WPFORMS rather than checking out?

    user case: Allow a user to register several of their kids, enter child info, select the childs instrument/service. Perform this for each of their four kids, for example, the product/service selection is added to the cart when pressing submit.

    Once the user is done registering each child they would checkout, I would add a button “go to cart” with all items added to the cart using woocommerce to checkout.

  6. Hello,

    Is there a way to be able to have a set percent of a total cost be charged to the card per month? Like let’s say that there is a customer that has to make payments for a service — for example, service cost was $1000 and the customer wants to pay 10% of that every month ($100) until it’s paid off.

    Thank you!

    1. Hi Jeremy,

      Our forms don’t currently have the ability to do calculations outside of adding prices together, and additionally we don’t have a way to create payment plans in the way you’re describing. I’ll add these to our feature request list, though, so our team can consider these ideas in the future.

      Have a good one 🙂

  7. Can a customer enter a custom quantity in a textbox? All examples are using drop-downs with predefined quantities. I want to sell tickets. I am adding one item on the form. I can set its price, but how to set up quantity so it is flexible?

    1. Hi Grzegorz,

      The method you’re describing is what I would recommend as well. We don’t currently have the ability to add a quantity field to your products, though this is on our radar to consider down the road!

      If you have any other questions, please feel welcome to get in touch 🙂

  8. HI, is it possible to add an image for radio checklist ? like instead of text, i want to place an image..

    see screenshot

      1. Hi Raju,

        Sure, you can absolutely do this! Here’s our tutorial with all of the steps to get started. This will show you how to add images — and I’d recommend making sure all images are the same size to make the next step simpler.

        Next, the layout. First, you can use our built-in setting to put the options in 2 or 3 columns.

        After choosing the 3 column layout, I played with some styling to get the image and text oriented. Here’s the CSS I used to create the same look from your screenshot:

        ul#wpforms-10-field_223 li {
            display: flex;
        }
        
        ul#wpforms-10-field_223 input {
            align-self: flex-end;
            margin-bottom: 4px;
        }
        
        div.wpforms-container-full .wpforms-form ul li {
            margin-bottom: 0 !important;
        }
        

        With all this in place, here’s a screenshot of my end result.

        This may look a little different on your site’s theme depending on the styles applied there, but hopefully this gets you really close to the look you want! 🙂

  9. Do you have an article regarding the output of a form in an email? My current form is creating tons of extra line spaces after it’s been submitted and received via email. The form looks great on the website itself.

    1. Hi Ben,

      We don’t currently have a way to run calculations outside of basic product price addition (adding the cost of selected items to display in a Total field). I’ll note this on our feature request list for consideration, though 🙂

  10. Is this function available in the Basic paid for version? I can’t work it out from the list of features. I would like to use it in a membership renewal form for a small club website where I need to keep costs down. It looks like it will do the other features I need, Entry management and Conditional Logic. Thanks.

    1. Hi David,

      With a Basic license, you’d be able to great a simple order form as long as you don’t need to collect online payments. If you do need to collect online payments, you’d need a Pro license level or higher in order to access our payment addons (Stripe and PayPal).

      I hope this helps! And if you have any other questions about licenses, etc, please feel welcome to get in touch! 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.