许多网站所有者都在努力收集用户输入,同时避免冗长的表单让用户感到不知所措。
下拉字段通过呈现简洁的选项列表使表单变得更简单。这意味着它们可以提高您的表单完成率并改善用户体验。
在本文中,我们将向您展示如何创建带有下拉字段的 WordPress 表单。
下拉字段允许用户从一组不同变体的列表中选择一个选项。用户只需单击该字段即可查看所有下拉选项。
作为网站所有者,您可以使用下拉字段创建 Web 表单,例如电子邮件通讯注册、联系表单、活动注册表或产品订单。
下拉字段可以提高表单的有效性。以下是一些优点:
一致性。设置的选项列表可保持收集的数据一致并防止无效输入。这使得数据分析更加准确。
动态字段。 下拉字段可以更轻松地设置条件逻辑。选项集列表可让您根据用户选择显示其他字段,而不会出现不必要的障碍。
缩短表单长度。将多个选项组合到一个紧凑的下拉菜单中可以使您的表单看起来不那么令人生畏。这可以带来更好的用户体验。
话虽这么说,让我们看看如何在 WordPress 中创建带有下拉字段的表单。以下是我们将在本教程中介绍的步骤的快速概述:
让我们开始吧!
WPForms 是最适合初学者的拖放式 WordPress 插件,用于创建表单。该表单生成器拥有 1,800 多个模板,只需点击几下即可帮助您创建用户友好的表单。
它还允许您集成第三方营销和支付平台,包括 Constant Contact 和 Stripe。
注意:WPForms Lite 带有下拉字段功能。也就是说,我们建议您获取该插件的高级版本,以便您可以设置条件逻辑并改善表单上的用户体验。
好消息是,WPBeginner 读者可以使用 WPForms 优惠券享受 50% 的特别折扣:SAVE50。
要安装和激活 WPForms,您可以阅读我们有关如何安装 WordPress 插件的指南。
激活后,您应该在 WordPress 管理区域中看到一个 WPForms 菜单,如下所示:
现在,您将能够访问 WPForms 构建器界面并创建带有下拉字段的表单。
要开始构建新表单,请将鼠标悬停在 WPForms 上,然后单击“添加新表单”。
或者,您可以点击WPForms。这会将您重定向到构建器的“表单概述”部分。
首先,请单击“+ 添加新项”按钮。
现在,您将在 WPForms 表单生成器中看到“设置”面板。在此面板中,您需要做的第一件事是命名您的表单。
例如,您可以在“命名您的表单”字段中键入“简单联系表单”或仅键入“联系表单”。
完成后,就可以选择模板了。
要使用表单模板,您只需将鼠标悬停在您想要的模板上,然后单击“使用模板”。在此示例中,我们将使用“简单联系表”。
要了解有关制作联系表单的更多信息,请参阅有关如何在 WordPress 中创建联系表单的详细指南。
完成设置过程后,您将被重定向到表单生成器,其中左侧有一个字段列表,右侧有一个实时预览。
现在,我们要向联系表单添加一个下拉字段。
只需单击“下拉菜单”并将其拖到表单的右侧即可。
注意:“标准字段”类别中的所有字段均可在 WPForms Lite 上使用。因此,您可以创建具有多项选择字段的表单,或免费在登录和注册表单中添加验证码。
在面板右侧,您将能够在联系表单上看到一个下拉字段。您可以将鼠标悬停在该字段上以访问其设置,其中包括:
复制按钮
一个删除按钮
“点击编辑”指令
“拖动重新排序”指令
使用拖放功能,将下拉字段移动到“评论或消息”上方。
通过在提交按钮之前添加“评论或消息”段落字段,您可以为表单完成过程提供更好的流程。它还使您的下拉字段更加明显,这样用户就不会忽视它。
在此步骤中,您将设置下拉字段的标签、选项和说明。您的选项列表应与您的表单类型一致。由于我们正在创建联系表单,因此我们提供新闻通讯订阅选项。
单击下拉字段,然后转到“字段选项”。
在“常规”选项卡上,填写必要的详细信息:
标签。 在下拉字段中,标签通常是问题。我们将使用“您想订阅我们的时事通讯吗?”作为示例。
选择。让我们添加“是的,请。”和“不,谢谢。”
说明。您可以在此字段中留下“您可以随时取消订阅。”。
必填。切换此选项可要求访问者填写此字段。
接下来,让我们设置条件逻辑。
条件逻辑意味着用“if”和“then”语句做出决策。当在表单中使用时,它根据用户给出的答案决定接下来发生什么。
设置条件逻辑使表单更容易完成。通过仅显示基于先前选择的相关选项,您的表单不会让用户因不必要的选择而不知所措。
在此示例中,如果用户选择“是,请”选项,我们将显示一个附加字段。我们将允许订阅者选择他们希望接收促销电子邮件的频率。
在此之前,您需要准备一个新字段。返回“添加字段”选项卡,然后单击“下拉菜单”或任何其他字段类型。然后,填写新字段的详细信息。
这是一个例子:
现在新字段已准备就绪,单击它并导航到“智能逻辑”选项卡。
从这里,您可以通过切换“启用条件逻辑”选项来激活条件逻辑。
激活后,您可以为新字段配置条件逻辑。
首先选择“显示”或“隐藏”新字段。然后,选择现有字段和用户输入。
以下是我们的配置供参考:如果“您想订阅我们的新闻通讯吗”为“是,请”,则“显示”此字段。
专家提示:想要将用户直接添加到您的电子邮件列表中吗?只需查看我们关于如何在 WordPress 中构建电子邮件列表的教程。
是时候个性化您的新表单了。
您可以首先在每次新用户提交表单时设置电子邮件通知。前往设置»通知并切换“启用通知”选项。
然后,浏览切换按钮下方表单的默认通知详细信息。
“默认通知”字段中的某些条目具有“智能标记”。该标签假定向何处发送表单提交通知等。也就是说,您可以根据需要调整设置。
例如,“发送至电子邮件地址”字段具有 {admin_email}“智能标记”。默认情况下,这将是您的 WordPress 网站的管理电子邮件。因此,任何表单提交通知都将发送到管理员电子邮件的收件箱。
您可以添加更多收件人,例如您的电子邮件营销专家。请务必用逗号分隔每封电子邮件。
如果您想了解如何将表单电子邮件发送给多人或不同部门,请阅读我们有关如何创建具有多个收件人的联系表单的指南。
接下来,“电子邮件主题行”的默认副本是“新条目:您的表单名称”。但是,您可以根据自己的喜好更改主题行,只要它易于识别即可。
提交表单的用户应在电子邮件中收到通知。 “发件人姓名”字段让用户知道谁发送了通知电子邮件。
下一个字段是“发件人电子邮件”,该字段的“智能标记”是 {admin_email}。
使用此默认设置,用户将收到来自您网站的管理电子邮件的通知电子邮件。
突出显示的部分通知您网站的管理员电子邮件地址位于不同的域中,例如@gmail.com。这可能会导致送达率问题,例如电子邮件最终进入“垃圾邮件”箱。
您可以阅读我们有关设置 WP Mail SMTP 的指南,以确保您的电子邮件最终到达读者的收件箱。
对于发送的每封通知电子邮件,收件人还可以选择回复。
在“回复”字段中,您可以设置哪个电子邮件地址将接收用户回复。该字段的“智能标记”是 {field_id=“1”}。这意味着用户的回复将发送到与“发件人电子邮件”字段中的电子邮件地址相同的电子邮件地址。
最后,“电子邮件消息”字段具有 {all_fields}“智能标记”。因此,您的电子邮件将包含您的表单字段以及用户响应。
完成通知自定义后,导航至“确认”。在本部分中,您将设置表单提交后如何显示确认。
首先,您可以选择“消息”、“显示页面”或“转到 URL(重定向)”作为确认类型。
如果您选择“消息”作为确认类型,您将显示一条确认消息,让用户知道您已收到他们提交的表单。
使用此确认类型,您可以编辑默认消息以适合您的品牌。转到“确认消息”字段,然后在文本框中输入您的自定义消息。
如果您选择“显示页面”,则需要选择 WordPress 网站上的现有页面。如果您选择“转到 URL(重定向)”,您将插入页面 URL。
在继续下一步之前,请单击“保存”,以免丢失进度。
完成后,您就可以在 WordPress 网站上显示新表单了。
要在 WordPress 网站上显示新表单,您可以使用 WPForms 表单生成器中的“嵌入”向导。
这将触发“嵌入页面”弹出窗口。在上面,您可以选择“选择现有页面”或“创建新页面”,以与您相关的为准。
在此示例中,我们选择“选择现有页面”。
下一步是选择要显示新表单的页面。
只需单击下拉菜单并选择一个现有网页即可。一旦你这样做了,点击“我们走吧!”。
然后,您将被重定向到包含 WPForms 说明的 WordPress 块编辑器。
您可以单击“完成”按钮来隐藏这些说明。
从这里,您需要单击“+”按钮来添加 WPForms 块。
在搜索栏中输入“WPForms”。然后,您应该在搜索结果中看到 WPForms 块。单击以添加它。
添加 WPForms 块后,您将在页面上看到一个下拉菜单。
只需单击下拉菜单并从列表中选择一个表单即可。让我们选择“联系表单”,因为这是我们刚刚制作的表单。
在最后阶段,让我们在发布之前预览表单,以确保一切看起来都很完美。在 WordPress 块编辑器中,单击查看 » 在新选项卡中预览。
如果需要,您还可以预览表单在平板电脑和移动设备上的外观。您所要做的就是点击查看»平板电脑或移动设备»在新选项卡中预览。
最后,如果不需要进一步调整,请点击“更新”。
恭喜!您已成功在 WordPress 网站上添加带有下拉字段的新联系表单。
这是我们的演示网站上的样子:
我们希望本指南能够帮助您学习如何使用下拉字段创建 WordPress 表单。接下来,您可能想了解如何使用联系表单来扩大您的电子邮件列表,以及如何在 Google Analytics 中设置表单跟踪以优化表单的性能。
如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。