如何将联系表 7 添加到 Elementor
你需要元素,免费 联系表 7 插件和免费的主插件。
- 安装联系表 7 并在下面创建您的表单 联系方式,添加新内容包含您需要的字段和电子邮件设置。
- 安装并激活 WordPress.org 的主插件.
- 使用 Elementor 编辑您的页面并搜索小部件面板 联系表 7。选择带有主插件徽章的。
- 在 选择联系表,选择你的表格。
- 在风格中,选择设计变体(风格一到四是免费的)。
- 调整容器、字段、标签、按钮和错误,然后在实时页面上提交测试消息。
每个设置都包含在 联系表 7 小部件设置 指南。
设计变体:4 个免费,7 个专业版
在风格上, 设计布局,选择一个 设计变化、风格一到风格四在免费插件中,风格五到风格十一需要 硕士插件专业版。每个变体将字段和按钮一起样式化,之后您可以在下面的部分中更改任何部分。
- 页面上的每个小部件都可以使用自己的变体,因此页脚表单和联系页面表单可能看起来不同。
- 选择下面的"内容"选项卡中的表单 选择联系表。列表显示了您在联系表 7 中创建的表格。
- 如果联系表 7 未处于活动状态,则小部件会显示通知而不是表单。
造型联系表 7:Widget vs CSS vs Elementor Pro 表格
Elementor站点上获得一个好看的表单,常见的三种方法,下面是他们如何比较。
表格容器和标题
表格容器 设置颜色、渐变或图像背景,a 边框顶部颜色, 表格宽度 並 表格填充. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 标题 如果您的表格有,部分会设置表格标记内标题的颜色、对齐方式和排版。
- 将窗体宽度设置为低于 100%,以将窄窗体居中在宽柱中。
- 顶部边框颜色在形式上方起到简单的重音作用。
- 填充物为表格房间提供一张彩色卡片。
字段和标签
输入和文本区域 设置背景颜色、文本颜色、填充、 场宽的、边框和边框半径的文本字段、文本区域和选择菜单。 标签 有自己的颜色和排版,因此字段名称可以与访问者键入的名称区分开来。
- 字段宽度以百分比表示,适用于以 CF7 表单标记构建的两列布局。
- 复选框、单选按钮和文件输入可保持您的主题或 CF7 样式。
- 保持字段背景和文本之间足够的对比度以方便访问。
提交按钮和错误消息
提交按钮 has 排版加普通和悬停选项卡:普通的背景, 文字颜色和边框颜色, 悬停的背景和文字颜色, 边框宽度, 边框颜色, 半径和填充设置在选项卡下方。的 错误 部分样式 错误消息 田野下和 验证错误 对于整个表格,您可以在"内容"选项卡中显示或隐藏它们中的每一个。
- 默认按钮为紫色(#6e00e9),带有白色文本,因此请设置您的品牌颜色。
- 隐藏字段错误会使表单更整洁,但访问者随后会依赖表单级别消息。
- 该按钮没有图标控制,要添加一个,请参阅 如何将"字体"图标添加到"联系表 7"提交按钮.
联系表 7 的常见问题
如何将其连接到现有的联系表 7 表格?
在"内容"选项卡中,打开 选择联系表。它列出了您在联系表单7中创建的每个表单。选择一个,小部件会显示它与您选择的设计。
我的表格仍然会发送电子邮件并按照联系表 7 中的配置进行工作吗?
是。widget只更改表单的外观。字段,电子邮件设置,消息和垃圾邮件保护留在联系表7中,并在您在那里设置它们时工作。
联系表 7 小部件免费吗?
是的,该小部件是免费 Master Addons 插件的一部分,Style One 到 Style Four 是免费的。 Style Five 到 Style Eleven 需要 硕士插件专业版.联系表7本身也是免费的。
我需要联系表 7 插件吗?
是的。此小部件会显示联系表 7 表单,因此必须安装免费的联系表 7 插件并激活。如果没有它,小部件将显示 “联系表 7 未激活”通知。
如果我在联系表 7 插件中添加新字段会发生什么?
Contact Form 7 中编辑表单并保存。小部件显示更新的表单, 您的字段和标签样式适用于新字段, 因为它们针对的是所有文本字段和标签。如果预览不更新, 则刷新 Elementor 编辑器。
我需要了解 CSS 才能对我的表单进行风格设计吗?
No for 颜色、边框、间距和排版,这些都是面板控件,表单内部的布局,比如将两个字段并排放在一起,来自你的 Contact Form 7 表单标记。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
