Bootstrap Forms:

Bootstrap Register and Login Forms with Forget Password

Registration and login forms are one of the most important parts of any website and should be optimized in order to encourage your visitors to register for your site, subscription plans, newsletter, services, or products. Of course, you can avoid using registration forms in your site at all knowing that the users will come back whenever they need more of your services. Well, in both cases the visitor leaving your website is inevitable but consider this: if the user gets frustrated by your site, they might never come back but if they are satisfied, there is chance that they remember you and revisit if they needed anything else. This way you can start converting your visitors into members which is much better and more efficient for the long run.

We have a Bootstrap login form template for you today which has everything you need already designed inside its code. It features two tabs for signing up and logging in. the theme for this Bootstrap signup form is orange and the login form tab is green. This small detail makes the form a lot nicer and catchier. Another great feature of this Bootstrap form is the Bootstrap forget password option. Many times, the users forget what they have first put as their password and cannot remember it. For such situations, you can click the “Forgot Password?” link after which a small window pops open where you can recover your password.

Bootstrap Login Form

Bootstrap Signup Form

Bootstrap Forget Password

Login Form Tab

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel with-nav-tabs panel-info">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#login" data-toggle="tab"> Login </a></li>
                        <li><a href="#signup" data-toggle="tab"> Signup </a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="login" class="tab-pane fade in active register">
                            <div class="container-fluid">
                                <div class="row">
                                    <h2 class="text-center" style="color: #5cb85c;"><strong> Login </strong></h2>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input type="text" placeholder="User Name" name="uname" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input type="password" placeholder="Password" name="pass" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="col-xs-6 col-sm-6 col-md-6">
                                            <div class="form-group"><input type="checkbox" name="check" checked /> Remember Me</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <a href="#forgot" data-toggle="modal"> Forgot Password? </a>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <button type="submit" class="btn btn-success btn-block btn-lg">Login</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="signup" class="tab-pane fade">
                            <div class="container-fluid">
                                <div class="row">
                                    <h2 class="text-center" style="color: #f0ad4e;"><strong> Register </strong></h2>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="Enter User Name" name="name" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-envelope"></span>
                                                    </div>
                                                    <input type="email" class="form-control" placeholder="Enter E-Mail" name="mail" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input type="password" class="form-control" placeholder="Enter Password" name="pass" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-lg btn-block btn-warning">Register</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="forgot">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
                <h4 class="modal-title" style="font-size: 32px; padding: 12px;">Recover Your Password</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon iga2">
                                        <span class="glyphicon glyphicon-envelope"></span>
                                    </div>
                                    <input type="email" class="form-control" placeholder="Enter Your E-Mail ID" name="email" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon iga2">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </div>
                                    <input type="password" class="form-control" placeholder="Enter Your New Password" name="newpwd" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button type="submit" class="btn btn-lg btn-info">Save <span class="glyphicon glyphicon-saved"></span></button>
                    <button type="button" data-dismiss="modal" class="btn btn-lg btn-default">Cancel <span class="glyphicon glyphicon-remove"></span></button>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.btn-success {
    transition: 0.5s;
}
.btn-success:hover,
.btn-success:focus {
    background: white;
    border-color: #5cb85c;
    color: black;
    transition: all 0.4s;
}
.btn-warning {
    transition: 0.5s;
}
.btn-warning:hover,
.btn-warning:focus {
    background: white;
    color: black;
    border-color: #f0ad4e;
}
.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}
.panel.with-nav-tabs .nav-justified {
    margin-bottom: -4px;
}
.panel {
    margin: 7%;
}
.modal-header {
    background: #ff3838;
    color: white;
    text-align: center;
}
.input-group-addon {
    background-color: #5cb85c;
    color: white;
}
.iga1 {
    background-color: #f0ad4e;
    color: white;
}
.iga2 {
    background-color: #ff3838;
    color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
.btn-success {
    transition: 0.5s;
}
.btn-success:hover,
.btn-success:focus {
    background: white;
    border-color: #5cb85c;
    color: black;
    transition: all 0.4s;
}
.btn-warning {
    transition: 0.5s;
}
.btn-warning:hover,
.btn-warning:focus {
    background: white;
    color: black;
    border-color: #f0ad4e;
}
.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}
.panel.with-nav-tabs .nav-justified {
    margin-bottom: -4px;
}
.panel {
    margin: 7%;
}
.modal-header {
    background: #ff3838;
    color: white;
    text-align: center;
}
.input-group-addon {
    background-color: #5cb85c;
    color: white;
}
.iga1 {
    background-color: #f0ad4e;
    color: white;
}
.iga2 {
    background-color: #ff3838;
    color: white;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel with-nav-tabs panel-info">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#login" data-toggle="tab"> Login </a></li>
                        <li><a href="#signup" data-toggle="tab"> Signup </a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="login" class="tab-pane fade in active register">
                            <div class="container-fluid">
                                <div class="row">
                                    <h2 class="text-center" style="color: #5cb85c;"><strong> Login </strong></h2>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input type="text" placeholder="User Name" name="uname" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input type="password" placeholder="Password" name="pass" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="col-xs-6 col-sm-6 col-md-6">
                                            <div class="form-group"><input type="checkbox" name="check" checked /> Remember Me</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6">
                                            <div class="form-group">
                                                <a href="#forgot" data-toggle="modal"> Forgot Password? </a>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <button type="submit" class="btn btn-success btn-block btn-lg">Login</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="signup" class="tab-pane fade">
                            <div class="container-fluid">
                                <div class="row">
                                    <h2 class="text-center" style="color: #f0ad4e;"><strong> Register </strong></h2>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="Enter User Name" name="name" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-envelope"></span>
                                                    </div>
                                                    <input type="email" class="form-control" placeholder="Enter E-Mail" name="mail" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon iga1">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input type="password" class="form-control" placeholder="Enter Password" name="pass" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-lg btn-block btn-warning">Register</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="forgot">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
                <h4 class="modal-title" style="font-size: 32px; padding: 12px;">Recover Your Password</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon iga2">
                                        <span class="glyphicon glyphicon-envelope"></span>
                                    </div>
                                    <input type="email" class="form-control" placeholder="Enter Your E-Mail ID" name="email" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon iga2">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </div>
                                    <input type="password" class="form-control" placeholder="Enter Your New Password" name="newpwd" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button type="submit" class="btn btn-lg btn-info">Save <span class="glyphicon glyphicon-saved"></span></button>
                    <button type="button" data-dismiss="modal" class="btn btn-lg btn-default">Cancel <span class="glyphicon glyphicon-remove"></span></button>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS