Колонны Gravity Forms рядом

Это взято из здесь и здесь и упрощенно.

Сначала перейдите в настройки формы и добавьте класс two-column в макет формы.

Затем добавьте разрыв раздела в начале элементов Gravity Form. Добавьте еще один разрыв раздела в том месте, где вы хотите разделить форму. Затем добавьте класс gform_column в оба разрыва раздела на вкладке «Дополнительно».

После этого перейдите к своему functions.php и вставьте следующее (крючок):

function gform_column_splits($content, $field, $value, $lead_id, $form_id) {
if(!is_admin()) { // only perform on the front end
    if($field['type'] == 'section') {
        $form = RGFormsModel::get_form_meta($form_id, true);

        // check for the presence of multi-column form classes
        $form_class = explode(' ', $form['cssClass']);
        $form_class_matches = array_intersect($form_class, array('two-column', 'three-column'));

        // check for the presence of section break column classes
        $field_class = explode(' ', $field['cssClass']);
        $field_class_matches = array_intersect($field_class, array('gform_column'));

        // if field is a column break in a multi-column form, perform the list split
        if(!empty($form_class_matches) && !empty($field_class_matches)) { // make sure to target only multi-column forms

            // retrieve the form's field list classes for consistency
            $form = RGFormsModel::add_default_properties($form);
            $description_class = rgar($form, 'descriptionPlacement') == 'above' ? 'description_above' : 'description_below';

            // close current field's li and ul and begin a new list with the same form field list classes
            return '</li></ul><ul class="gform_fields '.$form['labelPlacement'].' '.$description_class.' '.$field['cssClass'].'"><li class="gfield gsection empty">';

        }
    }
}

return $content;
}

add_filter('gform_field_content', 'gform_column_splits', 100, 5);

Это закроет ul и откроет новый, который может быть расположен рядом друг с другом.

Теперь просто добавьте следующее в свои стили

.gform_wrapper.two-column_wrapper ul.gform_fields {
display: none;
}
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {
display: block;
float: left;
width: 50%;
}
.gform_wrapper.two-column_wrapper ul.gform_column li.gsection:first-child {
display: none;
}

И это должно творить волшебство.

Если у вас есть Gravity Forms 1.5 или новее, вы можете просто использовать «Готовые классы».

Для 2 столбцов: просто создайте два нужных поля рядом и добавьте пользовательский класс CSS gf_left_half в первое поле и gf_right_half во второе.

Для 3 столбцов: используйте для полей классы gf_left_ Third, gf_middle_ Third и gf_right_ Third.

Встроенные поля: используйте gf_inline для каждого поля.

Другие классы, в том числе столбцы элементов списка, см. в Документация Gravity Forms CSS Ready Classes< /а>.

фантастическое решение выше. Используйте это, чтобы сделать вашу форму отзывчивой:

.gform_wrapper.two-column_wrapper ul.gform_fields {
    display: none;
}

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {
    display: block;
}

@media screen and (min-width: 768px) {
    .gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {
        float: left;
        width: 50%;
    }
}

.gform_wrapper.two-column_wrapper ul.gform_column li.gsection:first-child {
    display: none;
}