Tutorial: Using Easy Digital Downloads Gravity Forms Checkout

Have you ever applied for a job that made you do a silly or trivial thing in the application? You may have been required to submit a document in a certain format, write a haiku, or submit something else with your application and resume. The reason that hiring managers do this is to introduce a barrier. Creating barriers, no matter how small, reduces the number of people who will complete a task, even if the barrier is trivial.

Now think about your store’s checkout process. Do you introduce barriers, even if they’re tiny ones? Each click needed to check out is a small barrier; each action or piece of information a user must enter presents another small barrier. What you effectively do by creating these small barriers is encourage some users not to complete your checkout process.

Reducing barriers increases conversion rates, and one way to reduce these barriers it to make checkout as quick and easy as possible. You can do so by using one page, or even on-page checkout processes. Want case studies on how these help? Check out this one or this one.

One tool that can create a really seamless checkout process is the Easy Digital Downloads Gravity Forms Checkout add-on, which is $39.

Easy Digital Downloads Gravity Forms Checkout: Intro

Back up; why would I need both Easy Digital Downloads ($0) and Gravity Forms ($39-$199), along with this extension ($39)? That’s a total cost of at least $78.

You can definitely create purchasing forms using just Gravity Forms. In fact, we have a tutorial on using Gravity Forms for eCommerce that shows you how to do this. However, this doesn’t work as a complete eCommerce solution.

Order and product management, as well as purchase history setup, are not part of Gravity Forms. It’s as basic of an eCommerce solution as you can get, but the forms are powerful and customizable. Combining Easy Digital Downloads with Gravity Forms gives you the best of both worlds: you benefit from great reporting, user / order management, and product creation on the EDD side, and can completely customize your checkout forms and create them on page via Gravity Forms.

This is an ideal solution for stores that need these dedicated checkout forms for a small number of products, but either (a) sell lots of other products through EDD, or (b) need a more complete eCommerce setup than Gravity Forms offers alone.

EDD Gravity Forms Checkout: Setup

First of all, unless you’re using the Gravity Forms PayPal Standard add-on for payment processing, you’ll need to make sure that your SSL is forced on any pages that will contain payment forms. Typically many shops force SSL on the “My Account” / Login pages as well as checkout; however, you may be embedding a payment form on a different page, and should therefore make sure the site (or at least those pages) is served over https.

The tools we’ll need here are:

• $0 – Easy Digital Downloads
• $39 – Gravity Forms Personal or Developer License*
• $0 – Payment Processing: the free Gravity + Stripe add-on, or one of the official payment add-ons for GF Developer Licenses ($199 includes all payment gateways)
• $39 – EDD Gravity Forms Checkout

*If you need Gravity Forms, check out our special offers page for a sweet discount.

You may also want to check out the plugin documentation for GF Checkout as you set this up, as it has a few pretty helpful hints.

Once you’ve got all plugins installed, I’m going to assume you’ve already set up some Easy Digital Downloads products (or at least read our review on it for help) and jump right into creating your purchasing forms and on-page checkouts.

Creating the Purchasing Form

We’re going to start with purchasing forms in Gravity Forms, then display these to our customers and test them. Again, I recommend our tutorial on using Gravity Forms for eCommerce if you want more details or some helpful tips.

We’ll create basic fields that we’ll need from all customers, such as Name, Address, etc., then add fields for our EDD products to tie this form to EDD purchase records and reporting. To tie a form to a product purchase, we’ll need to add some of the eCommerce Gravity Forms fields. Start with a “Product” field – you’ll now see an option to tie this to an EDD product:

If you’re only selling simple products, you can confirm you pricing and this is all you’ll need to tie your product purchases via the Gravity Form to Easy Digital Downloads. However, note that my form is alerting me to the fact that I have variations.

If you want to sell a variable product via this form, you’ll have to use the “Options” field via Gravity Forms to do so. Fortunately, you can simply import your existing product variations into the form with one-click for a super-easy setup.

These two fields completely tie my form to EDD product purchases, and will records sales per option accurately. The only other field you must have is an email field so that you can tie purchases to the appropriate user account. This will allow customers to access this purchase in their account’s purchase history, and ensures that your EDD reporting is accurate.

Once you have basic information in your form, you’re ready to go! However, there are some other minor setup things to pay attention to for a great purchasing experience.

First, you probably want to change your confirmation notice. By default, this will just thank customers for submitting a form. However, we may want to provide a purchase-specific message when the form is submitted:

The final setup step is for payments. If you want to only accept manual payments, then you can allow customers to mail a check or include instructions for bank transfers, and EDD orders will be set as “Pending”. However, you will probably want to include a payment gateway.

