We’ve written tens of thousands of words on selecting an eCommerce plugin for WordPress, and we’ve also continued to update our reviews as new versions are released. However, there’s another option for WordPress eCommerce that we haven’t yet discussed, and you probably already have the tools for.
You probably use (or have heard of) Gravity Forms. While it’s gained popularity as a form builder, Gravity Forms can actually be used as a standalone eCommerce solution for stores that only sell a limited number of products, and can even be used for donations (or other user-defined pricing). If you don’t need advanced order management or inventory tracking, Gravity Forms can provide an easy solution for creating purchasing forms.
I like it best for shops that sell a few simple products, or for shops that sell complex products that are purchased individually (such as build-your-own computers), as you can have a build + purchase form on each product page.
All you’ll need to use Gravity Forms for eCommerce is the Gravity Forms developer license, which is regularly $199 (though if you’re an avid reader, you know we have a 30% off coupon 😉 ). If you’d like to use a third party add-on instead, you could use Gravity Forms + Stripe with any GF license, though I haven’t used this myself.
So how long will this take you to set up? If you’re familiar with basic Gravity Forms functionality, you can start using Gravity Forms for eCommerce in as little as 28 minutes by following these steps (depending on how your site will be structured).
Time to complete: 4 min
Before we get into configuration, let’s quickly discuss how you’ll be accepting payments via Gravity Forms. This is why you’ll need the developer license instead of a lower license tier, as integrations with payment gateways are only available for these licenses (or a third party add-on for Stripe as stated above). You’ll be able to choose from:
- Authorize.net (AIM) – includes support for ARB (recurring billing)
- PayPal Payments Standard – no SSL needed
- PayPal Payments Pro
- PayPal Pro (old API)
If you go to Forms > Add-ons, you’ll see all available add-ons for you to install and activate.
You’ll want to grab the appropriate payment gateway integration, and enter your API credentials to get up and running. You can do so under Forms > Settings and selecting your payment gateway.
Enter your payment gateway credentials, save, and you’re ready to start your form!
Time to complete: 6 to 13 min
Before we decide how we’ll structure our store and set up our form, we can create the form and begin to add basic fields.
There are some fields we know that we’ll need to add to any form: name and address will definitely be needed for billing and/or shipping, and email and/or phone may be necessary as well. You may also want to add a separate address field if you’ll ship to an address other than the billing address (you’ll probably want to include a recipient name field if you do). We can add these fields to our form under “Advanced Fields”:
We’ll also want to add a couple fields from the “Pricing Fields” list:
Regardless of how your form is set up, you’ll need the “Total” and “Credit Card” forms to finish the checkout process, so we can add those now. You may want to also add the “Shipping” field and enter any shipping options (i.e., Ground, Expedited, etc) and the associated fees (if applicable).
Finally, we’ll want to configure some of the settings for our form. Go to “Form Settings”. You’ll probably want to change the button text to something like “Place Order” instead of “Submit”. You may also want to change the default confirmation message under “Confirmations” to something like this:
Thanks! Your order has been received and a receipt will be emailed shortly.
Finally, you may want to send a receipt via email. If you’d like to do so, you can create a user notification by duplicating some of the admin notification and pulling in the email field. For example, you probably want to include customer details, the order details and total, and some info below these fields about contacting your store and return policies.
Time to complete: 3 min
Now that we have our basic fields filled in, we can configure this form to work with Authorize.net. Go to Forms > Authorize.net (or your payment gateway), click “Add Form”, and select the form you’re tying to Authorize.net. We need to map our form fields to billing information so that Authorize.net has the information needed to validate our form.
This part is pretty easy. You can simply select which form fields belong to which Authorize.net field. You can also opt to send Authorize.net Receipts via email.
The Authorize.net menu is also where you’ll view your entries list and view individual entries (you can also access them from the “Entries” menu). You can click on an order entry to see all customer details, add notes, and print orders from one screen.
Great! Now we’ve got a payment gateway connected to Gravity Forms, tied to our form, and we have a start on our form setup. We can proceed by adding the products we’ll sell to our form.
Time to complete: ??? min (estimated 10 min)
Before we begin to create our purchasing forms, we’ll need to decide how you want to structure your store. You can use Gravity Forms as a checkout page form, or you can use it as a purchasing form on each product page. You won’t be able to leverage a cart system with this, so it depends on which structure suits your store.
For example, if you sell only simple products or single purchases, you can probably create one purchasing form for your site. For example, this works great if you’re sending someone from a pricing table – you can dynamically populate the product selected and the form is ready to go.
However, if you sell products with variations or options, you may need to create multiple forms. Typically, Gravity Forms is best for this if customers only purchase one product at a time. If they’d want to purchase multiple complex products in one sitting, you probably want to look at a different eCommerce solution.
Think about your workflow and what kind of products you sell. Think about how many products you sell. If you sell more complex products (like build-your-own computers, which require options or add-ons), you probably want to create a purchasing form on each page for a one-page purchase. If you sell a couple simple products or versions of one product, a checkout page form may be best.
This section is the wild card. If you haven’t settled on Gravity Forms previously and already thought this out, you may need to sit down and plan out your site structure before we start creating forms.
Let’s give two examples here. In one example, I’m going to pretend that I sell customizable products – my customers will purchase directly from the product page, but I don’t need a cart system. Let’s use 5k race registrations for this, but this type of form is great for any product that would be purchased by itself, and not with other products (think customized computers, concert tickets, services, etc).
In the second example, I’ll assume that I sell one major product for which I’d like to have a select field and checkout form. This is handy for shops with just a handful of products, as you can add all of these products on the same form. I’m going to use a plugin license as an example for this.
No matter which example we start with, you may want to duplicate the form we’ve started building rather than using it. This will keep that form as a starting point for more forms so you don’t constantly have to keep adding name, credit card, and other fields.
Just remember to create a new Authorize.net form (or change the one we’ve already made to use the duplicated form instead) for each purchasing form.
Example 1: Product Page Purchasing
Time to complete: 9 – ??? min (depends on number of forms)
I’m assuming you’ve duplicated our basic form in each of these examples so that we can just start adding fields for our product. Your single-purchase form could look very different when compared to mine, but here are some basic tips.
First, use product fields for major aspects of your product (I’ll use one for registration). Each major component of the “sale” (in this case, a registration) should use a product field. You can also mix and max pricing fields with regular fields if you need to gather more info (I’ll do this for some of the racer information).
You can use “Quantity” fields that correspond to your product field. I’ll use one here to update the number of registrations that should be processed. The thing I like best about quantity fields is that I can base conditional logic around them. In my example, I’m going to add extra racer gender / tee shirt size fields when quantity is greater than 1, greater than 2, etc.
You can also add “Options” fields. These are also tied to product fields. Option fields can be added on to products with optional costs (I think of them as “add-on” fields). In my example, I’ll use an option field to modify the registration – I can add a cost if the racer would like to attend the barbecue after the race. This will also change based on quantity – if multiple registrations are purchased, then multiple options will be included as well.
Once I’ve added my fields, I can check out my finished product page (you may want to open this in a new tab):
There are far more options for product page purchasing that you can explore. The beauty of using Gravity Forms for this is that you can sell fairly complex products directly on your sales page, and add costs per item or option.
Example 2: Checkout Page Form
Time to complete: 3 – ??? min
The best part about using a checkout page form is that you probably don’t need to add many more fields. We’ll simply need a field for each product that we’ll be selling. I’ll only use one field here for Plugin License, which I’ll populate via URL (we’ll assume I’m sending customers to this from a pricing table). However, if I want to sell a couple of small products and maybe some add-ons, I could add more fields. Again, we don’t want to clutter this, and you could use different checkout pages as needed.
I’ll begin by adding a “Product” field to my form. Product fields have a few types; since I’m creating a product with a few versions, I’ll use a dropdown. Here’s some helpful documentation on product field types if you have a different kind of product.
Notice that I’m showing values and setting them manually. We’ll need this to pre-populate the field for the customer depending on which pricing table option is selected. Once I’ve entered all versions of my product and the corresponding price, I can switch to the “Advanced” tab.
Here I’ll enable the ability to dynamically populate the form via URL. The basic structure for this is
/?parametername=value. As I’ve set my parameter name to “license_type”, I can now pass a license type into the form. I’d use the URL of my checkout page, then append the license type. It will look something like this:
If you have more fields populated dynamically, you can add them by adding
¶metername=value for each.
Finally, if you don’t want customers to be able to change their selection, you can opt to have this field accessible to the admin only instead of visible to everyone.
Now, my form will display my products, and the total will adjust depending on which option is selected.
Time to complete: 2 – ??? min
Last, but not least! Don’t forget to add your forms to your pages – if you’re using a checkout-style form, you probably want to use a new page for your checkout. If you’re allowing purchasing on a product page, you can simply embed your form on the relevant page(s).
You’ll use the Gravity Forms shortcode (like this: [gravityform id="2"]), or you can use the “Add Form” button at the top of each post / page edit screen.
Since you may already be using Gravity Forms, leveraging your forms for eCommerce can be an interesting option. This setup works best for complex products that are typically purchased alone, as you can sell them easily and directly from the product page.
It’s also a handy option for sites that only sell a few products, as you can create a checkout form with a tool that you probably have installed already. While this setup is not for stores that need a cart process, it makes a very handy option for sites that have a limited product offering and don’t require inventory or order management within WordPress.
Want to check this out? You can get Gravity Forms if you need a new license, or you can visit our coupons page to grab a 30% off code. Get a developer license for official payment gateway integrations, or check out the Gravity Forms + Stripe add-on with any GF license.
Have your own cool setup or implementation with Gravity Forms? I’d love to hear about it! Drop a line in the comments 🙂 .
Your eCommerce stores loses almost 70% of carts due to abandonment. Did you know that you can typically recover 10-15% of these sales? Try Jilt for free to save these carts – most stores see 10-15% more revenue with their first recovery campaign.