Do you want to add a simple order form to your WordPress website and looking for an easy solution? In this artcile we will tell you how you can add an order form to your WordPress website without doing coding or hiring a developer to do so.
In case you are collecting orders on your WordPress website then an order form is a must for your website. You can accept payments via an order form for whatever digital or physical products you are selling through your WordPress website. You can also make use of order form in case you are accepting online donations on your WordPress website
You can also accept credit card payments, Paypal payments, Stripe payments or Authorize.net payments by making use of order form to accept online payments.
In order to create an order form we are going to make use of a WordPress plugin called WPForms which is one of the finest form builder plugins for WordPress. WPForms makes life easier as they offer tons of features which you can make use of, for creating different types of forms. For the sake of this tutorial we are going to create an order form using WPForms
The readymade templates offered by WPForms makes it super easy even for a beginner to create amazing forms. Also, you don’t need to start building forms from scratch, the readymade templates will make your life easier by saving your time and efforts.
Let’s get started with the step by step process on how to create an order form in WordPress by making use of WPForms
Assuming that you have already got the WPForms Pro license let’s proceed to the next steps. In case you still haven’t got the Pro license click on the below button
Now without any further ado let’s proceed to the next steps and create an order form in WordPress
In order to create an order form in WordPress we will first have to Install and activate the WPForms plugin which is the best form builder plugin for WordPress
How to Create an Order Form in WordPress Without coding
- How to Create an Order Form in WordPress Without coding
- Step 1: Install the WPForms Plugin
- Step 2: Create an order form Using WPForms template
- Step 3: Customize the Order Form
- Step 4; Customize the Form Notifications
- Step 5: Configure the Form Confirmations
- Step 6: Setup the Payment settings
- Step 7: Adding the Newly Created Form to Your WordPress website
Before we even create forms we need to install the WPForms plugin. Follow the below given steps in order to install the WPForms plugin
Step 1: Install the WPForms Plugin
In order to install the WPForms plugin follow the below given steps
Navigate to your WordPress dashboard
Go to the Plugins section –> Add New
Once you click on Add New you will come across a screen. In the search box type “WPForms” and then you will come across a screen similar to this one.
Now click on “Install Now” and then Activate the Plugin
Once you are done with the activation you will be asked for the License Key
Where to find the WPForms License Key
Navigate to your WordPress Dashboard and then go to the WPForms section –> Settings
Once you click on Settings you will get a window on the right hand side. Keep on scrolling down until you find the License Key section. You will come across a screen that’s similar to the one shown below
In case you have purchased the WPForms Pro plan then you can find the license key in the account which you used to purchase WPForms subscription
Now that we are done with the Installation and activation of the plugin let’s go to the next step and create our order form
Step 2: Create an order form Using WPForms template
The order form template isn’t available in the free version of WPForms and that is the reason why it is important that you make sure that you have the WPForms Pro license before we proceed further.
WPForms has several inbuilt templates which you can make use of while creating forms but for the sake of this tutorial we are going to make use of the inbuilt billing/order form template.
Follow the below given steps to create a new donation form.
Navigate to your WordPress dashboard –> Go to WPForms –> Add New
When you click on Add new you will come across several WPForms templates choose Billing/order form template from the list (available only to users with Pro license).
Once you click on “Add New” you will come across a list of all the templates provided by WPForms. Keep scrolling until you find the “Billing Order Form” (shown in the below screenshot).
Now when you mouseover on the “Billing/Order Form” you will see an orange Button “Create a Billing / Order Form” click on it in order to create a Billing form (refer to the screenshot below)
The Billing/ Order form template comes with several fields which one might need in their order form. Moreover you can make use of the drag and drop builder provided by WPforms to build amazing custom forms
Remember if you don’t have the WPForms Pro License you won’t see this Billing / Order Form enabled. If you still haven’t purchased the Pro license get it by clicking on the below button
Once you have selected the Billing/order form template you will get a pre-populated form with default fields (something similar to the screenshot shown below)
WPForms provides a form builder interface and several elements which you can add to your order form by making use of their drag and drop functionality. You can rearrange the order of the form fields depending on your requirement
Step 3: Customize the Order Form
Now you need to decide which fields you want to include in your order form.
When it comes to accepting payment you can have specific fields included like adding multiple items as well as the total field so that the user get an idea of what is the total amount that they have to pay.
When we say Items field it basically means (single item, multiple items or you can have checkboxes or dropdown options) so that the user can choose the ones which they require.
In order to add multiple items go to the “Field options“, there you will find the label “Available items” (this is something you can change depending on the items you provide
Once you click on the available items option you will see the editing options on the right hand side.
You can rename these items which are currently named First item, second item etc. You can also change the price associated with these items. you can add more items or delete as per your requirement.
You can also make use of the image choices, all that you need is to check the checkbox besides the “Use Image choices” (you can refer to the above screenshot)
When you enable the “Use Image choices” then your users will be able to see the images of the products you are selling. In case you want to check out on how to make use of this Image choices feature you can check out this detailed tutorial
Step 4; Customize the Form Notifications
Now there are two aspects to the Form Notifications that you should be aware of
1. Once the user submits a form you should get some kind of notification that the user has submitted the form – You will get an Email notification whenever someone submits a form on your website. This is a good practice that should be followed so that you will be updated on any potential leads you get in you are working in the B2B business.
You will have to setup the Form notifications and provide your Email address
2. Once the user has submitted the form they should get a notification that their form has been submitted successfully.
YOu can make use of the Smart tags feature in order to send personalized email notifications to your site visitors.
Step 5: Configure the Form Confirmations
Form confirmations are a set of actions that should happen immediately and automatically once the user fills out a form. There are 3 kinds of form confirmations WPForms provides which we have enlisted below
1. Redirect – Once the user has submitted the form on your site you can redirect them to any page of your choice by utilizing the Redirect. You can take the user to any entirely different site altogether if you want.
2. Display Page – Once the user submits the form you can automatically redirect them to a display page something similar to a Thank you Page.
3. Message – This is the default message that a user gets when they submit the form on your website. You can even customize this message as per your needs.
Below we have shown an example of how you can send confirmation message to your user once they have filled out the form.
In order to create a confirmation message click on the “Confirmations Tab”
You can customize the confirmation message as per your requirement. If you want, you can redirect the user to a Thank you page and display a message by making use of the Go to URL (Redirect) option.
Step 6: Setup the Payment settings
Once you are done with all the steps it is time to setup and configure the payment settings for your form and integrate it with a payment gateway.
WPForms offers payment gateway integration for 3 types of payment processors namely Paypal, Stripe, Authorize.net. You can use one of these to accept payments using your online order form. The biggest advantage of offering multiple payment options is that you reduce the abandonment rate.
Let’s understand this with an example.
Let’s assume someone came to your order form and was about to do the payment but they don’t have Paypal account and Paypal is the only payment option you provide. In such cases there are high chances that the user will abandon the form and go away.
Similar is the case if you offer only Stripe as the payment option, if there are users who come to your form and have a Paypal account but you offer Stripe as the only payment option so your users will abandon the form if they don’t have Stripe account.
You can refer to the following articles on how to Accept Paypal and Stripe payments on your WordPress forms
If you want you can allow your customers to choose the payment option they want. You can refer to this article to know how to get this done.
Once you are done with the Payment configuration we will go ahead and add the Order form to the WordPress website
Step 7: Adding the Newly Created Form to Your WordPress website
Add a New Page to your WordPress website
Navigate to your WordPress dashboard –> Pages –> Add New
Once you click on Add New a new blank page will appear, now give a suitable name to your page something like Contract or Service Agreement
If you are using a Block editor then click on the + sign (Refer to the screenshot shown below)
Now in the search box search for “WPforms” you will immediately see the WPForms element pop-up (Refer to the below screenshot)
Once you click on WPForms as shown in the above screenshot, you will be presented with a Drop down option (as shown below). Choose the appropriate page which you have created from the Drop down section
In your case it would your Order Form which you created in the above steps (choose that one from the drop down).
Once you have chosen the appropriate page then click on Publish in order to make the page live on your website.
So what are you waiting for? Get ready to create an order form on your WordPress websites and accept orders right on your WordPress website using WPForms Pro plan
We hope you enjoyed this step by step tutorial on how to create an order form and add it to your WordPress website to accept order.