How to display a login form in a popup using Colorbox in Drupal 7

o you want to display a login form in a popup? Here is a simple way of displaying the login form in popup using Colorbox in Drupal 7. For this, we need Colorbox module for Drupal 7 installed. Now, follow these steps:

First Step: Set up the content to be displayed

1. Wrap the Drupal 7, login form in a ‘div’ and set style as display:none;
Here we use a custom module named ‘MyModule’ to implement the hook_preprocess_page() function to process variables.

function MyModule_preprocess_page(&$vars) {
global $user;
if ($user->uid == 0) {
$vars['loginpopup'] = "<div style='display:none'>";
$vars['loginpopup'] .= "<div id='login-pop'>";
$vars['loginpopup'] .= drupal_render(drupal_get_form('user_login')); //Render the login form
$vars['loginpopup'] .= "</div>";
$vars['loginpopup'] .= "</div>";
}
}

2. Print the "loginpopup" variable to the pages wherever you need, like page.tpl.php, page--front.tpl.php etc.

<?php print($loginpopup); ?>

This helps us to keep the login form invisible and being processed at the time of page load.

Second Step:Trigger an event to display the login form

1. An anchor tag can be used to trigger the event. Create and place your link in the menu:

<a class="inlinepop" href="#login-popup">Login</a>

2. Now, set the corresponding click event with Colorbox in your js file

jQuery(document).ready(function($){
$(".inlinepop").colorbox({inline:true, width:"50%", href:"#login-pop"});
});

And we are done :-)