Checkbox Products for Gravity Forms

Sometimes you don’t want to overwhelm users with product information. Once visitors have already committed to using your services, you might have a range of product options for them to choose from when they’re filling out a booking form – for example, activities on a holiday camp. 

Having these checkboxes activate actual product fields makes it easy for you to integrate your form directly with your payment system, rather than running it through extra steps. In this example, the customer may have already read the brochure that details the cost of each activity, and the form simply needs to calculate the final total.

Out of the box, however, the Gravity Forms plugin does not support checkbox products. Despite seeming like a quick fix, they’re not as simple to implement as a default product option as they seem.

This tutorial will demonstrate how we can create Checkbox Products using a regular Checkbox field, multiple Single Product Fields, and Gravity Forms’ awesomely powerful Conditional Logic.

1. Overview
   1. Step 1: Add a Checkbox Field
   2. Step 2: Add a Single Product Field for each Checkbox
2. Doing more with Gravity Forms Checkbox Products
   1. Limit the Number of Choices a User Can Make
   2. Add Tax, Discount, and Subtotal Fields
3. Any questions?

Overview

We will use a simple Checkbox Field to act as a “controller”. Each checkbox will correspond to a Single Product Field on the form. When the checkbox is checked, the corresponding Single Product Field is enabled via conditional logic.

Step 1: Add a Checkbox Field

Add a Checkbox Field to your form. Click on this field to edit the settings and add a choice for each product that will be selectable from this field.

General Settings for Checkbox Field

Step 2: Add a Single Product Field for each Checkbox

Add a Single Product Field for each checkbox in your Checkbox Field. I would recommend configuring one of the Single Product Fields and then using the duplicate feature (in the field settings header) to create multiple copies of the field.

1. Check the “Disable quantity field” setting so that the quantity will default to one.

2. Add “gf_invisible” to the Custom CSS Class setting on the “Appearance” tab. This will prevent the Single Product Field from being visible once it is “enabled” via conditional logic.

3. Add a conditional logic rule to only “show” this field when the corresponding checkbox is checked in our Checkbox Field.

These instructions might be a little confusing. Why are we using conditional logic to show/hide the appropriate product fields while simultaneously using the “gf_invisible” class to make sure the field is always hidden? Furthermore, if we want the field to always been hidden anyways, why don’t we just use a hidden field?

True, conditional logic is used to show/hide the field depending on the configured rules; however, another way to look at conditional logic is whether the field is “enabled” or “disabled”. In this context, we want the Product field to count towards the order total if the corresponding is checked, but we don’t want to confuse the user by actually revealing the product field itself. As far as the user is concerned, the Checkbox field is the Product field.

So why not use hidden product fields? Well, they don’t support conditional logic. *shrugs*

Doing more with Gravity Forms Checkbox Products

Limit the Number of Choices a User Can Make

Sometimes you might want to set a limit on the number of products a user can select – for example, if you only have a limited number of a given product, or if you want users to only be able to select (say) 5 out of 10 options.

With Gravity Forms Limit Choices, you can limit how many times each choice on a choice-based field may be selected – whether they’re Checkboxes or Radio Buttons, Drop Downs, and so on. Exhausted choices are automatically removed to prevent users from being able to select the choice for future entries.

If a limit is applied to choices in a Product or Option field and there is a Quantity field associated with that product, the quantity ordered through checkbox inputs will be counted towards the limit.

You can even use the remaining number of choices left to trigger conditional logic!

Gravity Forms Limit Choices is part of Gravity Wiz’s Gravity Perks, a suite of 34+ plugins for Gravity Forms that add amazing new features for Gravity Forms.

Add Tax, Discount, and Subtotal Fields

Another Gravity Perk is Gravity Forms eCommerce Fields. This is great for situations where you want your customers to select all their Checkbox products and pay for them on the same form.

This plugin adds Tax, Discount, and Subtotal fields, each with their own unique functionality and field ID to improve the purchase experience.

The Tax field calculates and applies a percentage discount based on the order total, or individually based on specific products.

The Discount field applies a flat or percentage discount, again to the total or specific products. Again, thanks to using checkbox fields, rather than hidden product fields, we can then use conditional logic to only apply the discount when certain conditions are met!

The Subtotal field allows customers to better understand their orders by showing the subtotal before any shipping, coupons, and taxes have been applied. Oh, and those Coupons and Shipping fields are improved too!

Get Gravity Perks today to take advantage of eCommerce Fields and 33+ more other Gravity Forms add-ons, snippets, and more!

Any questions?

We’re here to help. Let us know how you use this in the wild wild web.