如果您想知道如何在 WordPress 重力形式中拥有并排的列。
首先转到“表单设置”并将类
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;
}
这应该会产生魔力。
如果您有 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。
上面很棒的解决方案..用它来使您的表单响应:
.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;
}