Are you looking for a step-by-step tutorial on how to create an order form in WordPress?
Well, you got the one because I am going to share the exact same thing over here.
I am going to share the simple method that you can use to create an order form and accept payments from customers.
For this, we need a form builder plugin for WordPress to create an order form. I prefer using WPForms which is a drag-n-drop form builder that makes easy to create any kind of forms in WordPress website.
Read more:
- How To Create A Nonprofit Donation Form In WordPress?
- How To Create High-Converting ActiveCampaign Forms Using WPForms?
WPForms has both free and premium versions, its free version is enough for all basic forms’ need but when you need to create advanced forms like Order Form then you need to purchase their premium plan.
For creating order form using WPForms, you must have their Pro(or Elite) plan which will cost you $199.50 per year.
You can use this SPECIAL LINK to claim the best available discount on WPForms premium license purchase.
Now let’s see how you can create an order form in WordPress using the WPForms form builder.
How To Create An Order Form In WordPress Using WPForms?
I am going to show you the exact steps that you need to follow in order to build an order form using the WPForms plugin.
For your ease, the entire tutorial is going to be divided into five simple steps.
Step: 1 Create An Simple Order Form
The first thing you need is a basic order form that you can easily create by going to WPForms>Add New.
You will see a setup screen on the next page, where you need to enter the name of your order form and select the template or start from scratch.
Selecting a pre-built template can make your work easy, as it comes with the basic fields added already. You just need to add few other important things if you want and customize your form.
Select the Billing/Order Form from the pre-built templates section at the bottom.
Now you have a basic order form created, next you need to add other fields as per your requirements.
On the left side, you can see all the available fields which you can add to your form.
Now you need to modify the available items field in your order form, this field came with the pre-built order form template. You can modify your available items field and add all the items available to order.
WPForms also allows you to add images for available items, you can enable this by ticking the Use image choices as shown in the image below.
When you enable this option, you’ll be able to upload the images for you available items list.
Your order form is complete when you are done with adding all the necessary fields as per your needs in your form. The most important thing is, adding the payment gateway to accept the payment from the customers.
We’ll cover that in 4th step…
Step: 2 Form’s Notification Settings
There are three types of settings, General, Notifications and Confirmations.
We are going to take the look at the Notifications and Confirmations settings which are important for a order form.
However, you can take a look at the General settings which contains just basic options.
You can navigate to Notifications settings by clicking to Settings at the left side and then Notifications.
In the notifications settings, you can enable or disable the notifications when someone submits an order form. You can change the email address where you want to receive the notifications, change the email subject to be more specific and some other options related to the notification.
You can also send the email to customers who filled your order form, this will notify them that their submission was successful.
To send the email notification to customers, you need to use the Smart Tags of WPForms.
There is a {all_fields}
tag that you can use when you want to include all the information filled on your order form in email.
Step: 3 Form’s Confirmations Settings
Now it’s time to configure the confirmations settings…
You can navigate to Confirmations setting by clicking on Settings and then Confirmations.
There are three types of confirmations you can use:
- Message: This is set by default by WPForms. If visitors submit your form, a confirmation message will be shown to them. You can customize the message by going to Settings>Confirmations.
- Show Page: You can send visitors who submitted your multi-page form to any page in your site.
- Go To A URL (Redirect): If your confirmation page is hosted anywhere else, not on your site. You can use this confirmation type to redirect form submitter to an outside URL.
Now select the confirmation type you want to use for your order form… I am going to select the Message type confirmation and customize the message I want to show users when they submit order form.
Once the customization of message is done, click on Save button to save the changes you made.
Now the most important part of this tutorial, configuring the payment settings of your Order form.
Step: 4 Accept Payment Using Order Form
Adding a payment option will make your order form complete and ready to be placed on your site to accept the orders from your customers.
You can choose your favorite payment provider for your Order form, WPForms integrates with PayPal, Authorize.net and Stripe payment processors for accepting payment.
I am going to use the PayPal for this tutorial, if you want to go with the Stripe then this would be helpful for you.
Now go to the Payments option, you can easily find it on the left side, after the settings.
You will see the PayPal Standard and Stripe(if you have installed Stripe addon). Click on PayPal Standard.
You’ll see some settings related to PayPal payments, you need to enable the PayPal Standard payments to make it work with your order form, enter your PayPal email address where you want to receive payments.
In the Mode, make sure to select the Production from the dropdown, choose the Products and Services in Payment Type, and do other settings as per your need.
You can also add the cancel page URL if you want to redirect the users on any specific page when the payment gets cancelled due to any reason.
Now your order form is completely ready to be placed on your website and you can start accepting orders.
Step: 5 Place Order Form On Your Website
You can add your form wherever you want, be it on posts, pages, or sidebar. There are two methods you can use to place your order form on your website.
- Using Shortcode
- Using WPForms Block for Gutenberg
First, you need to click on the Embed button at the right-top corner and copy the shortcode for your order form.
Now paste the code where you want to add your order form.
Let’s take the look at the second method which is using WPForms Block for Gutenberg.
You can either create a new dedicated page for your order form or add it to existing post or page.
Click on the Add Forms WPForms widget if you are seeing it at the top, otherwise, you can click on + icon and search WPForms.
Now select the form you want to show there from the dropdown.
That’s It! You have successfully added your order form on your website.
I hope you found this tutorial useful if you did then must share it with others.