Гравитационные формы добавляют классы к определённым элементам формы.

Вопрос или проблема

Я прочитал документацию по Gravity Forms, сообщения на форумах и так далее, и не могу найти способ нацелиться на контейнерный элемент для флажков и обертку DIV для флажков, чтобы добавить к ним определенные классы.

Моя цель — программно расположить флажки, используя встроенную в мою тему фреймворк BS5, и не добавлять классы gf_col_2 к элементам формы в редакторе.

Я пробовал эти функции GForm безуспешно:
gform_field_css_class
gform_field_content
gform_field_container

Вот разметка, сгенерированная Gravity Forms:

С помощью функции gform_field_container я МОГУ успешно добавить класс .container к родительскому FIELDSET.. но НЕ к дочернему .ginput_container_checkbox DIV в FIELDSET, что мне и нужно.

    function strt_field_container( $field_container, $field, $form, $css_class, $style, $field_content ) {
    
    // Чтобы сделать все флажки в 2 столбца - сначала установить класс .container
    
    // Следующая строка ниже РАБОТАЕТ, но на уровне родителя FIELDSET, а не на нужном контейнере.
    $field_container = str_replace( 'gfield--type-checkbox ', 'gfield--type-checkbox container ', $field_container );
    
    // Эта строка НЕ добавляет класс к какому-либо элементу. 
    $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 );

Я также попробовал функцию предварительного рендеринга:

    add_filter( 'gform_field_choice_markup_pre_render', function ( $choice_markup, $choice, $field, $value ) {
// Измените Second Choice на метку по вашему выбору.
//      
    // Установить контейнер для флажков в 2 столбца
    $choice_markup = str_replace( 'ginput_container_checkbox ', 'ginput_container_checkbox container ', $choice_markup );
    // Установить строку и пробел для флажков в 2 столбца
    $choice_markup = str_replace( 'gfield_checkbox ', 'gfield_checkbox row gx-2 ', $choice_markup );
    // Установить столбцы для флажков в 2 столбца
    $choice_markup = str_replace( 'gchoice form-check ', 'gchoice form-check col-6 ', $choice_markup );

    return $choice_markup;
}, 10, 4 );

Мне нужно уметь:

Добавить класс .container к элементу .ginput_container_checkbox
Добавить классы .row.gx-2 к элементу .gfield_checkbox
Добавить класс .col-6 к элементам .gchoice.form-check

Я знаю, что это можно легко сделать в JS, но я бы хотел сделать это через файл functions.php и ограничить добавление большего количества JS в тему.

Любые предложения очень приветствуются!!

Ответ или решение

Вопрос, как добавить CSS-классы к определённым элементам Gravity Forms, требует немного более глубокого анализа. Цель состоит в том, чтобы стилизовать элементы с помощью фреймворка Bootstrap 5, избегая JavaScript-решений. Для достижения этой задачи можно использовать фильтры PHP для модификации разметки, генерируемой Gravity Forms.

Разбор задачи:

Задача: Нужно добавить классы к различным элементам формы, сгенерированным Gravity Forms:
- .container к элементу .ginput_container_checkbox
- .row.gx-2 к элементу .gfield_checkbox
- .col-6 к элементу .gchoice.form-check
Используемые фильтры и их ограничения:
- gform_field_container: Позволяет модифицировать контейнер поля, но, как вы заметили, работает только на уровне FIELDSET, а не на уровне элемента .ginput_container_checkbox.
- gform_field_choice_markup_pre_render: Этот фильтр позволяет изменять разметку перед её рендерингом, но по какой-то причине он не вносит изменения в целевой элемент .ginput_container_checkbox.

Возможное решение:

Для решения вашей задачи, попробуем использовать другой подход, сосредоточившись на фильтре gform_pre_render, который позволяет изменять форму перед её отображением.

add_filter('gform_pre_render', 'customize_gravity_forms');
add_filter('gform_pre_render_YOUR_FORM_ID', 'customize_gravity_forms');
function customize_gravity_forms($form) {
    // Проходим по каждому полю формы
    foreach($form['fields'] as &$field) {
        // Проверяем, если текущее поле - это чекбокс
        if($field->type == 'checkbox') {
            // Добавляем классы к контейнеру чекбоксов
            $field->cssClass .= ' container row gx-2';

            // Проходим по каждой опции в чекбоксе
            foreach($field->choices as &$choice) {
                // Добавляем класс к каждой опции чекбокса
                $choice['text'] = '<span class="col-6">' . $choice['text'] . '</span>';
            }
        }
    }
    return $form;
}

Объяснение:

Мы используем фильтр gform_pre_render, чтобы пройти по всем полям формы перед её отображением. Это позволяет нам напрямую манипулировать метаданными полей.
Проверяем, является ли поле чекбоксом, и добавляем необходимые CSS-классы.
Обрабатываем каждый выбор в чекбоксах, оборачивая его в дополнительный span с нужными классами.

Оптимизация кода для SEO:

Убедитесь, что ваш код хорошо документирован и оптимизирован для производительности.
Включите комментарии, которые объясняют основные шаги процесса, чтобы другие разработчики могли легко понять и поддерживать код.
Обязательно протестируйте изменения на тестовой среде, прежде чем внедрять их на производственном сайте, чтобы избежать неожиданных проблем.

Этот подход позволит добавить необходимые классы без необходимости вмешательства JavaScript, предоставляя чистое и стандартизированное решение через functions.php.