Bootstrap Forms:

Register, Login and Forget Password Forms in Bootstrap

The bootstrap form is an essential element in any website. The following post can be so helpful for your website to gain many visitors. This code contains the Register/Login and Forget Password Forms in Bootstrap with an attractive design. As the name appears, these kinds of Bootstrap Forms help the visitors and users to log into your website, and even if they have forgotten their password, they can easily reset it. This is a functional factor in all websites. Moreover, this code has a simple design. So, this Simple Login Form makes a nice harmony with modest websites.

This Bootstrap Registration Form is designed for logging into the website with an email address and a chosen password. You can see two fields on the top of the page in blue and red color. These fields are related to signing into the website with Facebook and Google. Many people prefer these methods. The specific parts for email and password are pure and white. The sign-in section in these Free Bootstrap Forms is green. Plus, there is an option if users forget the password. Signing a new account in this Bootstrap Forget Password is blue.

Bootstrap Forms

Bootstrap Forget Password

Free Bootstrap Forms

Simple Login Form

Bootstrap Registration Form

<!-- This script got from frontendfreecode.com -->
<div id="logreg-forms">
    <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal" style="text-align: center;">Sign in</h1>
        <div class="social-login">
            <button class="btn facebook-btn social-btn" type="button">
                <span><i class="fab fa-facebook-f"></i> Sign in with Facebook</span>
            </button>
            <button class="btn google-btn social-btn" type="button">
                <span><i class="fab fa-google"></i> Sign in with Google</span>
            </button>
        </div>
        <p style="text-align: center;">OR</p>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" />
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" />
        <button class="btn btn-success btn-block" type="submit"><i class="fas fa-sign-in-alt"></i> Sign in</button>
        <a href="#" id="forgot_pswd">Forgot password?</a>
        <hr />
        <!-- <p>Don't have an account!</p>  -->
        <button class="btn btn-primary btn-block" type="button" id="btn-signup"><i class="fas fa-user-plus"></i> Sign up New Account</button>
    </form>
    <form action="/reset/password/" class="form-reset">
        <input type="email" id="resetEmail" class="form-control" placeholder="Email address" required="" autofocus="" />
        <button class="btn btn-primary btn-block" type="submit">Reset Password</button>
        <a href="#" id="cancel_reset"><i class="fas fa-angle-left"></i> Back</a>
    </form>
    <form action="/signup/" class="form-signup">
        <div class="social-login">
            <button class="btn facebook-btn social-btn" type="button">
                <span><i class="fab fa-facebook-f"></i> Sign up with Facebook</span>
            </button>
        </div>
        <div class="social-login">
            <button class="btn google-btn social-btn" type="button">
                <span><i class="fab fa-google-plus-g"></i> Sign up with Google+</span>
            </button>
        </div>
        <p style="text-align: center;">OR</p>
        <input type="text" id="user-name" class="form-control" placeholder="Full name" required="" autofocus="" />
        <input type="email" id="user-email" class="form-control" placeholder="Email address" required autofocus="" />
        <input type="password" id="user-pass" class="form-control" placeholder="Password" required autofocus="" />
        <input type="password" id="user-repeatpass" class="form-control" placeholder="Repeat Password" required autofocus="" />
        <button class="btn btn-primary btn-block" type="submit"><i class="fas fa-user-plus"></i> Sign Up</button>
        <a href="#" id="cancel_signup"><i class="fas fa-angle-left"></i> Back</a>
    </form>
    <br />
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

#logreg-forms {
    width: 412px;
    margin: 10vh auto;
    background-color: #f3f3f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#logreg-forms form {
    width: 100%;
    max-width: 410px;
    padding: 15px;
    margin: auto;
}
#logreg-forms .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
#logreg-forms .form-control:focus {
    z-index: 2;
}
#logreg-forms .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
#logreg-forms .form-signin input[type="password"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#logreg-forms .social-login {
    width: 390px;
    margin: 0 auto;
    margin-bottom: 14px;
}
#logreg-forms .social-btn {
    font-weight: 100;
    color: white;
    width: 190px;
    font-size: 0.9rem;
}
#logreg-forms a {
    display: block;
    padding-top: 10px;
    color: lightseagreen;
}
#logreg-form .lines {
    width: 200px;
    border: 1px solid red;
}
#logreg-forms button[type="submit"] {
    margin-top: 10px;
}
#logreg-forms .facebook-btn {
    background-color: #3c589c;
}
#logreg-forms .google-btn {
    background-color: #df4b3b;
}
#logreg-forms .form-reset,
#logreg-forms .form-signup {
    display: none;
}
#logreg-forms .form-signup .social-btn {
    width: 210px;
}
#logreg-forms .form-signup input {
    margin-bottom: 2px;
}
.form-signup .social-login {
    width: 210px !important;
    margin: 0 auto;
}
@media screen and (max-width: 500px) {
    #logreg-forms {
        width: 300px;
    }
    #logreg-forms .social-login {
        width: 200px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    #logreg-forms .social-btn {
        font-size: 1.3rem;
        font-weight: 100;
        color: white;
        width: 200px;
        height: 56px;
    }
    #logreg-forms .social-btn:nth-child(1) {
        margin-bottom: 5px;
    }
    #logreg-forms .social-btn span {
        display: none;
    }
    #logreg-forms .facebook-btn:after {
        content: "Facebook";
    }
    #logreg-forms .google-btn:after {
        content: "Google+";
    }
}

