How to Present Radio Fields & Checkboxes As Buttons in Gravity Forms

by

When building a form, it is important to minimize friction for the end-user. Visual design elements are an important consideration toward this end. This brief tutorial will walk you through styling Gravity Form radio fields and checkboxes in order to present a clean user interface on your form.

Step 1: Set Field Class

The first thing we will do toward styling these fields is to add a class. This will allow us to target the fields with our specific styles.

  1. Add a Radio or Checkbox field.
  2. In the Appearance tab, add buttonized as a Custom CSS Class.
Gravity Forms native radio field

Step 2: Add the Styles

These styles will target all radio and checkbox fields that have the buttonized class present and will transform them into larger clickable buttons. Note that our inputs have only been moved off-screen, so they are still accessible in the tab order. A slight :focus style is also being applied in order to show when a user has tabbed into the field.

Customize the colors and sizing according to your specific needs.

Application of button styles
/* Buttonize Radio & Checkbox Fields */
.gform_wrapper li.buttonized .gfield_radio li,
.gform_wrapper li.buttonized .gfield_checkbox li {
   text-align: center;
}
.gform_wrapper li.buttonized input[type="radio"],
.gform_wrapper li.buttonized input[type="checkbox"] {
   position: absolute;
   left: -9999px;
}
.gform_wrapper li.buttonized .gfield_radio label,
.gform_wrapper li.buttonized .gfield_checkbox label {
   display: block !important;
   position: relative;
   max-width: 100%;
   padding: 1em;
   font-size: 48px;
   border: 7px solid #3f3f3f;
   background-color: #dcd5ce;
}
.gform_wrapper li.buttonized input[type="radio"]:focus+label,
.gform_wrapper li.buttonized input[type="checkbox"]:focus+label {
   border-color: #040404;
}
.gform_wrapper li.buttonized input[type="radio"]:checked+label,
.gform_wrapper li.buttonized input[type="checkbox"]:checked+label {
   border-color: #040404;
   background-color: #d7d7d7;
   overflow: hidden;
}
.gform_wrapper li.buttonized input[type="radio"]:checked+label::before,
.gform_wrapper li.buttonized input[type="checkbox"]:checked+label::before {
   content: '';
   display: block;
   position: absolute;
   top: -.75em;
   right: -.75em;
   left: auto;
   width: 1.5em;
   height: 1.5em;
   background-color: #e1b653;
   border-radius: 0;
   border: 0;
   transform: rotate(45deg);
}
.gform_wrapper li.buttonized .gfield_radio label::before,
.gform_wrapper li.buttonized .gfield_checkbox label::before {
   display: none;
}

Step 3: Improve the Layout

Now that we’ve buttonized our radio and checkbox fields, we will likely want to present them in a more suitable layout. CSS Grid Layout is an excellent tool for accomplishing this.

Display in grid
/* Layout Buttonized Inputs As Grid */
.gform_wrapper li.buttonized .gfield_radio,
.gform_wrapper li.buttonized .gfield_checkbox {
   display: grid;
   grid-template-columns: repeat( 2, 1fr );
   grid-gap: .5em 1em;
}

You can further refine the layout by targeting specific radio or checkbox inputs (by location or by input ID) in order to force their layout in the grid. In this example, we simply let our :last-child flow across all columns by defining the specific grid-column width for our last input.

Forced grid layout
/* Tweak Width of Last Input */
.gform_wrapper li.buttonized li:last-child {
   grid-column: 1 / -1;
}

You will most likely need add a few styles to keep the grid responsive.

Step 4: Smile & Relax

That should do it. You are well on your way to more stylish forms. Keep coding & stay well!

Create fields once. Use everywhere.50% off