如何在 Elementor 中自定义 WordPress 表单 [+ 模板]

您想在 Elementor 中创建和自定义您自己的 WordPress 表单吗？

为您的网站定制表单是展示您的特定品牌、个性化和意图的好方法。 借助 WPForms 和 Elementor 提供的直观构建器，定制变得轻而易举。

在本文中，我们将向您展示如何在 Elementor 中自定义您最喜欢的 WordPress 表单。 另外，我们还提供了一些您可能想自己获取的最受欢迎的表单模板。

立即创建您的 WordPress 表单

WordPress 需要 Elementor 吗？

您不一定需要为您的 WordPress 网站获取 Elementor 插件，但它非常有用。

Elementor 是一个页面构建器插件，提供拖放界面，非常适合那些没有强大编码技能或设计专业知识的人。 它提供广泛的定制，允许您创建您想要的网站布局和设计。

因此，您的 WordPress 网站是否需要它取决于您的具体要求和偏好。 如果您熟悉 HTML、CSS，并且具有很强的设计能力，则可能不需要 Elementor。

Elementor 提供免费和高级版本，因此您始终可以从免费版本开始，并根据需要进行升级，使其能够满足您的需求。

如何在 Elementor 中自定义 WordPress 表单

安装并激活插件

不用说，您需要 WPForms 和 Elementor 才能执行此处的这些步骤。

但无论如何我们还是要说：请务必在 WordPress 仪表板中安装并激活 WPForms 和 Elementor 插件。

有关在网站上安装插件的完整说明，请查看这份方便的指南。

现在，您已准备好开始定制。 我们将向您展示如何在 Elementor 中执行此操作，从基本联系所需的要素开始。 然后，我们将为每个表单示例构建这些元素（双关语），因为它们变得更加复杂。

想要更多灵感吗？ 查看在 Elementor 中添加和自定义 WordPress 表单的不同方法。

联系表

联系表单是您网站上最必要的表单之一，并且仍然是我们最受欢迎的表单模板。

要使用 Elementor 创建联系表单，请首先导航到您的 WordPress 仪表板。 单击侧栏中的页面，然后单击添加新的。

然后，单击蓝色的“使用 Elementor 编辑”按钮加载 Elementor 页面构建器，该构建器允许您嵌入联系表单并定制各种页面元素。

现在，Elementor 页面构建器将打开，您可以在其中拖放各种块和元素以包含在页面上。

继续将 WPForms 块拖放到页面上。 现在，您可以从此处的下拉菜单中选择一个表单，也可以添加一个新表单。

让我们单击“+ 新表单”将表单放入块中。

然后，WPForms 构建器将加载，以便您可以自定义要在 Elementor 中使用的表单。

首先，通过在屏幕顶部的框中键入内容来命名您的表单。 我们将其命名为“联系表格”，以便我们知道稍后在哪里以及如何使用它。

然后，从库中选择一个模板来构建您的表单。

您可以使用空白表单模板从头开始构建表单，也可以使用预先制作的包含所有必要字段的特定模板来开始工作。

对于我们的联系表，我们将使用一个模板。

您可以向下滚动页面来浏览模板，也可以搜索特定内容。 例如，搜索“联系表单”，将生成各种联系表单模板供您选择。

我们将使用简单联系表单模板来构建我们的表单。

这是我们最受欢迎的表单模板之一，因此我们建议您也使用它来获得好处！

而且，与往常一样，此表单模板很容易使用其他字段和设置进行自定义。 只需单击并按住所需字段并将其拖到您的表单上即可。 然后，只需单击该字段即可对其进行编辑。

使用简单联系表单模板，您的表单会收集用户的姓名，以便您可以个性化与他们的任何通信，并且还会将他们的消息或评论转发给您。

表单上需要考虑的另一个自定义元素是用户在提交表单时收到的确认消息。 导航到表单生成器的“设置”部分，然后单击“确认”选项卡。

在这里，您可以编辑表单用户单击“提交”后屏幕上显示的消息。

在我们的简单联系表模板上，确认消息显示：“感谢您与我们联系！ 我们会尽快与您联系。”

请注意，我们在库中提供的所有表单模板都已为您的用户准备好相关的确认消息，但我们鼓励您以您认为合适的方式编辑此消息！

完成对表单的任何自定义后，单击顶部的“保存”按钮。 您可以通过单击表单生成器窗口右上角的X来关闭表单生成器。

现在，我们将回到 Elementor 页面构建器。

通过嵌入页面上的联系表单模板，我们现在可以自定义表单样式。 我们可以编辑字段、标签、按钮等的样式。

在我们的表单上，我们使用“字段样式”设置，只需单击几下即可增加边框半径和颜色。

