为WordPress构建多步注册表格

钥匙要点

• > WordPress提供的默认表格通常与网站的设计和品牌不符，从而导致对自定义登录，注册和密码重置的需求不断增加。
>
• >教程说明了如何使用名为ProfilePress的插件来构建WordPress多步注册表单，该插件可以处理服务器端PHP验证，身份验证和自定义表单的授权。
>
• >该过程涉及将联系信息字段添加到WordPress用户配置文件中，使用HTML，CSS和JavaScript构建多步式表单，并使用插件的Melange功能将表单转换为功能的WordPress注册表单。
>可以通过CSS自定义多步表格，并且可以与其他工具或服务集成。确保表格对移动设备友好并验证用户输入至关重要。如果表格很长，则可以使用cookie或本地存储来保存用户的进度。
• >

> WordPress中包含的默认登录，注册和密码重置表格（与其开发的网站之外）通常不符合网站的设计和品牌。 过去，当WordPress是博客引擎时，这很好。此后，WordPress已演变为内容管理系统，导致对自定义登录，注册和密码重置表单的需求不断增长。

>

在本教程中，我们将学习如何使用我开发的称为ProfilePress的插件来构建WordPress多步注册表单。

>值得注意的是，我们以前已经介绍了如何使用ProfilePress以及选项卡式登录和注册窗口构建自定义登录，注册和密码重置表格。

> 以下是我们将在本教程结束时构建的多步注册表格的设计。

>请参阅使用jQuery和css3的Pen Multi Step注册表格，Agbonghama Collins（@collizo4sky）在Codepen上。

>

如果您想跳过本教程，这是WordPress供电站点中表格的现场演示。

>不进一步的ADO，让我们直接跳入构建多步登记表格。>

潜入编码

>在上面的演示中，“社交配置文件”部分包含一个Facebook，Twitter和Google字段，默认WordPress用户配置文件中不存在。结果，我们需要为上述社交配置文件字段创建联系方法，以便WordPress保存针对注册用户的配置文件输入的数据。

>使用'functions.php'文件添加联系字段

>有许多在线教程描述了如何将联系信息字段添加到WordPress用户配置文件，包括：

• >自定义WordPress用户配置文件的联系信息
• >向用户配置文件添加额外的联系方法
• 在WordPress中扩展用户联系信息

这些教程解释说，如果以下代码粘贴到您的主题的functions.php文件中，它将在WordPress用户配置文件中添加一个Facebook，Twitter和Google字段。

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

>使用ProfilePress插件添加联系字段

使用插件，可以通过填写键/标签表单来添加联系信息字段（请参见下图）。这位于“联系信息设置”页面中，其中键是WordPress内部使用的唯一名称来识别字段并标记显示给用户的字段描述。

有关更多信息，请使用ProfilePress插件将联系信息添加到WordPress配置文件中。

>导航到您的WordPress配置文件，查看显示的Facebook，Twitter和Google字段。

>已将Facebook，Twitter和Google联系信息字段添加到您的WordPress配置文件中，然后您需要通过Melange功能构建多步表单。>

构建多步形式

>我不会引导我们完成如何使用HTML，CSS和JavaScript构建多步骤的过程。随意围绕源代码戳，以了解这一点。相反，我们将学习如何将表格转换为实际功能的WordPress注册表格。

插件的混合功能能够转换几乎任何登录，注册密码重置，甚至可以编辑配置文件表单模板，以便可以使用工作wordpress等效（尽管它仅在高级版本中可用插件）。

>在安装插件后，单击下图中所示的混杂菜单，然后添加新按钮以启动建筑过程。

将向您介绍表格。填写如下的字段。

>在名称字段中输入表格的名称。让我们称其为“阶段”多步注册表格。

>将多步形式的HTML代码复制到Melange Design Tinymce编辑器，然后用各自的快捷代码等效替换输入字段，例如：

>

>我们本可以以形式的方式离开字段，而不会用其profilepress短码等效替换它们。但是，使用短代码会为输入字段添加正确的名称属性。

>如果您可以确定字段的名称属性（例如，对于用户名字段，名称属性为reg_username），则您也可以使用其短代码。

由于ProfilePress不包括用于插入JavaScript的文本区域，因此JavaScript代码将在表单的HTML代码之后立即进入Melange Design字段。

