Are you looking to create an order form for your blogging or another eCommerce website? So, you can create an order form in just minutes to accept payment from your customers.
Order forms are not only required for the eCommerce website but are also needed for a blogger to sell their paid service. For example, a blogger can use it to sell their ebook.
In this article, we’ll show you how to create an order form with online payment and without payment.
What’s an Order Form
According to BlogSurf, the order form is a type of form that used to request goods from a wholesaler, manufacturer, or retailer. Generally, it is more useful for those who buy the product in more quantity.
However, you can easily use it for a single product on your website. With the help of a well designed online order form template, you can complete the process of ordering products from the online store in a simple way.
These forms have three main sections, in which different information can be taken from the buyer in this section:
- Customer details: You will be able to ask customer details under this section such as name, email, mobile etc. Furthermore, if you need to know the address of customer, you can also include it here.
- Order details: Here, you get purchase details from your customers. For example, customers are shopping for clothes, so they will give information about color, size and quantity here.
- Shipping details: This section of the form allows customers to choose where and when to deliver the product. Here, customers fill in their full address where they want to get the product, however it can also be changed on each order.
Obviously, you must have understood this form. So let’s start making order form:
Creating Online Billing Form in WordPress
Firstly, you’ll need to choose WPForms as the right WordPress form plugin. Because it allows you to do this easily with their drag and drop interface.
WPForms are the best WordPress form builder plugin in the market. More than 70% WordPress websites use WPForms to easily create any type of online form.
Next, you’ll need to install and activate the WPForms plugin. Do you need help installing a plugin? So see our guide on How to Install WordPress Plugin.
After activation the plugin, you’ll visit to WPForms » Add New page to create your from. Now, it will take you to the template page, here enter the name of your form and click Billing/Order Form from the available template.
In the form editor, you’ll able to customize what items are available for customers to order.
By default template already includes fields for most of the information you are likely to need, such as name, address, phone number etc. However you’ll need to list your actual products.
To do this, scroll down to the right side to access the Available Items on the preview screen then click on it.
After clicking on it, this will open fields option in left panel. Now type the name and price for each item that your customers can order from you.
If you want to show an image for your product, then tick on the Use Image Choices checkbox below available items in left panel.
For each item, you click the Upload Image button to add image from your computer or WordPress media library.
Keep in mind that the image uploaded in the wpforms can not resized and compressed. Therefore you should upload the image at the correct size and no more than 250×250 pixels.
Next you can edit the Comment and Message field at the bottom of the form so that it isn’t required. Because not all users like to add a message.
Now click on this field and uncheck the Required box in the left panel to make it optional.
Once you’re done, click Save button at the top of the screen.
Configure Notification for these Form
After designing your order form, you’ll need to make some important settings of the notification.
To notification setting, click on Setting tab in left hand panel of the screen. Now, click the Notification tab to change your form’s email notification.
So let’s add new email notifications, however you can also edit the pre-existing notifications.
To set up a new email notification, click on Add New Notification button.
Now you’ll be prompted to type a name for the new notification. You can name anything as it will not be shown to customers. We suggest something like ‘Customer Receipt’ or ‘Customer Email Confirmation’.
To send this notification to the customers that filled out the order form, click on Show Smart Tags next to the Send To Email Address field. And click on email.
Next, you can change your notification’s email subject line. In additional, you can also customize email From Name, From Email. So that your customer can know what email notifications they receive are about.
You can also customize the notification message. furthermore, you can use smart tag, The {all_fields} tag will give all the information the customer entered on the form.
Once you’ve finished setting up the notifications. Click on Save button.
Setting the Confirmation Message for Order Form
Now, you will set up to send a confirmation message to your customers. Which they will be able to see after submitting their order.
To do this, go to the Setting » Confirmation tab.
By default you will get written in the message box “Thanks for contacting us! We will be in touch with you shortly”. However, you can also customize it.
In additional, you can select other options in Confirmation Type:
- Show page: Redirect to another page on your website such as “Thank You” page.
- Go to URL: You can redirect your customers to another website.
Once you’ve set up the confirmation message, click on Save button.
Integration Payment with Order Form
To accept payment through your order form, you’ll need to integrate with the payment processor.
We know that WPForms allows to integrate easily with the most popular payment processors as PayPal or Stripe. See more details on how to integrate stripe with WPforms to accept online payment.
Next, click on the Payments tab and then go to the Stripe tab from the left panel. After that, check the box labeled Enable Stripe Payments from the right side screen.
Now you will be able to provide short Payment Description for payment, which the user can see in their credit card statement.
Finally, you can choose the email field under Stripe Payment Receipt option.
Adding Billing Form to Your Website
After completing the process of building the order form, you need to add it on your website. In this article we will see the correct procedure to put on a WordPress post/page.
Just select the page on which you want to add your form. Go to Pages » New Page to began.
Next, click on the (+) icon to add new block and find WPForms block. You can find it in the widget section under block. However, to get it easily, you can also type in the search WPForms in the search bar.
The WPForms widget will appear inside the your block, click on the WPForms dropdown and select your order form.
Now, make the post live by clicking on the Publish button on the top of the screen. Then your form will appear on your website.
Furthermore, you can also place your Order/Billing form on the sidebar. To add simple order form in your WordPress sidebar, go to Appearance » Widgets.
Add WPForms as widget in sidebar, and select Billing/Order Form from wpforms dropdown menu.
Click Save to publish form on your website.
I hope this article helps you to add order form to your WordPress website. You can also check our most success guide how to accept credit card payment.
If you liked this article, then please give your feedback through comment. You can also find us on Facebook and Twitter.
