Lots of WordPress Themes are based on Bootstrap – and while it is the general approach to use CSS rules to style your HTML content, it is also possible the other way around – with many benefits.
When using a well-known framework which provides general styles for all the important components of a website, it can be time-consuming to apply the same styles to third-party plugins which (obviously) have not been written with a framework
in mind.
This is perfectly fine, but if you’re using Bootstrap for your WordPress theme, you will certainly love the fact that you do not need to write CSS rules for the Contact Form 7 plugin any longer.
It will all look like Bootstrap from the beginning so that it fits into your website design.
If you’re not using Bootstrap, this plugin is useless for you – but maybe you’re just having an idea how you can adjust another popular WordPress plugin to integrate with another well-written CSS framework.
Here you find additional settings which are part of the Bootstrap for Contact Form 7 plugin.
在这里您可以找到其他设置,这些设置是Bootstrap for Contact Form 7插件的一部分。
If you want to learn more about the additional settings of the original Contact Form 7 plugin, please visit this page
如果您想了解有关原始Contact Form 7插件的其他设置的更多信息,请访问此页面
.
p>
blockquote>
You can adjust several form properties (properties that affect an entire form, not just a single field of it) to give your forms the appearance you want.
您可以调整几个表单属性(影响整个表单的属性,而不仅仅是单个表单域),以使表单具有所需的外观。
Here is a list of the properties, what they do and their possible values:
这是属性的列表,它们的作用及其可能的值: p>
layout
– adjusts the form’s layout (note that in most cases the inline form will need additional styling to look good);-
layout code> –调整表单的布局(请注意,在大多数情况下,内联表单将需要其他样式才能看起来不错);valid values: ‘default’, ‘inline’, ‘horizontal’;
有效值:“默认”,“内联”,“水平”;
default value: ‘default’
默认值:“默认” li>
size
– adjusts the size of all input fields;-
size code> –调整所有输入字段的大小;valid values: ‘default’, ‘small’, ‘large’;
有效值:“默认”,“小”,“大”;
default value: ‘default’
默认值:“默认” li>
group_layout
– adjusts the layout of checkbox and radio groups;-
group_layout code> –调整复选框和单选组的布局;valid values: ‘default’, ‘inline’, ‘buttons’;
有效值:“默认”,“内联”,“按钮”;
default value: ‘default’
默认值:“默认” li>
group_type
– adjusts the color of checkbox and radio groups with buttons layout;-
group_type code> –使用按钮布局调整复选框和单选组的颜色;valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’;
有效值:“默认”,“主要”,“成功”,“信息”,“警告”,“危险”;
default value: ‘default’
默认值:“默认” li>
submit_size
– adjusts the size of the submit button;-
submit_size code> –调整提交按钮的大小;valid values: ‘default’, ‘small’, ‘large’ or an empty string to force it to have the size defined in the size
form property;
有效值:“默认”,“小”,“大”或一个空字符串,以强制其具有在 size code>表单属性中定义的大小;default value is an empty string
默认值为空字符串 li>
submit_type
– adjusts the color of the submit button;-
submit_type code> –调整提交按钮的颜色;valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’;
有效值:“默认”,“主要”,“成功”,“信息”,“警告”,“危险”;
default value: ‘primary’
默认值:“主要” li>
required_html
– adjusts the HTML output to append to required fields’ labels;-
required_html code> –调整HTML输出以附加到必填字段的标签;valid values: any HTML output;
有效值:任何HTML输出;
default value: *
默认值: * span> code> li>grid_columns
– allows you to override the total grid column count of Bootstrap (you might only need to adjust this if you’re using a custom version of Bootstrap);-
grid_columns code> –允许您覆盖Bootstrap的总网格列数(如果您使用的是Bootstrap的自定义版本,则可能只需要对此进行调整);valid values: any integer greater than 1;
有效值:任何大于1的整数;
default value: 12
默认值:12 li>
label_width
– adjusts the form’s label width (applies only to horizontal layout);-
label_width code> –调整表单的标签宽度(仅适用于水平布局);valid values: any integer between 1 and the value of grid_columns
minus 1;
有效值:1到 grid_columns code>的值减1之间的任何整数;default value: 3
默认值:3 li>
breakpoint
– adjusts the responsive breakpoint (applies only to horizontal layout);-
断点 code> –调整响应断点(仅适用于水平布局);valid values: ‘xs’, ‘sm’, ‘md’, ‘lg’;
有效值:“ xs”,“ sm”,“ md”,“ lg”;
default value: ‘sm’
默认值:“ sm” li>
ul>
There are four methods to adjust the above properties: The easiest one is to use the “Additional Settings” tab when editing a form in Contact Form 7 and insert any property and its desired value there, one per line.
有四种方法可以调整上述属性:最简单的一种方法是在Contact Form 7中编辑表单时使用“其他设置”选项卡,然后在其中插入任何属性及其所需的值,每行一个。
For example:
例如: p>
layout:horizontal 布局:水平size:large
尺寸:大
group_layout:inline
group_layout:inline
code> pre>
Alternatively you can use the filter cf7bs_form_{{FORM_ID}}_properties
where {{FORM_ID}}
must be replaced by the ID of the form you would like to modify
或者,您可以使用过滤器 cf7bs_form _ {{FORM_ID}} _ properties code>,其中 {{FORM_ID}} code>必须替换为您要修改的表单的ID (you find that number in the overall form's shortcode).
(您可以在整体表单的简码中找到该数字)。
An array of all the properties and their values is passed to that function so that you can easily adjust them.
所有属性及其值的数组将传递给该函数,以便您可以轻松调整它们。
Example (in this case we would adjust the contact form with the ID 3):
示例(在这种情况下,我们将调整ID为3的联系表格): p>
function my_custom_form_properties( $properties ) { function my_custom_form_properties($ properties){ $properties['layout'] = 'horizontal';
$ properties ['layout'] ='水平';
$properties['size'] = 'large';
$ properties ['size'] ='大';
$properties['group_layout'] = 'inline';
$ properties ['group_layout'] ='内联';
return $properties;
返回$ properties;
}
}
add_filter( 'cf7bs_form_3_properties', 'my_custom_form_properties' );
add_filter('cf7bs_form_3_properties','my_custom_form_properties');
code> pre>
The third way does something slightly different from the other two since it does not change a specific form’s properties, but the default properties for all forms.
第三种方法与其他两种方法有所不同,因为它不会更改特定表单的属性,而是所有表单的默认属性。
To do that, you should use the filter cf7bs_default_form_properties
which works exactly like the other filter mentioned above.
为此,您应该使用过滤器 cf7bs_default_form_properties code>,该过滤器的工作原理与上述其他过滤器完全相同。 p>The fourth method is different from the others as it allows to override the form settings on a per-field basis.
第四种方法与其他方法不同,因为它允许逐字段覆盖表单设置。
You can add any of the setting names plus its intended value as a shortcode attribute for any field to make this field behave differently from the form’s setting.
您可以将任何设置名称及其预期值添加为任何字段的shortcode属性,以使该字段的行为不同于表单的设置。
This can be especially helpful if you need to create advanced form layouts like when you need multiple fields on the same line.
如果您需要创建高级表单布局(例如在同一行上需要多个字段时),这将特别有用。
For example, you could do the following to display two fields in one row, even though the form’s layout
is set to ‘default’:
例如,即使表单的 layout code>设置为“默认”,您也可以执行以下操作以在一行中显示两个字段: p> [text user_first_name id:user-first-name layout:none][/text]
-EOF-
AI助手支持GPT4.0