How to convert / change checkbox to toggle in gravity forms?

Use this instruction:

Checkbox To Toggle Field
Let’s convert a checkbox to a toggle field using two of the filters above. While it’s possible to download plugins with this feature or program your own toggle fields with Gravity Form’s API library, this is a quicker route to achieve the same outcome. Our process will have three parts:

Set up the form field in Gravity Forms
Enqueue the styles we need to make the field look like a toggle
Use the field content filter to modify the HTML output
Set up the form field in Gravity Forms
Our simple toggle will work with one checkbox field. When the checkbox is checked, the form will submit “On.” First, create one checkbox labeled “On”:

Gravity Forms toggle

For our stylesheet and custom content to know which field(s) to modify, we’re going to set a custom class of “toggle-field” under the “Appearance” tab. Your settings should look like this:

Gravity Forms class settings

Now that we have the basic setup, let’s get coding.

Enqueue Styles
We need to add a few styles to our checkbox field to become a toggle, and we’ll do that now before we edit the field. Here is our enqueue stylesheet code:

$form_id = 2;
add_action( "gform_enqueue_scripts_{$form_id}", 'gform_enqueue_scripts_contact_form', 10, 2 );
function gform_enqueue_scripts_contact_form( $form, $is_ajax ) {
  wp_enqueue_style( 'contact-form',  'url/to/stylesheet/form_2.css', array(), false, 'all' );
}
 

The contents of form_2.css:

/* Form 2 - Contact Form - Custom Styles */

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #cf4242;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}

.toggle-switch:before,
.toggle-switch:after {
  content: "";
}

.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked + .toggle-switch {
  background: #62c071;
}

.toggle-checkbox:checked + .toggle-switch:before {
  left: 30px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}
Now that we’ve got the styles ready let’s add that html markup to transform our checkbox into a toggle.

Use the field content filter to modify the html output
The toggle field needs a handle to move back and forth. We’ll add that. We’ll also wrap our input field and the toggle elements inside a label element, which means that anywhere we click on the toggle, it will check/uncheck the hidden checkbox and animate the toggle switch. Here’s the code:

add_filter( "gform_field_content_{$form_id}",
'oyo_toggle_fields', 10, 5 ); function oyo_toggle_fields( $content, $field, $value, $lead_id, $form_id ) {
  if ( str_contains( $field->cssClass, 'toggle-field' ) ) {
    $field_id = $field->id; 
    $choices = $field->choices; 
    $label = $choices[0]['text'] ?? 'On'; 
    $content = ' 
    <legend class="gfield_label gform-field-label gfield_label_before_complex">Toggle</legend>
    <div class="ginput_container ginput_container_checkbox toggle-container">
     <div class="gfield_checkbox" id="input_'.$form_id.'_'.$field_id.'"> 
      <div class="gchoice gchoice_'.$form_id.'_'.$field_id.'_1"> 
       <label class="input-label toggle"> 
        <input class="gfield-choice-input product-chbx toggle-checkbox" name="input_'.$field_id.'.1" type="checkbox" value="On" id="choice_'.$form_id.'_'.$field_id.'_1"> 
       <div class="toggle-switch"></div> 
       <span class="toggle-label">'.$label.'</span> 
      </label> 
     </div> 
    </div> 
   </div>'; 
  } 
 return $content; 
}
In the code above, we’re using the gform_field_content filter on our form and targeting all of the form fields. We search through all the fields, and if any of them have the class we set earlier, “toggle-field,” thenthat field’s  HTML will be replaced with the code above.

Next, we dynamically render the label next to the toggle. We grab all of the of the field’s choices (input fields) – these are the checkbox input fields. Then we parse that array for the associated label, which will become our toggle label:

$choices = $field->choices;
$label = $choices[0]['text'] ?? 'On';
If you have not used “On” but some other text, the block of code above will grab what you used.

Next, we use the default Gravity Forms output until we insert our label element. At this point, we add all of the elements we need to make a toggle:

<label class="input-label toggle"> 
  <input class="gfield-choice-input product-chbx toggle-checkbox" name="input_'.$field_id.'.1" type="checkbox" value="On" id="choice_'.$form_id.'_'.$field_id.'_1"> 
  <div class="toggle-switch"></div> 
  <span class="toggle-label">'.$label.'</span> 
</label>
This converts our bland checkbox into a stunning toggle switch: