If you’re using Gravity Forms to build a checkout form for selling products or services, you might want the option to add additional services or products as optional add-ons. Using checkboxes, you can let customers opt into these extras with ease, and the best part? You don’t need any code to make this work.
Here’s how to create add-on options on your Gravity Forms checkout page, giving users the ability to add extra products or services by simply checking a box.
Step 1: Set Up Your Base Form
Let’s say you’re offering a main service, like a “Website Management Plan” for $1,200. Set up your form fields as you usually would. For this example, my form includes:
- Name
- Phone
- Main product: “Website Management Plan” priced at $1,200 (with no quantity field).
Step 2: Add Your Additional Product
Now, say you want to add hosting as an optional add-on for $100. Here’s how to do that cleanly and clearly.
- Add a Checkbox Field: This will allow customers to indicate if they want the additional service.
- Label it something like “Interested in Hosting?”
- In the choices, add something like “Yes, sign me up for an additional $100.”
- Add a Hidden Product Field: Create a new product field for the add-on, in this case, hosting. Set this up as:
- Product Type: Single Product
- Price: $100
- CSS Class:
gf_invisible
The gf_invisible
class (built into Gravity Forms) hides the product from the front end, so the add-on price only appears in the total when the checkbox is selected.
Step 3: Set Conditional Logic
Now, we want this hidden product to only appear in the total when a user selects the add-on option.
- Go to the Product Field for hosting.
- Enable Conditional Logic.
- Set up the conditional logic to display the hosting field if the checkbox “Interested in Hosting” is Yes.
Step 4: Save and Preview
Save your form and test it out. On the front end, you’ll see:
- The main product total of $1,200.
- The optional checkbox, “Yes, sign me up for an additional $100.”
When you check the box, you’ll see the total update to include the extra $100. Uncheck it, and the price goes back down—exactly what we want!
Adding Multiple Add-Ons
You can also allow users to select from multiple add-ons. Here’s how:
- Edit Checkbox Options: Modify the choices to include multiple add-ons, like:
- SEO Optimization: $500
- Google My Business Setup: $250
- Create Individual Product Fields for Each Add-On: Each add-on needs its own product field with conditional logic. For example:
- SEO Optimization: Price set to $500. Conditional logic: Only show if “Interested in Add-Ons” includes SEO.
- Google My Business: Price set to $250. Conditional logic: Only show if “Interested in Add-Ons” includes Google My Business.
- Save and Test: Now, users can choose one, multiple, or no add-ons, and the form total will automatically update based on their selections.
A Clean and Simple Solution for Upsells
This approach makes it easy for users to add optional services without having to adjust quantities or see each add-on as a separate product line. It’s a clean, user-friendly way to upsell within Gravity Forms, making it clear what each add-on costs and keeping the form uncluttered.
Final Tips
- Label Add-Ons Clearly: Since hidden product fields are not directly visible, make sure to list the add-on prices in the checkbox options to avoid confusion.
- Preview Your Form: Test different add-on combinations to ensure everything calculates correctly.
Adding optional upsells in Gravity Forms doesn’t require code or plugins. Once you’ve set this up, you’ll see how easy it is to create upsells that look professional and function seamlessly. I hope this walkthrough helps unlock more possibilities for your forms!