Bootstrap Forms:

Bootstrap Transparent Sign in and Signup Forms

Many advanced websites have different sign-in forms that differentiate it from others. This form helps you attract more visitors and increase the beauty of your website. It is worth noting that most websites use these kinds of forms in order to gain audiences. This CSS Sign up Form has a different appearance and changes the design of your website. So, you can use this Free Bootstrap Form to increase the number of your visitors in a short time.

As the following preview represents, this Bootstrap Transparent Form has a purple or blue background covering its picture. You can change this image easily. This form contains two sections for sign-in and sign-up. The first part is the Sign in Form Code which has two fields for username and password. The sign-in button is yellow. The second section is the Sign up Form Code that allows the audience to create a new account on the website. This part includes four fields, and the signup button is also yellow. The writing in this section is white, and the other phrases are light and like a shadow. You can download and use this code from the link below.

Sign in Form Code

Sign up Form Code

Free Bootstrap Form

CSS Sign up Form

Bootstrap Transparent Form

<!-- This script got from frontendfreecode.com -->
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">sign in</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">sign up</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">username</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" />
                                </div>
                                <div class="form-group">
                                    <div class="main-checkbox">
                                        <input value="None" id="checkbox1" name="check" type="checkbox" />
                                        <label for="checkbox1"></label>
                                    </div>
                                    <span class="text">Keep me Signed in</span>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">Sign in</button>
                                </div>
                                <div class="form-group forgot-pass">
                                    <button type="submit" class="btn btn-default">forgot password</button>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">First Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Last Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email address</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" />
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">Sign up</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    margin: 20px;
    background: #ddd;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.tab {
    background: url("http://frontendfreecode.com/img/bootstrap-login-form-with-background.jpg") no-repeat 80% 0;
    background-size: cover;
    padding: 40px 50px;
    position: relative;
}
.tab:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(#2e3a6a, #2f0b45);
    opacity: 0.85;
}
.tab .nav-tabs {
    border-bottom: none;
    padding: 0 20px;
    position: relative;
}
.tab .nav-tabs li {
    margin: 0 30px 0 0;
}
.tab .nav-tabs li a {
    font-size: 18px;
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    background: transparent;
    padding: 0;
    margin-right: 0;
    border: none;
    border-bottom: 2px solid transparent;
    opacity: 0.5;
    position: relative;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:hover {
    background: transparent;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    background: transparent;
    opacity: 1;
    border-bottom: 2px solid #eec111;
    color: #fff;
}
.tab .tab-content {
    padding: 20px 0 0 0;
    margin-top: 40px;
    background: transparent;
    z-index: 1;
    position: relative;
}
.form-bg {
    background: #ddd;
}
.form-horizontal .form-group {
    margin: 0 0 15px 0;
    position: relative;
}
.form-horizontal .form-control {
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 0 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group label {
    padding: 0 20px;
    color: #7f8291;
    text-transform: capitalize;
    margin-bottom: 10px;
}
.form-horizontal .main-checkbox {
    width: 20px;
    height: 20px;
    background: #eec111;
    float: left;
    margin: 5px 0 0 20px;
    border: 1px solid #eec111;
    position: relative;
}
.form-horizontal .main-checkbox label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.form-horizontal .main-checkbox label:after {
    content: "";
    width: 10px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.form-horizontal .main-checkbox input[type="checkbox"] {
    visibility: hidden;
}
.form-horizontal .main-checkbox input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
.form-horizontal .text {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-left: 7px;
    line-height: 20px;
    padding-top: 5px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    width: 100%;
    background: #eec111;
    padding: 10px 20px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 20px;
    text-transform: uppercase;
    margin: 20px 0 30px 0;
}
.form-horizontal .btn:focus {
    background: #eec111;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.form-horizontal .forgot-pass {
    border-top: 1px solid #615f6c;
    margin: 0;
    text-align: center;
}
.form-horizontal .forgot-pass .btn {
    width: auto;
    background: transparent;
    margin: 30px 0 0 0;
    color: #615f6c;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass .btn:hover {
    color: #eec111;
}
@media only screen and (max-width: 479px) {
    .tab {
        padding: 40px 20px;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
    margin: 20px;
    background: #ddd;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.tab {
    background: url("http://frontendfreecode.com/img/bootstrap-login-form-with-background.jpg") no-repeat 80% 0;
    background-size: cover;
    padding: 40px 50px;
    position: relative;
}
.tab:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(#2e3a6a, #2f0b45);
    opacity: 0.85;
}
.tab .nav-tabs {
    border-bottom: none;
    padding: 0 20px;
    position: relative;
}
.tab .nav-tabs li {
    margin: 0 30px 0 0;
}
.tab .nav-tabs li a {
    font-size: 18px;
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    background: transparent;
    padding: 0;
    margin-right: 0;
    border: none;
    border-bottom: 2px solid transparent;
    opacity: 0.5;
    position: relative;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:hover {
    background: transparent;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    background: transparent;
    opacity: 1;
    border-bottom: 2px solid #eec111;
    color: #fff;
}
.tab .tab-content {
    padding: 20px 0 0 0;
    margin-top: 40px;
    background: transparent;
    z-index: 1;
    position: relative;
}
.form-bg {
    background: #ddd;
}
.form-horizontal .form-group {
    margin: 0 0 15px 0;
    position: relative;
}
.form-horizontal .form-control {
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 0 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group label {
    padding: 0 20px;
    color: #7f8291;
    text-transform: capitalize;
    margin-bottom: 10px;
}
.form-horizontal .main-checkbox {
    width: 20px;
    height: 20px;
    background: #eec111;
    float: left;
    margin: 5px 0 0 20px;
    border: 1px solid #eec111;
    position: relative;
}
.form-horizontal .main-checkbox label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.form-horizontal .main-checkbox label:after {
    content: "";
    width: 10px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.form-horizontal .main-checkbox input[type="checkbox"] {
    visibility: hidden;
}
.form-horizontal .main-checkbox input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
.form-horizontal .text {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-left: 7px;
    line-height: 20px;
    padding-top: 5px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    width: 100%;
    background: #eec111;
    padding: 10px 20px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 20px;
    text-transform: uppercase;
    margin: 20px 0 30px 0;
}
.form-horizontal .btn:focus {
    background: #eec111;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.form-horizontal .forgot-pass {
    border-top: 1px solid #615f6c;
    margin: 0;
    text-align: center;
}
.form-horizontal .forgot-pass .btn {
    width: auto;
    background: transparent;
    margin: 30px 0 0 0;
    color: #615f6c;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass .btn:hover {
    color: #eec111;
}
@media only screen and (max-width: 479px) {
    .tab {
        padding: 40px 20px;
    }
}
</style>

</head>
<body>
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">sign in</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">sign up</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">username</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" />
                                </div>
                                <div class="form-group">
                                    <div class="main-checkbox">
                                        <input value="None" id="checkbox1" name="check" type="checkbox" />
                                        <label for="checkbox1"></label>
                                    </div>
                                    <span class="text">Keep me Signed in</span>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">Sign in</button>
                                </div>
                                <div class="form-group forgot-pass">
                                    <button type="submit" class="btn btn-default">forgot password</button>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">First Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Last Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email address</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" />
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">Sign up</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </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

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