Create a custom Joomla login form

Joomla is a very powerful CMS and you can tweak almost any aspect of it to your liking. Today we'll talk about making a custom login form for your Joomla website.

The usual way to add a login form to a page is to go into the Joomla backend control panel and add the Login box to a page, so that the user is presented with a login form on that page. But what if you wanted a centralized login form? One that actually looked good and had its very own page? You'll need DirectPHP or some other extension that allows you to embed PHP in Joomla articles to make the following method work.

To do so, we'll do the following:
1. Create a blank article, and note down its id, let's say its id is 44, for this example. Call it "My Login Form"



2. In the Article editor, edit article 44 and create a form with the following code:

<form action="/index.php?option=com_user&amp;lang=en" method="post" name="com-login" id="redirect" name="redir">
    Login: <input name="username" />
    Password: <input name="passwd" />
    <input type="hidden" name="remember" value="yes" />
    <input type="hidden" name="option" value="com_user" />
    <input type="hidden" name="task" value="login" />
    <input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fY29udGVudCZ2aWV3PWFydGljbGUmaWQ9OTk=" />
    <input type="hidden" name="<?php echo JUtility::getToken(); ?>" value="1" />
    <input type="submit" name="Submit" />
</form>

 
The important things to note about this form are the hidden variables. The task must be set to login. The option must be set to com_user. The next two hidden variables are more interesting. The return input field's value is a base64-encoded string that represents the URL you wish to redirect the user to after the login. In my Joomla install, my Member Page has an id of 99, which makes the URL "index.php?option=com_content&view=article&id=99". Using the base64 encoder from here, I got the encoded string as "aW5kZXgucGhwP29wdGlvbj1jb21fY29udGVudCZ2aWV3PWFydGljbGUmaWQ9OTk=", which is what you see above. You can read more about the JUtility class at its official documentation page, but suffice it to say that you need to include that hidden variable to prevent spoofing.

3. Finally, modify your template so that the Login link at the top or left points to the id of your custom login form, 44.

We are done. When someone tries to log in now, they'll be taken to your custom login form page, which will process their credentials and redirect them to whatever page you wish them to go to. With DirectPHP or some other PHP extension, you should be able to dynamically change the redirection URL in the return value, but that shouldn't be too difficult.

Remember to not change the form input names, since they must be exactly those for Joomla to process the form. Of course, you'll need to style this custom login form with CSS or your template's styles to fit in with your Joomla look-and-feel, but that should be fairly straightforward.