You can use only Gravity Forms payment methods for these purchasing forms, not EDD payment gateways. I’m going to use the free Stripe plugin we mentioned in setup, but you can use any of the payment gateways in the Developer add-ons for Gravity Forms. Don’t forget to tie your form fields to the payment gateway information. As we’re using Stripe, we’ll do this under Gravity Forms > Stripe, and select the fields from our form.

Now I’m ready to put my form into action, as I have fields for:

• the product type
• customer information
• credit card information
• any other information I need to gather

I’ve also tied this form to Stripe fields for payment processing. Now let’s set this up for purchasing.

Purchasing Funnel

We’ve created our products and the purchasing form, so we need to display this form to customers. You’ll want to think about how customers will purchase this product. For example, you may want to only sell this through a landing page (we’ll give you some tips on this soon).

As you may already have a lot of product information on this form, you can display the form right on the product page. This will give customers the product information, and then they can view all purchasing information via your new purchasing form. However, we’ll want to disable our EDD purchase button when we edit the product so that our form is the only purchasing option:

You’ll find this option under the Download Settings. Now you simply add the shortcode for your form to your product description – it’s easiest to do this by clicking “Add Form”. Our product page now displays all product information, and uses our purchasing form instead of an “Add to Cart” button. This completes the purchase right on the page for the fastest checkout possible.

As a quick note, my form originally displayed a price of $0.00 for the first product, as I’m adjusting all pricing via my variations. If you do the same thing, you can hide the Gravity Forms Price text with this CSS in your child stylesheet or custom CSS option:

.ginput_product_price, .ginput_product_price_label {
  display:none;
}

If you only want to target and hide the price on this form and not others, you can add a CSS class to this field under “Advanced” while creating it, then use that to make your CSS rule more specific. Let’s add the class rchp-form:

.rchp-form .ginput_product_price, .rchp-form .ginput_product_price_label {
  display:none;
}

Now that my form is on my page, I’m done! There are some other considerations for the purchasing funnel that you may want to look at in the Taking it Further section.

Managing Payments & Orders

Now that my form is created, tied to my products, and embedded in my purchasing page, my customers can use it. Any purchases made through this form will be recorded as EDD purchases. If they require manual payment, such as a check, then they’ll be set as “pending” orders. If they’ve been paid via credit card or PayPal, they’ll be set as “completed”.

Each Easy Digital Downloads order will have a purchase note that references the Gravity Forms entry for this order, and each form entry will reference the EDD order number so that you know where each order or entry comes from.

Customers will also be able to view all purchases via Gravity Forms checkout within the EDD purchase history as well.

This gives you far better management capability than just Gravity Forms alone.

Taking it Further

The thing I dislike about using product pages to sell products (as I did in this example) is that they still display in the shop catalog if you use the [downloads] shortcode. This means that customers can purchase them via the EDD checkout process, which may or may not work for your store’s purchasing flow.

Hiding Products

For example, your purchasing form may have fields you absolutely need to for this purchase, so you don’t want the EDD checkout to be used. Fortunately, there’s a free plugin that we can use to hide products from the Shop loop: EDD Hide Downloads.

You can set the option to “Hide this download”, which will prevent the product from being added to wherever the [downloads] shortcode is used. However, customers will still be able to access this product directly. Therefore, you can add your own link for it to your shop page or another custom page. I’ve added a thumbnail and link to my shop page to show this product since it’s no longer included with the rest of my downloads:

You can also completely disable access to the product page, and use EDD solely for the account management, reporting, and purchase history. You’ll then need to create a unique landing page for this product (or use a pricing table / purchasing page) with your Gravity Form Checkout. Just use the EDD Hide Download plugin to completely disable access to the product page. You’ll still be able to track product purchases within the admin via your Gravity Form.

Scheduling Products

If you only want to show this product at certain times, or if you need to do this for several products, you could look into using the Limit Downloads Purchase extension. This will let you schedule when products should be available (such as concert tickets). However, you could use it to limit purchasing via the EDD checkout by making the product “expired”, then only the EDD Gravity Forms checkout would be available.

Products as Services

Another issue you may encounter is with products that don’t use a downloadable file. If you don’t need to use a download with your product, you can use another free plugin to mark downloads as services. This will ensure that your downloads don’t display any error messages if they don’t contain files.

Conclusions

Easy Digital Downloads Gravity Forms checkout is extremely easy to use, and allows you to create a completely customized checkout experience without losing the other great features of Easy Digital Downloads. You’ll still be able to leverage great reporting, customer and order management, download management, and eCommerce user accounts via EDD, but create your custom forms via Gravity Forms.

Ready to get started? Here are the materials I used again:

• Easy Digital Downloads
• Gravity Forms
• Easy Digital Downloads Gravity Forms checkout
• Gravity + Stripe

And here are our coupons / special offers: Coupon page

---

---

Your EDD store can drive additional revenue by improving your email marketing. Try Jilt for free to increase sales with abandoned cart recovery emails, post-purchase follow-ups, and more!