Place Your Order – Gravity Forms [Demo]

Bianca Welds Application, Plugins 0 Comments

When I started I promised to take a look at various interesting things that can be done with WordPress. Now, WordPress on its own is a nice solid platform. Originally built for blogging, it has matured considerably into a well-featured content management system. However, the real power of WordPress comes from its extensibility through plugins.

Plugins are basically bundles of functionality that you can add to your WordPress site. There are plugins for all sorts of purposes, including administration, styling and enhancements, but I plan to focus more on the plugins that add functionality to your content, allowing you to do just about anything. With WordPress “there’s a plugin for that.” And where there isn’t, then one can be built (but that is a whole other kettle of fish).

This post came out a bit longer than I intended, so I’m adding links to the different sections if you’d prefer to skip ahead. If you want to jump straight to the actual demo site, then check out Pie Oh Pie.

  1. Gravity Forms Overview
  2. Basic Commerce Features
  3. Building the Order Form Demo

Gravity Forms Overview

Today’s featured plugin is Gravity Forms. If you have nosed around the WordPress universe at all, then you have probably encountered this plugin. Gravity Forms is probably one of the best known, and most downloaded form plugins, and this considering it is a premium plugin. While there are many free plugins for WordPress, including form plugins that compete with Gravity Forms, it is well worth it for many purposes.

At its most basic, Gravity Forms allows you to build custom forms for your website. It has a variety of field types, like standard text boxes, radio buttons, dropdowns and checkboxes. But it also includes some more advanced field types that save you time especially when they come with built in formatting and validation. This includes fields for names, email addresses, websites and phone numbers.

Combining these fields with Gravity Forms’ drag-and-drop form builder and email notifications can provide you with solid form functionality, added to any page via an easy to use button in the WordPress editor. A simple contact form can be created in minutes.

To get access to all the advanced functionality, you would need to purchase the Developer edition ($199). If you just want to connect your forms to your mailing lists, then you may need the Business version ($99). But for the basic functionality, including forms like the one I will be demoing, the personal version ($39) will be just fine.

gf-pricing

[Back to top]

Basic commerce features

Gravity Forms has several add-ons available (basically plugins for the plugin) including some very advanced functionality, such as full e-commerce integration. But the standard Gravity Forms also includes some basic commerce features allowing you to create fields on your form that handling pricing for goods and services.

When you are in the form editor, over on the right hand side, at the bottom of the list of fields, you will see a section labelled ‘Pricing fields’ which contains five field types, which are relatively self-descriptive, but I’m going to break it down anyway.

gf-pricing-fields

Product Field

gf-product-field

This is the head of the commerce family. After all, this is the item you are selling. While it is called Product, it could be a service instead. The basic information you need here is a name (Field Label) and the type of product (Field Type). There six different product types:

  • Single Product – Basic product with a price for you to set, and a quantity field for the user to enter on the form. The quantity can be disabled and a separate Quantity field added to the form. This is the type I used for this demo. gf-product-options
  • Dropdown/Radio Buttons – These two options allow you to provide multiple options for the user to choose from via a dropdown on your form. Each product option has it’s own price field, but the quantity would need to be a separate field. So if you had variants like sizes of a shirt with different costs, this could come in handy.
  • User defined price – This allows the user to enter the price they want to pay in the field on the form. This could be useful for -set-your-own-price deals, or donations.
  • Hidden – As it says, if this is selected, then the product is hidden on the form. You would still set a price, but it wouldn’t display to the user. This could be useful for
  • Calculation – The calculation field allows you to really work some magic by entering a formula. The formula can include values from other form fields (N.B. form must be saved before Calculation field can pick up the other fields). So for example, you could use this field to provide a subtotal before tax or shipping costs get added.

Option

This allows you to set up options for your products. Each option field you add to your form can be mapped to a specific product. You can add options that have no effect on the price of your product, like colours, or options that will affect your price, like add-ons such as gift wrapping.

gf-option-field

The Option field can be displayed as either a dropdown or radio buttons, which allow the user to select only one of the options presented, or as a set of checkboxes which will allow the user to select multiple options. If prices are set for the options, then they will be summed into the total, and can be added into a Calculation formula.

Quantity

If you are not using the Single Product type, and want to allow user to enter/select a quantity, then you will need to add separate Quantity field(s) to your form. Each Quantity field can be linked to one specific product.

gf-quantity-field

You can also set the Field Type to determine the way the quantity can be entered. Selecting number will allow the customer to type in a number, or click the arrows to modify the number. A dropdown would allow you to set the possible quantities that can be ordered, for example if you want to limit the number they can purchase or use specific multiples (e.g. of 5). You can additionally set a range within which the quantity must fall.

Shipping

This field allows you to set a flat shipping cost (Single Method), which you could even set to $0.00 to show your customers the wonderful free shipping you offer, or you can set up shipping options with a dropdown/radio buttons.

gf-shipping-field

The shipping prices here will not be linked to quantities of products, but you could achieve that using a calculation field as described before.

Total

This field automatically totals any pricing amounts on your form, taking into account associated quantities. If you have included calculated fields that include prices in formula these will be included as well, so if that wasn’t your goal, then use a separate calculated field for the total.

gf-total-field

There are paid add-ons to deal with taking payment using PayPal, for example, an I will take a look at more complicated ecommerce setups in the future. But for today’s demo, we will be looking at a basic order form.

[Back to top]

Building the Order Form Demo

For my order form, I just wanted to take basic customer contact information, find out how many of each kind of pie they want (displaying the total at the bottom) and get the date for which they need their pie(s). The final form looks like this:

gf-order-form

Notice that as I update the quantities, my total updates:

gf-order-total

The setup for this is pretty simple, as we covered the product and total fields above. First we use Gravity Forms “advanced” fields for the name, email address and telephone number, setting the name and email address to required to ensure we have at least those details.

gf-advanced-fields

The setup for the pies is as simple as it gets. I have not included any variations, such as different sizes for the pies. So I set up four simple products with a price, and added a total field below them. The last thing on my form is a standard date field.

gf-order-details

I want to say “Voila!” because it is actually that easy. The order submissions from this form can be emailed and actually are very nicely formatted.

gf-order-email

Feel free to submit an order on the demo site, because the details will be sent back to you.

This is the point where I thank you for reading this far if you did. You can check out the complete demo site at http://demo.lattitudestudios.com/pie-oh-pie/

[Back to top]

 

Shares

Leave a Reply

Your email address will not be published. Required fields are marked *