Elementor的登录和注册表单创建

如果要创建一个供人们注册以使用特殊功能的会员网站,则最好创建专门的登录和注册页面。 这将使您的网站更加专业,在注册过程中询问其他用户信息,等等。

因此,我们整理了一个详细的教程,以帮助您使用Elementor 页面构建器plugin创建自定义登录和注册页面。

到目前为止,Elementor是WordPress中最受欢迎,功能最丰富的页面构建器plugin之一。 该plugin的免费版本带有大量用于基本站点构建的块和小部件。 而存在该plugin的专业版可提供更多高级小部件和块。

现在,Elementor 附带的表单构建器小部件被锁定在其专业版中。 但是,我们建议不要使用Elementor Pro来构建注册表,而是建议使用Ultimate Addon for Elementor (UAE) plugin ,因为与 Elementor Pro 相比,它带有许多强大的块和小部件。

表中的内容

创建自定义注册页面的好处

仅就功能而言,在您的网站上使用外观通用的注册页面没有任何问题。 但是,如果您这样做,那么您将错过为您的网站量身定制的注册页面带来的众多优势。

以下是创建自定义注册页面以给您带来一些想法的一些关键好处:

1.个性化用户注册页面

借助自定义注册页面,您可以使用自定义字段构建注册表单,并根据需要进行设计。 您可以根据需要设置样式,以使其与您的经营理念和网站产生共鸣。

用户注册表单窗口小部件可用于以下用途:

  • 成为在线商店会员的优雅解决方案
  • 自定义WordPress注册表格以反映您的业务
  • 论坛和在线学习网站的安全表格
  • 会员网站的定制注册表格

2.从一个表格中收集所有必需的信息

如果您想从会员那里收集特定信息,则可以将其作为注册表格的一部分。

因此,不仅是用户可以选择的用户名和密码,仅此而已。 您可以添加更多表单字段,例如姓名,电子邮件地址,联系方式等。 您可以在自定义字段的帮助下优雅地构建全面的表单,在其中可以成为注册表单的一部分。

3.自定义用户体验

您可以为会员提供定制的用户体验。 这可以将用户重定向到特定页面,帮助他们自动登录其帐户,或向其收件箱发送电子邮件。

4.打击垃圾邮件和增强安全性

通过添加Honeypot和ReCaptcha,您可以打击垃圾邮件发送者并防止虚假注册。

5.完美适合您的品牌风格

注册表格应与您网站的其他页面相似。 使用自定义注册表格,您可以构建与您的业务产生共鸣的表格。

如何使用Elementor创建自定义用户注册表单?

现在,您已经对自定义用户注册表单如何帮助您的业务有了基本的了解,这里是有关如何使用Elementor和阿联酋插件来帮助您创建自己的自定义用户登录体验的全面分步指南。

这是有关如何为网站创建用户注册表的三步指南。

注意在您继续之前,请确保您已通过前往仪表板 > 设置 > 常规 > 会员资格:会员资格

1.png

启用会员资格选项将允许任何用户在您的网站上注册。

步骤1:使用UAE (Elementor的最终附加组件) Plugin创建用户注册表单

要制作自定义用户注册表,请确保您拥有更新版本的阿联酋plugin ,以及激活的块。

一旦确定了创建登录页面的前提条件,就需要创建或添加新页面。 并在您想要附加用户注册表格的页面上进行编辑。

如果拖放窗口小部件,则可以看到默认的表单字段。

2.png

您可以使用这些字段-可以删除不需要的字段,或者添加其他字段,例如用户名,名字等。

有一个选项可以管理各个表单字段上的必填字段和“列宽”。

您还可以管理输入大小,字段标签(是否要显示或隐藏它们)或必需标记。

步骤2:配置表单设置

在介绍了基础知识之后,您可以通过访问“常规设置”部分来配置表单设置。 您可以从此处执行以下功能:

  • 新用户角色
  • 选择“注册后操作”

这是两者的详细说明:

新用户角色

如果您的会员网站要求用户在您的网站上注册,则默认情况下,您将“用户角色”分配为订阅者

您可以为成员设置默认的用户角色,当所有新用户在您的网站上注册时,将为所有新用户设置分配的角色。

Untitled.png

注册后选择动作

4.png

用户可以使用“用户注册表单”小部件选择在会员网站上注册后可以执行的以下操作:

  • 自动登录:使用此选项,您可以允许用户自动登录到您的网站。 首次提供凭据后,用户无需再次登录,因为在成功注册后,他将自动登录该网站。
  • 注册后重定向:使用此选项,您可以在成功注册后将用户重定向到欢迎页面或登录页面。 您可以通过在此选项下的 URL 字段中粘贴所需页面的 URL 来设置重定向页面。
  • 发送电子邮件:当用户成功在您的网站上注册他时,此选项将向他发送电子邮件以确认他的注册。 电子邮件的内容是可自定义的,您可以将这些电子邮件设为个性化,以使其更加温暖。 但是,如果您想向所有用户发送相同的电子邮件,也可以通过探索此选项来实现。
5.png
  • 在注册后隐藏:有时,您可能希望在用户成功在您的网站上注册后隐藏用户注册表单。 使用“隐藏后注册”选项,您可以在引导他们进入登录页面时隐藏注册表单,或者在向他们提供访问登录页面以访问网站的链接后仅显示“成功”消息。 您可以在小部件的“内容”选项卡的“常规设置”部分下找到此选项。

继续,您可以使用小部件的“样式”选项卡设计和设置用户注册表单的样式。

完成此操作后,您将完成“用户注册表单”窗口小部件的创建和配置过程。 该表格已准备就绪,可以在实时网站上发布。

步骤3:将用户注册表格添加到您的网站

这部分非常简单。 您可以直接拖放以添加此小部件,就像其他任何Elementor小部件一样。 您还可以保存包含小部件的部分,并在所需的“注册”页面中获取“保存的部分”。

6.png

下面我们详细说明了一些方法,可帮助您在Elementor编辑器中添加任何小部件。

例如, WooCommerce页面上的用户注册表格

如果要创建自定义的WooCommerce页面(即我的帐户页面),其名称为“自定义帐户页面”,则只需:

单击“使用Elementor编辑按钮”,您将进入Elementor编辑器。

我们可以像这样创建另一个注册表格,并按照上述相同步骤将其保存以在“自定义帐户”页面上使用。

最后,要将页面设置为“我的帐户页面”,请转到WordPress仪表板。 并按照以下路径在WooCommerce选项下:

WooCommerce>设置>高级>页面设置>我的帐户页面>我的帐户页面>选择自定义帐户页面

8.png

您可以在 WooCommerce 帐户页面上看到包含阿联酋用户注册表小部件的页面。

结论:

您可以使用Elementor和UAE为您的网站创建一个时尚的注册表单,并根据需要选择选项。

通过执行本文中给出的步骤,您可以使用UAE的User Registration Form小部件来注册用户。 这是为您的新用户创建时尚的用户注册表单的简单而优雅的解决方案。

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*