Customizing the retrieve password form for Magento theme

If you click on the Forgot your password? Click here! link, you can see that this page too needs customization:

To customize the preceding page, duplicate the file you created for the login page, login.phtml, and name it forgotpassword.phtml in the same bookstore folder under app/design/adminhtml/default/bookstore/template.

What we need to do is only change the title using the following code:

<div class= “form-title”>

<h1>

<?php echo Mage::helper(‘adminhtml’)-> ( ‘Forgot your user name or password?’); ?>

</h1>

<h2>

<?php echo Mage::helper(‘adminhtml’)-> ( ‘Insert your email to restore the password’); ?>

</h2>

</div>

Then, change the content of the form, inserting only the e-mail input as follows:

<div class= “input-container”>

<input type= “text”

id= “email” name= “email”

value= ” “

class= “required-entry input-text forgot-password validate-email” placeholder= “

<?php echo Mage::helper(‘adminhtml’)-> ( ‘Email Address:’); ?>” required>

</div>

<!– /.input-container –>

Now, of course, we need to make a change in the button text too:

<button type= “submit”

id= “login-btn” class= “btn-login”>

<?php echo Mage::helper(‘adminhtml’)-> ( ‘Retrieve Password’); ?> &raquo;

</button>

After the form, modify the Forgot your password? Click here! link using the following code. Clicking on this link will send you back to the login form:

<a class= “left” href= “

<?php echo $this->getUrl(‘adminhtml’, array(‘_nosecret’ => true)); ?>”>&laquo;

<?php echo Mage::helper(‘adminhtml’)-> (‘Back to Login’); ?>

</a>

Done! Now you don’t need to change anything else, because the page action is already set to perform the password reset, which will send an email to the user with the link to change the password or with the new password, depending on the settings.

Refresh the page. You will now see the new design of the pages, made in few simple steps, as shown in the following screenshot:

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.

Leave a Reply

Your email address will not be published. Required fields are marked *