如何使用 Elementor 创建联系表单

使用 Elementor 创建联系表单

使用 Elementor 创建联系表单可以通过使用 Elementor Pro 中的表单小部件来实现。只需将表单小部件从编辑器面板拖到您的页面，然后使用控件即可在您的网站上创建美观且响应灵敏的表单。

编辑您的表格

在编辑器面板中，您可以创建和编辑您希望在表单中捕获的所有字段。表单小部件支持大多数流行的字段类型，例如文本、文本区域、单选按钮、选择器等。如果需要，这些字段也可以设置为必填。

您可以通过设置列宽布局来设置表单样式以使用同一行上的字段。 

表单内容content设置

表单字段Form Fields

Elementor 表单小部件的此部分允许您添加和管理将包含在表单中的每个表单字段。除了手动添加内容之外，许多选项还使用动态标签。这些标签允许您检索 WordPress 数据，或从插件源（例如高级自定义字段）或 WooCommerce 产品中检索数据。能够使用动态数据的项目将在字段输入旁边有“堆栈”图标。

表单名称– 为表单命名。

表单字段– 表单中的字段列表。您可以根据需要复制、添加或删除字段。您可以拖放来更改它们的顺序。

单击某个字段可查看其设置。

1. 类型– 选择您想要的字段类型
2. 标签label– 字段的名称，显示在表单和您从用户收到的电子邮件上。
3. 占位符placeholder– 字段的前端显示名称。
4. 必填– 将其打开以将该字段设置为必填字段。
5. 列宽– 允许您设置字段的宽度。如果您想要一个表格在一行中有两个字段 – 将每个字段设置为 50%。

字段类型

1. 文本– 一个简单的文本字段。即名称
2. 电子邮件– 电子邮件类型。包括电子邮件验证
3. 文本区域– 文本区域类型。您可以设置行数
4. URL – 网站 URL 字段
5. Tel – 电话号码类型
6. 收音机radio– 收音机类型。单选。您可以滑动内联列表以获得水平样式
7. 选择– 选择类型。选项下拉列表。可以设置为多选。
8. 复选框– 复选框类型。检查一个或多个选项。您可以滑动内联列表以获得水平样式。
9. 接受– 添加条款复选框供用户接受
10. Number – 数字类型
11. 日期– 添加日期选择器字段
12. 时间– 添加时间选择器字段
13. 文件上传– 允许您的用户上传文件
14. mot de passe– 添加密码字段
15. HTML – 添加 HTML 字段
16. cacher– 添加隐藏字段。对用户隐藏，但对管理员可见
17. reCAPTCHA – 添加 reCAPTCHA。reCAPTCHA 验证用户不是机器人
18. 蜜罐Honeypot- 将蜜罐添加到您的表单中（重点）。蜜罐是一个隐藏字段，旨在作为填写表单的垃圾邮件机器人的诱饵。人类看不到这个字段，所以他们不会填写它。因为机器人无法判断该字段是隐藏的，所以它会填写它。如果提交时蜜罐字段不为空，则该表单显然是由机器人填充的垃圾邮件提交，将被自动拒绝。

提交按钮button

1. 大小– 设置提交按钮的大小
2. 列宽 – 设置按钮的宽度
3. 对齐方式——设置对齐方式

步骤按钮

1. 下一步：输入您想要显示的文字
2. 上一篇：输入您想要显示的文字

提交按钮

1. 提交：选择“提交”按钮上显示的文本
2. 图标– 从 Font Awesome 图标列表中添加图标或上传自定义 SVG
3. 按钮 ID：通过在字段中输入值来为按钮分配 ID

提交后的操作Action after submit

用户提交表单后，然后呢？

初次使用表单设计者的一个常见问题是：“我已经设置了 Elementor 表单，但提交后没有任何反应。为什么？»

答案通常是：“您还没有设置“提交后”操作。»

提交 Elementor 表单后，您将需要执行一项或多项操作，而每项操作都需要进行少量设置。一些常见的操作包括：

