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

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.

Add a Radio or Checkbox field.
In the Appearance tab, add buttonized as a Custom CSS Class.

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.

/* Buttonize Radio & Checkbox Fields */
 .gform_wrapper .gfield.buttonized .gfield_radio .gchoice,
 .gform_wrapper .gfield.buttonized .gfield_checkbox .gchoice {
    position: relative;
    text-align: center;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"],
 .gform_wrapper .gfield.buttonized input[type="checkbox"] {
    position: absolute;
    left: -9999px;
 }
 .gform_wrapper .gfield.buttonized .gfield_radio label,
 .gform_wrapper .gfield.buttonized .gfield_checkbox label {
    display: block !important;
    position: relative;
    max-width: 100%;
    padding: 1em;
    font-size: 48px;
    border: 7px solid #3f3f3f;
    background-color: #dcd5ce;
    cursor: pointer;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"]:focus+label,
 .gform_wrapper .gfield.buttonized input[type="checkbox"]:focus+label {
    border-color: #040404;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"]:checked+label,
 .gform_wrapper .gfield.buttonized input[type="checkbox"]:checked+label {
    border-color: #040404;
    background-color: #d7d7d7;
    overflow: hidden;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"]:checked+label::before,
 .gform_wrapper .gfield.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 .gfield.buttonized .gfield_radio label::before,
 .gform_wrapper .gfield.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.

/* Layout Buttonized Inputs As Grid */
 .gform_wrapper .gfield.buttonized .gfield_radio,
 .gform_wrapper .gfield.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.

/* Tweak Width of Last Input */
 .gform_wrapper .gfield.buttonized .gchoice: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!