GG资源网

3 个用于在 WordPress 中自定义联系表 7 表单的最佳插件

Contact Form 7 是一个非常受欢迎的插件,用于构建具有超过 300 万次活动安装的 WordPress 联系表单。 它支持在没有 HTML 编码的情况下构建表单。 表单可以包括验证码、文件上传和测验字段。

虽然 Contact Form 7 的默认标记和样式适用于大多数基本的联系表单,但您通常需要更改它。

改进 Contact Form 7 的可访问性:快速说明

我建议在添加 Contact Form 7 后不久安装的一个插件是 Joe Dolson 的 Contact Form 7:Accessible Defaults。

这改变了默认表单的结构,通过将表单标签与表单控件相关联,使其更易于访问。

它还添加了 [response] 表单上方的短代码,以便在提交表单时出现错误,它会在表单本身上方报告。

对于标准形式,插件生成的代码为:

加载要点 5d72677b8908c169c16a4cd87138963b

如果您有兴趣了解有关可访问性的更多信息,请查看可访问性和 WordPress 终极指南。

带有插件的 Easy Contact Form 7 样式

如果您想要一种快速的表单样式,那么有些插件可以完成繁重的工作,因此您不必这样做。

联系表格 7 样式

Contact Form 7 Style 有多种预设样式可供选择,包括情人节和圣诞节样式。

Contact Form 7 Style 中可用的 6 种样式
Contact Form 7 Style 插头中提供的六种样式。

对于二十五名主题用户,还有一种风格可以匹配。

要应用样式,请转到 接触样式 > 快速编辑,选中您要应用样式的表单,然后单击 更新.

情人节风格联系表
情人节风格联系表。

联系表格 7 样式自定义样式

添加您自己的样式并通过转到 联系方式 > 添加新的.

使用此工具,您可以自定义表单的几乎任何方面,包括:

  • 边距
  • 边框
  • 填充
  • 颜色和背景——包括悬停状态
  • 字体——包括一系列谷歌字体

当您向(例如)填充添加值时,编辑器会明智地复制您选择的值,为顶部、右侧、底部和左侧填充生成相同的值。 当然,您可以调整这些值。 还有一个下拉菜单可以在像素、em 或 % 之间进行选择。

您可以创建的自定义样式也延伸到错误和成功消息。

预览区在屏幕底部; 向下滚动以查看您的更改。

这是我完成的表格,使用 Cherry Swash 字体:

联系表格 7 樱桃花饰
使用 Cherry Swash 字体联系 Form 7 样式。

联系表格 7 皮肤

要使用 Contact Form 7 Skins,请创建一个新的联系表单并将页面向下滚动到 Skins 部分。 在那里,您可以为表单选择模板和样式。

模板包括活动、注册和建议的表格。

Contact Form 7 Skins 中的一些可用模板
Contact Form 7 Skins 中的一些可用模板
Contact Form 7 Skins 中的一些可用样式
Contact Form 7 Skins 中的一些可用样式

这是使用 25 主题的 Topaz 样式的调查表单的外观。

接触 Form 7 皮肤
接触 Form 7 皮肤

联系表格 7 的材料设计

此插件样式以 Material Design 样式形成。

该插件建议您删除默认表单并使用其简码。

这是 Hestia 主题的示例。 当光标移动到特定的表单域时,请注意浮动标签。

Contact Form 7 示例的材料设计
Contact Form 7 示例的材料设计

插件的 Pro 版本中提供了样式定制器。

造型联系表 7 以匹配您的主题

大多数情况下,Contact Form 7 将继承所选主题的样式。 请参阅珊瑚深色主题的此示例。

Contact Form 7 继承了深色表单字段和带有来自 Coral Dark 主题的浅色标签的按钮
Contact Form 7 继承了深色表单字段和带有来自 Coral Dark 主题的浅色标签的按钮

ColorMag 主题的定制联系表 7 设计

这是未应用样式的表单。 它继承了 ColorMag 主题的蓝色按钮颜色。

ColorMag 主题中的 Contact Form 7,未应用样式
ColorMag 主题中的联系表格 7,未应用样式。

我首先上传一张照片用作表单的背景图像,并将表单标签的代码从灰色更改为白色,并带有蓝色文本阴影。

接下来的更改是增加表单标签和表单域之间的边距,更改提交按钮悬停颜色并在光标进入表单域时添加边框。

提交表单时显示的错误/成功消息也需要更改,以便正确显示。

提交表单时旋转的 GIF 并没有很好地显示出来,所以我在 Loading.io 找到了一个替代方案,并用 CSS 引用了它。

这是最终形式:

ColorMag 主题的自定义颜色联系表 7
ColorMag 主题的自定义颜色联系表 7

这是代码:

加载要点 d4b4fd201b1fc65cdce55edcdb2bff4d

使用正确的工具自定义联系表 7

作为一个免费插件,Contact Form 7 非常强大,尤其是当您开始使用 CSS 对其进行样式设置时。 希望本教程中的插件可以帮助您开始使用自己的样式。 这些插件的伟大之处在于它们是免费的,因此您可以在提交之前试一试,看看它们是如何工作的。

如果您有兴趣将事情提升到一个新的水平,请查看我们关于如何进一步扩展联系表的帖子。

标签:

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 3 个用于在 WordPress 中自定义联系表 7 表单的最佳插件

发表回复

CAPTCHAis initialing...