functions - Gravity forms adding classes to specific form elements

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 7 days ago.

Improve this question

I have read thru Gravity Forms docs, forum posts, et al and cannot find a way to target the Checkbox container element, and checkbox wrapper DIVs to add specific classes to them.

My goal is to programmatically layout the checkboxes using my themes built in BS5 framework, and not add gf_col_2 classes to the form elements in the editor.

I have tried these GForm functions without success: gform_field_css_class gform_field_content gform_field_container

Here is the markup generated by Gravity Forms:

By using the gform_field_container function I CAN successfully add the .container class to the parent FIELDSET.. but NOT to the child .ginput_container_checkbox DIV of the FIELDSET, which is what I need.

    function strt_field_container( $field_container, $field, $form, $css_class, $style, $field_content ) {
    
    // To make all checkboxes 2 col - first set the .container class
    
    // This next line below DOES WORK, but on a parent level FIELDSELT NOT the container needed.
    $field_container = str_replace( 'gfield--type-checkbox ', 'gfield--type-checkbox container ', $field_container );
    
    // This line DOES NOT add a class to any element. 
    $field_container = str_replace( 'ginput_container_checkbox ', 'ginput_container_checkbox container ', $field_container );
    
    return $field_container;
}
add_filter( 'gform_field_container', 'strt_field_container', 10, 6 );   

I've also tried the pre-render function:

    add_filter( 'gform_field_choice_markup_pre_render', function ( $choice_markup, $choice, $field, $value ) {
// Change Second Choice to the label of your choice.
//      
    // set the container for 2 col checkboxes
    $choice_markup = str_replace( 'ginput_container_checkbox ', 'ginput_container_checkbox container ', $choice_markup );
    // set the row and gap for 2 col checkboxes
    $choice_markup = str_replace( 'gfield_checkbox ', 'gfield_checkbox row gx-2 ', $choice_markup );
    // set the cols for 2 col checkboxes
    $choice_markup = str_replace( 'gchoice form-check ', 'gchoice form-check col-6 ', $choice_markup );

    return $choice_markup;
}, 10, 4 );

I need to be able to:

1. Add the .container class to the .ginput_container_checkbox element
2. Add the .row.gx-2 classes to the .gfield_checkbox element
3. Add the .col-6 class to the .gchoice.form-check elements

I know it can be easily done in JS but I'd like to do this via the functions.php file and limit adding more JS to the theme.

Any suggestions are greatly appreciated !!