如何使用 Elementor 在 WordPress 中创建联系我们页面

已发表: 2022-09-22

联系我们页面是网站上最重要的页面之一。 它允许访问者与网站背后的公司或个人取得联系。 一个好的联系我们页面将包含一个表单,允许访问者提交他们的姓名、电子邮件地址和消息。 它还将包括一种让网站所有者回复访问者的方式,例如电话号码或电子邮件地址。 有许多插件和工具可用于创建联系我们页面。 在本文中,我们将向您展示如何使用 Elementor 在 WordPress 中创建联系我们页面。 Elementor 是一个流行的 WordPress 页面构建器插件,它允许您通过拖放创建自定义页面和帖子。

大多数网站所有者和设计师都没有意识到拥有联系页面的重要性。 在本文中,我们将了解联系页面的基础知识以及如何构建一个出色的页面。 我们公司的联系我们页面将使用 Elementor 的页面构建器和 PowerPack 插件设计。 第一步应添加联系表格。 Contact Form 7 插件用于自定义联系表单。 第 3 步:将信息列表小部件分布在同一行的列中。 图标、颜色、文本、间距和填充都应该改变。

第三步,拖拽PowerPack的谷歌地图小部件。 您可以通过使用纬度和经度坐标来获取办公室的位置。 要发布更改,请单击页面左下角的发布按钮。

如何在 WordPress Elementor 中创建联系表?

学分:WPForms

您可以按照以下步骤在 WordPress Elementor 中创建联系表单: 1. 登录到您的 WordPress 帐户并转到您的仪表板。 2. 在左侧边栏中,将鼠标悬停在 Elementor 上,然后单击添加新的。 3. 为您的联系表单命名,然后单击“使用 Elementor 编辑”按钮。 4. 在 Elementor 编辑器中,将联系表单小部件拖放到您的布局中。 5. 配置联系表格设置并点击发布按钮。

Elementor 是一个页面构建器,提供了广泛的特性和功能。 Fluent Forms 是用于创建表单的最简单易用的表单构建器。 在本文中,我们将学习如何创建最好的 Elementor 联系表。 您将学习如何使用两种方法之一创建 Elementor 联系表。 Elementor Forms 插件不包括常规表单构建器插件的所有功能。 系统中没有用于管理提交的内置功能。 具有各种字段、功能和集成的表单构建器以及数据管理服务将帮助您分析您生成的潜在客户。

使用 Fluent Forms,您可以完全控制如何在Elementor 页面构建器中自定义表单。 Fluent Forms 的安装方式与任何其他 WordPress 插件相同。 如果您没有 WordPress 仪表板,您可以通过访问 WordPress.org 来安装和激活它。 您需要升级到专业版才能访问免费版的所有功能。 Fluent Forms 允许您选择任何您想要的元素或联系人,您还可以向其中添加自己的设计。 输入字段可以重新排列,文本可以优化,渐变背景颜色可以改变,排版内容可以改变。 您的表单可以发布在不同的页面或博客内,以您方便的为准。

如何将 Contactor 7 页面添加到 Elementor?

信用:foliovision.com

这个问题没有万能的答案,因为将接触器 7 页面添加到 Elementor 的过程会因您尝试添加的特定接触器 7 页面而异。 但是,一般来说,您需要先在 Elementor 中创建一个新页面,然后使用“添加页面”按钮将联系人 7 页面添加到该页面。 添加接触器 7 页面后,您可以使用各种 Elementor 工具根据自己的喜好对其进行自定义。

Contact Form 7 是一个 WordPress 联系表单构建器,已经存在了很长一段时间。 Contact Form 7 插件不包含允许您直接将其与 Elementor 集成的内置功能。 通过使用第三方插件和插件,例如 PowerPack Addons for Elementor,您可以设计 Contactform 7 以满足您的特定需求。 在下拉菜单中,选择 Contact Form 7。使用 elementor 编辑器,您可以创建新页面或编辑现有页面。 您可以将刚刚创建的小部件拖放到刚刚创建的页面上。 为您的表单添加有吸引力且独特的标题和描述是一种选择。

此外,无需运行任何代码即可显示验证消息。 可以使用联系表 7 样式器小部件将自定义样式添加到 PowerPack 联系表 7 中的单选按钮。 通过更改排版、添加背景和文本颜色以及配置边框和边距设置,您可以轻松自定义您的消息。 PowerPack Elementor 插件附带 80 多个小部件和 200 多个预先制作的页面和部分模板。

Elementor 联系表不起作用

学分:WordPress

如果您的 Elementor 联系表无法正常工作,您可以检查一些事项。 首先,确保您在“收件人”字段中输入了正确的电子邮件地址。 接下来,检查表单的操作 URL 以确保它是正确的。 最后,检查电子邮件通知设置以确保它们已打开。

Elementor 联系表简码

向您的网站添加联系表单的最简单方法是使用联系表单简码​​。 有许多可用的联系表单简码​​,但最受欢迎的是 [contact-form-7] 简码。 此短代码可用于创建简单的联系表单或更复杂的包含多个字段的联系表单。 要使用 [contact-form-7] 短代码,只需将其添加到页面内容或发布您希望显示联系表单的位置。 然后,用所需的字段和值填写短代码。 例如,要创建一个包含姓名字段、电子邮件字段和消息字段的简单联系表单,您可以使用以下简码:[contact-form-7] name=”Your Name” email=”[email protected] ” message=”Your Message” [/contact-form-7] 此简码将创建一个包含指定字段的联系表单。 姓名和电子邮件字段是必需的,但消息字段是可选的。 如果您想在联系表单中添加其他字段,只需将它们添加到简码中。 例如,要添加电话号码字段,您可以使用以下短代码:[contact-form-7] name=”Your Name” email=”[email protected]” phone=”Your Phone Number” message=”Your Message ” [/contact-form-7] 您还可以指定表单的提交方式。 默认情况下,表单将通过电子邮件提交,但您也可以指定一个 URL 来提交表单数据。 例如,要将表单数据提交到 URL,您可以使用以下短代码:[contact-form-7] name=”Your Name” email=”[email protected]” action=”http://example.com /form-handler” message=”Your Message” [/contact-form-7] 此短代码会将表单数据提交到指定的 URL。 表单数据将作为 GET 请求提交,因此数据将在 URL 中可见。 如果要将表单数据作为 POST 请求提交,也可以指定方法属性。 例如,将表单数据作为 POST 提交

Mad Lemmings 向您展示了如何使用 Elementor:三种简单的方法来做到这一点。 所有这些选项都很简单,但根据您的要求和所需的插件,您可能需要升级它们。 Elementor Pro 插件是最常见和最简单易用的插件。 我一直在考虑的另一个选择是 WPForms。 我的客户喜欢使用此表单构建器,而不是标准的联系表单 7。如果您接受联系表单 7 默认设置,则 Elementor 可以完全简单地用于创建联系表单。 要创建包含姓名、电子邮件地址、主题和消息的基本联系表单,您必须首先下载并安装插件。

在 Contact Force 7 中,我发现很难理解如何通过表单发送电子邮件消息(我也可以使用表单执行此操作)。 WPForms 存在几个问题,这是一个基于文本的表单构建器,草率且容易出错。 一些 Elementor 插件开发人员创建了一个插件,允许您编辑和设置表单样式。 重要的是要记住,并非所有这些都始终是最新的。 您可以在页面右侧看到上次更新日期以查看更新时间。

如何将联系表添加到您的页面

如果您使用的是可视化编辑器,请导航到小部件面板并将联系表单小部件拖到您的页面上。 如果您包含联系表单短代码,它将被添加到您的页面内容中。

Elementor 联系表

Elementor 联系表是与客户保持联系并从他们那里获得反馈的最佳方式之一。 这是一个简单易用的表格,可以根据您的需要进行定制。 您可以添加字段、更改布局,甚至添加自定义 CSS 以使其看起来完全符合您的要求。

即使访问者不知道您的电子邮件地址,您也可以使用联系表格联系他们。 使用 WPForms 插件设置联系表单是最简单的方法。 因为它与 Elementor 页面构建器集成,所以它是 Elementor 网站的理想选择。 按照这些说明,您将学习如何使用此插件和 Elementor 创建联系表格。 任何使用 WPForms 的人都会发现它使用起来非常简单。 在表单构建器的左侧,选择设置,然后选择通知。 在右侧,您可以找到可以添加到联系表单中的所有字段。

您还可以上下拖动字段来移动它们。 在第 4 步中,Elementor 应该包含一个联系我们页面。 Elementor 可以配置为使用表单构建器工具创建联系表单。 第六步是为您的公司创建一个 Elementor 联系我们页面。 您唯一需要做的就是单击屏幕底部的绿色发布按钮。 使用该插件时,您可以轻松更改文本颜色、排版和背景颜色。 通过将您最喜欢的电子邮件营销服务与表单相结合,您可以连接到它。 使用 WordPress 创建联系表单就像使用联系表单插件一样简单。

如何在 Elementor 中更改联系表?

导航到 Elementor 编辑器安装插件后,所有小部件都将在编辑器中可见。 找到 Contact Form 7 小部件后,将该小部件拖放到新列中。 填写完表格后,您将被带到“编辑联系表格7”部分。

Forminator 的开发者 API 是开放且可访问的

没有比使用它作为起点更好的方法在 Forminator 之上构建新的东西了。 可以使用 Forminator 开发者 API 访问平台的所有数据和功能。 如果您有兴趣了解有关钩子和过滤器的更多信息,请参阅我们的示例。
Forminator WordPress 插件允许您创建自定义表单并与其他应用程序集成。 因为它是免费的并且对数百万用户开放,所以您可以向您的 WordPress 网站添加功能或构建您自己的应用程序。
您可以使用 Forminator 开发人员 API 获得对平台、其所有功能和所有数据的完全访问权限。

Elementor 页面构建器

Elementor 是 WordPress 的页面构建器插件,可让您在几分钟内创建漂亮、响应迅速的 WordPress 页面,而无需编写任何代码。 Elementor 带有一个强大的拖放编辑器,可让您轻松添加、删除和重新排列页面上的元素。 您还可以使用 Elementor 创建自定义 WooCommerce 产品页面、定价表等。

Elementor 是一个非常直观和流行的前端 WordPress 网站构建器。 有了这个应用程序,用户可以通过简单的拖放和使用 90 多个小部件来访问大量的自定义选项。 Elementor 通过允许添加登录页面、弹出窗口、动画和表单,为设计体验增加了一层新的交互性。 Elementor 是一个流行的 WordPress 网站构建器。 您无需成为编码专家即可开始使用,您可以在几分钟内创建一个网站,包括电子商务网站。 截至 2016 年 8 月,Elementor 拥有超过 3,000,000 名活跃用户。