Gravity Forms 列并排答案

【问题标题】：Gravity Forms columns side by sideGravity Forms 列并排
【发布时间】：2014-12-06 04:09:52
【问题描述】：

如果您想知道如何在 Wordpress 重力表单中设置并排列。

希望这可以节省您的时间。

【问题讨论】：

标签： wordpress hook gravity-forms-plugin

【解决方案1】：

这取自here和here，并进行了简化。

首先进入表单设置，将two-column类添加到表单布局中。

然后继续在重力表格项目的开头添加分节符。将另一个分节符添加到您希望表单拆分的任何位置。然后在高级选项卡中将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;
}

这应该可以发挥作用。

【讨论】：

【解决方案2】：

如果您有 Gravity Forms 1.5 或更新版本，您可以使用“Ready Classes”。

对于 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 Documentation。

【讨论】：

如果您想拥有 3 列的任何想法。 1) 电子邮件 2) 密码（第一次） 3) 密码（重复）

【解决方案3】：

上面的奇妙解决方案.. 使用它来使您的表单响应：

.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;
}

【讨论】：