如何构建 Elementor 联系表 [开发人员指南]

已发表: 2021-05-03

如何使用插件构建 Elementor 联系表? 好吧,在本文中,我们将为您讨论最可行的方法。 您知道有价值的访问者如何与网站互动吗? – 通过“联系我们”页面。 确实! 但是,它是网站上最被低估的页面。 许多网站设计师或所有者都没有注意到这个舒适的小角落。

大多数使用 Elementor 的网站建设者不太重视联系表格。 他们在尝试添加 Elementor 联系表单时卡住了。 原因是他们觉得这很复杂。

结果,由于“联系我们”信息的放置不当,网站变得不友好。 不受欢迎的联系表单使用户很难找到该页面。 用户无法联系所有者来修复他们的查询。

因此,为网站制作更好的联系表格至关重要。 如何制作更好的 Elementor 联系表? 这就是我们将在本文中讨论的内容。 和我们在一起。

什么是网站中的联系表?

联系表格是网站上基于 Web 的小型表格。 这是访问者与网站所有者保持联系的地方。 它有助于与访客建立关系和联系。 此外,它有助于产生指向该网站的潜在客户。

基本上,联系表格包括访问者在页面上填写的一组问题。 然后将填写的表格作为消息发送给站点所有者。 但是,此联系表单会触发电子邮件并将其发送到网站所有者的电子邮件收件箱。

网站所有者从访问者那里获取消息,而不会向垃圾邮件发送者透露他们的电子邮件信息。 因此,网站所有者会收到有关网站或介于两者之间的任何问题的通知。

为什么在您的网站中有联系表很重要?

在某些时候,您可能想知道为什么您应该在网站上提供联系表格。 您确实可以使用电子邮件地址完成工作。 毕竟,您需要一种媒介来吸引访问者。

但是,拥有联系表格会对网站产生影响。 下面我们将告诉您为什么建议在您的网站上使用联系表。

联系表格为网站增添了专业性

没有适当的联系表格,网站是不完美的。 当您将联系表单添加到您的站点时,它对用户来说看起来更专业。 但是,简单地输入联系表格并没有帮助。 您必须战略性地放置联系表格。 因此,您的访问者很容易找到它。

保护网站免受垃圾邮件

如前所述,公开您的电子邮件地址并不是一个好主意。 它只会向垃圾邮件发送者打开您的收件箱。 垃圾邮件机器人经常从网站上抓取电子邮件地址。 当垃圾邮件机器人遇到您的电子邮件地址时,它可能会与所有垃圾邮件列表混在一起。

清理它们变得很困难。 当您使用联系表格时,它可以节省您的时间和精力。 此外,联系表单创建了一个安全层,因为过滤掉了各种垃圾邮件。 因此,您可以保护您的收件箱免受机器人攻击。

事实上,联系表格无法阻止所有垃圾邮件。 有时它来自您网站上的表格。 最佳做法是使用验证码。

让您随时可用

联系表格就像您的替代品一样工作。 它使您可以 24/7 全天候接受查询。 随着您的业务增长,您将逐渐从访问者那里获得更多查询。 情况如何处理?

很简单,您可以在联系表格上设置自动回复。 每当访问者点击发送按钮时,他们将立即收到消息。 这样,联系表格可以让您更轻松地回答所有查询。

联系表格有助于带来更多潜在客户

作为商业网站所有者,您的目标是在网站上获得更多潜在客户。 这就是为什么; 您需要网站上的联系表。 联系表格使新访客更容易联系到您。

当您只发布一封电子邮件时,访问者将不会费心手动创建电子邮件。 联系表格包括所有易于填写的基本问题。它会让随机访问者对您的网站感兴趣。

多功能使用

联系表格用作以双向方式进行交流的媒介。 但这不是使用它的唯一原因。 联系表格还用于其他目的,例如提供反馈、查询、注册任何活动等。

建立电子邮件营销列表

电子邮件是一种经济实惠的接触受众的方式。 每当访问者填写联系表时,您都可以收集他们的信息。 然后,您可以将它们添加到您的电子邮件列表中。 此外,添加一个固定联系复选框允许在注册时获得新订阅者。

如何建立 Elementor 联系表?

首先,确保您安装并激活了 Elementor 和 Elementor Pro。 下一步是什么? 现在您可以继续进行设计过程。

步骤 01:从 Elementor 库添加联系人小部件

首先,打开要使用 Elementor 联系表的页面。 如果您不确定在您的网站上放置联系表的位置,我们可以为您提供一个选项。 关于页面和主页为联系表单提供了更好的位置。

当您打开 Elementor 库时,您会发现许多联系人小部件表单。 在 Elementor 中,这些小部件称为“表单”。 选择您最喜欢的小部件并将其拖到您的网页上。

步骤 02:在联系表中设置您的必要字段

现在是时候设置您的联系表单字段了。 您会在 elementor 中找到联系表单小部件的各种设置。 Elementor 已经填充了必要的字段。 它通常包含信息,例如;

  • 用户名
  • 电子邮件
  • 信息

这些字段是基本联系表单的元素。 但是,您也可以在联系表单中包含更多字段。 您可以添加资格预审问题,例如了解客户的预算。 根据客户的预算,您可以缩小合适的线索。

