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

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

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

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

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

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

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

在我们开始使用 Elementor 表单构建器之前,让我们快速浏览一下它的一些最重要的功能。

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

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

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

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

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

还有一些其他有趣的选择。 对于前amp文件,当有人填写表单,您可以收到通过松弛或不和谐的通知。

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

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

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

如何创建元素表单

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

以结构化方式形成 Elementor 元素

一旦您的表格就位,第一步是组织其中包含的信息。 你需要什么字段,它们应该是什么类型的字段? 你在找什么?

在 Elementor 编辑器中工作时,会从“内容”选项卡添加和编辑表单字段。 正如你可以在EX看到amp勒下面,形式包括一些默认的字段。 通过从下拉菜单中选择添加项目,您可以创建新字段。

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

表单中的字段类型

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

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

元素表单中的字段类型

表单列的宽度

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

用于样式的 Elementor 中的表单

通过导航到 Elementor 编辑界面中的“样式”面板,以与为其他小部件设置样式相同的方式在 Elementor 中设置表单样式。

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

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

表单上的操作

继我们关于在 Elementor 中创建表单的讨论之后,让我们看看配置提交表单后会发生什么; 这是通过表单操作完成的,或者它们在 Elementor,提交后的操作中被引用。

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

您添加的每个操作都将在主菜单上显示为单独的选项卡选项。 目前,我们有电子邮件选项卡上的选项,但如果我是要包括在添加操作现场重定向,我也看到重定向在我的标签选项,如图所示前amp下面乐。

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

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

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

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

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

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

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

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

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

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

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

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

能够编辑消息可以让您变得富有创意和古怪,或者如果您经营公司网站,则可以更加正式和商业化。 最好的部分是它们是完全可编辑的,因此您可以随心所欲!

结论

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

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*