🎉 Celebrate with 10% OFF on All Products! Use Code: GFEX10 Or Buy Any 2+ Items for 30% OFF with Code: GFEX30!

How can we help you?

Find answers, tutorials, and guides to get the most out of Gravity Extra add-ons. (DEV Preview)

Gravity Forms Checkbox Custom Styles Addon

Last updated: September 28, 2026 • Author: Bong Huynh
Table of Contents

Video walkthrough

Style Gravity Forms Checkboxes as Pills or Big Tick Boxes (No CSS)
Video tutorial: style Gravity Forms checkboxes as pills or big tick boxes Watch on YouTube

Gravity Forms Checkbox Custom Styles Documentation
Learn how to replace plain default browser checkboxes with modern, designer custom styles in Gravity Forms. Discover how to toggle custom styling per field, select between 3 designer styles, and ensure 100% accessibility and mobile responsiveness.

1. System Requirements & Prerequisites

Before configuring the Checkbox Custom Styles add-on, confirm that your WordPress environment meets the following specifications:

  • WordPress: Version 5.6 or higher (fully tested on WordPress 6.x+).
  • Gravity Forms: Version 2.5 or higher (Basic, Pro, or Elite licenses).
  • PHP Version: PHP 7.4, 8.0, 8.1, 8.2, or 8.3+.
  • Browser Compatibility: Supports all modern desktop and mobile browsers including Safari (iOS/macOS), Chrome, Edge, and Firefox.

2. Installation & Setup

  1. Download the Add-on: Log in to your GravityExtra My Account dashboard and download the latest version ZIP file.
  2. Install on WordPress: Navigate to WP Admin > Plugins > Add New > Upload Plugin, choose the downloaded ZIP file, and click Install Now.
  3. Activate the Plugin: Click Activate Plugin once the installation completes.

3. Configuring Custom Styles in the Form Editor

The add-on seamlessly integrates into the native Gravity Forms editor, adding intuitive controls directly within the Checkbox Field Settings panel:

  1. Navigate to Forms > Forms in your WordPress admin dashboard and click into your desired form.
  2. Click on any existing Checkbox field to open its Field Settings in the right-hand sidebar (or drag a new Checkbox field from the Add Fields panel).
  3. Locate the Enable Checkbox setting toggle and check the box to activate custom styling for this field.
Enabling Checkbox Custom Styles in Gravity Forms Field Settings
Figure 1: Activating custom checkbox styles directly in the Gravity Forms editor settings.

Once enabled, use the Checkbox Style dropdown menu to choose which style applies to this field:

Selecting Checkbox Style in Gravity Forms
Figure 2: Selecting your preferred checkbox style (Style 1, Style 2, or Style 3).

4. The 3 Designer Checkbox Styles Explained

The add-on offers 3 distinct visual styles crafted for different website aesthetics and user journey contexts:

The 3 Checkbox Custom Styles Preview
Figure 3: Visual comparison of Style 1 (Square), Style 2 (Pill), and Style 3 (Minimalist).
Style 1: Crisp Square

Features a crisp geometric bounding box with high-contrast checkmark rendering. Ideal for legal disclosures, consent agreements, and corporate lead capture forms.

Style 2: Rounded Soft Pill

Features softened, tactile border radiuses for a friendly, modern feel. Ideal for multi-choice service selections, onboarding funnels, and mobile surveys.

Style 3: Minimalist Outline

Features clean, lightweight borders that integrate effortlessly into modern flat designs, SaaS dashboards, and minimalist client portals.

5. Conditional Logic & Multi-Page Compatibility

Because the add-on preserves the underlying native HTML <input type="checkbox"> element, all advanced Gravity Forms features work out-of-the-box:

  • Conditional Logic: Show or hide other fields based on checkbox selections without any script conflicts.
  • Multi-Page Forms: Checkbox selection states remain perfectly preserved across forward and back page transitions.
  • AJAX Submissions: Works flawlessly with AJAX-enabled Gravity Forms forms—no page reload required.
  • Keyboard Navigation: Fully compliant with WCAG accessibility guidelines. Users can Tab into checkboxes and press Spacebar to toggle.

6. Key Use Cases & Best Practices

Terms & GDPR Consent

Use Style 1 to clearly demarcate mandatory terms acceptance, privacy agreements, and opt-in disclaimers.

Interactive Quote Calculators

Apply Style 2 to multi-choice feature lists and add-on pricing options, encouraging prospects to build their custom package.

Client Intake & Onboarding

Blend Style 3 into agency intake questionnaires and portal forms to maintain an elevated, modern brand impression.

7. Troubleshooting & Common Questions

Q: Can I use different checkbox styles on the same form?

Yes! The add-on allows per-field configuration. For instance, you can use Style 2 for your service selections and Style 1 for your terms and conditions acknowledgement field.

Q: Does this add-on require custom CSS or JavaScript?

No custom code is required. All styling is bundled in a lightweight, pure CSS stylesheet that is automatically enqueued only when a form containing custom styled checkboxes is displayed.

Q: Are custom checkboxes mobile-friendly?

Yes. Touch hitboxes are expanded beyond the raw 14px input boundary, making selections smooth and effortless across smartphones and tablets without accidental mis-taps.

Related Resources & Live Demonstration

Upgrade Your Gravity Forms Checkboxes Today

Give your forms an instant visual upgrade with pure CSS custom checkbox styles. Full per-field control and seamless Gravity Forms integration.

Was this article helpful?

Let us know how we can improve our docs.

0
0
Your Cart
Your cart is emptyReturn to Shop
To find out your shipping cost , Please proceed to checkout.
Continue Shopping
🔥 FREQUENTLY BOUGHT TOGETHER
Complete Combo & Save 40%!
ITEM IN YOUR CART
Gravity Forms Klaviyo Add-on
$39.00/yr
+
🎁 RECOMMENDED ADD-ON SAVE 40% OFF
Original Price: $39.00/yr
Bundle Special Price: $23.40/yr