您可以看到，几次快速自定义就对该表单页面的样式产生了相当大的影响。

你会想出什么样的造型？

完成表单样式自定义后，请务必发布表单页面。

只需单击底部工具栏上的“发布”按钮即可。

现在，我们将在这些步骤的基础上使用 Elementor 自定义更多表单页面。

时事通讯注册表

您可能希望在网站上使用的另一种常见表格类型是时事通讯注册表单。

要在 Elementor 中自定义此表单，您将从上面的第一步开始：使用 Elementor 添加和编辑新页面，使用 WPForms 块添加新表单，然后选择要用作表单的模板。

由于您的网站访问者将使用此表单进行注册以接收您的新闻通讯，因此您需要一个包含用于收集其姓名和电子邮件地址的字段的模板。

因此，我们将使用时事通讯注册表单模板。

然后，您可以使用表单生成器包含其他字段，例如条款和条件复选框、用于防止垃圾邮件注册的自定义验证码，甚至是地理位置功能。

至于确认消息，由于模板再次为您处理好。

与往常一样，我们鼓励您写下您希望新订阅者收到的任何消息。 与此同时，它说：“感谢您订阅时事通讯！ 我们很快就会联系。”

完成后退出前，请不要忘记保存您的时事通讯注册表。

然后，回到 Elementor，我们可以再次自定义表单的样式。 这次，让我们更改字段样式、标签样式和按钮样式。

我们将继续在这里自定义字段样式，就像我们在上面的联系表单上所做的那样：将边框半径增加到 10 像素并将其颜色更改为黑色。

现在，我们还关注标签样式。 要使表单上的标签更加突出，请增加其尺寸。 我们还选择一种有趣的颜色用于错误消息。 您可以看到此颜色用于字段标签上的星号。

然后，将注意力转向“提交”按钮。

正如您在我们的表单上看到的，我们使用按钮样式来增加按钮的大小，以及背景和边框的颜色以匹配我们的其余样式。

为了获得完美的颜色匹配，我们只需复制使用标签样式中的颜色选择器选择的粉红色，并将其粘贴到按钮样式的背景颜色选择器中。

接下来，我们将利用 Elementor 中的所有表单样式选项发挥更多创意。

营地登记表

注册表是我们最受欢迎的模板之一，其中营地注册的表单模板最近需求量最大。

我们将浏览此处已经介绍的大部分步骤，然后直接从 WPForms 中选择表单模板。

对于此表格，请继续从我们图库中的选择中获取女童子军营注册表模板。

我们不会太担心编辑表单字段或确认消息，但我们非常欢迎您自定义模板以满足您组织的需求。

然后，在 Elementor 页面构建器中，我们将在高级设置中工作。

通过此设置选项卡，我们可以使用 WPForms 块进行很多样式设置，包括上传自定义背景的图像。

单击“高级”设置下方的“背景”选项卡来创建背景。 并确保背景类型为Classic 。

然后您可以上传图像作为 WPForms 块中显示的背景。

虽然确实需要对背景的图像大小、位置和其他元素进行一些配置，但这种自定义功能值得付出努力。

例如，在上面的示例中，我们可能希望在发布之前编辑文本颜色、边距和对齐方式以及表单的其他元素。

客户订单

我们不能写一篇以表单模板为特色的文章而不提及我们的订单表单模板。

我们将再次跳过已经介绍过的步骤，直接进行自定义。 对于此处的表单，我们将使用最流行的订单表单模板：客户订单表单模板。

现在，我们回到 WPForms 块高级设置。 我们还重新访问“背景”选项卡，但这一次， “背景类型”是“渐变” 。

通过渐变设置，您可以混合和匹配您能想到的任何类型的颜色搭配，这将以渐变的形式应用于订单的背景。

最终结果令人惊叹，定制选项无穷无尽。

现在，这只是 WPForms 和 Elementor 的所有自定义和样式选项的冰山一角。 因此，请务必查看我们的其他 Elementor 教程和文章。

立即创建您的 WordPress 表单

接下来，将 Elementor Forms 连接到 Google Sheets

恭喜！ 您已经在 Elementor 中创建出色的表单了。

现在，尝试将这些表单连接到 Google 表格。 虽然 Elementor 可以将表单条目存储在 WordPress 仪表板中，但有时您可能希望在 Google 表格中保留表单条目和潜在客户的副本。

因此，请查看我们的教程以了解具体操作方法！

准备好构建您的表单了吗？ 立即开始使用最简单的 WordPress 表单生成器插件。 WPForms Pro 包含大量免费模板，并提供 14 天退款保证。

如果本文对您有所帮助，请在 Facebook 和 Twitter 上关注我们，获取更多免费的 WordPress 教程和指南。