Hidden Login form for Your Joomla! Offline Page

Have you every needed to put your offline page up but realize you don’t have a way to login to the front of your site? In this tutorial we discuss how to create a hidden login form on your Joomla! offline page so your users can still login to the front end of the site without seeing the big ugly Joomla! form. Here is how to do it. The code below will create a button which will allow your users to toggle on and off the login form on your Joomla! site. This allows you to keep the design flow of your offline page without the obtrusive login form.

Here is how to do it:

1. First, you will need to add a little bit of JavaScript to your offline.php page.

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Login";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>

2. Then take your login form and wrap it in the proper HTML used by the JavaScript above:

<a id="displayText" href="javascript:toggle();" style="color:gray; font-size:8px;">Login</a>
<div id="toggleText"  style="display:none;position:absolute; left:0px; bottom;0px;">

//Joomla! form goes here

</div>

3. Add the Joomla! login form code below inside your HTML.

<form class=”rt-offline-login-form” action=”<?php echo JRoute::_(‘index.php’, true); ?>” method=”post” id=”form-login”> <input name=”username” id=”username” class=”inputbox” type=”text” alt=”<?php echo JText::_(‘JGLOBAL_USERNAME’) ?>” onblur=”if(this.value==”) { this.value='<?php echo JText::_(‘JGLOBAL_USERNAME’) ?>’; return false; }” onfocus=”if (this.value=='<?php echo JText::_(‘JGLOBAL_USERNAME’) ?>’) this.value=”” value=”<?php echo JText::_(‘JGLOBAL_USERNAME’) ?>” /> <input type=”password” name=”password” class=”inputbox” alt=”<?php echo JText::_(‘JGLOBAL_PASSWORD’) ?>” id=”passwd” onblur=”if(this.value==”) { this.value='<?php echo JText::_(‘JGLOBAL_PASSWORD’) ?>’; return false; }” onfocus=”if (this.value=='<?php echo JText::_(‘JGLOBAL_PASSWORD’) ?>’) this.value=”” value=”<?php echo JText::_(‘JGLOBAL_PASSWORD’) ?>” /> <input type=”hidden” name=”remember” class=”inputbox” value=”yes” id=”remember” /> <input type=”submit” name=”Submit” class=”button” value=”<?php echo JText::_(‘JLOGIN’) ?>” /> <input type=”hidden” name=”option” value=”com_users” /> <input type=”hidden” name=”task” value=”user.login” /> <input type=”hidden” name=”return” value=”<?php echo base64_encode(JURI::base()) ?>” /> <?php echo JHtml::_(‘form.token’); ?> </form>

4.The final markup should look something like this:

	<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Login";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();" style="color:gray; font-size:8px;">Login</a>
<div id="toggleText"  style="display:none;position:absolute; left:0px; bottom;0px;"><form class="rt-offline-login-form" action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login">
							<input name="username" id="username" class="inputbox" type="text" alt="<?php echo JText::_('JGLOBAL_USERNAME') ?>" onblur="if(this.value=='') { this.value='<?php echo JText::_('JGLOBAL_USERNAME') ?>'; return false; }" onfocus="if (this.value=='<?php echo JText::_('JGLOBAL_USERNAME') ?>') this.value=''" value="<?php echo JText::_('JGLOBAL_USERNAME') ?>" />
							<input type="password" name="password" class="inputbox" alt="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" id="passwd" onblur="if(this.value=='') { this.value='<?php echo JText::_('JGLOBAL_PASSWORD') ?>'; return false; }" onfocus="if (this.value=='<?php echo JText::_('JGLOBAL_PASSWORD') ?>') this.value=''" value="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
							<input type="hidden" name="remember" class="inputbox" value="yes" id="remember" />
							<input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGIN') ?>" />
							<input type="hidden" name="option" value="com_users" />
							<input type="hidden" name="task" value="user.login" />
							<input type="hidden" name="return" value="<?php echo base64_encode(JURI::base()) ?>" />
							<?php echo JHtml::_('form.token'); ?>
						</form>
</div>

Now when you go to your offline page you will see a tiny link that says Login in the bottom left corner of your screen. When you press this link the login form will toggle on with the option to hide it again. This is a great way to keep the Joomla! login form on your page without compromising the look and feel of your custom offline page. If you have any other solutions to this issue we’d love to hear from you!