webadviser.io

Make Tabbed Sign up/Login Form with Bootstrap 3

Today I want to share with you a quick solution for building a Sign up/Log in form with Bootstrap tabs.

Probably, it is a good idea to have both forms in tabs so it is more visually appealing for the users. The solution presented here is nothing new in design, it is just a quick way if you are in need of prototyping a website.

The code is free to download and use in any type of projects.

Have a look to see how you can do it.

Make Tabbed Sign up/Login Form in Bootstrap 3

HTML

First of all, you need to create add the HTML structure for the tabbed form:

<div id="form">
<div class="container">
<div class="col-lg-6 col-lg-offset-3">
<div id="userform">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#signup"  role="tab" data-toggle="tab">Sign up</a></li>
<li><a href="#login"  role="tab" data-toggle="tab">Log in</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="signup">
<h2 class="text-uppercase text-center"> Sign Up for Free</h2>
<form id="signup">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label>First Name<span class="req">*</span> </label>
<input type="text" class="form-control" id="first_name" required data-validation-required-message="Please enter your name." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label> Last Name<span class="req">*</span> </label>
<input type="text" class="form-control" id="last_name" required data-validation-required-message="Please enter your name." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="form-group">
<label> Your Email<span class="req">*</span> </label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label> Your Phone<span class="req">*</span> </label>
<input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label> Password<span class="req">*</span> </label>
<input type="password" class="form-control" id="password" required data-validation-required-message="Please enter your password" autocomplete="off">
<p class="help-block text-danger"></p>
</div>
<div class="mrgn-30-top">
<button type="submit" class="btn btn-larger btn-block"/>
Sign up
</button>
</div>
</form>
</div>
<div class="tab-pane fade in" id="login">
<h2 class="text-uppercase text-center"> Log in</h2>
<form id="login">
<div class="form-group">
<label> Your Email<span class="req">*</span> </label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label> Password<span class="req">*</span> </label>
<input type="password" class="form-control" id="password" required data-validation-required-message="Please enter your password" autocomplete="off">
<p class="help-block text-danger"></p>
</div>
<div class="mrgn-30-top">
<button type="submit" class="btn btn-larger btn-block"/>
Log in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>

CSS

After having all the HTML in your document, you need to add the needed styling for the forms.