• 将表单结果通过电子邮件发送到一个或多个电子邮件地址。
• 将用户重定向到“谢谢”页面。
• 将订阅者信息添加到新闻通讯自动回复服务中
• 将用户信息添加到 CRM
• 将表单数据发送到 Slack 或 Discord 频道
• 打开或关闭弹出窗口。

Elementor 表单操作为您提供强大的选项。您可以连接第 3 方服务（例如 Mailchimp、Drip、Hubspot、Slack 或 Convertkit）来处理表单信息。Elementor 内置了这些以及其他几个服务集成，但您不仅限于仅使用内置集成进行连接。您的表单还可以通过 Webhook 操作与 Zapier 等服务连接。Zapier 连接到 1000 多个其他服务，并充当您的表单和这些服务之间的桥梁。请在此处阅读有关将 Elementor 与 Zapier 结合使用的详细指南。

提交后的操作详解

通过在“添加操作”字段内单击来添加新操作。这将显示可供选择的可用操作列表。

通过电子邮件发送结果

选择电子邮件操作。这将添加一个电子邮件选项卡。

单击“电子邮件”选项卡打开其选项。

1. 收件人：表单提交结果将发送到的电子邮件地址。添加以逗号分隔的其他电子邮件地址。
2. 电子邮件主题：电子邮件的主题
3. 电子邮件内容：电子邮件的正文。默认情况下，所有表单字段都通过短代码发送：[all-fields]。想要自定义发送哪些字段？复制您要发送的字段中显示的短代码并将其粘贴到此处。
4. 发件人电子邮件：“发件人”电子邮件地址
5. 发件人姓名：“发件人”姓名
6. Reply-To：发送回复的电子邮件地址
7. 抄送: 抄送电子邮件地址
8. 密件抄送：密件抄送的电子邮件地址
9. 元数据：默认情况下包含可用的元数据。单击每个上的“x”可删除您不希望包含在电子邮件中的任何内容。
10. 发送方式：选择发送电子邮件的格式，HTML 或纯文本

向提交表格的用户发送确认电子邮件（重点）

配置电子邮件2

电子邮件2非常有用。Par exemple，它可能是您网站的访问者在您的网站上发送表单后立即收到的确认电子邮件。

要创建电子邮件，请执行与上述电子邮件相同的过程。

Avis：在“收件人”字段中，您应该输入电子邮件字段高级选项卡中的短代码[field id="email"]。

提示：您可以使用提交者的名字 ( ‘Howdy [field id="name"]’) 来个性化确认电子邮件。

这里有一个如何使用 HTML 构建整个电子邮件内容的示例1：

<p>
     <p>You got a new message!</p>
</p>
<p>
     <p>Username: [field id="name"]<br />
</p>
<p>
     <p>Email:  [field id="email"]<br />
</p>
<p>
     <p>Phone:  [field id="tel"]<br />
</p>
<p>
     <p>Message: [field id="message"]</p>
</p>
<p>
     <p>Don’t forget to call them back soon 🙂 </p>
</p>

HTML 示例2

<h1>You have a new wedding to plan.</h1>

<p>[field id=”first_name”] would like you to contact them about planning their wedding on [field id=”eventdate”] at [field id=”location”].</p>

<p>The couples vision and plans so far are as follows:<br>

[field id=”message”] </p>

<h2>Contact Information</h2>

<ul>

<li>First Name: [field id=”name”]</li>

<li>Last Name: [field id=”last_name”] </li>

<li>Email Address: [field id=”email”] </li>

<li>Numéro de téléphone: [field id=”phone”]</li>

</ul>

<p><strong>Good luck at the event!</strong></p>

Avis：只能使用位于表单字段小部件的高级选项卡中的短代码。您不能使用此处其他任何地方的简码。从其他插件或其他地方添加其他短代码将导致服务器错误消息。短代码需要完全按照表单字段的高级选项卡中显示的方式编写。

