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

<!-- 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);

Similar snippets: See More


Comments:

Y O N Λ S 2015-06-27 18:50:26
    Nice, although on firefox the placeholders are looking weird. ;)
Damian 2015-06-29 06:38:19
    Yep, on firefox look wierd: http://i.imgur.com/tEZmIJu.png
Brian Moeller 2015-06-29 15:33:50
    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".
maxsurguy 2015-06-29 17:25:54
    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 !
Brian Moeller 2015-06-29 17:48:12
    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.
maxsurguy 2015-06-30 16:45:27
    Sweet! Deployed live, thanks for your help @brian_moeller:disqus!
gazgaz78 2015-07-29 16:16:05
    Hi, i still have problem on Firefox with the align of icons for your "Snippets" menu in bootsnipp header. ;)
maxsurguy 2015-07-30 18:58:38
    Thanks for the screenshot, will take a look!
kisshc 2015-06-29 06:45:32
    very nice!
suraj vs 2015-07-14 05:46:38
    very nice!
AttilaEgyed 2015-07-26 11:14:02
    nice one
AttilaEgyed 2015-07-26 11:14:28
    test
AttilaEgyed 2015-07-26 11:15:27
    nice
AttilaEgyed 2015-07-26 11:15:39
    nice ops
Aldo 2015-09-25 01:56:58
    good job! i can used?
jayabal 2015-10-31 11:39:39
    nice site
fadsel 2016-01-14 20:28:50
    Awesome!
DesignersLib 2016-01-20 20:43:05
    More Bootstrap Registration Form Templates can be found this below link
http://www.designerslib.com...
brylle 2016-01-22 07:02:11
    Hi, just a noob question. Why does the "required field" error won't pop-up? Thanks
DesignersLib 2016-01-24 12:58:01
    Bootstrap Forgot Password Templates
http://www.designerslib.com...
Bhupendra Washishtha 2016-04-16 13:27:10
    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 2016-04-28 07:42:06
    The snippet for registration isnt working in my project. Why so?
Any probable reasons?
Sabrina Smirnova 2016-08-16 10:13:16
    Hi, for me neither the "required field error" doesn't pop-up
Shreyansh Jain 2017-02-13 17:14:31
    Do these css style have copyright?
Vishu Malik 2017-03-17 18:35:07
    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

Commenting will be back soon.