Changing radio button markup using filters [RESOLVED]

Get Help
, , , ,
1

Hey! I’m trying to change the markup for the radio buttons on my form to a bootstrap button group using filters. I was able to get most of it, but there’s one thing I can’t figure out, so I’m using jQuery to solve for it, but I’d like to not use jQuery if at all possible. Here’s the Bootstrap setup for button groups:

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>

And here’s where I’ve landed using filters:

<div class="ginput_container ginput_container_radio">
	<ul class="gfield_radio" id="input_1_8">
		<input name="input_8" type="radio" class="btn-check" autocomplete="off" value="Single" id="choice_1_8_0">
		<label class="btn text-white btn-outline-primary" for="choice_1_8_0" id="label_1_8_0">
    		Single
    	</label>
		<input name="input_8" type="radio" class="btn-check" autocomplete="off" value="Married" id="choice_1_8_1">
		<label class="btn text-white btn-outline-primary" for="choice_1_8_1" id="label_1_8_1">
			Married
		</label>
	</ul>
</div>

Right now, I’m using jQuery to change the ul to <div class="btn-group" role="group">, but I’d like to do that using a filter, if possible. I saw the gform_field_container filter, and that only removes the surrounding div… and also removes the surrounding div from everything. When I tried doing it with if($field["type"] == 'radio') , it removed everything that wasn’t a radio button and the surrounding div on the radio button.

Here’s what I have to adjust the rest of the stuff:

add_filter( 'gform_field_choice_markup_pre_render_1', function ( $choice_markup, $choice, $field, $value ) {
    if ( $field->get_input_type() == 'radio' ) {
    	$choice_markup = strip_tags($choice_markup, '<input><label>');
        $choice_markup = str_replace( "type='radio'", "type='radio' class='btn-check' autocomplete='off'", $choice_markup );
        $choice_markup = str_replace( "label for", "label class='btn text-white btn-outline-primary' for", $choice_markup );
    }
    return $choice_markup;
}, 10, 4 );

I know that’s a lot of text, so let me know if I need to clarify anything. :sweat_smile:

2

Hi Brittany. I think this is going to be problematic in Gravity Forms 2.4.xx. I recommend taking a look at the 2.5 beta, which already includes this style markup, rather than the ul > li we used in the past. Here’s the documentation for that: Changes to markup in Gravity Forms 2.5 - Gravity Forms Documentation

If you have a staging or test site, you can install the beta there. If not, you can set up a free demo of Gravity Forms 2.5 here:

1 Like
3

Great. Good to know something’s in the works! I’ll use jQuery for now, and when 2.5 is fully released, I’ll look into making that switch. :slight_smile:

1 Like
4

Thanks Brittany.