function toggleResetPswd(e) {
    e.preventDefault();
    $("#logreg-forms .form-signin").toggle(); // display:block or none
    $("#logreg-forms .form-reset").toggle(); // display:block or none
}
function toggleSignUp(e) {
    e.preventDefault();
    $("#logreg-forms .form-signin").toggle(); // display:block or none
    $("#logreg-forms .form-signup").toggle(); // display:block or none
}
$(() => {
    // Login Register Form
    $("#logreg-forms #forgot_pswd").click(toggleResetPswd);
    $("#logreg-forms #cancel_reset").click(toggleResetPswd);
    $("#logreg-forms #btn-signup").click(toggleSignUp);
    $("#logreg-forms #cancel_signup").click(toggleSignUp);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.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/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#logreg-forms {
    width: 412px;
    margin: 10vh auto;
    background-color: #f3f3f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#logreg-forms form {
    width: 100%;
    max-width: 410px;
    padding: 15px;
    margin: auto;
}
#logreg-forms .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
#logreg-forms .form-control:focus {
    z-index: 2;
}
#logreg-forms .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
#logreg-forms .form-signin input[type="password"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#logreg-forms .social-login {
    width: 390px;
    margin: 0 auto;
    margin-bottom: 14px;
}
#logreg-forms .social-btn {
    font-weight: 100;
    color: white;
    width: 190px;
    font-size: 0.9rem;
}
#logreg-forms a {
    display: block;
    padding-top: 10px;
    color: lightseagreen;
}
#logreg-form .lines {
    width: 200px;
    border: 1px solid red;
}
#logreg-forms button[type="submit"] {
    margin-top: 10px;
}
#logreg-forms .facebook-btn {
    background-color: #3c589c;
}
#logreg-forms .google-btn {
    background-color: #df4b3b;
}
#logreg-forms .form-reset,
#logreg-forms .form-signup {
    display: none;
}
#logreg-forms .form-signup .social-btn {
    width: 210px;
}
#logreg-forms .form-signup input {
    margin-bottom: 2px;
}
.form-signup .social-login {
    width: 210px !important;
    margin: 0 auto;
}
@media screen and (max-width: 500px) {
    #logreg-forms {
        width: 300px;
    }
    #logreg-forms .social-login {
        width: 200px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    #logreg-forms .social-btn {
        font-size: 1.3rem;
        font-weight: 100;
        color: white;
        width: 200px;
        height: 56px;
    }
    #logreg-forms .social-btn:nth-child(1) {
        margin-bottom: 5px;
    }
    #logreg-forms .social-btn span {
        display: none;
    }
    #logreg-forms .facebook-btn:after {
        content: "Facebook";
    }
    #logreg-forms .google-btn:after {
        content: "Google+";
    }
}
</style>

</head>
<body>
<div id="logreg-forms">
    <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal" style="text-align: center;">Sign in</h1>
        <div class="social-login">
            <button class="btn facebook-btn social-btn" type="button">
                <span><i class="fab fa-facebook-f"></i> Sign in with Facebook</span>
            </button>
            <button class="btn google-btn social-btn" type="button">
                <span><i class="fab fa-google"></i> Sign in with Google</span>
            </button>
        </div>
        <p style="text-align: center;">OR</p>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" />
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" />
        <button class="btn btn-success btn-block" type="submit"><i class="fas fa-sign-in-alt"></i> Sign in</button>
        <a href="#" id="forgot_pswd">Forgot password?</a>
        <hr />
        <!-- <p>Don't have an account!</p>  -->
        <button class="btn btn-primary btn-block" type="button" id="btn-signup"><i class="fas fa-user-plus"></i> Sign up New Account</button>
    </form>
    <form action="/reset/password/" class="form-reset">
        <input type="email" id="resetEmail" class="form-control" placeholder="Email address" required="" autofocus="" />
        <button class="btn btn-primary btn-block" type="submit">Reset Password</button>
        <a href="#" id="cancel_reset"><i class="fas fa-angle-left"></i> Back</a>
    </form>
    <form action="/signup/" class="form-signup">
        <div class="social-login">
            <button class="btn facebook-btn social-btn" type="button">
                <span><i class="fab fa-facebook-f"></i> Sign up with Facebook</span>
            </button>
        </div>
        <div class="social-login">
            <button class="btn google-btn social-btn" type="button">
                <span><i class="fab fa-google-plus-g"></i> Sign up with Google+</span>
            </button>
        </div>
        <p style="text-align: center;">OR</p>
        <input type="text" id="user-name" class="form-control" placeholder="Full name" required="" autofocus="" />
        <input type="email" id="user-email" class="form-control" placeholder="Email address" required autofocus="" />
        <input type="password" id="user-pass" class="form-control" placeholder="Password" required autofocus="" />
        <input type="password" id="user-repeatpass" class="form-control" placeholder="Repeat Password" required autofocus="" />
        <button class="btn btn-primary btn-block" type="submit"><i class="fas fa-user-plus"></i> Sign Up</button>
        <a href="#" id="cancel_signup"><i class="fas fa-angle-left"></i> Back</a>
    </form>
    <br />
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function toggleResetPswd(e) {
    e.preventDefault();
    $("#logreg-forms .form-signin").toggle(); // display:block or none
    $("#logreg-forms .form-reset").toggle(); // display:block or none
}
function toggleSignUp(e) {
    e.preventDefault();
    $("#logreg-forms .form-signin").toggle(); // display:block or none
    $("#logreg-forms .form-signup").toggle(); // display:block or none
}
$(() => {
    // Login Register Form
    $("#logreg-forms #forgot_pswd").click(toggleResetPswd);
    $("#logreg-forms #cancel_reset").click(toggleResetPswd);
    $("#logreg-forms #btn-signup").click(toggleSignUp);
    $("#logreg-forms #cancel_signup").click(toggleSignUp);
});
</script>

</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

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars