想知道如何创建一个 联系表 在元素?

联系页面是网站的关键页面之一。 它通常用作网站是否被批准的参数。 Elementor 带有本机小部件 - 表单小部件 - 可让您将表单添加到页面。 这篇文章将告诉你如何。

表单小部件本身仅在 Elementor Pro 上可用。 这意味着如果您仍在使用免费版,则必须升级到专业版。 您不仅可以使用 Form 小部件来创建 联系表, 但您也可以使用它来创建其他类型的表单,包括电子邮件注册表、用户注册表、 文件上传表单等...

如何在 Elementor 中创建联系表单

当您创建一个 联系表 使用 Elementor 的表单小部件,您可以设置表单数据的发送位置。 无论是在您的电子邮件帐户中还是在 Elementor 的默认表单提交管理器中。

在本文中,我们将直接跳转到将 Form 小部件添加到 Elementor 的编辑框。 只需将小部件面板中的表单小部件添加到编辑框中,如下所示:

如您所见,Form 小部件会自动创建一个包含三个字段的表单。

另请参阅: 如何在 Elementor 中添加价格网格

要编辑现有字段,您只需打开它即可。 您可以更改字段类型,覆盖默认标签和占位符,并根据需要将其设置为必填字段。

要删除现有字段,您只需单击 X 要删除的字段。

要添加新字段,您只需单击按钮 添加元素。 表单小部件本身支持二十种类型的字段。

定义表单操作

正如我们之前提到的,您可以将表单数据(提交)发送到您的电子邮件帐户或 Elementor 的集成表单提交。 要设置目的地,您可以打开块 提交操作后 标签下 包装内容 从设置面板。

另请参见: 如何在 Elementor 中创建圆形图像

选择要在可用字段上定义的操作(您可以添加多个操作)。 在这个例子中,我们选择 邮箱.

如果您还设置了表单操作 在电子邮件上, 你可以打开方块 邮箱 定义用于接收表单数据的电子邮件地址。 如您所见,您还可以根据需要设置主题。

默认情况下,Elementor 包含表单上所有字段的内容。 如果您只想包含来自特定字段的内容,您可以将首选字段的短代码粘贴到该字段中。 信息。

例如,下面的设置将只发送消息字段的内容。

要获取字段的简码,您可以单击选项卡 高级 在块的关联字段中 表单字段。

消息的定义

成功提交表单数据后,您的访问者将在表单下方看到一条成功消息。 同样,当表单数据未提交时,他们也会看到错误消息。

另见: 如何使用 Elementor 创建团队成员部分

您可以从块中覆盖这些默认消息以及其他两条消息 其他选项 标签下 包装内容 从设置面板。 激活 自定义消息 覆盖默认消息。

如何在 Elementor 中创建联系表单

自定义表单

完成基本设置后 内容选项卡 从设置面板,您可以切换到 样式 自定义表单。 您可以在这里打开五个街区。

  • 表单

您可以打开此块来定义表单的列和行之间的空间、标签间距、表单标签的排版(字体系列、字体大小、字体样式等)以及后者文本的颜色。

  • 领域

您可以打开此块来定义字段文本的排版以及表单字段的颜色、背景颜色、大小、边框颜色和表单字段的边框半径。

  • 钮扣

您可以打开此块来自定义提交按钮。 您可以设置按钮文本排版以及颜色、背景颜色、边框半径、边框大小、边框颜色和文本填充等内容。 要设置按钮的大小,您可以从块中进行 按钮 下 内容选项卡。

  • 在线消息

您可以打开此块来定义消息文本的排版和颜色。

  • 步骤

仅当您要创建多步骤表单时才可以打开此块。

完成自定义表单和页面后,您可以发布页面。

潜在错误

将表单操作设置为时的常见错误之一 邮箱 就是表格没有发送。 相反,您将看到以下消息。

如何在 Elementor 中创建联系表单

Elementor 和大多数联系表单插件——包括联系表单 7——使用 WordPress 的默认邮件传递功能,称为 可湿性粉剂邮件. 这个函数取决于函数 发送邮件 这取决于 PHP 的功能。

阅读: 如何在 Elementor 中添加推荐滑块

不幸的是,所有提供商主机 不激活该功能 发送邮件 PHP的。 如果是这样,您的表格将不会被发送。 相反,您会收到与上面类似的错误消息。

要解决此问题,您可以在 WordPress 上安装和配置自定义邮件递送服务。 或者,如果可能,您可以要求您的托管服务提供商启用该功能 发送邮件 PHP的。

最后

Elementor 是最全面的页面构建器插件之一。 它带有许多设计元素(称为小部件),您可以轻松地向页面添加元素,包括联系表单。

尽管您可以使用表单小部件从头开始使用您自己的设计创建联系表单,但 Elementor 还提供了您可以使用的表单模板。 你甚至可以 创建联系页面 (当然还有联系表格)来自模板。

立即获取Elementor Pro!

结论

这是 ! 这就是本文的内容,该文章向您展示了如何在 Elementor 中创建联系表单。 如果您对如何到达那里有任何疑问 f让我们知道 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...