Checkbox Products for Gravity Forms

Out of the box, Gravity Forms does not support checkbox products. Simple story… 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. Add a Checkbox Field
2. Add a Single Product Field for each Checkbox
3. Add Temporary Styles to Hide Single Product Fields

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.

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

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

3. Add Temporary Styles to Hide Single Product Fields

In the previous section we added a “gf_invisible” class to the Custom CSS Class setting for each of the product fields. You probably assumed correctly that this class will make the field invisible. This class will be available in Gravity Forms 1.9.5 so in the meantime, you’ll need to add it yourself.

The easiest way to do this is just to add an HTML field to your form and add a style block with the class definition.

Temporary HTML Field for 'gf_invisible' Class

You can grab the style block code here: Temporary Style Code

Any questions?

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