将模板添加到表单

Maintenant，我们可以使用控件中的电子邮件选项将此 HTML 添加到表单中。将 HTML 粘贴到消息字段中，替换 [all-fields] 默认值。确保在控件底部附近启用了“以 HTML 形式发送”选项。

重要的！ 只能使用位于表单字段小部件的高级选项卡中的短代码。您不能使用此处其他任何地方的简码。从其他插件或其他地方添加其他短代码将导致服务器错误消息。短代码需要完全按照表单字段的高级选项卡中显示的方式编写，但有一个例外。如果高级选项卡中的简码格式为 [field id=email]，则必须将字段名称用引号引起来，因此您需要将 [field id=email] 更改为[field id="email"]。

重定向至感谢页面

选择重定向操作。这将添加一个“重定向”选项卡。

单击“重定向”选项卡打开其选项。

1. 重定向至：输入表单提交后重定向用户的页面 URL。

将订阅者添加到新闻通讯电子邮件营销服务或将用户信息添加到 CRM

选择任何第三方服务。这将为该服务添加一个新选项卡。

单击所选服务的选项卡以打开其选项。

1. API 密钥：在此处输入所选服务的 API 密钥。您必须首先在集成设置中设置 API 凭据。您还可以通过选择“自定义”来设置不同的 API 凭据。
2. 列表/帐户：选择要将表单信息发送到的列表或帐户。

使用 Zapier 将您的表单连接到数千种其他服务中的任何一个

选择 Webhook 操作。

单击 Webhook 选项卡打开其选项。

1. Webhook URL：输入将接收表单提交数据的集成 URL（如 Zapier）。
2. Advanced Data：滑动到 YES 将高级数据发送到 webhook，其中将包括日期和时间、远程 IP 等元数据。它还会将数据作为数组发送，Par exemple：[ ‘Name’ => ‘ John Doe’, ‘Email’ => ‘ john@doe.com ‘, ‘Message’ => ‘请联系我’ ]如果 Advanced Data 设置为 NO，则数据将以 Simple 形式发送，即发送表单将字段作为文本消息发送到 Webhook，Par exemple：“姓名：John Doe，电子邮件：john@doe.com，消息：请联系我。»

将表单数据发送到 Slack 通道

选择 Slack 操作。这将添加一个新的 Slack 选项卡。

单击 Slack 打开其选项。

有关更多详细信息，请参阅Slack 集成文档。

打开或关闭弹窗

提交表单后可以打开或关闭弹出窗口。

选择弹出操作。这将添加一个弹出选项卡。

单击弹出窗口打开其选项

1. 选择“打开弹出窗口”以选择提交表单后将打开的弹出窗口。输入一个或多个字符以生成可供选择的可用弹出窗口的下拉选项。
2. 选择关闭弹出窗口可在表单提交后关闭当前弹出窗口。您还可以将弹出窗口设置为Don’t Show Again。

表单的邮箱设置

表单小部件电子邮件设置允许您指定表单发送到的位置并自定义发送的数据。

除了手动添加表单的电子邮件设置之外，这些选项还使用动态标签。这些标签允许您检索 WordPress 数据，或从插件源（例如高级自定义字段）检索数据。能够使用动态数据的项目将在字段输入旁边有“堆栈”图标。

设置

1. To 收件人：输入表格收件人的电子邮件地址（两个用逗号隔开）
2. Subject thème：输入您希望在电子邮件主题中显示的文本
3. Message 消息：在这里您可以使用表单字段的短代码来创建表单发送的消息。默认情况下使用“所有字段”选项。在本教程中了解如何为表单创建自定义消息
4. From Email 发件人电子邮件：输入发件人地址或使用norepy@
5. From Name 发件人姓名：输入您希望在电子邮件中显示的姓名、职位或公司
6. Reply To 回复：输入发件人地址或使用norepy@
7. Cc 抄送：输入要抄送的收件人的电子邮件地址（抄送）
8. Bcc 密件抄送：输入要密件抄送的收件人的电子邮件地址（密件抄送）
9. Meta Data 元数据：您可以在此处添加或删除显示在表单底部的其他元数据。默认显示所有选项
10. Send As 发送为：在下拉列表中，选择是否以 HTML 或纯文本形式发送表单。

