How to make Tabbed Sign up/Login Form in 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.

How to make Tabbed Signup/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.

See the Pen RWaBJE by Petia (@designify-me) on CodePen.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Download Tabbed Form Code


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *