Bootstrap for Contact Form 7 – WordPress plugin WordPress插件下载

点击下载

联系表格7的引导程序

插件描述

联系表格7的引导程序修改了流行的联系表格的所有输出7插件与流行的CSS框架 Bootstrap 的当前版本3完全兼容。这对于您作为Bootstrap用户意味着什么:不需要额外的CSS规则 – 从现在开始,Contact Form 7可以与整个Bootstrap设计无缝集成。甚至可以通过Contact Form 7的“其他设置”选项卡使用不同的表单布局。

此插件是联系表格7的插件。
该插件需要激活联系表格7,否则不会改变任何内容。此外,您应该将它与基于Bootstrap的WordPress主题结合使用,否则表单可能看起来很奇怪(无论如何使用此插件都没有意义)。

用法

联系表格7的Bootstrap本身不提供其他选项,因此您可以像以前一样继续使用联系表格7(几乎)。

该插件不会破坏表单的外观,但建议调整联系表单短代码以获得完美结果:通常,您不应再使用HTML标记来包装字段短代码。它们已经包含完整的Bootstrap-ready标记,包括显示标签。请阅读设置指南以获得快速介绍。

高级功能

该插件带来了一些额外的有用功能,可以进一步增强您的表单:

表单布局可以更改为水平或内嵌,表单的输入大小可以全局更改为checkbox和无线电组可以每行显示一个,inline或者Bootstrap buttonstext输入和textareas支持Bootstrap的输入组功能,用于在文本输入之前或之后添加内容,textareas可以显示字符数(来自Contact Form 7的[count]短代码)内联验证码输入字段可以使用内联来显示验证码图像在联系表单的URL中获取参数,可以预定义字段值

上述功能在其他注释页面上有详细说明。

插件背后的基本理念

很多WordPress主题基于Bootstrap – 虽然它是使用CSS规则来设计HTML内容样式的一般方法,但也可以采用其他方式周围 – 有很多好处。

当使用一个众所周知的框架为网站的所有重要组件提供通用样式时,将相同的样式应用于(显然)尚未编写的第三方插件可能非常耗时考虑到框架。这非常好,但如果您使用Bootstrap作为WordPress主题,您肯定会喜欢这样一个事实,即您不再需要为Contact Form 7插件编写CSS规则。它从一开始就看起来像Bootstrap,因此它适合您的网站设计。如果你没有使用Bootstrap,这个插件对你来说没用 – 但也许你只是想知道如何调整另一个流行的WordPress插件以与另一个编写良好的CSS框架集成。

高级功能

其他设置

您可以在此处找到其他设置,这些设置是Contactstform 7插件的Bootstrap的一部分。如果您想了解有关原始Contact Form 7插件的其他设置的更多信息,请访问此页

您可以调整多个表单属性(影响整个表单的属性,而不仅仅是单个字段它)给你的表格你想要的外观。以下是属性列表,它们的作用及其可能的值:

layout – 调整表单的布局(请注意,在大多数情况下,内联表单需要额外的样式才能看起来很好);有效值:’default’,’inline’,’horizo​​ntal’;默认值:’default’ size – 调整所有输入字段的大小;有效值:’default’,’small’,’large’;默认值:’default’ group_layout – 调整复选框和广播组的布局;有效值:’default’,’inline’,’buttons’;默认值:’default’ group_type – 使用按钮布局调整复选框和单选按钮组的颜色;有效值:’默认’,’主要’,’成功’,’信息’,’警告’,’危险’;默认值:’default’ submit_size – 调整提交按钮的大小;有效值:’default’,’small’,’large’或空字符串,以强制它在 size 表单属性中定义大小;默认值为空字符串 submit_type – 调整提交按钮的颜色;有效值:’默认’,’主要’,’成功’,’信息’,’警告’,’危险’;默认值:’primary’ required_html – 调整HTML输出以附加到必填字段的标签;有效值:任何HTML输出;默认值:< span class =“required”> *< / span> grid_columns – 允许您覆盖Bootstrap的总网格列数(如果您可能只需要调整此值)’使用自定义版本的Bootstrap);有效值:任何大于1的整数;默认值:12 label_width – 调整表单的标签宽度(仅适用于水平布局);有效值:1之间的任何整数和 grid_columns 减1的值;默认值:3 断点 – 调整响应断点(仅适用于水平布局);有效值:’xs’,’sm’,’md’,’lg’;默认值:’sm’

有四种方法可以调整上述属性:最简单的方法是在联系表7中编辑表单时使用“其他设置”选项卡并在其中插入任何属性及其所需的值,一个每行。例如:

 布局:horizo​​ntalsize:largegroup_layout:inline  

或者您可以使用过滤器 cf7bs_form _ {{FORM_ID}} _ properties 其中 {{FORM_ID}} 必须替换为您要修改的表单的ID(您可以在整个表单的短代码中找到该数字)。将所有属性及其值的数组传递给该函数,以便您可以轻松调整它们。示例(在这种情况下,我们将使用ID 3调整联系表单):

  function my_custom_form_properties($ properties){$ properties ['layout'] ='horizo​​ntal'; $ properties ['size'] ='大'; $ properties ['group_layout'] ='内联'; return $ properties;} add_filter('cf7bs_form_3_properties','my_custom_form_properties');  

第三种方式与其他两种方式略有不同,因为它不会更改特定表单的属性,而是更改所有表单的默认属性。为此,您应该使用过滤器 cf7bs_default_form_properties ,它与上面提到的其他过滤器完全相同。

第四种方法与其他方法不同,因为它允许在每个字段的基础上覆盖表单设置。您可以将任何设置名称及其预期值添加为任何字段的短代码属性,以使此字段的行为与表单的设置不同。如果您需要创建高级表单布局(例如在同一行上需要多个字段时),这将特别有用。例如,您可以执行以下操作以在一行中显示两个字段,即使表单的布局设置为“default”:

 < div class =“form -group row“> < div class =“col-md-6”>< label for =“user-first-name”>名字< / label> [text user_first_name id:user-first-name layout:none] [/文本] LT; / DIV> < div class =“col-md-6”>< label for =“user-last-name”>姓氏< / label> [text user_last_name id:user-last-name layout:none] [/文本] LT; / DIV>< / DIV>  

请注意,自定义表单过滤器优先于admin中定义的属性,而默认过滤器仅用作后备。

输入组

所有文本输入字段均支持Bootstrap提供的输入组功能。要使用它,请在任何text / email / url / tel输入短代码的内容中添加类似短代码的构造(几乎,但必须使用花括号)。示例:

  [text twitter-username] {input_before} @ {/ input_before}您的Twitter句柄[/ text]  

请注意 input_before input_after 也可以添加到textareas。在这种情况下,内容将分别直接显示在textarea的上方或下方。

提交按钮对齐

提交按钮可以左对齐,居中对齐或右对齐,以适合您的表单所需的外观。只需提供对齐选项’left’,’center’或’right’作为值。示例:

  [提交对齐:右“发送”]  

内联字符计数

联系表单7提供 [计数] 短代码,用于显示一个数字,表示已输入的字符数或特定输入字段中剩余的字符数。虽然使用它本身看起来很丑陋。但是猜猜看,你也可以通过在任何text / email / url / tel / textarea输入中添加 include_count 选项来调整它。您也可以选择为该选项指定一个值,该值可以包括计数器的定位(“之前”或“之后”)和计数方向(“向上”或“向下”)。提醒一下,当选择’down’时,请确保给输入元素一个最大长度,否则没有任何关系。示例:

  [text your-text maxlength:80 include_count:after:down]您的文本[/ text]  

干得好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注