{"id":1622351,"date":"2020-05-13T14:26:43","date_gmt":"2020-05-13T14:26:43","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1622351"},"modified":"2025-02-20T07:51:14","modified_gmt":"2025-02-20T07:51:14","slug":"creating-custom-login-forms","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/creating-custom-login-forms\/","title":{"rendered":"Creating Custom Login Forms"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">On this page<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#what-youll-need\">What you\u2019ll need<\/a><\/li>\n\n\n\n<li><a href=\"#building-a-layout-using-a-login-form\">Create a template for the login form<\/a><\/li>\n\n\n\n<li><a href=\"#setting-the-login-form-template-to-appear-on-the-my-account-page-for-visitors\">Set the login form to appear only for visitors<\/a><\/li>\n\n\n\n<li><a href=\"#link-to-the-lost-password-page\">Insert the link to the &#8220;Lost password&#8221; page<\/a><\/li>\n\n\n\n<li><a href=\"#hide-pages-from-users-and-menus\">Hide pages from users and menus<\/a><\/li>\n\n\n\n<li><a href=\"#redirect-users-after-they-log-in\">Redirect users after they log in<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What you&#8217;ll need<\/h2>\n\n\n\n<p>Besides Toolset Blocks and Toolset Types plugins, you need to have the <strong>Toolset Access<\/strong> plugin installed in your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-a-layout-using-a-login-form\">Create a template for the login form<\/h2>\n\n\n\n<p>When non-logged-in users reach the <a href=\"https:\/\/toolset.com\/es\/course-lesson\/creating-a-my-account-page\/\">&#8220;My Account&#8221;<\/a> page, we want to provide a login form.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"cb94c8d772635f1582b7a32066205819\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-500x239.png\" alt=\"\" class=\"wp-image-1557235\"\/><\/a><figcaption><div class=\"tb-image-caption\">Custom login form<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Toolset<\/strong> \u2192 <strong>Content Templates<\/strong>.<\/li>\n\n\n\n<li>Create a new <a href=\"https:\/\/toolset.com\/glossary\/template\/\">template<\/a>. Name it <strong>Login Form<\/strong> and don\u2019t assign it to any <a href=\"https:\/\/toolset.com\/glossary\/custom-post-type\/\">post type<\/a>.<\/li>\n\n\n\n<li>Add the <strong>Fields and Text<\/strong> block to this template.<\/li>\n\n\n\n<li>Click the <strong>Add Field or View<\/strong> button.<\/li>\n\n\n\n<li>Locate and click the&nbsp;<strong>Login form<\/strong>&nbsp;button.<\/li>\n\n\n\n<li>The Login Form dialog opens. Leave the&nbsp;default&nbsp;options and&nbsp;click to insert the shortcode.<\/li>\n<\/ol>\n\n\n\n<p>You can\u2019t get a preview of the form on the backend as it can only work from the front-end.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"279bdb71c202baf7f3864777bf4dbc38\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-shortcode.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-shortcode-500x193.png\" alt=\"\" class=\"wp-image-1557401\"\/><\/a><figcaption><div class=\"tb-image-caption\">Template for non-logged-in users<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<p>You will display this template to non-logged-in users instead of the \u201cMy Account\u201d page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-the-login-form-template-to-appear-on-the-my-account-page-for-visitors\">Set the login form to appear only for visitors<\/h2>\n\n\n\n<p>Now, you need to configure the login form template to appear on the \u201cMy account\u201d page for users that are not logged in.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to&nbsp;<strong>Toolset \u2192 Access Control<\/strong>.<\/li>\n\n\n\n<li>Click the&nbsp;<strong>Post Groups<\/strong>&nbsp;tab.<\/li>\n\n\n\n<li><a href=\"https:\/\/toolset.com\/es\/course-lesson\/restricting-access-to-pages\/\">Create a group<\/a> <strong>Logged-in users only<\/strong>.<\/li>\n\n\n\n<li>In the <strong>Guest <\/strong>row, deselect the checkbox in the <strong>Read <\/strong>column. Then, click the&nbsp;<strong>pencil icon<\/strong>&nbsp;and a pop-up dialog will appear.<\/li>\n\n\n\n<li>Select&nbsp;<strong>Show Content Template<\/strong>. Here, for users with restricted access, you can select a template to display instead of the page content.<\/li>\n\n\n\n<li>Choose&nbsp;<strong>Login Form<\/strong>, which is the name of the layout we just created.<\/li>\n\n\n\n<li>Click the&nbsp;<strong>Set errors<\/strong>&nbsp;button to save your changes.<\/li>\n\n\n\n<li>Save your post group.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"9dc366b7fb9bc3b91b56960f9bdaa06e\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-as-template.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-as-template-500x321.png\" alt=\"\" class=\"wp-image-1557439\"\/><\/a><figcaption><div class=\"tb-image-caption\">Setting the login form template location to appear on the \u201cMy account\u201d page<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"link-to-the-lost-password-page\">Insert the link to the &#8220;Lost password&#8221; page<\/h2>\n\n\n\n<p>Now, the \u201cMy Account\u201d page should show the&nbsp;login form for the users that are not logged in.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"9437289ad82edbe83628d0560511bebd\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/03\/account-page-log-in-form-1-500x239.png\" alt=\"\" class=\"wp-image-1557453\"\/><\/a><figcaption><div class=\"tb-image-caption\">Login form for non-logged-in users<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"tb-fields-and-text\" data-toolset-blocks-fields-and-text=\"360284519b991feb492b582c7d84725f\"><p>To help users in case they forget their password, you can <a href=\"https:\/\/toolset.com\/es\/course-lesson\/creating-the-lost-password-page\/\">set up the &#8220;Lost password&#8221; page<\/a>. Once you have it, simply link to it from the Content Template we created previously for the login form.<\/p>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"b9e9c5248a77b3edbe2d2b5bcee67637\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/account-page-reset-password-link-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/account-page-reset-password-link-1-500x272.png\" alt=\"\" class=\"wp-image-1624423\"\/><\/a><figcaption><div class=\"tb-image-caption\">Reset your password link<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"hide-pages-from-users-and-menus\">Hide pages from users and menus<\/h2>\n\n\n\n<p>To complete our \u201cMy Account\u201d page project, we offer one final suggestion. Some pages apply only to visitors, for example &#8220;Lost password&#8221;, &#8220;Reset password&#8221;, and &#8220;Create account&#8221;.<\/p>\n\n\n\n<p>It\u2019s best to hide these pages from all logged-in users, thus making them available&nbsp;<strong>only for guests<\/strong>.<\/p>\n\n\n\n<p id=\"hiding-restricted-pages-from-navigation\">When you hide pages from users by using&nbsp;<strong>Post Groups<\/strong>, they will also&nbsp;automatically be hidden for these users in the menus.<\/p>\n\n\n\n<p>Learn how to do this in our lesson about <a href=\"https:\/\/toolset.com\/es\/course-lesson\/hiding-pages-from-menus-and-users\/\">hiding pages from menus and users in WordPress<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Redirect users after they log in<\/h2>\n\n\n\n<p>After logging into the site, users should end up on a meaningful page. On directory or membership sites, taking them to their account page makes sense.<\/p>\n\n\n\n<p>You can easily do this by using an additional plugin. In our example, we&#8217;ll use the <a href=\"https:\/\/wordpress.org\/plugins\/peters-login-redirect\/\" target=\"_blank\" rel=\"noreferrer noopener\">LoginWP (Formerly Peter&#8217;s Login Redirect)<\/a> plugin to accomplish this. After installing the plugin, do the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the <strong>LoginWP<\/strong> \u2192 <strong>Redirections<\/strong> page and click the <strong>Add New <\/strong>button at the top.<\/li>\n\n\n\n<li>In our case, we want to add a redirect for a specific user role. In the <strong>Rule Condition <\/strong>dropdown, select <strong>User Role <\/strong>and then use the dropdown next to it to select the specific role.<\/li>\n\n\n\n<li>In the <strong>Login URL <\/strong>field, enter the page you want users to end up at after logging in.<\/li>\n\n\n\n<li>In the <strong>Logout URL <\/strong>field, enter the page you want users to end up at after logging out.<\/li>\n\n\n\n<li>Click the <strong>Save Rule<\/strong> button to confirm your selection.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"7aa8c740092939c7b17adb67fd6dc5d2\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2022\/12\/toolset-redirecting-users-on-login-logout-using-loginwp.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2022\/12\/toolset-redirecting-users-on-login-logout-using-loginwp-500x343.png\" alt=\"\" class=\"wp-image-2523621\"\/><\/a><figcaption><div class=\"tb-image-caption\">Setting up a redirection rule for a specific role using the LoginWP plugin<\/div><\/figcaption><\/figure>\n<\/div>\n\n\n<p>At the next login, users with the selected role will go to the specified URL.<\/p>\n","protected":false},"author":4341,"featured_media":1629053,"template":"","related-lesson":[8433],"class_list":["post-1622351","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-user-forms"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":7,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622351\/revisions"}],"predecessor-version":[{"id":2797266,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1622351\/revisions\/2797266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/1629053"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=1622351"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=1622351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}