How to Make a Product Order Web Form in WordPress

Say you want to create an online form to sell a product or a service. You want the form to have some or all of the following:

1. Display several different products
2. Have a different description, price, and image for each product
3. Have a quantity field for each product
4. Offer several shipping methods
5. Display the total amount the customer will be charged

All of that is easily doable with Gravity Forms. Before I show you how to build the form, let’s take a look at how the final form will come out.

Demo of the Product Order Form

The submit button on this demo form is disabled.

But you maybe wondering what happens when the user presses submit on an actual order form. I provide more details on order form processing below.

Building the Order Form

The first step is to install and activate Gravity Forms. Next, in WordPress admin, go to:

Forms → New Form

Make the General Form Settings

First, you’ll wanna adjust the general form settings. You do that by clicking on “Form Settings” at the top.

Give your form a title and a description.

If you want your product descriptions to appear above the price and quantity fields, select “Above inputs” for “Description Placement”.

Then go to the “Advanced” tab and configure the form submit button, its label, and whether it’s a standard button or an image. And adjust the rest of the settings as you see fit. Every field in Gravity Forms has a little clickable question mark icon next to it that explains what the field does.

Adding Products

The next step is adding the products. We’ll use Gravity Forms Pricing Fields for that. In the demo, I added three products. You can add any number of products you’d like.

When you’ve added a product to your form editor, you’ll be able to set the product’s type and properties. You can have a single product (per field) as in the demo above or you could select a drop down list or radio buttons to allow the user to select products in different ways.

Notice that you can use HTML in the product description. That’s how I inserted images into my products.

Shipping Costs

Gravity Forms has a field dedicated to making the shipping of an order form. Using this field is easy. Just add it to your form and then specify the shipping options that you offer.

Displaying the Order Total

Another interesting field that’s available to you in Gravity Forms is order total under “Pricing Fields”. This field displays the order total to your users.

Order Form Processing

Now you maybe wondering what happens when a user submits an order. That’s up to you, and you have two options:

1. Process the form manually, offline
2. Redirect the user to PayPal to pay

Let’s talk about each one in a bit more detail.

Process the form manually

Gravity Forms can notify you of form submissions by email and it stores form entries in your WordPress database. Once you’re notified of a new order, you can send an invoice to the buyer with instructions on how to make the payment.

You can even have an automatic email sent with payment instructions to the buyer. Email notification settings can be accessed in the “Notifications” tab at the top when you’re making the form.

Automatic payment processing with PayPal

Gravity Forms can also redirect the buyer to PayPal where they will be asked to make a payment equal to the total amount of their order. If you believe that your visitors trust you enough to make a payment in this manner, this might be a faster and more practical option.

I provide more details on using Gravity Forms with PayPal in the donation form creation article.

Putting the Form Live

To put the form on a WordPress page or a post, you just need to put its shortcode in your content. Something that looks like this:

[gravityform id="3" name="Handmade Jewelry" ajax="true"]

Of course, if you don’t know what your shortcode looks like exactly, you can use Gravity Forms form insertion button on the WordPress post editor and it’ll take care of everything for you.

Alternatively, you could place the form in your sidebar by using the Form widget, which is another feature of Gravity Forms.

Further Customization

This was a brief tutorial on making payment forms with WordPress and Gravity Forms. There is much more that can be accomplished that I did not cover here.

For example, you can include fields to collect personal information about your buyer, such as their name, phone number, email address, etc. And when your form grows too large, you could split it across multiple pages to enhance your conversion. If you’re interested in how to do that, check out my other article on creating an advanced contact form.

If you have any questions or suggestions, let’s discuss them in the comments!

• Tweet
• Share