Injecting html into label element of form field, site wide [RESOLVED]

Get Help
,
1

Hi all, I have a situation where I’m attempting to replicate a new theme for our organization within Wordpress. The form elements for the new theme are a bit wonky and use some custom svg animations that are held within the label element.

For instance. I have a regular checkbox, this is the HTML output for that checkbox.

			<input class="gfield-choice-input" name="input_17.1" type="checkbox" value="First Choice" id="choice_1_17_1" />
			<label for="choice_1_17_1" id="label_1_17_1" class="gform-field-label gform-field-label--type-inline">First Choice</label>

I need to inject the following into EVERY checkbox for every form, site wide.

		<span class="checkbox" role="none">
			<svg class="brei-icon brei-icon-check" focusable="false">
				<use xlink:href="#brei-icon-check"></use>
			</svg>
		</span>

So the resulting HTML generated should look like…

<input class="gfield-choice-input" name="input_17.1" type="checkbox" value="First Choice" id="choice_1_17_1" />
<label for="choice_1_17_1" id="label_1_17_1" class="gform-field-label gform-field-label--type-inline">
	First Choice
	<span class="checkbox" role="none">
		<svg class="brei-icon brei-icon-check" focusable="false">
			<use xlink:href="#brei-icon-check"></use>
		</svg>
	</span>
</label>```
2

Hello! You can use the gform_field_choice_markup_pre_render filter to modify the markup for your checkbox choices. If you call it without adding a form ID to the filter, it should work site wide. Something like this should work for your case:

add_filter( 'gform_field_choice_markup_pre_render', function ( $choice_markup, $choice, $field, $value ) {
	if ( $field->get_input_type() === 'checkbox' ) {
		$icon = '<span class="checkbox" role="none">
			<svg class="brei-icon brei-icon-check" focusable="false">
				<use xlink:href="#brei-icon-check"></use>
			</svg>
		</span>';
		return str_replace( '</label>', "$icon</label>", $choice_markup );
	}

	return $choice_markup;
}, 10, 4 );
3

Awesome thank you! That did the trick, I extended it to theme the radio buttons as well!