如何在 WordPress 中使用 CSS 为 Contact Form 7 表单设置样式

更新于 2026年3月25日

想让你的 WordPress 表单和你网站的其他部分一样精美吗？使用 Contact Form 7，你可以通过 CSS 完全掌控表单的外观。本指南将带你逐步学习如何为 Contact Form 7 表单设置样式，让你为访客打造无缝且具有品牌感的体验。

为什么要为 Contact Form 7 表单设置样式？

Contact Form 7 是最受欢迎的 WordPress 表单插件之一，但其默认外观较为基础。在经典 WordPress 主题中自定义样式可以让你：

匹配你网站的品牌风格
提升可用性和可访问性
让表单更具吸引力和专业感

步骤 1：确定表单的 CSS 选择器

在开始设置样式之前，你需要知道哪些 CSS 选择器可以选中你的表单元素。

每个 Contact Form 7 表单都包裹在一个唯一的类 .wpcf7 中
输入框、文本区域和提交按钮等单独元素使用标准 HTML 标签

步骤 2：为你的 WordPress 网站添加自定义 CSS

你可以通过两种主要方式添加 CSS：

通过自定义器：
前往 外观 > 自定义 > 附加 CSS 并粘贴你的样式。

注意：如需更高级的自定义，请将 CSS 添加到子主题的 style.css 文件中。

步骤 3：编写你的自定义 CSS

以下是一些常见示例，帮助你入门，以“文本”和“提交”表单组件为例：

为所有 Contact Form 7 表单设置样式

.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}

.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}

CSS 中的伪类（如 :hover）允许你根据元素的状态或用户交互为其设置样式。例如，:hover 伪类会在用户将鼠标悬停在按钮或字段上时应用样式。这通常用于高亮按钮或在悬停时更改颜色，使表单更具交互性和视觉吸引力。其他有用的伪类包括 :focus（输入框被选中时）和 :active（元素被点击时）。使用伪类有助于提升用户体验，为访客与表单交互时提供即时反馈。

针对特定表单设置样式

每个表单都有唯一的 ID，如 #wpcf7-f123-o1。使用它可以只为该表单设置样式：

#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
将 f123-o1 替换为你实际表单的 ID。你可以通过查看嵌入了 Contact Form 7 表单的页面，右键点击表单并选择浏览器中的“检查”或“检查元素”来找到表单的唯一 ID。查找带有 .wpcf7 类的 <div>，ID 会以 id="wpcf7-f123-o1" 的形式出现在 HTML 代码中。使用该 ID 作为 CSS 选择器，只针对该表单设置样式。

步骤 4：使用 Contact Form 7 的内置类

Contact Form 7 会自动为元素添加类，使选择目标更加简单。例如：

.wpcf7-form-control – 所有表单控件
.wpcf7-submit – 提交按钮

你还可以在表单编辑器中添加自定义类，以获得更多控制。

示例

.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}

.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}

步骤 5：预览并调整

保存 CSS 后，刷新你的网站以查看更改。使用浏览器的检查工具实时调整样式，然后再将其复制到你的网站。更改后请务必清除网站缓存，以便访客能看到最新效果。

以下是演示网站表单的前后对比示例，我们使用了第 3 步中的 CSS 代码，将每个表单字段的边框变为蓝色。

更好表单样式的小贴士

保持可访问性： 确保良好的颜色对比和易读的字体大小
使用间距： 添加内边距和外边距，让页面整洁有序
突出错误： 用明显的颜色（如红色）为错误信息设置样式，帮助用户纠正错误
移动端测试： 确保你的表单在所有设备上都能良好显示

故障排查

如果你的样式没有生效，请尝试以下步骤：

清除浏览器和网站缓存 – 有时缓存文件会阻止新 CSS 显示。如果你使用了缓存插件或托管服务，也要清除这些缓存。
检查 CSS 优先级问题 – 如果样式没有被应用，尝试让选择器更具体，以覆盖已有样式。
确保你编辑的是正确的 CSS 文件或区域 – 请仔细检查你是否在正确的位置添加了代码，比如附加 CSS 面板、子主题的 style.css 或自定义 CSS 插件。
检查 CSS 类名拼写或错误 – 查找拼写错误的类名、不必要的空格或错误使用的类。同时确认你要设置的类确实存在于表单的 HTML 中。
检查重复或冲突的类 – 确保你使用的类没有在其他地方被应用了不同的样式，否则可能会覆盖你的更改。
遵循通用最佳实践 – 为类命名清晰一致，每条 CSS 规则以分号结尾，并始终用大括号（}）正确关闭代码块。

仔细检查你的代码是否存在这些常见问题，有助于确保自定义样式能正确显示在你的网站上。

示例：Contact Form 7 表单的完整自定义 CSS

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}

这是一个使用上述 CSS 代码设置样式的表单示例。该 CSS 代码自定义了 Contact Form 7 表单中多个关键元素的外观。它为所有文本字段、邮箱字段和文本区域设置了浅灰色边框、圆角、舒适的内边距和统一的宽度，呈现出简洁现代的外观。

该代码还为提交按钮设置了绿色背景、白色文字、圆角和加粗、易读的字体。当用户将鼠标悬停在提交按钮上时，背景色会变为更深的绿色，带来交互反馈。

添加 CSS：经典主题与区块主题

本指南中使用 CSS 为 Contact Form 7 表单设置样式的步骤适用于 WordPress 的经典主题。经典主题（如流行的 Astra）使用自定义器，你可以在“附加 CSS”部分轻松添加自定义 CSS，从而方便地设置表单样式并实时查看更改。

但如果你的网站使用的是区块主题（有时称为全站编辑或 FSE 主题），流程会有所不同。区块主题默认并不总是包含自定义器或“附加 CSS”字段。你需要使用站点编辑器进行设计更改。虽然你可以调整全局样式（如颜色、排版和布局），但在界面中添加任意自定义 CSS 并不总是可用。

如果你正在使用区块主题该怎么办

打开 WordPress 仪表盘，前往外观 > 编辑器（站点编辑器）。
在站点编辑器中，查找样式面板（半阴影圆圈图标）。
部分区块主题现在在样式面板中提供“附加 CSS”选项，但这取决于你的主题和 WordPress 版本。
如果没有看到添加自定义 CSS 的选项，你可以使用 WPCode 等插件在全站范围内添加自定义 CSS。WPCode 对新手友好，适用于任何主题，即使你的主题不支持在界面中直接编辑 CSS，也能确保你为表单设置样式。请注意，安装该插件可能会影响你网站上其他已有表单的样式。