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.
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.
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.
In This Article
- 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 plugin for building forms. It’s perfect for a task like creating order forms, contact forms, and tons of other commonly used 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.
You’ll now be able to select a ready-made order form template to add to your WordPress site. Start by naming 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 600 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 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.
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 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:
- Message
- 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.
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.
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 checkout to complete their purchase after form submission.
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. 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.
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.
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.
Can the user view the order in front end and make a repeat order?
Hi Azeez, thank you for the question.
As WPForms isn’t an e-commerce solution, there is no anything like the user profile page or the customer’s area on the site, si I’m afraid currently, we don’t have any built-in option to access the submitted form submission on the site front-end.
To send another order, the user will have to submit the form again.
I apologize for any inconvenience.
Have a good one 🙂
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.
Hey Pamela – I agree that would definitely be useful. In the future we’re going to look at adding checkbox and dropdown fields to support payment items!
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?
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 🙂
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?
Hey Tyler,
Currently this is not something WPForms would be able to detect or handle, but I’ve made a note so we can consider it in the future. Thanks!
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.
Hi David,
WPForms doesn’t currently have a shopping cart, as this is a fairly complex ecommerce feature. If you’re looking for more robust shopping options like this, an ecommerce-specific plugin will probably be a better fit though we certainly appreciate your consideration!
If you have any other questions, please feel welcome to reach out 🙂
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!
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 🙂
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?
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 🙂
HI, is it possible to add an image for radio checklist ? like instead of text, i want to place an image..
see screenshot
sorry, here is the screenshot http://prntscr.com/i4x828
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! 🙂
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.
Hi Sonia,
Sure, here’s our tutorial on setting up notification emails. As mentioned in this tutorial, using the
{all_fields}Smart Tag will result in an email like this example.If you have any other questions about this, please get in touch! If you have a WPForms license, you can submit a support ticket,
otherwise we provide limited support for Lite users on wordpress.org.
Thanks! 🙂
Can it calculate amount according to a number entered on a textfield?
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 🙂
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.
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! 🙂
Hello, it seems that this feature isn’t included in the Lite version of WPforms, I need some clarification as the steps/screenshots only cover the installation and activation of the plugin itself. Is this feature specifically available only with the add-on templates pack? Otherwise, without this detail the article seems a bit misleading.
Hi Michael,
Great question. Our Lite version isn’t able to create order forms as it doesn’t include access to pricing-related fields, however our paid licenses have access to order form options.
Specifically, any paid license would let you create an order form without payment. However if you’d like to collect a payment through your form, you’d need a Pro license level or higher. This would provide you with access to our two payment addons, Stripe and PayPal.
I hope this helps! And if you have any additional questions about our paid licenses or order forms, please get in touch 🙂
What about stock? If I only have 32 of a particular item is there anyway to manage this? Let’s say I have a special price sale item, I wouldn’t want to 34 orders.
Hi Dave,
We don’t currently have a way to set/keep track of stock numbers. In case you only offer a single product, though, you potentially could use the submission limit in our Form Locker addon for a similar result (so the form would close after a specific number of entries were submitted).
If you have any questions about the Form Locker addon, please get in touch. Thanks! 🙂
Hi,
is it possible to make a application form in 3 steps?
step 1. form to fill
step2. check the filled tekst in a next page, if there is something wrong to recover it with back or next button. back for recover and next for the step 3.
step3. payment gateway through stripe.
last but not least, when more than 1 application in this case 2 – 6 people, can I add “next customer” button with the same information as customer 1.
thnx.
Hi Erik,
I apologize, but I’m not sure I understand exactly the form flow you have in mind. When you get a chance, could you please get in touch with some additional details? Thanks! 🙂
Is there a way to set inventory on each of the products available to order?
Hi Sunmac,
We currently don’t have an option to allow you to set inventory for products that you are selling so I apologize for the inconvenience! In case it helps, I’ve added this as a feature request for our development team to consider further down the road. Thanks for the suggestion! 🙂
Any idea when this might happen?
Hi Andrew!
I apologize, but we don’t have any ETA on this currently.
We appreciate the suggestion! It’s always helpful to get insights from our users.
Have a good one 🙂
Hi, has functionality been added to set inventory?
Hey Gina- This feature is in our development team’s feature list. I have added your vote to the feature request to push it forward. Thanks! 🙂
I would like to know if I can use WPFORMS to create a one page
1) Order/product selection w/quantity drop down box
2) Order summary
3) Payment Checkout
*I sell tickets with multiple options and ADULT/ CHILD pricing, my customers always vary on what they purchase
Hi Lawrence,
We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂
Is there a way to a coupon code or promo code field to a purchase form?
Hi Jessica,
We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! In the meantime though, we do have a workaround that you can check out and see if it works for you.
I hope this helps!
You should update this! Adding an order form is no longer free. >:(
Hi Matthew,
I apologize for the confusion. The Billing/Order form template is only available with paid versions of WPForms but you can recreate most of it using the free version, WPForms Lite. If you’d like to include a total field or allow users to submit payments online, you will need to upgrade to Pro or higher.
I hope this helps!
Is there a way to delay processing of a payment until the site owner puts it through manually?
The form is an application, and we only want to charge people whose applications are approved. The approval is a manual process, so there needs to be a delay. Suggestions on ways to do this are welcome.
Hi CD,
We don’t have a way to do this right now since currently, if you’re using Stripe, the payment must be successfully processed before the form itself can be submitted. With PayPal, a user will be redirected to the PayPal site after they’ve submitted the form first. That being said, I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂
This is really great it really helped me and my boss is strating an online business
Hi Joshua,
Great! I’m glad to hear you found this helpful! 🙂
I’m looking for something like this to utilize for an estimate form for our site. Basically, we want a visitor to be able to check off the items they’re interested in, each of which have a corresponding price. The catch is we’d prefer if the individual prices don’t display, just the total cost. Is that an option?
Ideally, we’d like the total cost to be emailed to the visitor with a copy of the items they selected on teh form, is that within the plugin’s capabilities? And if so, are they available in the free version?
Hi Jamie,
The Checkbox Items field does not display the individual price beside the item itself but the individual price will appear in the total field as the use makes their selection. Of course, this number will change as users select more items to display the total amount due upon submission.
A user can receive a copy of their form submission via an email notification after they’ve submitted the form. For more information on that, please check out our notification setup guide.
Thanks!
Hello,
I have a condition here can anyone please help me?
can I add this wpform on woocommerce product buy now button so when user select any product and click buy now button then my created form will open and instead of its selecting forms item it will remember my woocommerce selected product and user will fill all required fields and checkout .
can I do with this plugin ?
Hi Mubashir,
We currently don’t offer any integration with WooCommerce because they’re heavily integrated with their own forms systems.
If you need forms to work within WooCommerce, I’d suggest contacting the Woo team directly to be sure you can find an option that integrates properly with their system.
Hello..
Daisy can you please tell me, we can use Skrill account for payment in WPforms ?
Hi Kelli!
Currently, we will concentrate on PayPal and Stripe payment options only.
If it helps, here you can find more details regarding both options: PayPal and Stripe.
I apologize that we can’t provide you with the option you need.
Have a good one 🙂
Hi, any updates on adding a quantity field to the product fields? It would be super helpful to allow a customer to enter their own quantity value… Thanks!
Hi Gene, I hope you are doing great!
Currently, this feature is unavailable, as WPForms can’t running calculations.
We have this actually added to the “Feature request” list in our system as we do planning thr roadmap, however, I don’t have any ETA on this.
Have a good one 🙂
Hi, please I want to know if I can add custom payment gateway(PayStack.com or Flutterwave) to my form and if possible use my woocommerce payment gateway instead of the PayPal & Stripe you mentioned above.
Actually, I need a form where I can users can place order from my woocommerce products without visiting the store page.
Hi Michael – I apologize, but we don’t currently have the options you’ve described here. But if there’s any other way that we might be able to help, please feel welcome to reach out! Our team is happy to answer any questions you might have: https://wpforms.com/contact/
Greetings,
I was looking for a way to make on-line Group Buys more simple that the mess I have had to deal with in the past. We have 4355 club members and when I have a Group Buy it gets crazy. Orders are placed, orders are changed, orders are canceled, etc. In the end I have to go back and figure out where I am and I have done that by using a Spreadsheet but this is laborious and provides an Opportunity For Error (OFE). To make it all worse it is on a closed FaceBook page where this all takes place.
Any ideas on how I can use this tool or something different to make this process easier?
Hi Tony, thanks for your question!
It looks like the main issue in your case is the orders management. With WPForms you can use our payment addons (Stripe or PayPal) and then manage your orders either in your Stripe or PayPal account, which I believe is a good idea compared to the way how you did it before.
In case it helps we have great articles about both Stripe and PayPal addons on our website.
I hope this helps.
Have a good one 🙂
Final email should go after successful payment, But I have not saw any setting for this. The emails are going to simple user even if user are not making payment.
Is there any option for this.
Hi Abhilesh!
I apologize for any confusion!
With PayPal option, there is no way to send emails only after successful payment. Entry created and a notification email sent regardless of the payment made or not.
You can use our Stripe addon where it will send an email and save entry only after successful payment.
I hope this helps.
Have a good one 🙂
Will Woocommerce integration come soon? There really is no woocommerce integration. I was very surprised by this. I am amazed that WordPress is not in the most used form plugin.
Hi Alican!
I apologize, but we don’t support any integration with WooCommerce, mainly because they’re heavily integrated with their own forms systems.
If you need forms to work within WooCommerce, I’d suggest contacting the Woo team directly to be sure you can find an option that integrates properly with their system.
I’m sorry we can’t be more helpful with this!
Have a good one 🙂
I’m curious…
How could this be used if there are two price multipliers?
Example
Number of children attending an event. $100 per child
So $100 for 1, $200 for 2, $300 for 3.
And…
Number of days: X: the above cost by the number chosen.
I’m weighing up if I could use this for a solution I need to create.
Hi David!
Currently, we do not have a built-in option to run the math calculations required to achieve this task. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.
I apologize for any inconvenience!
Have a good one 🙂
Can you enter inventory available on the back end so that a customer does not order something that is out of stock? Thanks!
Hey Kim- Currently, we do not have an inbuilt feature integrated with an Inventory addon. I agree that a feature like that would be super helpful. However, I have added your vote to our feature request list for future enhancements 🙂
Is it now possible to enter the quantity of a product, so that it is displayed when something is sold out? Or can you tell us, when it is planned to come?
Hey Regina,
We do not have an inventory feature to manage the products based on stock availability and sold out. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future and currently, we do not have an ETA on this feature.
I apologize that we can’t provide what you’re looking for right now, but I appreciate the suggestion! It’s always helpful to get insights from our users.
Thanks 🙂
Hello,
Is it possible to let the user choose between two currencies? Like CHF en EUR?
Thank you for your answer and help 😊
jm
Hi Jean- Marc,
I am sorry as currently, we do not have an inbuilt feature to choose different currencies. Current functionality only allows single currency. I have gone ahead and added your vote to consider this as a feature request for future enhancements.
Thanks,