Skip Navigation

Creating Custom Login Forms

To create a seamless experience for the site users, you can use Toolset to create custom login pages.

You need to have the Toolset Access plugin installed in your site.

Create a template for the login form

When non-logged-in users reach the “My account” page, we want to provide a login form.

Custom login form
  1. Go to ToolsetContent Templates.
  2. Create a new template. Name it Login Form and don’t assign it to any post type.
  3. Add the Field and text block to this template.
  4. Click the Add Field or View button.
  5. Locate and click the Login form button.
  6. The Login Form dialog opens. Leave the default options and click to insert the shortcode.

You can’t get a preview of the form on the backend as it can only works from the front-end.

Template for non-logged-in users

You will display this template to non-logged-in users instead of the “My Account” page.

Set the login form to appear only for visitors

Now, you need to configure the login form template to appear on the “My account” page for users that are not logged in.

  1. Navigate to Toolset → Toolset Access.
  2. Click the Post Groups tab.
  3. Click the Logged-in users only group.
  4. Click the pencil icon in the Guest row. A pop-up window opens.
  5. Select Show Content Template. Here, for users with restricted access, you can select a template to display instead of the page content.
  6. Choose Login Form, which is the name of the layout we just created.
  7. Click the Set errors button to save your changes.
  8. Save your post group.
Setting the login form template location to appear on the “My account” page

Test the “My account” page for non-logged-in users

Visit your “My Account” page on the front-end as a non-logged-in user and you should see the login form.

Log into your site to test the form.

Login form for non-logged-in users

To help users in case they forget their password, you can set up the “Lost password” page. Once you have it, simply link to it from the “My Account” page.

Reset your password link

Hide pages from logged-in users

To complete our “My Account” page project, we offer one final suggestion. Some pages apply only to visitors, for example:

  • Lost password
  • Reset password
  • Create account

It’s best to hide these pages from all logged-in users, thus making them available only for guests.

Use the following steps to accomplish this:

  1. Go to the Toolset Access Control page and click the Posts Groups tab.
  2. Click Add Post Group and add those three pages to the group.
  3. Edit the group and make sure it is only available for Guest users.
Post group settings

Feel free to create a new template that will display for other users.

Hiding restricted pages from navigation

Please note that when you are hiding pages from some users by using Post Groups, they will also automatically disappear from your navigation.

Originally written
May 13, 2020
Updated
July 9, 2020