btn {border-radius: 0} .btn:focus, .btn:active, .btn.active, .btn:active:focus {outline: 0;border-radius: 0}
.btn-larger {padding: 15px 40px !important;border:2px solid #F7CA18 !important;border-radius: 0px !important;text-transform: uppercase;font-family: 'Dosis', sans-serif;font-size: 18px; font-weight: 300;color: #F7CA18;background-color: transparent;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
.btn-larger:hover, .btn-larger:focus, .btn-larger:active, .btn-larger.active, .open .dropdown-toggle.btn-larger {border-color: #F7CA18;color: #fff;background-color: #F7CA18; border-radius: 0}
.btn-larger:active, .btn-larger.active, .open .dropdown-toggle.btn-larger {background-image: none;}
.btn-larger.disabled, .btn-larger[disabled], fieldset[disabled] .btn-larger, .btn-larger.disabled:hover, .btn-larger[disabled]:hover, fieldset[disabled] .btn-larger:hover, .btn-larger.disabled:focus, .btn-larger[disabled]:focus, fieldset[disabled] .btn-larger:focus, .btn-larger.disabled:active, .btn-larger[disabled]:active, fieldset[disabled] .btn-larger:active, .btn-larger.disabled.active, .btn-larger[disabled].active, fieldset[disabled] .btn-larger.active {border-color: #AEA8D3;background-color: #AEA8D3;}
.btn-larger .badge {color: #AEA8D3;background-color: #fff;}
div#form {color: #fff;background-attachment: scroll;background: #1c1e21 url(https://static.pexels.com/photos/8819/warsaw.jpg);background-position: center center;background-repeat: none; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover; min-height:100%;}
#userform p {font-size: 14px;margin-bottom: 5px;}
#userform ul {list-style-type: none;padding: 0;margin-bottom: 0px;}
#userform {background: rgba(0,0,0,0.8);margin: 20px 0 20px 0}
@media (min-width: 768px) {
#userform {background: rgba(0,0,0,0.8);margin: 150px 0 20px 0}
}
#userform .nav-tabs.nav-justified > li > a {text-transform: uppercase;font-size: 20px;color: #F7CA18;background-color: rgba(90,90,90,0.5);}
#userform .nav-tabs.nav-justified > .active > a, #userform .nav-tabs.nav-justified > .active > a:hover, #userform .nav-tabs.nav-justified > .active > a:focus {border: 0;background: #F7CA18; color: white;border-radius: 0;}
#userform .nav-justified > li > a {margin-bottom: 0;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
#userform .nav-justified > li > a:hover {background: #AEA8D3;color: #FFF;}
#userform .nav-tabs > li > a {border: 0px solid transparent;border-radius: 0}
#userform .nav-tabs.nav-justified > li > a:hover {background: #F7CA18;color: #FFF;border-radius: 0;border: 0;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
#userform .nav-tabs > li.active > a, #userform .nav-tabs > li.active > a:hover, #userform .nav-tabs > li.active > a:focus {color: #F7CA18;cursor: default;background-color: transparent; border: 0;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
@media (min-width: 768px) {
#userform .nav-tabs.nav-justified > li > a {border: 0;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
#userform .nav-tabs.nav-justified > li > a:hover {background-color: #F7CA18;border-color: transparent;border: 0;-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s;}
}
@media (max-width: 768px) {
.nav-justified > li {display: table-cell !important;width: 1% !important;}
}
#userform .nav-tabs {border-bottom: 0px solid #ddd;}
#userform .tab-pane h2 {margin: 10px 0;color: #FFF;}
#userform .tab-pane p.lead {margin-top: 20px;}
#userform .tab-content {padding: 20px}
#userform .form-group {margin-bottom: 0px;color: #FFF;}
#userform .form-group input, #userform .form-group textarea {padding: 10px;}
#userform .form-group input.form-control {height: auto; background-color: rgba(237, 235, 250, 0.1);color: #FFF;}
#userform .form-control {border-radius: 0;border: 1px solid #fff;}
#userform .form-control:focus {border-color: #F7CA18;box-shadow: none;}
#userform::-webkit-input-placeholder {text-transform: uppercase;font-family: 'Dosis', sans-serif;font-weight: 700; color: #bbb;}
#userform #signup .form-group label {position: relative;-webkit-transform: translateY(35px);-ms-transform: translateY(35px);transform: translateY(35px);left: 10px;top: 0px;color: rgba(255, 255, 255, 0.5);-webkit-transition: all 0.25s ease;transition: all 0.25s ease;-webkit-backface-visibility: hidden;pointer-events: none;font-size: 12px;font-weight: 300}
#userform #signup .form-group label .req {margin: 2px;color: #F7CA18;}
#userform #signup .form-group label.active {-webkit-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);left: 2px;font-size: 12px;}
#userform #signup .form-group label.active .req {opacity: 0;}
#userform label.highlight {color: #ffffff;}
#userform #login .form-group label {position: relative;-webkit-transform: translateY(35px);-ms-transform: translateY(35px);transform: translateY(35px); left: 10px;top: 0px;color: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.25s ease;transition: all 0.25s ease;-webkit-backface-visibility: hidden;pointer-events: none;font-size: 12px;font-weight: 300}
#userform #login .form-group label .req {margin: 2px;color: #F7CA18;}
#userform #login .form-group label.active {-webkit-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);left: 2px;font-size: 12px;}
#userform #login .form-group label.active .req {opacity: 0;}
.mrgn-30-top {margin-top: 30px}

The JS

$('#form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(800);
});

That is it. Have a look at this pen below to see the tabbed form in action.

Source: http://designify.me/web-design/how-to-make-tabbed-sign-uplog-in-form-in-bootstrap-3/

No time to get the job done?
We have plenty.