Products
GG网络技术分享 2025-03-18 16:05 5
Contact Form 7 是一个非常受欢迎的插件，用于构建具有超过 300 万次活动安装的 WordPress 联系表单。 它支持在没有 HTML 编码的情况下构建表单。 表单可以包括验证码、文件上传和测验字段。
虽然 Contact Form 7 的默认标记和样式适用于大多数基本的联系表单，但您通常需要更改它。
我建议在添加 Contact Form 7 后不久安装的一个插件是 Joe Dolson 的 Contact Form 7：Accessible Defaults。
这改变了默认表单的结构，通过将表单标签与表单控件相关联，使其更易于访问。
它还添加了 [response] 表单上方的短代码，以便在提交表单时出现错误，它会在表单本身上方报告。
对于标准形式，插件生成的代码为：
如果您有兴趣了解有关可访问性的更多信息，请查看可访问性和 WordPress 终极指南。
如果您想要一种快速的表单样式，那么有些插件可以完成繁重的工作，因此您不必这样做。
Contact Form 7 Style 有多种预设样式可供选择，包括情人节和圣诞节样式。
对于二十五名主题用户，还有一种风格可以匹配。
要应用样式，请转到 接触样式 > 快速编辑，选中您要应用样式的表单，然后单击 更新.
添加您自己的样式并通过转到 联系方式 > 添加新的.
使用此工具，您可以自定义表单的几乎任何方面，包括：
当您向（例如）填充添加值时，编辑器会明智地复制您选择的值，为顶部、右侧、底部和左侧填充生成相同的值。 当然，您可以调整这些值。 还有一个下拉菜单可以在像素、em 或 % 之间进行选择。
您可以创建的自定义样式也延伸到错误和成功消息。
预览区在屏幕底部； 向下滚动以查看您的更改。
这是我完成的表格，使用 Cherry Swash 字体：
要使用 Contact Form 7 Skins，请创建一个新的联系表单并将页面向下滚动到 Skins 部分。 在那里，您可以为表单选择模板和样式。
模板包括活动、注册和建议的表格。
这是使用 25 主题的 Topaz 样式的调查表单的外观。
此插件样式以 Material Design 样式形成。
该插件建议您删除默认表单并使用其简码。
这是 Hestia 主题的示例。 当光标移动到特定的表单域时，请注意浮动标签。
插件的 Pro 版本中提供了样式定制器。
大多数情况下，Contact Form 7 将继承所选主题的样式。 请参阅珊瑚深色主题的此示例。
这是未应用样式的表单。 它继承了 ColorMag 主题的蓝色按钮颜色。
我首先上传一张照片用作表单的背景图像，并将表单标签的代码从灰色更改为白色，并带有蓝色文本阴影。
接下来的更改是增加表单标签和表单域之间的边距，更改提交按钮悬停颜色并在光标进入表单域时添加边框。
提交表单时显示的错误/成功消息也需要更改，以便正确显示。
提交表单时旋转的 GIF 并没有很好地显示出来，所以我在 Loading.io 找到了一个替代方案，并用 CSS 引用了它。
这是最终形式：
这是代码：
作为一个免费插件，Contact Form 7 非常强大，尤其是当您开始使用 CSS 对其进行样式设置时。 希望本教程中的插件可以帮助您开始使用自己的样式。 这些插件的伟大之处在于它们是免费的，因此您可以在提交之前试一试，看看它们是如何工作的。
如果您有兴趣将事情提升到一个新的水平，请查看我们关于如何进一步扩展联系表的帖子。
标签：Demand feedback