多步骤表格设置Steps setting

多步骤表单允许您创建具有多个步骤的表单，以便用户填写一些字段，单击“下一步”，再填写一些字段，单击“下一步”或“上一步”等，直到完成最后一步，此时可以提交表格。

附加选项 – 表格

1. 表单 ID – 设置表单 ID。
2. 自定义消息– 滑动“自定义消息”按钮以自定义表单中的消息（例如成功消息、错误消息等）。 

Avis：自定义消息不是服务器提供的标准消息。标准服务器消息无法控制或定制。用户很少会看到这些自定义消息。当存在阻止发送表单的服务器冲突时，有时可能会生成自定义消息。另请注意，自定义消息是浏览器不显示其自身错误时的后备消息。

表单Style样式

表单表格Form样式

1. 列间隙 – 设置列之间的空间
2. 行间隙 – 设置行之间的间距
3. 标签– 设置标签的间距、标签颜色和版式。
4. HTML 字段 – 设置表单上 HTML 字段（如果存在）的间距、颜色和排版。

表单风格Field设置

您可以轻松设置表单字段的颜色、字体和边框的样式

1. 文本颜色– 设置输入文本的颜色（用户填写的文本）
2. 版式– 设置输入文本的版式
3. 背景颜色– 设置字段的背景颜色
4. 边框颜色– 设置字段的边框颜色
5. 边框宽度– 设置字段边框的宽度
6. 边框半径– 设置边框的半径

表单按钮button样式

您可以设置 提交按钮的正常和悬停 状态的样式。

1. 背景颜色 – 设置背景颜色
2. 文本颜色 – 设置文本的颜色
3. 版式– 设置文本的版式
4. 边框类型 – 在不同的边框样式之间进行选择。
5. 边框宽度 – 如果设置了边框，则设置字段边框的宽度
6. 边框颜色 – 设置字段的边框颜色
7. 边框半径 – 设置边框的半径
8. 文本填充 – 设置文本的填充

表单消息messages样式

您可以设置提交表单后向用户显示的消息的样式。

1. 版式：设置消息文本的版式。
2. 成功消息颜色：选择成功消息的颜色
3. 错误消息颜色：选择错误消息的颜色。
4. 内联消息颜色：选择内联消息的颜色。

Form Submissions 表格提交

借助 Elementor 表单提交功能，您可以备份表单提交数据、随时访问并从一个位置管理所有数据。有了您的提交信息，您可以收集见解、分析活动数据，或者只是在 WordPress 仪表板中管理您的提交。

Avis：这是一个实验。确保在Elementor >设置>实验选项卡下将其打开。

1. 创建新页面或编辑现有页面，然后单击“使用 Elementor 编辑”
2. 将表单小部件拖到您的页面
3. 默认情况下，“提交后的操作”部分包括“收集提交内容”选项
   
4. 要查看收集的提交内容，请转至Elementor >提交内容
   
5. 单击可查看、编辑、删除任何表单提交并将其“标记为已读”

Avis：这不适用于旧表单，要启用此功能，只需将其添加到“提交后的操作”下

导出提交内容

您可以通过以下方式导出您的提交内容：页面名称、表单名称、时间范围和全部。单击“全部导出至 CSV”以导出您选择的提交内容。

出现服务器错误或表单不发送电子邮件？

如何解决 WordPress 无法通过表单发送电子邮件和“服务器错误”问题。。

d'abord，在您的 WordPress 网站上运行测试，看看它是否可以发送电子邮件。

要确认电子邮件的送达能力，您可以使用任何 SMTP 插件并选择不同的 SMTP 服务器（例如 SendGrid）来检查其是否正确送达。如果它与其他协议正常工作并显示默认 SMTP 错误，则需要将其报告给托管。

