联系表 7 小部件设置

的 主插件的联系表 7 元素 是一个专门的小部件,用于集成和样式使用您体内流行的联系表单 7 插件创建的表单 元素设计。这使您可以利用 CF7 的强大功能,同时通过 Elementor 获得强大的视觉定制。

用《联系表7》要素, 您可以:

• 选择 任何现有的联系表 7 表格均来自下拉。
• 从多个中进行选择 设计变化 (风格一 通过 十一号风格).
• 控制可见性 错误消息 並 验证错误.
• 完全定制 表格容器, 输入和文本区域字段, 标签并且 提交按钮 为 正常 並 悬停 各州。
• 风格展示 错误和验证消息.

So,让我们看看如何添加和自定义这个元素。

Elementor 中的联系表 7 小部件是什么? #

Contact Form 7 Elementor 小部件是一个主插件元素,它可以在 Elementor 内部显示任何现有的 Contact Form 7 表单,并让您对其设计进行完全的视觉控制。它使 CF7 能够处理表单逻辑和电子邮件交付,同时您还可以对 Elementor 样式选项卡中的容器、输入字段、标签、提交按钮和错误消息进行样式。主插件提供了十一个设计预设(免费插件中的样式一到四,Pro 中的样式五到十一),因此您可以重新样式一个简单的 CF7 表单来匹配您的网站,而无需编写任何 CSS。它是免费的一部分 主插件小部件和扩展 库。css和elementor Pro表单小部件的概述和比较,请参阅 联系表 7 Elementor 小部件 页。

添加和配置联系表 7 元素 #

要在 Elementor 中添加样式化的联系表单 7 表单:使用 Elementor 编辑您的页面,请拖动 联系表 7 widget到画布上,从下拉中选择您的表单,选择设计变体(样式一到四是免费的),然后微调容器,字段,标签,并在其中提交按钮 风格 tab。下面的步骤详细地穿过每个部分。

请按照以下步骤在网站的任何页面上添加和配置联系表 7 元素。

1步:创建或编辑页面 #

1. 从您的 WordPress 仪表板,转到 页面 → 添加新内容 要创建新页面,您还可以选择现有页面并单击 编辑.
2. 接下来,点击“使用元素器编辑”按钮。

第 2 步:查找联系表 7 元素 #

1. Elementor 左侧面板中,使用搜索栏找到“联系表 7.”
2. 将插件拖放到页面所需的部分。

3步:自定义联系表7设置 #

放置插件后,您将在左侧面板中找到自定义部分,主要位于 内容 並 风格 选项卡。

内容选项卡 #

您可以在此处选择表单并定义错误可见性。

联系表 7: #

• 选择联系表: 从下拉列表中选择您想要显示的特定联系表 7 表格。
• 错误样式(错误消息/验证错误): 选择是否 秀 或 藏 各个字段下的通知(错误消息)和表单级验证消息(验证错误)。

设计布局: #

• 设计变体: 为表单选择预先设计的样式(风格一 通过 十一号风格).

样式选项卡 #

这是您控制形式及其元素的视觉外观的地方。

表格容器: #

• 背景类型: 设置整个表单容器的背景样式: 经典 或 梯度.
• 边框顶部颜色: 为容器的顶部边框设置颜色。
• 表格宽度 (%)/表单填充: 控制表格容器的尺寸和内部间距。

标题: #

• 颜色/对齐/排版: 样式表单的标题(如果 CF7 结构中存在)。

输入和文本区域: #

• 背景颜色/文本颜色: 设置所有输入和文本区域字段的背景和文本颜色。
• 填充: 调整字段的内部间距。
• 场宽 (%): 设置字段的水平大小。
• 边框类型/边框半径: 设置输入字段的边框样式和圆角。

标签: #

• 颜色/字体: 设置字段标签的文本颜色和字体设置。

提交按钮: #

• 按钮字体: 控制按钮文本的字体设置。
• 正常/悬停: 在两种状态下为按钮设置以下内容:
  • 背景类型
  • 文本颜色
  • 边框颜色
• 边框半径/填充: 设置按钮的圆角和内间距。

错误: #

• 错误消息(字段下): 样式显示出现在各个字段下方的通知,例如所需的字段消息。
  • 文本颜色/背景颜色/边框类型。
• 验证错误(完整表格): 样式为提交失败验证时显示的表单级消息。
  • 背景颜色/文本颜色/边框类型。

第 4 步:保存并发布您的页面 #

一旦您根据自己的喜好定制了所有内容:

1. 点“发表”按钮(如果是新页面)或“更新”(如果编辑现有页面)。
2. 测试前端的表单提交和错误消息,以确保所有样式都得到正确应用。

常见问题 #