1. Get login template<\/h2>\n
To find a login template is really easy and there are a lot free!! You only need to search in google with “bootstrap login template” or something similar.
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n
2. Login page<\/h2>\n
In this example we are going to use the Full Page Log In With Background theme. You can download it from here<\/a>. The bootsnipp page has a template preview, the HTML, CSS and JavaScript\u00a0 files; You need to copy and paste the resources inside your project.<\/p>\n You need to:<\/p>\n You will have a structure like this:<\/p>\n I changed the background image, first I added the background.jpg image inside images folder and modify the Note: <\/strong>Please, be careful with the image resolution; this should be shown correctly in good quality.<\/p>\n I changed the The login and register form have a heading where indicate the name of the form and a footer where is the link to the other form.<\/p>\n Login form<\/em><\/span><\/p>\n I created the register form, it’s so similar to login form; I only added the confirm Register form<\/em><\/span><\/p>\n The index.html page look like this:<\/p>\n We want \u00a0the user to only sees one form at a time. Next I added the hide class to the create div. login.js<\/em><\/span><\/p>\n I set the Login footer<\/em><\/span><\/p>\n Create footer<\/em><\/span><\/p>\n You need to decide how your forms will be processed, you can use PHP, Java or anything else. In my case I decide to use JavaScript then, the Please, always notify to the user if the login failed, to that I add an I created a loginCheck function inside login.js; If the mail is nallely@novella.com and the password is Wcg2016 you will be redirected to webcodegeeks page, or else you will see the message error. The function Sometimes we have an index page with a special information inside and we don’t want to modify it or waste space with a login form, in that case the modal login is a good solution; the link to the login\/register form could always be visible and we don’t need a special page; in this case we going to use the modal login with JQuery Effects template<\/a> inside of a nav bar.<\/p>\n The template<\/a> has a login, register and forgot password form, it’s from bootsnipp page then, you need to:<\/p>\n This template has the functionality to navigate between the three forms; You don’t need to worry about it.<\/p>\n The template has a The navigation bar looks like this:<\/p>\n This template has all the functionality on the modal.js file. You can modify all that you want there.<\/p>\n The login forms are useful when you need to restrict the access to your website; this provide all the graphic elements and sometimes, the templates have a register and forgot password form; but the functionality of each one, needs to be developed as you want.<\/p>\n The login page contains a little form where the users insert their credentials (user name and password) to access to some part of the web site. There are different types of login templates. In this example we will see how to use the: Login page Modal login 1. Get login template To find a login …<\/p>\n","protected":false},"author":167,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-13645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"\n![\"bootsnip\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/bootsnip.jpg\")
<\/a><\/p>\n\n
![\"structure\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/structure-1.jpg\")
<\/a><\/p>\n2.1 Change background<\/h3>\n
body <\/code>rule on the login.css file; now it looks like this:<\/p>\nbody {\r\n background: url(\"..\/images\/background.jpg\") no-repeat center center fixed;\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n}\r\n<\/pre>\n2.2 Modify login form<\/h3>\n
id<\/code> of each input on the form and set a name<\/code> attribute to process it after; I also added id<\/code> to the row div, it will be useful when the user switches between login and register form.<\/p>\n<div class=\"row\" id=\"login\">\r\n <div class=\"col-md-4 col-md-offset-7\">\r\n <div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">\r\n <span class=\"glyphicon glyphicon-lock\"><\/span> Login<\/div>\r\n <div class=\"panel-body\">\r\n <form class=\"form-horizontal\" role=\"form\">\r\n <div class=\"form-group\">\r\n <label for=\"loginMail\" class=\"col-sm-3 control-label\">\r\n Email<\/label>\r\n <div class=\"col-sm-9\">\r\n <input type=\"email\" class=\"form-control\" name=\"loginMail\" id=\"loginMail\" placeholder=\"Email\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"loginPass\" class=\"col-sm-3 control-label\">\r\n Password<\/label>\r\n <div class=\"col-sm-9\">\r\n <input type=\"password\" class=\"form-control\" name=\"loginPass\" id=\"loginPass\" placeholder=\"Password\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group last\">\r\n <div class=\"col-sm-offset-3 col-sm-9\">\r\n <button type=\"submit\" class=\"btn btn-success btn-sm\">\r\n Sign in<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"panel-footer\">\r\n Not Registered? <a>Register here<\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
2.3 Add the register form<\/h3>\n
password input<\/code>, changed the header<\/code> and footer<\/code> form.<\/p>\n<div class=\"row\" id=\"create\">\r\n <div class=\"col-md-4 col-md-offset-7\">\r\n <div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">\r\n <span class=\"glyphicon glyphicon-plus\"><\/span> New Account<\/div>\r\n <div class=\"panel-body\">\r\n <form class=\"form-horizontal\" role=\"form\">\r\n <div class=\"form-group\">\r\n <label for=\"newMail\" class=\"col-sm-3 control-label\">\r\n Email<\/label>\r\n <div class=\"col-sm-9\">\r\n <input type=\"email\" class=\"form-control\" name=\"newMail\" id=\"newMail\" placeholder=\"Email\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"newPass\" class=\"col-sm-3 control-label\">\r\n Password<\/label>\r\n <div class=\"col-sm-9\">\r\n <input type=\"password\" class=\"form-control\" name=\"newPass\" id=\"newPass\" placeholder=\"Password\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"confirmPass\" class=\"col-sm-3 control-label\">\r\n Confirm password<\/label>\r\n <div class=\"col-sm-9\">\r\n <input type=\"password\" class=\"form-control\" name=\"confirmPass\" id=\"confirmPass\" placeholder=\"Confirm password\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group last\">\r\n <div class=\"col-sm-offset-3 col-sm-9\">\r\n <button type=\"submit\" class=\"btn btn-success btn-sm\">\r\n Sign in<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"panel-footer\">\r\n Already registered <a>Sign in<\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
![\"doubleForm\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/doubleForm.jpg\")
<\/a><\/p>\n2.4 Switch between login and register form<\/h3>\n
\nTo change the hide<\/code> class between create and login row div, I created a login.js file. I get the element by document.getElementById<\/code> function and add\/remove the class with classList.remove<\/code> or clasList.add<\/code><\/p>\nfunction create(){\r\n document.getElementById(\"create\").classList.remove(\"hide\");\r\n document.getElementById(\"login\").classList.add(\"hide\");\r\n}\r\n\r\nfunction login(){\r\n document.getElementById(\"login\").classList.remove(\"hide\");\r\n document.getElementById(\"create\").classList.add(\"hide\");\r\n}\r\n<\/pre>\nonClick <\/code>to call the correspondent Javascript function<\/p>\n<div class=\"panel-footer\">\r\n Not Registered? <a onClick=\"create()\">Register here<\/a><\/div>\r\n<\/div>\r\n<\/pre>\n
<div class=\"panel-footer\">\r\n Already registered <a onCLick=\"login()\">Sign in<\/a><\/div>\r\n<\/div>\r\n<\/pre>\n
2.5 Functionality<\/h3>\n
onsubmit<\/code> property is set with a javascript function only to simulated the functionality; If you want to learn more about how you can do it in a right way, you can check the login form in PHP example<\/a>.<\/p>\nerror div<\/code> inside the div form with class=\"hide\"<\/code>; this will be unhide when an error occurs.<\/p>\n<div class=\"alert alert-danger hide\" id=\"error\">\r\n <b>Error <\/b>User or password is incorrect.\r\n<\/div>\r\n<\/pre>\n
return false<\/code> to indicate that the page won’t be reloaded after the submit <\/code>form.<\/p>\nfunction loginCheck(){\r\n var loginMail = document.getElementById(\"loginMail\").value;\r\n var loginPass = document.getElementById(\"loginPass\").value;\r\n if(loginMail == \"nallely@novella.com\" && loginPass == \"Wcg2016\"){\r\n document.getElementById(\"error\").classList.add(\"hide\");\r\n window.location.replace(\"http:\/\/webcodegeeks.com\");\r\n }else{\r\n document.getElementById(\"error\").classList.remove(\"hide\");\r\n }\r\n return false;\r\n}\r\n<\/pre>\n3. Modal login<\/h2>\n
3.1 Get template<\/h3>\n
\n
![\"forms\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/forms.jpg\")
<\/a><\/p>\n3.2 Create a navigation bar<\/h3>\n
row<\/code> content with a paragraph and button; I changed it to a nav bar like the following:<\/p>\n<nav class=\"navbar navbar-default navbar-static-top\">\r\n <div class=\"container-fluid\">\r\n <div class=\"navbar-header\">\r\n <a class=\"navbar-brand\" href=\"#\">\r\n <li class=\"glyphicon glyphicon-briefcase\"><\/li>\r\n <\/a>\r\n <\/div>\r\n <div class=\"navbar-right\">\r\n <p class=\"navbar-text\"><a href=\"#\" data-toggle=\"modal\" data-target=\"#login-modal\">Sign in\/Sign up<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n<\/pre>\n
![\"nav\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/nav.jpg\")
<\/a><\/p>\n3.3 Functionality<\/h3>\n
4. Resume<\/h2>\n
5. Download<\/h2>\n
\nLogin form page from here<\/a>.<\/strong>
\nModal Login from here<\/a>.<\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"