content logo

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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Preview