Create a Simple Order Form in WordPress in Under 5 Minutes

July 3, 2014

Anyone running an online business will know the importance of offering visitors (read: potential customers) a seamless checkout experience. Aside from your sales copy, it’s the single most important means of generating direct revenue for your online business.

Out of the box, WordPress doesn’t give you the option to create forms, this will require the installation of a plugin.

In this tutorial, we will be creating a simple order form in WordPress using the Gravity Forms plugin which is commercially available for around $39 for an individual license and up to $199 for a developer license.

However, in the interest of impartiality, I’d like to point out there are several other free and almost free solutions available which all have their advantages and disadvantages compared to Gravity Forms. Some of these include:

Ninja Forms is one of the main competitors to Gravity Forms and is free for the base version. However, if you want additional functionality, such as PayPal checkout and MailChimp/AWeber options, you could be paying around $199 for the add-ons.
WordPress Form Manger is another popular, and completely free option. However, it has very limited functionality compared to the paid versions and is suitable for those looking to implement the simplest forms.
Form Maker has a free version which limits you to only five fields in your form. To have full functionality, including a PayPal option, you’ll have to buy a licence. It’s still one of the cheaper commercial form plugins available for WordPress, but it doesn’t have near the same amount of developer options as Ninja Forms or Gravity Forms.
Formidable is another premium form plugin, it offers many of the features of the other form plugins.
Contact Form 7 is one of the most popular of the true free form plugins, with a nice range of extensions.
Wufoo Shortcode Integration is a good option for users of the Wufoo form builder web application.

Whatever option you choose will depend on the specific product or service you’re selling on your website and the types of fields you need for your customers. For my purposes, I needed a form for a content writing business I’ve been developing, called WordsExpress. The business sells ready-made articles for internet marketers. This requires a user to input fields relating to length of article, number of articles, subject and various keyword and URL options.

You can see the finished form below:

Now you know what we’ll be creating, let’s get started.

Once you’ve installed the Gravity Forms plugin, in your WordPress Dashboard in the left menu, you’ll see a new selection available called ‘Forms’.

Inside the Forms menu, click ‘Add New’. In the box that pops up, write a title for your form, in this case ‘Content Order Form’. You do not need to enter a description, but if you do, it will appear as text under the title when you publish the form.

Once you’ve created the form, you can start building it field by field. Below is the version used on my site.

The first field we need is the name field. You can create this simply by selecting the ‘Single Line Text’ from the ‘Standard Fields’ options on the right hand side. However, Gravity Forms has an ‘Advanced Fields’ option called ‘Name’ which creates a nifty name field with space for both the first and last name.

When selected, this should insert the ‘Name’ field at the top of the form. We want to make this a required field, so click on the small down arrow in the top right hand corner of this newly added field.

Leave the ‘Field Label’ as ‘Name’ and at the bottom, check ‘Required’ to make this a required option for visitors to complete. You have a similar option for ‘Email’, via the ‘Advanced Fields’ menu, which will automatically insert an email field. The email field, like the others, has an edit menu which we’ll use to add a ‘Confirm Email’ option. Once you’ve inserted the email field, click on the small down arrow in the top right hand corner of this newly added field.

In the email edit box, we only need to check the ‘Enable Email Confirmation’ option and the ‘Required’ option.

Now we want to begin creating the options for customers to choose and customise the product they want to buy from the site. For my site, an article writing business, this means choosing the length of the article and the number of articles. Gravity Forms has specific options for creating product selections which allows you to calculate the values between two or more fields and display the total cost to the user.

In the right hand side, select the ‘Pricing Fields’ menu and click ‘Product’.

This will create the default product field for the form which we want to edit.

We need to make this specific to the content writing business which has options to produce 500 word articles and 300 word articles. For that reason, we’ll name the field ‘Words per article’ to make it clear to the user, and we’ll also choose ‘Drop Down’; from the field type options available, since there are two product variations for users to choose from. There are also other standard form components should they be more suitable for your project.

Once you select ‘Drop Down’ you can choose a name for the two product options – in this case, 500 words and 300 words – and select a price for both options. We’ll also check the left circle on the 500 words option to make this the default value. Finally, we’ll check the ‘Required’ option to make it a required field.

The next field we need is for the quantity of articles. This is easily done by selecting ‘Quantity’ in the ‘Pricing Fields’ menu, allowing us to use this as a multiplier for the products option above and producing a total. Name this field ‘Number of articles’ and make it required.

Finally, we need the customer to input details of their order, regarding the subject of the articles they require as well as any URL and anchor text options they want to include. This process should be simple. The first ‘Order details’ field is created using the ‘Paragraph Text’ field option in the ‘Standard Fields’ menu on the right.

Name this field ‘Order details’ and make it required. This particular field will require some explanation to the user, as the title is a little ambiguous. For this, we’ll fill in the ‘Description’ box for this paragraph text field we just created. Describe exactly what you would like the user to enter here.

The final two options will allow the user to enter up to two URLs to include in their articles. The ‘Advanced’ field menu allows us to select the ‘Website’ option which neatly constricts the user to entering a web address, and automatically adds the ‘http://’ prefix. We’ll create two of these and name them ‘URL 1’ and ‘URL 2’ and add a description. We don’t need to make this required.

Next, we’ll give the user the option to add up to two anchor texts. We want to be flexible with this, allowing the user to add and subtract their anchor texts at will. For this we’ll use the ‘List’ option in the ‘Advanced Fields’ menu.

Call this field ‘Anchor text’ and choose ‘2’ as the number of rows (to correspond to the two URL options), and write this information in the ‘Description’ box. Again, leave the ‘Required’ option unchecked as this should be optional.

Finally, you want to be able to calculate the total cost of their order and present this to the user. This is easily done in Gravity Forms in the ‘Pricing Fields’ menu by selecting ‘Total’.

This should automatically insert the total of the order, calculated by multiplying the product selection and quantity, which will be displayed at the bottom of the form. Once this is done, select the ‘Update Form’ button on the right of the page, which should automatically save the form.

Now, it’s a simple case of inserting the form on a page or post. You can do this by inserting a shortcode for the form where appropriate in the ‘Text’ view. It should look something like this:

[gravityform id="3" name="Content Order Form" ajax="true"]

However, if this is too complicated for you, there is another way to insert your form. Simply go to your page or post, put your cursor into the description box where you would like your form to appear and click the ‘Add Form’ button which is next to ‘Add Media’ just below your page or post title.

And that’s it. This was a very simple tutorial on creating a basic order form using Gravity Forms, which will email the user’s submission to whatever email is specified in the ‘admin’ login of your WordPress settings.

You can, of course, change this in the form’s options area. There are many other customisations that can be done with this plugin such as creating multipage forms, adding a PayPal checkout option, and collecting more user data if you so wish. I’ll leave that up to you to explore.