使用 Elementor Form 小部件创建和设计表单

每个网站都必须包含联系表格! 无论您拥有什么类型的网站,联系表单都可用于多种目的。 他们可以产生潜在客户,建立联系和关系,允许用户报告您网站的问题,以及介于两者之间的一切。

在 WordPress 中创建联系表单无需成为技术专家。 Elementor 页面构建器使创建漂亮的网站变得比以往更容易。

为了演示如何使用 Elementor 创建联系表单,我们将介绍不同的选项以及有关 Elementor 中的联系表单的所有信息。

Elementor 包含表单小部件已经有一段时间了,这意味着您不再需要去其他地方为您的 WordPress 网站创建表单,这是一件幸事!

过去,您在使用某些可用plugin创建表单时可能会遇到困难。 设计和配置表单的过程可能非常耗时且令人沮丧。 对于我们所有人来说幸运的是,Elementor Form 小部件的使用非常简单。

在开始使用 Elementor 表单生成器之前,让我们快速浏览一下它的一些最基本的功能。

对于初学者来说,最显着的功能之一是它完全集成到 Elementor 界面中,这意味着您可以访问 Elementor 中提供的许多设计/样式/布局选项。 我不相信您会找到一个具有与此一样强大的设计系统的独立表单plugin。

从那里,您可以创建最多 18 种不同类型的字段:

  • 文本 电子邮件 文本区域 文本区域
  • 网址及电话号码如下:
  • 单选按钮是单选按钮的一种。
  • 从列表中选择(下拉列表)
  • 复选框用于清单中。
  • 只有一个复选框(接受)
  • 验证码
  • 蜜罐是一种盛放蜂蜜的容器(防止垃圾邮件)

您还可以将表单分为多个页面以创建多步骤表单,这对长表单应用程序有利。

Elementor Pro 与流行的电子邮件营销服务和客户关系管理系统有超过 12 种集成,可帮助您充分利用表单。 还有一个包罗万象的 Zapier 集成,如果您的工具未列出,它允许您连接到 Zapier 平台上可用的数千种工具中的任何一个。

还有一些其他有趣的选择。 amp,当有人填写您的表单时,您可以通过 Slack 或 Discord 收到通知。

说到通知,您还可以个性化您收到的电子邮件通知以及表单提交者收到的电子邮件通知。 他们提交表单后,您可以将他们重定向到您创建的自定义感谢页面。

在 Elementor 中创建表单的最佳方法是什么?

我们首先打开 Elementor 编辑器,然后将 Form 小部件拖放到我们想要构建表单的位置。

如何创建 Elementor 表单

与 Elementor 中的其他所有内容一样,创建表单的过程是可视化进行的。 不需要使用额外的plugin,也不需要充当网站的后端。

以结构化方式形成 Elementor 元素

表格就位后,第一步就是组织其中包含的信息。 您需要哪些字段以及它们应该是什么类型? 你要买什么?

在 Elementor 编辑器中工作时,可以从“内容”选项卡添加和编辑表单字段,如下面的amp所示,表单包含一些默认字段。 通过从下拉菜单中选择添加项目,您可以创建新字段。

也可以通过选择看起来像两个文档的图标(一个在另一个前面)并单击它来复制字段。 

表单中的字段类型

有许多表单字段类型可用,从简单的文本字段到密码、ReCaptcha 和蜜罐字段。

要更改表单字段的行为,首先选择字段,然后像类型下拉菜单一样查看可用的各种字段类型。

Elementor 表单中的字段类型

表单列的宽度

此功能允许您通过调整列宽设置在同一行上使用两个表单字段。 通过从下拉选择器中选择窗口并选择 50% 来更改窗口的宽度。 值得注意的是,如果您对两个连续的表单字段执行此操作,您会注意到它们一起出现在同一行上。

Elementor 中的表单用于样式设置

通过导航到 Elementor 编辑界面中的“样式”面板,在 Elementor 中设置表单的样式,就像设置其他小部件的样式一样。

表单本身、字段、按钮、任何步骤、错误消息和确认消息都可以自定义。

