如何使用 Elementor Pro 的表单生成器添加订阅表单

Elementor 可视化表单构建器是一个功能强大的工具，可以构建完整、漂亮的在线表单，而不需使用任何代码。

拖放表单小部件

首先将Form 小部件拖到页面上。Form 小部件会立即创建一个基本表单，其中已包含姓名字段、电子邮件地址字段、消息文本区域和提交按钮。

内容 > 表单字段

在表单选项面板中，从表单字段部分开始为表单命名，例如“订阅表单”。

接下来，我们看到插入小部件时自动生成的 3 个字段：全名、电子邮件和消息。

对于典型的潜在客户生成表单，不需要消息字段，因此可以通过单击字段选项最右侧的X将其删除，只留下姓名和电子邮件字段。如果想添加新字段，只需单击“添加项目”按钮即可，但对于此特定示例，我们只需要两个字段。

现在让我们仔细看看每个字段可用的选项。

字段的内容选项卡

类型：在字段的内容选项卡下，可以选择字段类型。例如，名称字段是文本字段类型，它仅允许用户在单行字段中输入任何标准文本。另一方面，电子邮件字段的类型为电子邮件，它仅接受具有适当电子邮件格式的文本，包含 @ 和点。

标签：接下来是标签选项。这不是必需的，但我们建议提供标签，即使决定隐藏它以进行显示，因为此文本将显示在有人提交表单时收到的电子邮件中。

占位符：接下来是占位符选项。这是一段可选的文本，可帮助访问者了解在这个字段中放置什么内容。

必填：现在，如果希望该字段为必填项，请将必填切换开关设置为是，否则，请将必填切换开关设置为否。对于大多数订阅表单，姓名和电子邮件字段通常都是必填的，因此请将这两个字段都设置为是。在表单字段部分的底部，可以选择显示或隐藏必填标记。如果希望字段标签旁边显示典型的红色星号，将其设置为显示。必填标记选项上方是显示或隐藏标签本身的选项。当然，如果隐藏标签，那么必填标记也会被隐藏，因为它们附加在标签上。

列宽：在许多情况下，订阅表单较窄是理想的选择，因此，不要占用太多垂直空间，而是将姓名和电子邮件字段放在同一行。为此，请单击姓名字段，这将打开该字段的选项。将字段的列宽从 100% 更改为 50%。现在对电子邮件字段执行相同操作。将两个字段的列宽都设置为 50% 后，这两个字段应该并排位于一行上。

字段的高级选项卡

现在让我们快速浏览一下字段的“高级”选项卡。在大多数情况下，不需要在这里进行任何调整。

但需要注意的一点是，此处的ID字段绝不能为空。如果由于某种原因它为空，请手动输入 ID 名称。没有 ID，表单将无法正常工作。会注意到，短代码包含ID 名称。如果希望发送特定字段数据，可以将此短代码复制/粘贴到发送的电子邮件中。默认情况下，电子邮件使用自动生成的短代码[all-fields]发送所有字段数据。但在某些情况下，不希望在电子邮件中发送每个字段的数据。在这种情况下，可以手动输入想要包含的字段的短代码。

对于普通订阅表格，可以保留这些高级选项，假设每个选项都分配了一个 ID。

内容 > 按钮

现在设置表单按钮的选项。大多数简单的表单（例如此表单）只有一个按钮 –提交按钮。但是，如果要创建多步骤表单，则每个步骤也应有一个按钮。 

首先，选择表单提交按钮的大小。这个选项为提供了一些“预设”样式，主要设置按钮的字体大小和填充。可以稍后在小部件的样式选项卡中调整这些，但如果想要快速设置，这里就是进行选择的地方。

接下来，将设置按钮的宽度。对于小型表单，20% 选项通常是一个不错的选择，但使用最适合自己特定样式的宽度就好。

由于此表单不是多步骤表单，我们可以跳过多步骤按钮选项。在提交字段中，输入按钮的文本。默认为发送，但其他常用选项可能是订阅、开始、注册等。

接下来，如果愿意，可以选择一个图标显示在按钮上的“提交”文本旁边。如果选择显示图标，则会出现两个新选项。图标位置允许选择将图标放置在“提交”文本之前还是之后，图标间距允许调整图标和“提交”文本之间的间距。

在某些情况下，如果希望添加一个唯一的按钮 ID，以便在需要时在自定义代码中使用。通常，此项留空，在本演示的案列中，将其留空。

内容 > 提交后的操作

这部分允许添加访问者提交表单后将执行的操作。主要的默认操作是向某人发送包含表单数据的电子邮件。其他典型操作可能是将用户重定向到特定页面或连接到第三方营销平台（例如 Mailchimp）。在此示例中，我们会执行其中每个操作。

电子邮件行动

如上所述，默认情况下已为我们添加了电子邮件操作。可以在“添加操作”区域中看到它。如果不希望将表单提交数据通过电子邮件发送给任何人，可以通过单击电子邮件旁边的X来删除此操作。当然，我们通常希望通过电子邮件发送数据，因此请保留此操作。现在请注意，在“提交后的操作”选项卡下有一个电子邮件选项卡。添加的每个操作都会在此选项卡下创建自己的选项选项卡。 

电子邮件选项卡有多个选项。

MailChimp 行动

确定这些设置符合要求后，就可以添加另一个操作了。这次，再次打开“提交后的操作”选项卡，然后单击“电子邮件”旁边的字段以打开下拉选项。在本例中，选择 Mailchimp。这会在“电子邮件”选项卡下添加一个名为MailChimp的新选项卡。单击该选项卡将其打开。

假设尚未设置 MailChimp 集成，会收到此消息：

在集成设置中设置你的 MailChimp API 密钥。也可以通过选择“自定义”来设置不同的 MailChimp API 密钥。

只需单击“集成设置”链接即可打开一个新的浏览器选项卡，可以在其中输入你的 MailChimp API 密钥。 

一旦在那里设置了密钥，将能够从表单的 MailChimp 选项卡的下拉列表中选择一个受众列表。这样做会在用户提交表单时自动将用户的姓名和电子邮件地址添加到你的 MailChimp 列表中。

重定向操作

最后，让我们添加最后一个“提交后操作”。打开“提交后操作”选项卡，单击该字段并从下拉列表中选择“重定向” 。这会在下方添加一个新的“重定向”选项卡。

单击“重定向”选项卡以打开其选项，然后输入表单提交后要将用户重定向到的页面的URL。这可以是之前为此目的创建的任何页面。对于此示例，它将是一个感谢用户注册的页面，并向用户提供提供的免费赠品或有关如何下载它的信息的页面。

内容 > 附加选项

因为这不是多步骤表单，可以直接跳过“步骤设置”选项卡并打开“其他选项”选项卡。表单 ID是可选的，但如果需要使用某些自定义代码的 ID 来定位此表单，可以在此处输入唯一 ID。否则，请将其留空。

将自定义消息设置为是，以便能够输入可能发送给用户的每条消息所需的特定措辞。如果希望将“发生错误”更改为“抱歉，但发生了错误”。
注意，自定义消息是浏览器不显示其自身错误时的后备消息。很多时候，用户永远不会看到这些特定消息。

风格

现在表单已正常工作，可以为其添加一些样式了。单击小部件的“样式”选项卡。

表单的每个部分都可以设置样式，包括表单本身、表单字段、提交和多步骤按钮、消息和步骤（如果使用）。

测试你的表格！

一旦根据自己的喜好设置了表单样式，就大功告成了。发布或更新页面，并填写表单以确保其按预期工作。