"Custom Login, Registration & Forgot Password"
Bootstrap 3.3.0 Snippet by syanaputra

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- All the files that are required --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- Where all the magic happens --> <!-- LOGIN FORM --> <div class="text-center" style="padding:50px 0"> <div class="logo">login</div> <!-- Main Form --> <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="login-form-main-message"></div> <div class="main-login-form"> <div class="login-group"> <div class="form-group"> <label for="lg_username" class="sr-only">Username</label> <input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="username"> </div> <div class="form-group"> <label for="lg_password" class="sr-only">Password</label> <input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="password"> </div> <div class="form-group login-group-checkbox"> <input type="checkbox" id="lg_remember" name="lg_remember"> <label for="lg_remember">remember</label> </div> </div> <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> </div> <div class="etc-login-form"> <p>forgot your password? <a href="#">click here</a></p> <p>new user? <a href="#">create new account</a></p> </div> </form> </div> <!-- end:Main Form --> </div> <!-- REGISTRATION FORM --> <div class="text-center" style="padding:50px 0"> <div class="logo">register</div> <!-- Main Form --> <div class="login-form-1"> <form id="register-form" class="text-left"> <div class="login-form-main-message"></div> <div class="main-login-form"> <div class="login-group"> <div class="form-group"> <label for="reg_username" class="sr-only">Email address</label> <input type="text" class="form-control" id="reg_username" name="reg_username" placeholder="username"> </div> <div class="form-group"> <label for="reg_password" class="sr-only">Password</label> <input type="password" class="form-control" id="reg_password" name="reg_password" placeholder="password"> </div> <div class="form-group"> <label for="reg_password_confirm" class="sr-only">Password Confirm</label> <input type="password" class="form-control" id="reg_password_confirm" name="reg_password_confirm" placeholder="confirm password"> </div> <div class="form-group"> <label for="reg_email" class="sr-only">Email</label> <input type="text" class="form-control" id="reg_email" name="reg_email" placeholder="email"> </div> <div class="form-group"> <label for="reg_fullname" class="sr-only">Full Name</label> <input type="text" class="form-control" id="reg_fullname" name="reg_fullname" placeholder="full name"> </div> <div class="form-group login-group-checkbox"> <input type="radio" class="" name="reg_gender" id="male" placeholder="username"> <label for="male">male</label> <input type="radio" class="" name="reg_gender" id="female" placeholder="username"> <label for="female">female</label> </div> <div class="form-group login-group-checkbox"> <input type="checkbox" class="" id="reg_agree" name="reg_agree"> <label for="reg_agree">i agree with <a href="#">terms</a></label> </div> </div> <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> </div> <div class="etc-login-form"> <p>already have an account? <a href="#">login here</a></p> </div> </form> </div> <!-- end:Main Form --> </div> <!-- FORGOT PASSWORD FORM --> <div class="text-center" style="padding:50px 0"> <div class="logo">forgot password</div> <!-- Main Form --> <div class="login-form-1"> <form id="forgot-password-form" class="text-left"> <div class="etc-login-form"> <p>When you fill in your registered email address, you will be sent instructions on how to reset your password.</p> </div> <div class="login-form-main-message"></div> <div class="main-login-form"> <div class="login-group"> <div class="form-group"> <label for="fp_email" class="sr-only">Email address</label> <input type="text" class="form-control" id="fp_email" name="fp_email" placeholder="email address"> </div> </div> <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> </div> <div class="etc-login-form"> <p>already have an account? <a href="#">login here</a></p> <p>new user? <a href="#">create new account</a></p> </div> </form> </div> <!-- end:Main Form --> </div>
/*------------------------------------------------------------------ [Master Stylesheet] Project : Aether Version : 1.0 Last change : 2015/03/27 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. General Structure 2. Anchor Link 3. Text Outside the Box 4. Main Form 5. Login Button 6. Form Invalid 7. Form - Main Message 8. Custom Checkbox & Radio 9. Misc -------------------------------------------------------------------*/ /*=== 1. General Structure ===*/ html, body { background: #efefef; padding: 10px; font-family: 'Varela Round'; } /*=== 2. Anchor Link ===*/ a { color: #aaaaaa; transition: all ease-in-out 200ms; } a:hover { color: #333333; text-decoration: none; } /*=== 3. Text Outside the Box ===*/ .etc-login-form { color: #919191; padding: 10px 20px; } .etc-login-form p { margin-bottom: 5px; } /*=== 4. Main Form ===*/ .login-form-1 { max-width: 300px; border-radius: 5px; display: inline-block; } .main-login-form { position: relative; } .login-form-1 .form-control { border: 0; box-shadow: 0 0 0; border-radius: 0; background: transparent; color: #555555; padding: 7px 0; font-weight: bold; height:auto; } .login-form-1 .form-control::-webkit-input-placeholder { color: #999999; } .login-form-1 .form-control:-moz-placeholder, .login-form-1 .form-control::-moz-placeholder, .login-form-1 .form-control:-ms-input-placeholder { color: #999999; } .login-form-1 .form-group { margin-bottom: 0; border-bottom: 2px solid #efefef; padding-right: 20px; position: relative; } .login-form-1 .form-group:last-child { border-bottom: 0; } .login-group { background: #ffffff; color: #999999; border-radius: 8px; padding: 10px 20px; } .login-group-checkbox { padding: 5px 0; } /*=== 5. Login Button ===*/ .login-form-1 .login-button { position: absolute; right: -25px; top: 50%; background: #ffffff; color: #999999; padding: 11px 0; width: 50px; height: 50px; margin-top: -25px; border: 5px solid #efefef; border-radius: 50%; transition: all ease-in-out 500ms; } .login-form-1 .login-button:hover { color: #555555; transform: rotate(450deg); } .login-form-1 .login-button.clicked { color: #555555; } .login-form-1 .login-button.clicked:hover { transform: none; } .login-form-1 .login-button.clicked.success { color: #2ecc71; } .login-form-1 .login-button.clicked.error { color: #e74c3c; } /*=== 6. Form Invalid ===*/ label.form-invalid { position: absolute; top: 0; right: 0; z-index: 5; display: block; margin-top: -25px; padding: 7px 9px; background: #777777; color: #ffffff; border-radius: 5px; font-weight: bold; font-size: 11px; } label.form-invalid:after { top: 100%; right: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #777777; border-width: 6px; } /*=== 7. Form - Main Message ===*/ .login-form-main-message { background: #ffffff; color: #999999; border-left: 3px solid transparent; border-radius: 3px; margin-bottom: 8px; font-weight: bold; height: 0; padding: 0 20px 0 17px; opacity: 0; transition: all ease-in-out 200ms; } .login-form-main-message.show { height: auto; opacity: 1; padding: 10px 20px 10px 17px; } .login-form-main-message.success { border-left-color: #2ecc71; } .login-form-main-message.error { border-left-color: #e74c3c; } /*=== 8. Custom Checkbox & Radio ===*/ /* Base for label styling */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked, [type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; left: -9999px; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label, [type="radio"]:not(:checked) + label, [type="radio"]:checked + label { position: relative; padding-left: 25px; padding-top: 1px; cursor: pointer; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border: 0px solid #aaa; background: #f0f0f0; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } /* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after, [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after { position: absolute; color: #555555; transition: all .2s; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } /* disabled checkbox */ [type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before, [type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before { box-shadow: none; border-color: #8c8c8c; background-color: #878787; } [type="checkbox"]:disabled:checked + label:after, [type="radio"]:disabled:checked + label:after { color: #555555; } [type="checkbox"]:disabled + label, [type="radio"]:disabled + label { color: #8c8c8c; } /* accessibility */ [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before, [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted #f6f6f6; } /* hover style just for information */ label:hover:before { border: 1px solid #f6f6f6 !important; } /*=== Customization ===*/ /* radio aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { border-radius: 3px; } [type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before { border-radius: 35px; } /* selected mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '✔'; top: 0; left: 2px; font-size: 14px; } [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after { content: '\2022'; top: 0; left: 3px; font-size: 30px; line-height: 25px; } /*=== 9. Misc ===*/ .logo { padding: 15px 0; font-size: 25px; color: #aaaaaa; font-weight: bold; }
(function($) { "use strict"; // Options for Message //---------------------------------------------- var options = { 'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>', 'btn-success': '<i class="fa fa-check"></i>', 'btn-error': '<i class="fa fa-remove"></i>', 'msg-success': 'All Good! Redirecting...', 'msg-error': 'Wrong login credentials!', 'useAJAX': true, }; // Login Form //---------------------------------------------- // Validation $("#login-form").validate({ rules: { lg_username: "required", lg_password: "required", }, errorClass: "form-invalid" }); // Form Submission $("#login-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Register Form //---------------------------------------------- // Validation $("#register-form").validate({ rules: { reg_username: "required", reg_password: { required: true, minlength: 5 }, reg_password_confirm: { required: true, minlength: 5, equalTo: "#register-form [name=reg_password]" }, reg_email: { required: true, email: true }, reg_agree: "required", }, errorClass: "form-invalid", errorPlacement: function( label, element ) { if( element.attr( "type" ) === "checkbox" || element.attr( "type" ) === "radio" ) { element.parent().append( label ); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls"> ) } else { label.insertAfter( element ); // standard behaviour } } }); // Form Submission $("#register-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Forgot Password Form //---------------------------------------------- // Validation $("#forgot-password-form").validate({ rules: { fp_email: "required", }, errorClass: "form-invalid" }); // Form Submission $("#forgot-password-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Loading //---------------------------------------------- function remove_loading($form) { $form.find('[type=submit]').removeClass('error success'); $form.find('.login-form-main-message').removeClass('show error success').html(''); } function form_loading($form) { $form.find('[type=submit]').addClass('clicked').html(options['btn-loading']); } function form_success($form) { $form.find('[type=submit]').addClass('success').html(options['btn-success']); $form.find('.login-form-main-message').addClass('show success').html(options['msg-success']); } function form_failed($form) { $form.find('[type=submit]').addClass('error').html(options['btn-error']); $form.find('.login-form-main-message').addClass('show error').html(options['msg-error']); } // Dummy Submit Form (Remove this) //---------------------------------------------- // This is just a dummy form submission. You should use your AJAX function or remove this function if you are not using AJAX. function dummy_submit_form($form) { if($form.valid()) { form_loading($form); setTimeout(function() { form_success($form); }, 2000); } } })(jQuery);

Related: See More


Questions / Comments:

i am unable to link css and js file to produce a forum like above...i only be able to run html file only...using notepad++
any help please

Vishu Malik (0) - 1 year ago - Reply 1


Do these css style have copyright?

Shreyansh Jain (0) - 1 year ago - Reply 1


Hi, for me neither the "required field error" doesn't pop-up

Sabrina Smirnova (0) - 1 year ago - Reply 1


The snippet for registration isnt working in my project. Why so?
Any probable reasons?

Bhupendra Washishtha (0) - 2 years ago - Reply 1


i am using the united theme of bootstrap. I dont understand how am i supposed to the JS file for form validation from interface. Where do i put the JS file?

Bhupendra Washishtha (0) - 2 years ago - Reply 1


Bootstrap Forgot Password Templates
http://www.designerslib.com...

DesignersLib (0) - 2 years ago - Reply 1


Can you make it colorfull?

MohammedSithik (0) - 1 week ago - Reply 0


Hi, just a noob question. Why does the "required field" error won't pop-up? Thanks

brylle (0) - 2 years ago - Reply 0


Awesome!

fadsel (0) - 2 years ago - Reply 0


nice site

jayabal (0) - 2 years ago - Reply 0


good job! i can used?

Aldo (0) - 2 years ago - Reply 0


nice

AttilaEgyed (0) - 2 years ago - Reply 0


nice ops

AttilaEgyed (0) - 2 years ago - Reply 0


nice one

AttilaEgyed (0) - 2 years ago - Reply 0


test

AttilaEgyed (0) - 2 years ago - Reply 0


very nice!

suraj vs (0) - 2 years ago - Reply 0


very nice!

kisshc (0) - 2 years ago - Reply 0


Nice, although on firefox the placeholders are looking weird. ;)

Y O N Λ S (0) - 2 years ago - Reply 0


Firefox's box model is interpreted a bit differently than Chrome and IE. The input field's height is set to 34px in the bootstrap.css. Then the author adds 15px padding to the input. Instead of the padding expanding outwards, it expands into the field/placeholder because the field's height is set to 34px. This leaves 4px of viewable content. That's why it looks weird. In order to override that and to correct a couple of other display issues in other browsers, you merely need to set the input height to "auto".

line 54 in his CSS

.login-form-1 .form-control {
height:auto;
.......
}

Brian Moeller (0) - 2 years ago - Reply 0


Genius! This also fixes the problem on Bootsnipp search bar (try it in Firefox right now, it's broken, not showing placeholder text and input). I'll deploy a fix based on this in a few. Thank you very much @brian_moeller:disqus !

maxsurguy (0) - 2 years ago - Reply 0


Great! Didn't notice that. If it interests you or not, the search bar will expand in height from 34px to 50px. This is a result of your cancel button height and wrapper padding. Leave the form input to height:auto and adjust the padding in the search btn class.


<button class="btn btn-danger" type="reset"></button>

//Override BS style....
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn {
padding: 10px 16px; /*reduce the top/bottom padding */
}

Brian Moeller (0) - 2 years ago - Reply 0


Sweet! Deployed live, thanks for your help @brian_moeller:disqus!

maxsurguy (0) - 2 years ago - Reply 0


Hi, i still have problem on Firefox with the align of icons for your "Snippets" menu in bootsnipp header. ;)

http://imgur.com/UiOH078

gazgaz78 (0) - 2 years ago - Reply 0


Thanks for the screenshot, will take a look!

maxsurguy (0) - 2 years ago - Reply 0


Yep, on firefox look wierd: http://i.imgur.com/tEZmIJu.png

Damian (0) - 2 years ago - Reply 0