5 Simple Steps to Create An Online Order form in WordPress

Do you want to create an online order form on your WordPress website to collect payment?

Anyone running an online business knows how crucial it is to offer your website visitors/potential customers a seamless checkout experience.

Importance of an online order form in WordPress:

An online order form is a facility that you can provide your customers to collect payment of their orders hassle-free.

1. It helps in collecting orders from your customers.

2. Helps your customers to know the price details.

3. To clarify the goods/services needed.

4. To collect customer contact details.

5. Helps in making the process of ordering convenient for customers.

In this article, we’ll show you how you can create and order form in WordPress in just a few simple steps


So let’s begin!

STEP 1: Install and Activate the Necessary Plugins

For this tutorial, we will install WPForms. What is WPForms?

WPForms is a WordPress plugin that helps you create beginner-friendly WordPress forms in minutes with a drag & drop form builder. The forms you create with WPForms are easy to embed and mobile-friendly.

With WPForms you can create:

  1. Contact form
  2. Payment form
  3. Email subscription form
  4. Registration form

Other features of WPForms include:

  1. Multi-page forms
  2. Payment gateway integration
  3. Spam Protection
  4. Smart conditional logic
  5. Instant notifications
  6. Email marketing software integration

To install WPForms plugin installed on our WordPress website follow the steps given below –

1. Go to your WordPress Dashboard and click on Plugin and then click on Add New.

2. Type WPForms in the search box.

3. Click Install and then Activate.

install wpforms

4. Once you have a license key head over to WordPress dashboard and then WPForms > Settings.

3. Now enter the License key to get started.

wpforms license key

STEP 2: Create a New Form 

1. On your WordPress dashboard click on WPForms and then on Add New.

2. Choose the Billing/Order form template. WPForms lets you add custom fields on your contact form with a simple drag and drop.

billing/order form wordpress

3. Now customize the form fields accordingly so the customer will know what items are available to order.

4. Click on “Available items” on the right side of the template. This will open up the “field option” in the left panel. You can now change the name of the fields, add or remove order items, and change the prices.

order form wordpress

5. Click on “Image choices” to let your customers, images to choose from when filling out your online order form in wordpress. You will be able to add images of your product when you select this option.

order form wordpress

6. To add any other additional fields to your form just drag and drop the field of your choice from the left-hand side to the right-hand side.

STEP 3: Configure Your Form Settings

Configuring your online order form in wordpress settings is an essential step before we add them on your website.

To configure settings – Click on settings on the left

Now you have general settings, confirmation settings, and notification settings where you can adjust settings as you wish.

1. On General settings, you can change the name of the form, the description, and you can also edit the submit button. Spam protection can also be enabled from here.

2. A confirmation message is a message which is shown to the user who has submitted the form. You can change the conformation message settings and show either a message or redirect the user to another page.

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.

confirmation settings order form wordpress

3. A notification will be sent to you whenever someone has submitted a form on your website. You can change the notification settings here.

notification settings

To include the email address of the person that filled out the online order form in wordpress, select Show Smart Tags in the Send to the Email Address field.

Form-Notification-Smart-Tags

Now, Click on Email to send a notification to the email address that was entered on the order form submission.

Form-Notification-Smart-Tags-Email

STEP 4: Configure the Payment Settings

To complete to entre process of creating online order form in WordPress creation we’ll have to configure our payment settings

WPForms integrates with PayPal, Authorize.Net, and Stripe payment processors for accepting payments. 

To configure these payment gateways we’ll have to install and integrate the right payment addon.

For this example, we will configure stripe with our online order form in wordpress.

Note: To enable Stripe add-on on your WPForms plugin you need a WPForms Pro license which you can get at the best possible price here.

1. Click on WPForms > Addons

2. Select the Stripe add-on by clicking on Install Add-on button

Stripe addon

3. The status will show Active after you’ve installed the add-on. Now you are ready to use the WPForms Stripe add-on on your WordPress website.

4. In the form settings on the left-sidebar click on the payment.

5. Click on Stripe to initiate the configuration.

stripe payment for order form wordpress

6. Next, go to the Stripe settings panel and check the box that says- Enable Stripe payments

enable stripe payments

7. Click Save and you’re all set.

7. Click Save and you’re all set.

STEP 5: Add Your Simple Order Form to Your Site

With the help of the WPForms plugin, you can publish your form anywhere on your website.

You can publish it as a post, on pages, sidebar widgets, or footer widget.

Commonly it is embedded on the order page. To do that you must already have an order page on your website or you must create a new order page.

1. On the page click inside the first and click on the Add WPForms icon.

wpforms order form wordpress

2. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select your order form.

select-your-order-form-wordpress

3. In the end, click on the blue button in the top right that says Publish.

publish-your-order-form-on-wordpress

That’s it! You have successfully created and posted an online order form on your WordPress website.

Divyanshu Chaturvedi

Founder and CEO of MarkBuzz Media, Divyanshu Chaturvedi is an entrepreneur, digital marketer and blogger based in India. Although his company was founded in 2018, his marketing roots go back to 2014. He started learning and practising digital marketing because, he enjoys turning complex problems into simple, beautiful and intuitive solutions. In this blog, Divyanshu Chaturvedi will share his experiences on strategies of digital marketing and tips to get most out of a marketing campaign. Also how to properly get started with a blog.