Drupal 7 Login Methods and Module Roundup: Part 1Drupal 7 Login Methods and Module Roundup: Part 1

Categories:
If your site relies on user engagement, chances are you are using Drupal's powerful built in user modules. Sometimes, however, it can be difficult to understand what tweaks you can make to the default login process to make it a better experience all around. Should you present the login form on every page? Where should you put it? What methods can you use to display the login form in unobtrusive ways? What action does your site take after someone logs in? We're going to be presenting an array of options to hopefully point you in the right direction. Today we're going to be looking at the login form implementation itself. Let's start in!

How to control how the login form is displayed:
 
 
1. Form in a block


 
Luckily, in a standard installation of Drupal we get an automatic login form in a block. Because of this we can move the login form to any region and restrict it to certain URLs using the block visibility settings that are already in Drupal (for this block they should be found at: /admin/structure/block/manage/user/login/configure). This is the easiest way to get the ball rolling, as it doesn't require any module installation. One of the default Drupal 7 themes, Bartik, has default styling for different regions.



As you can see here, when the block is placed in the Header Region it gains some styling to put the form elements inline with each other. You can target specific regions in your CSS by using the class region name (e.g .region-header).
 
 

2. Login via custom form page

 
 
In this example we worked on for MidlevelU, the login form is displayed on a different page (and only on this page). To accomplish this we're going to need to do a few things. First, we already have a login form in a block but we need to create a page for it to "live" on. Head over to /node/add/page and create your custom page. Create a custom URL under "URL Path settings."



 
Go back to the login form block and drop it into the content region of your page. On my MidlevelU site, we actually created 2 custom pages. We used the Form Block module to provide a user registration form in a block as well. This simply involved installing and enabling the module. We then crated a separate page for the User Registration form to live on and used the same block visibility settings to place it on that URL. The only difference is that we added a different class to the tabs above the form to switch back and forth from registration to the login forms.



 
A more elegant solution may be to use the Quick Tabs module to preload both forms on a single URL, thus allowing a user to switch to the login form without loading a separate page, but we decided against it due to the overhead and added limitation of linking directly to the login form page from elsewhere on the site.
 
This technique is nice because it allows you to build extra content into the registration area, which may help provide more information to your users or build trust with them before they register.
 
 
3. Login via dropdown

Space can sometimes be a limitation on a site with a lot of other navigation options or content. Some may feel that they want to give the option to login on every page but they don't need to create a separate distinct page to facilitate it. We can handle this using a dropdown technique. Let's start with a simple module-based solution that will display the form on click.
 
Go and download the LoginToboggan module and enable it. After that it's a simple case of going to the user login block configure page (it should be at /admin/structure/block/manage/user/login/configure) and selecting "Collapsible form" from the options.




All that is needed is some simple CSS to make everything work:


#toboggan-container { position:relative; }
#toboggan-login-link-container a { display:block; height:65px; width:65px; text-indent:-9999em; overflow:hidden; background:url(../images/lock.png) center center no-repeat; }
#toboggan-login { position:absolute; z-index:9999; padding:10px; background:#ffffff; color:#000000; box-shadow:0 0 4px rgba(0,0,0,0.3); }
#toboggan-login a { color:#018fe2; }
#toboggan-login input { border:1px solid #777777; }
#toboggan-login ul li { list-style:none; padding:3px 0; }
.region-header #block-user-login .form-item { padding:5px 0; }
.region-header #block-user-login .item-list li.last { padding:0; }
.region-header #block-user-login input.form-submit { background:#cccccc; }
.region-header #block-user-login input.form-submit:hover { background:#cccccc; }

 

 

4. Login via modal window



Like the previous example, a modal window allows you to display content without reloading the page. Using a modal allows you to perhaps get more content on the screen then you otherwise would be able to in a dropdown style box. To do this we're going to use the Modal forms and cTools modules, so go ahead and install these.

The configure page (/admin/config/development/modal_forms) is pretty straightforward. Simply enable the options you want and then enable the feature by creating a link anywhere to /user/login." Alternatively you can use the Login form block with the LoginToboggan option set to "link." You can style the form using the CSS ID #modal-content form#user-login.
 
Experiment with these options and see which ones work best for your site. Part 2 of this post will come soon where we will explore different ways of tweaking the login features and post-login process.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.