对于那些已经熟悉 Elementor 的人来说,他们在 Elementor Forms 样式设计方面不需要学习太多。

表单上的操作

在讨论了在 Elementor 中创建表单之后,我们来看看配置表单提交后会发生什么; 这是通过表单操作完成的,或者如 Elementor 提交后的操作中所提到的那样。

提交表单后,系统通常会发送电子邮件并将用户重定向到不同的网页。 当然,您可以在表单中包含任意数量的操作,并以您想要的任何方式组合它们。 正如您所期望的,有一个特定的选择器字段,不涉及任何编码。

您添加的每个操作都将在主菜单上显示为单独的选项卡选项。 目前,我们有一个电子邮件选项卡选项,但如果我要在“添加操作”字段中包含重定向,我还会在选项卡选项中看到“重定向”,如下面的示例amp所示。

最后,我将演示如何配置表单以接受通过电子邮件提交的内容,这是有关表单的最常见问题。

当您从编辑器的“内容”选项卡中选择“电子邮件”时,您将看到如下所示的屏幕; 您可以在此处个性化发件人电子邮件和回复电子邮件,还可以向应收到表单提交内容副本的任何人添加抄送或密件抄送。

在 Elementor 中创建联系表单消息传递模板

许多人惊讶地发现 Elementor 的表单编辑器比乍一看更强大,其中一个更高级的功能是能够为每个表单自定义消息传递。

可以自定义表单消息,以便为填写表单的最终用户提供更加个性化的反馈过程,而不是听起来像一个无聊的机器人。 但是,具体而言,您可以为 Elementor 联系表单自定义哪些消息,如下所示:

首先,您必须首先从下拉菜单中选择“其他选项”来启用自定义消息传递,然后将“自定义消息传递”的切换开关切换为“是”。

通过添加自定义消息来自定义 Elementor 联系表单小部件

如您所见,您可以自定义四种不同的消息,包括下面列出的消息:

提交表单并验证表单是否正确填写(例如,没有遗漏必填字段等)后,将向最终用户显示成功消息。

错误消息 — 在提交表单期间发生未知错误时向最终用户显示的消息。

必填消息 — 当必填表单字段未填写、表单已提交且表单未填写时出现。

当表单提交中的某些内容不正确且无法发送时,将向最终用户显示无效消息消息。

能够编辑消息可以使您变得富有创意和古怪,或者如果您运营公司网站,则可以更加正式和商务。 最好的部分是它们是完全可编辑的,所以你可以做任何你想做的事情!

结论

Elementor表单小部件,轻松构建联系表单。 它配备了直观的拖放联系表单生成器和大量自定义选项,使其与市场上其他可用的联系表单plugin分开来。 您可以轻松自定义其样式和配色方案,以匹配您公司的外观和感觉。 还包括各种其他有吸引力的小部件、超过 300 个专业模板以及一个方便的软件包中的弹出窗口生成器。 这个功能齐全的 WordPress 页面构建器包含所有必要的小部件和功能,因此您无需购买额外的页面构建器来进一步自定义您的网站。 此外,它还允许集成 30 多种营销服务,这就是为什么它是当今市场上最受欢迎的plugin之一。

汉森·F.

最近的帖子

如何在 Elementor 中使用页眉和页脚

网站的页眉和页脚是必不可少的元素。 在大多数情况下,标题提供导航...

2022 年 1 月 6 日

WordPress 主题比较:Astra 与 OceanWP

市场上最受欢迎的两个 WordPress 主题是 Astra 和 OceanWP。 专业的…

2022 年 1 月 2 日

WordPress 新闻主题比较:报纸与报纸 阿斯特拉

创建一个优秀的新闻网站并不需要您成为一名网页设计师。 我们…

2021 年 10 月 25 日

创建一个以报纸为主题的新闻相关网站

报纸主题是由 tagDiv 设计的最重要的 WordPress 主题之一,...

2021 年 10 月 18 日

如何使用 Avada WooCommerce 构建器构建电子商务

在建立在线商店时,WooCommerce 是首选plugin。 它…

2021 年 10 月 4 日

如何通过 Elementor 使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的东西,...

2021 年 9 月 21 日