为什么会出现此服务器错误？

Elementor 使用 WordPress 的 wp_mail 函数发送电子邮件。您的网络主机接收已发送的电子邮件，对其进行处理并发送。90%的问题都发生在这里。

有时，托管服务器会禁用用于发送电子邮件的 PHP 功能。他们基本上会阻止您的电子邮件。

这样做通常是为了确保您不会通过您的站点发送垃圾邮件（您的主机不希望您将其服务器用作垃圾邮件服务器）。

从技术上讲 – wp_mail 函数默认使用 PHP send_mail 函数。但如果在该服务器上禁用它，则电子邮件发送失败。要解决此问题，请联系您的托管服务并请求他们启用它，或者改用 SMTP 服务器。

SMTP 到底是什么？

SMTP 代表“简单邮件传输协议”。SMTP 是一种电子邮件服务器，它将表单中的电子邮件路由到列出的客户的收件箱中。它是一个外部电子邮件服务器（例如，Gmail 可以用作 SMTP 服务器），有助于确保您的电子邮件更快地送达，并有助于防止您的电子邮件最终进入用户的垃圾邮件文件夹。

尝试使用任何流行的 SMTP 插件 ( https://wordpress.org/plugins/search/SMTP/ )。

有关服务器错误的更多故障排除提示

除了联系您的主机提供商之外，您还可以尝试执行以下几个步骤来解决此问题：

1. 表单的发件人电子邮件地址通常需要来自与您的网站相同的域。donc，如果您的网站是 example.com，那么您需要使用admin@example.com或bob@example.com等发件人电子邮件地址。您可以使用回复字段选择访客的电子邮件地址进行回复根据用户的要求。
2. 您可以使用Elementor 表单提交功能来检查表单是否正常运行。
3. 使用其他电子邮件地址（您的电子邮件可能被注册为垃圾邮件）。为了避免被标记为垃圾邮件，请尝试更改电子邮件主题行的长度（更短或更长）。
4. 如果您正在使用任何第三方集成，请尝试禁用它们。Par exemple，MailChimp 或 ActiveCampaign。如果这成功了，请阅读我们的集成指南中的更多内容。基本上，您必须检查自动回复帐户和表单小部件内的字段映射。确保您没有在表单小部件中将必填字段设置为“无”。另请确保您没有在 MailChimp 帐户的字段映射设置中添加“地址”字段或“生日”字段
5. 如果提交表单后页面刷新，通常是由于插件或主题代码冲突。在这种情况下，请停用除 Elementor 和 Elementor Pro 之外的所有插件，并检查电子邮件是否正确发送。如果这不起作用，请切换到 WordPress 的默认主题并检查是否可以解决问题。
6. 确保表单字段的 ID（在字段的“高级”选项卡中）已填充；如果没有有效的字段 ID，如果使用“[all-fields]”短代码，则在发送给提交内容接收者的电子邮件中将看不到表单字段值。
7. 确保您对电子邮件框中的每个字段使用正确的短代码，如“高级”选项卡中所示。

高级Advanced设置

Layout设置

1. 边距– 设置表单的边距
2. 填充– 设置表单的填充
3. Z-Index – 设置表单的 Z-index
4. CSS ID – 设置表单 ID
5. CSS 类– 设置表单类

运动效果Motion Effects

运动效果 是一组功能强大的控件，用于为您的设计添加漂亮的过渡和动画。

到目前为止，想要合并动画和运动效果的网页设计师需要使用外部库和/或自定义代码。

滚动效果Scrolling Effect

 当用户滚动页面时，使用滚动效果创建令人惊叹的动画和交互。以下是滚动效果列表：

垂直滚动Vertical Scroll

这就是您一直在等待的经典视差效果。垂直滚动使元素在滚动时以与页面不同的速度移动，按照您选择的方向和速度。

水平滚动Horizontal Scroll

水平滚动意味着当访问者上下滚动时，元素相应地左右移动。使用示例 – 当访问者向下滚动时，带有云的部分会向右移动。

透明度Transparency

透明度可让您逐渐使元素变得更加透明或更明显，与访问者的滚动相关。一个例子是标题出现然后根据卷轴消失。

有4种可能的效果方向：

淡入 ——意味着元素开始是透明的，然后逐渐变得可见。

淡出 – 元素一开始是可见的，然后逐渐变得透明。

淡出 – 元素开始时可见，然后淡出，然后再次变得可见。

淡入淡出 – 元素开始时是透明的，然后变得可见，然后再次透明。

模糊Blur

此设置与透明度类似，只是元素变得模糊而不是透明度。一个很好的例子是背景图像，只有当用户向下滚动时才会获得正确的焦点。

旋转Rotate

ici，元素随着您滚动而旋转。下图中恒星的旋转就是一个很好的例子：

Avis： X 和 Y 锚点这两个设置 确定元素缩放或旋转的轴。如果将方向设置为左上，则旋转将围绕元素的左上角进行。如果设置方向为center-center，则旋转将围绕其中心旋转，就像轮子一样。此设置仅与上面的“旋转”效果以及下面列出的“缩放”效果相关。

规模Scale

缩放可让您根据滚动来放大和缩小元素。示例：滚动时变大的背景。

Avis：使用“将效果应用到”来确定是否将运动效果应用到移动设备、台式机或平板电脑上。鼠标效果只会影响桌面设备。

鼠标效果Mouse Effects

鼠标轨迹Mouse Track

通过使元素随着访问者的鼠标移动而移动，创造一种深度感。

3D倾斜3D Tilt

与鼠标轨迹相对于鼠标移动来移动元素的方式类似，3D 倾斜效果根据光标的相同移动来倾斜元素。

运动效果浏览器兼容性

表格背景form background

您可以设置表单背景的“正常”和“悬停”状态的样式。

1. 背景类型– 选择经典和渐变
2. 颜色– 设置颜色
3. image– 上传背景图片
4. 位置– 背景图像的位置选项
5. 附件– 选择滚动或固定
6. 重复– 设置图像重复属性
7. 大小– 设置图像背景的大小

表格边框 Form border

您可以设置表单边框的“正常”和“悬停”状态的样式。

1. 边框类型– 选择不同的边框样式
2. 宽度– 设置表单边框的宽度
3. 颜色– 设置表单边框的颜色
4. 边框半径– 设置边框的半径
5. Box Shadow – 为表单设置阴影

表单错误消息集合一览

表单错误消息 – X 错误

在您的网站上填写表格时，您可能会遇到以下错误消息：“x”错误。

当某些字段 ID 为空时，可能会出现此错误

请打开表单设置，选择每个字段，然后切换到“高级”选项卡。如果您发现ID选项为空，请尝试输入一个值（这必须是表单内其他任何地方未使用的唯一 ID 值）。  

表单错误消息 – 此错误对于网站访问者来说是不可见的

在您的网站上填写表单时，您可能会遇到以下错误消息：“This Error Is Not Visible For Site Visitors. 此错误对于网站访问者来说不可见。»

当 Elementor 和 MailChimp 之间的字段映射存在问题时，通常会弹出此错误：

表单错误消息 – 表单无效

在您的网站上填写表格时，您可能会遇到以下错误消息：““an error occurred” / “there is something wrong the form is invalid. 发生错误”/“出现问题，表格无效。»

当某些字段 ID 为空时，通常会发生这种情况。

请打开表单设置，选择每个字段，然后切换到“高级”选项卡。如果您发现ID选项为空，请尝试输入一个值（该值必须是表单中其他任何地方未使用的唯一 ID 值）。 

其他潜在原因：

– 两个字段具有相同的 ID。

– 集成无法正常工作。要确认这一点，您可以取消与电子邮件营销服务的集成。

– 用于集成的字段映射尚未正确完成。