步骤 03:在联系表中添加或删除其他字段

在 elementor 联系表单中,有一个名为“添加项目”的选项卡。 您可以单击添加项目为您的联系表单创建一个新字段。 项目有一系列设置,例如类型、标签、占位符、必需、列宽等。

“类型”表示您可以添加到表单的字段类型。 类型可以是文本、电子邮件、URL、密码、reCAPTCHA 等。然后,“标签”显示表单字段上方的元素。 “PlaceHolder”是您希望用户输入的文本。

倒数第二个设置是“必需”,这是一个简单的拨动开关。 当它打开时,它不允许用户提交未填写的表单。 最后,“列宽”使您可以根据需要对齐和堆叠字段。

高级选项卡:除了内容选项卡外,还有一个“高级”选项卡。 它包括默认值、ID 和简码。 看,在 elementor 中有很多选择。 您还可以通过单击关闭符号来删除选项卡。

步骤 04:设置联系表中数据的目的地

现在是时候设置您希望信息到达的目的地了。 单击“电子邮件”选项以查看可用选项。 选项包括;

  • 学科
  • 信息
  • 从电子邮件
  • 来自名字
  • 回复
  • 抄送和密送

这些选项中的大多数都是预先填写的,因此您无需进行任何更改。 您可以单击下一步并保存页面。 接下来,您将找到一个包含元数据的元框字段。 您可以将其设置为与联系表单提交一起发送。 最后,有一个“发送为”选项,您无需更改。

步骤 05:设置联系表自动消息

Elementor 表单的编辑器允许您生成要发送给用户的自动消息。 您可以根据您的表格修改消息。 改变形式使它更真实。

单击“其他选项”以启用自定义消息传递选项。 然后,点击“自定义消息”选项到“是”,它允许四种不同类型的消息。 消息包括;

  • 成功消息 – 最终用户在正确填写表单后会看到此消息。
  • 错误消息 - 此消息在两者之间发生错误时显示。
  • 必填信息——当用户遗漏任何字段时显示。
  • 无效消息 – 中间出现错误时显示。

步骤 06:使用 Elementor 设置联系表样式

现在是吸引用户的部分。 单击 elementor 编辑器中的“样式”选项卡。 有很多选项可以个性化您的联系表格。 您可以自定义间距、颜色、填充、标签、按钮、输入等等。

设置 07:发布您的联系表

一切都应该按照您在联系表格中的要求进行设置。 现在是时候将其公开给最终用户了。 单击“更新”按钮发布联系表。 伟大的! 现在,您已准备好所需的联系表格。

6 个用于构建有吸引力的联系表的最佳 Elementor 插件

当您使用 Elementor Pro 时,可以建立上述表格中的联系人。 如果您无法访问它,不用担心,有一系列替代元素或附加组件可用。 以下替代方案是完全免费的。

  1. Elementor 的 Droit Contact Form Addon – 它提供免费的Elementor 终身免费插件。
  2. HubSpot – 这是一个免费的在线营销插件,可用于添加表单、实时聊天、弹出窗口等。
  3. WPForms Plugin – 它是提供许多功能的基本版本。 您可以创建基本的联系表格,并轻松与 Elementor 集成。
  4. 联系表格 7 – 这是一个有价值且直接的选项,带有内置的短代码。
  5. Forminator – 它带有一个易于使用的界面。 该插件有超过 200 万次活动安装。
  6. Caldera Forms – 它包括一系列免费提供的强大功能。

常见问题解答:如何构建 Elementor 联系表?

1. 如何在 Elementor 中添加联系表?

在 Elementor 中打开要添加联系表单的页面。 找到 Elementor 小部件或联系表 7 小部件。 然后,将小部件拖放到页面上。 然后,选择表单模板。 你可以看到一个白色的表格。

现在单击编辑按钮,您将在左侧菜单中找到一个样式选项卡。 选择你想要的背景。 现在返回设置,设置表单样式,最后单击“发布”按钮。

2. Elementor 有表格吗?

当然,elementor 包含十多种不同类型的表单字段。 您可以在您的网站上获取您要查找的数据。 这些信息包括姓名、电子邮件、电话号码等。

3. 如何在 WordPress 中自定义联系表?

在 WordPress 中自定义联系表单相对容易。 单击管理面板中的外观。 选择自定义选项以更改设置。

4. 如何使用Droit Contact Form Widget?

Droit Elementor 插件是 Elementor 的扩展。 它旨在提升您的网站设计体验。 Droit 带有大量实用的小部件、按需资产加载等。

要使用小部件,您需要将扩展​​插件插入到 elementor 页面构建器中。 然后,您可以使用预构建预设设计不同的联系表格。 它允许更改背景、阴影、排版、边框等。

5. Elementor 表单存储在哪里?

元素形式存储在 postmeta 表中。 表单数据存储在每个表单或页面的元键“_elementor_data”中。

包起来!

这就是今天的全部内容,伙计们! 到目前为止,您已经学习了如何构建 Elementor 联系表单。 我们假设您已经创建了一个极好的联系表格。 不是更容易吗? 事实上,Elementor 快速而直接。

看,当你安装了 Elementor pro 后,构建一个联系表单不需要几个小时。 现在,您可以在联系表中进一步进行更多更改。