>注意：将Novalidate属性添加到标签中，以绕过令人讨厌的“具有名称=”的“无效形式控件”在基于眨眼的blitink中不可集中的错误）浏览器（例如Chrome和opera）阻止了该浏览器提交的表格。

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

代码说明：首先，我们在jQuery轻松库中包括了一个延期呼叫。这样做是为了在形式中添加宽松效果，然后是JavaScript代码，该代码实际上处理了多步。

>将多步形式的CSS粘贴到CSS样式表代码区域中。

注意：由ProfilePress提供动力的注册表格生成的错误包裹在div中，class name profilePress-reg-status，因此在样式表中的类。 在注册成功字段中输入以下代码，以显示成功用户注册的自定义通知。

保存表单并导航返回混合目录。

复制生成的快捷代码并将其粘贴到您选择的WordPress页面上。

保存页面，然后预览以查看行动中的多步注册。

> >可在此处提供多步注册表格的实时演示。

摘要

在本教程中，我们学习了如何使用我开发的称为ProfilePress的插件来构建WordPress多步骤注册表格。该插件处理服务器端PHP验证，自定义登录，注册，密码重置和前端编辑配置文件表单的身份验证和授权。

如果您有任何疑问，建议或贡献，请在评论中告诉我。

经常询问的问题（常见问题解答）有关为WordPress构建多步注册

>如何在不使用插件的情况下创建多步式表单？您需要对HTML，CSS和JavaScript有基本的了解。该过程涉及创建HTML表单，使用CSS进行样式，然后使用JavaScript控制表单的步骤。您也可以使用Ajax提交表格而无需刷新页面。但是，此方法需要对这些语言和WordPress开发有很好的了解。如果您不满意编码，则使用插件可能是一个更好的选择。

>

>除了注册外，我还可以使用多步表格吗？多步表格可用于多种目的。当您需要从用户那里收集大量信息时，它们特别有用。例如，您可以将它们用于调查，工作应用程序或复杂的联系表。关键是要将信息分解为可管理的块，以使用户更容易完成表单。

>

>如何自定义多步单的外观？可以通过CSS完成多步骤。您可以更改颜色，字体，按钮样式等。如果您使用的插件，它可能带有自定义选项。例如，某些插件允许您从不同的布局模板中进行选择或添加自定义CSS。

是否可以将条件逻辑添加到我的多步单？有条件的逻辑为您的多步格式。这意味着表单的步骤或字段可以根据用户的输入进行更改。例如，您可能需要根据用户以前的答案来显示不同的问题。这可以通过JavaScript或借助支持有条件逻辑的插件来完成。

我如何确保我的多步单是移动友好型？

>确保您的多步格式对移动设备友好而对用户体验至关重要。您可以使用响应式设计技术来做到这一点。这意味着表单的布局和元素将自动调整以适合不同的屏幕尺寸。如果您使用插件，请确保它支持响应式设计。

>我可以以多步单保存用户的进度吗？多步形式。如果表格很长，并且用户可能无法在一次会话中完成，则这可能很有用。您可以在用户浏览器中使用cookie或本地存储来执行此操作。一些插件还提供此功能。

如何以多步形式验证用户的输入？

验证用户的输入对于确保您收集正确的信息很重要。您可以通过使用JavaScript在提交表单之前检查输入来执行此操作。某些插件还提供内置验证功能。

>我可以将我的多步表单与其他工具或服务集成吗？服务。例如，您可能需要将表单数据发送到电子邮件营销服务或CRM。这可以通过API或借助支持集成的插件来完成。

>如何测试我的多步格式以确保其正常工作？

>测试您的多步格式对确保其正常工作至关重要。您可以通过自己填写表单并检查数据是否正确保存或发送。您还应该在不同的设备和浏览器上测试表格，以确保其响应且兼容。

>

>如果我在创建多步形式时遇到问题，该怎么办？在创建多步表格时，您可以尝试通过检查代码或插件设置来尝试对问题进行故障排除。如果您仍然遇到麻烦，则可以向在线社区，论坛或插件的支持团队寻求帮助。请记住，可以在需要时寻求帮助。

以上是为WordPress构建多步注册表格的详细内容。更多信息请关注PHP中文网其他相关文章！