How to create login box?

2015-06-26 block, html, login, tutorial

In this guide I want to show you how to create log in box located there, where you want. I will show you how to achieve it based on my free addon to create custom contents, and I will create log in box in left column of my test store. Of course you will be able to put it in other places like right column, footer, top section or just there where you want, for example - with html box pro module


login form in left column prestashop


Free html box module installation

To create log in box easily, you will have to use some addon that allows to put custom contents to your online shop. I can offer absolutely free addon to build custom contents, as i already mentioned it is html box free. So just download and install module from website that i linked (you will download there always up to dated version of the addon that will support recently released version of PrestaShop).


Module configuration

After module installation - go to addon configuration page. Inside left hand box you can find places where you can put own contents. Due to the fact, that i want t show you how to create custom login box inside left column - select it. Exactly as i show on the image below:


html box free


Code to create log in form

On module configuration page you can find also rich text editor. This is a place where you can define own contents. To create working log in form you have to use proper code, that will fit to your online store. The most important thing is to create code with proper name of fields and with proper url to authentication page. In this case you can copy and paste code that I show below. Then turn off rich text editor or use source code tool to paste this code. If you don't know where is "source code" tool, take a look on this image.

<div class="block">
<form action="" method="post" id="login_form" class="box">
<h3 class="page-subheading">Log in</h3>
<div class="form_content clearfix">
<div class="form-group"><label>Email address</label> 
<input class="is_required validate account_input form-control" id="email" name="email" value="" type="text" />
<div class="form-group">
<input class="is_required validate account_input form-control" type="password" id="passwd" name="passwd" value="" />
<p class="lost_password form-group">
<a href="" title="Recover your forgotten password">Forgot your password?</a>
<p class="submit">
<input type="hidden" class="hidden" name="back" value="my-account" />
<button type="submit" id="SubmitLogin" name="SubmitLogin" class="button btn btn-default button-medium"><span><i class="icon-lock left"></i> Sign in </span></button>

Please take a look on highlighted lines, you can find there "action" and "href" param (for <form> object and for <a> object). You have to change to url of your online store. Please note that if you use many languages - you have to use also /en/ (or other language identifier). If you use only one language - it is enough to use just as a param of action and href variables.


That's all!

After you will paste code and modify the urls, save changes. Your login form block should be visible on your front office left column section. As I already mentioned, in the same way you can create login form exactly there - where you want. With free html box module you can put it to most imporant locations in your shop, and with custom content addon pro version - you can place it anywhere you want!



author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim