您想在 WordPress 中创建自定义前端用户注册表单吗?
默认的 WordPress 用户注册表单显示 WordPress 品牌,与您网站的主题不匹配。
在本文中,我们将向您展示如何在 WordPress 中创建自定义用户注册表单。
为什么要在 WordPress 中添加自定义用户注册表单
默认的 WordPress 用户注册页面显示 WordPress 品牌和徽标。它与您的WordPress 网站的其余部分不匹配。
创建自定义用户注册表单允许您在 WordPress 站点的任何页面上添加注册表单。它可以帮助您在注册过程中提供更一致的用户体验。
自定义用户注册表单还允许您在注册时重定向用户。您还可以显示其他用户配置文件字段,将其与自定义前端登录表单相结合,并将其与您的电子邮件营销服务连接起来。
话虽如此,让我们看看如何在 WordPress 中创建自定义用户注册表单。
视频教程
订阅 WPBeginner
如果您更喜欢书面说明,请继续阅读。
在 WordPress 中创建自定义用户注册表单
创建自定义用户注册表单的最简单方法是使用WPForms。它是最好的 WordPress 联系表单插件,可让您在 WordPress 中创建所有类型的表单。
WPForms 非常易于使用,并提供拖放表单构建器,因此您可以使用它以您想要的方式自定义您的注册表单。该插件还与流行的电子邮件营销服务和 PayPal 等支付服务集成。
对于本教程,我们将使用WPForms Pro 计划,因为它包含用户注册插件。
您需要做的第一件事是在您的网站上安装并激活 WPForms 表单插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。
激活后,您需要访问WPForms » 设置页面以输入您的 WPForms 许可证密钥。您可以从 WPForm 网站上的帐户中获取此密钥。
验证密钥后,您需要访问WPForms » 插件页面,然后单击“用户注册插件”旁边的“安装插件”按钮。
WPForms 现在将安装并激活用户注册插件。安装插件后,您将看到状态更改为“活动”。
您现在已准备好创建自定义用户注册表单。
首先,只需访问WPForms » Add New以启动 WPForms 构建器。
首先,您需要在顶部输入表单的名称,然后将鼠标悬停在用户注册表单模板上。之后,单击“创建用户注册表单”按钮。
WPForms 现在将为您创建一个简单的注册表单。此示例表单将默认添加以下 WordPress 用户注册字段。
姓名 – 名字和姓氏
用户名
电子邮件
密码
简短的简历
您可以从左侧面板添加更多字段,也可以拖动字段以重新排列它们的顺序。
该插件还允许您编辑每个表单字段。只需单击任何表单字段,您就会在左侧看到“字段选项”。
例如,您可以更改字段标签、编辑其格式、添加说明、设置条件格式等等。
完成表格编辑后,别忘了点击右上角的“保存”按钮。
在自定义用户注册表单中添加自定义字段
WPForms 还允许您将自定义用户配置文件字段连接到您的用户注册表单。
为此,您需要向您的 WordPress 站点添加其他用户配置文件字段。最简单的方法是使用WordPress 插件。
在本教程中,我们使用高级自定义字段插件。但是,WPForms 的字段映射功能适用于任何使用标准 WordPress 自定义字段添加和存储用户元数据的插件。
您需要做的第一件事是安装并激活高级自定义字段插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。
激活后,您需要访问自定义字段»字段组并单击“添加新”按钮。
之后,输入新字段组的名称。例如,如果您想在注册时收集社交媒体信息,那么您可以将其命名为社交媒体详细信息。
接下来,继续并单击“+ 添加字段”按钮。
现在,您需要输入将出现在个人资料页面上的字段标签。您会注意到,当您输入字段标签时,字段名称将自动生成,但您可以根据需要编辑字段名称。
之后,继续并从下拉菜单中选择字段类型。您可以选择包含文本、数字、图像、文件、复选框、URL、密码等的字段。
还有更多用于编辑新字段的选项。您可以启用该选项以使该字段成为必填项、添加默认值、设置字符限制以及配置条件逻辑。
接下来,向下滚动到“位置”部分。在本节中,您必须创建一组规则来确定哪些屏幕将使用这些自定义字段。
由于我们希望它们出现在所有用户配置文件中,因此如果“用户角色等于全部”,您可以将其更改为显示此字段组。
现在,滚动到“设置”部分并通过将切换从“否”滑动到“是”来确保该字段处于“活动”状态。
在您对新的自定义字段设置感到满意后,请继续并单击“发布”按钮。
要查看您的自定义字段,只需转到用户»个人资料并向下滚动到页面底部。
现在我们已经创建了一个自定义用户配置文件字段,让我们将其添加到 WPForms 中的自定义用户注册表单中,然后确保将表单字段映射到自定义字段,以便正确存储数据。
您需要访问WPForms » 所有表单页面来编辑我们之前创建的自定义用户注册表单,或者您也可以创建一个新的。
之后,从左侧面板中拖动一个字段以将其添加到您的表单中。在此示例中,我们将“网站/URL”字段添加到表单中。
网站/URL 字段现在将出现在您的表单预览中。您需要单击该字段,WPForms 将在左侧面板中显示其属性。
继续,将标签从网站/URL 更改为社交媒体详细信息。您还可以为该字段添加说明。
不要忘记点击屏幕右上角的“保存”按钮来保存您的表格。
接下来,您需要单击“设置”按钮进行高级表单设置和字段映射。在设置页面上,单击“用户注册”选项卡。
WPForms 现在将显示您的表单字段和它们下方的下拉菜单,以选择要与之映射的 WordPress 注册字段。
您会注意到 WPForms 会自动映射您的默认字段,例如姓名、电子邮件、密码等。您还可以选择希望用户在提交表单后被重定向的页面。
您需要向下滚动到“自定义用户元”部分。在这里,您可以输入您之前创建的自定义元键,然后选择您要映射的自定义表单字段。
不要忘记点击屏幕右上角的“保存”按钮来保存您的设置。
在 WordPress 中添加您的自定义用户注册表单
WPForms 使将表单添加到您的 WordPress 帖子、页面和侧边栏小部件中变得非常简单。
您需要创建一个新的帖子/页面或编辑现有的。在您的 WordPress 编辑器中,单击顶部的加号 (+),然后向下滚动到小部件部分以添加 WPForms 块。
之后,您可以从 WPForms 块的下拉菜单中选择您的自定义注册表单。
您现在将在 WordPress 编辑器中看到您的注册表单预览。继续发布您的帖子或页面,以查看自定义注册表单。
WPForms 还允许您在侧边栏中添加自定义用户注册表单。只需访问外观»小部件页面并将 WPForm 小部件添加到侧边栏。
接下来,您需要从小部件设置的下拉菜单中选择要显示的表单。不要忘记单击“保存”按钮来存储您的小部件设置。
就是这样,您现在可以访问您的网站以查看您的自定义用户注册表单。
使用您的注册表单创建自定义登录页面
当您将注册表单添加到您网站上的页面时,WordPress 将默认使用您主题的布局、模板和样式。
但是,您可以使用WordPress 登录页面构建器从头开始创建令人惊叹的注册页面。
SeedProd是 WordPress 的最佳登录页面构建器。它是用户友好的,并提供了一个拖放构建器,可帮助您创建所有类型的登录页面。该插件还提供预建模板和许多自定义功能。
对于本教程,我们将使用SeedProd 的 Pro 版本,因为它包括登录页面模板和高级自定义功能。SeedProd还有一个免费版本,但它没有创建登录页面的选项。
首先,您需要在您的站点上安装并激活 SeedProd 插件。您按照我们关于如何安装 WordPress 插件的详细教程进行操作。
插件激活后,您将被重定向到 WordPress 管理面板中的 SeedProd,并要求输入您的许可证密钥。您可以在您的 SeedProd 帐户中找到密钥。
验证您的密钥后,您现在可以使用注册表单创建登录页面了。
首先,前往SeedProd » Pages,然后单击“设置登录页面”按钮。
接下来,您需要为登录页面选择一个模板。SeedProd 提供不同的模板来帮助您快速入门。
选择模板后,将出现一个弹出窗口。您需要输入登录页面的名称和 URL。完成后,继续并单击“保存并开始编辑页面”按钮。
接下来,您可以使用 SeedProd 的拖放登录页面构建器来编辑登录页面。
只需从左侧菜单中选择一个块,然后将其拖到登录页面上要添加的位置。例如,您可以添加标题、图片、视频等。
要添加您的注册表单,请前往左侧的“高级块”部分。然后选择“联系表格”块并将其放在您的登录页面上。
我们建议您从模板中删除现有的用户名和密码块,这样用户就不必输入两次登录凭据。
接下来,单击登录页面上的 WPForms 块。现在,您将在左侧菜单中看到“选择表单”选项。继续并从下拉菜单中选择您的注册表单。
您现在应该在登录页面构建器中看到您的注册表单的预览。不要忘记单击“保存”按钮来存储您的更改。
之后,您可以转到“连接”选项卡并集成不同的电子邮件营销服务。SeedProd 可轻松与 Drip、Constant Contact、AWeber、ActiveCampaign 等集成。
接下来,您可以转到“页面设置”选项卡并在常规设置下将页面状态更改为发布。您甚至可以编辑页面标题、URL 并启用 SeedProd 链接。
如果您想针对搜索引擎优化您的页面,请转到 SEO 设置。您可以输入 SEO 标题、描述、社交媒体缩略图等。SeedProd 还允许您在脚本设置下添加代码片段。
对设置感到满意后,只需单击顶部的“保存”按钮并关闭页面构建器。
之后,前往SeedProd » Pages并单击登录页面下的开关以使您的页面“活动”。
您现在可以访问您的登录页面以查看正在运行的注册表单。
我们希望本文能帮助您了解如何在 WordPress 中轻松添加自定义用户注册表单。您可能还想查看我们关于如何选择最佳网站构建器的指南,或我们对小型企业最佳实时聊天软件的比较。