Best Bootstrap Sign-Up Form Example

Hello friends, today we are going to learn how to make the ‘best bootstrap sign-up form example’. Often login forms have to be the most creative forms in your webpage. So lets start the tutorial.

Create a signup-form.html file to create the UI.

[php]
<!DOCTYPE html>
<html lang="en">

<head>

<title>
Meul Tech Bootstrap Examples
</title>

<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!– Custom CSS –>
<link href="style.css" rel="stylesheet">
<style>
.colorgraph {
height: 5px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
</style>
<script>
$(function () {
$(‘.button-checkbox’).each(function () {

// Settings
var $widget = $(this),
$button = $widget.find(‘button’),
$checkbox = $widget.find(‘input:checkbox’),
color = $button.data(‘color’),
settings = {
on: {
icon: ‘glyphicon glyphicon-check’
},
off: {
icon: ‘glyphicon glyphicon-unchecked’
}
};

// Event Handlers
$button.on(‘click’, function () {
$checkbox.prop(‘checked’, !$checkbox.is(‘:checked’));
$checkbox.triggerHandler(‘change’);
updateDisplay();
});
$checkbox.on(‘change’, function () {
updateDisplay();
});

// Actions
function updateDisplay() {
var isChecked = $checkbox.is(‘:checked’);

// Set the button’s state
$button.data(‘state’, (isChecked) ? "on" : "off");

// Set the button’s icon
$button.find(‘.state-icon’)
.removeClass()
.addClass(‘state-icon ‘ + settings[$button.data(‘state’)].icon);

// Update the button’s color
if (isChecked) {
$button
.removeClass(‘btn-default’)
.addClass(‘btn-‘ + color + ‘ active’);
} else {
$button
.removeClass(‘btn-‘ + color + ‘ active’)
.addClass(‘btn-default’);
}
}

// Initialization
function init() {

updateDisplay();

// Inject the icon if applicable
if ($button.find(‘.state-icon’).length == 0) {
$button.prepend(‘<i class="state-icon ‘ + settings[$button.data(‘state’)].icon + ‘"></i>’);
}
}
init();
});
});
</script>

</head>

<body>

<!– Navigation –>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<h1 class="logo">
<a title="Meul Tech ">
<img alt="Meul Tech " src="https://www.mehulprajapati.comwp-content/uploads/2016/09/logo.png" style="height: auto; width: auto; display: inline-block; top: 0px;">
</a>
</h1>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<!– /.navbar-collapse –>
</div>
<!– /.container –>
</nav>

<!– Full Width Image Header –>

<!– Page Content –>
<div class="container">

<h1 class="thick-heading">
||Table Example||
</h1>

<!– First Featurette –>
<div class="featurette" id="about">
<!————————code—————start—————->
<div class="container">

<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form">
<h2>Please Sign Up <small>It’s free and always will be.</small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="Display Name" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="button-checkbox">
<button type="button" class="btn" data-color="info" tabindex="7">I Agree</button>
<input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1">
</span>
</div>
<div class="col-xs-8 col-sm-9 col-md-9">
By clicking <strong class="label label-primary">Register</strong>, you agree to the <a href="https://www.mehulprajapati.com" data-toggle="modal" data-target="#t_and_c_m">
and Conditions</a> set out by this site, including our Cookie Use.
</div>
</div>

<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7">
</div>
<div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">Sign In</a></div>
</div>
</form>
</div>
</div>
<!– Modal –>
<div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">I Agree</button>
</div>
</div>
<!– /.modal-content –>
</div>
<!– /.modal-dialog –>
</div>
<!– /.modal –>
</div>

<!—-Code——end———————————–>
</div>
<!– /.container –>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-1">
<a href="https://www.mehulprajapati.com" class="logo">

</a>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<p>
© Copyright 2016. All Rights Reserved.
</p>
</div>
</div>
</div>
</div>
<!– jQuery –>
<script src="js/jquery.min.js">
</script>

<!– Bootstrap Core JavaScript –>
<script src="js/bootstrap.min.js">
</script>

</body>

</html>
[/php]

STEP 2:

Next, create a style.css file.
The remaining code can be downloaded from the above ‘Download Source’ button.

Finally our best sign-up form example is ready to run. Hit your url and check out this awesome creative login form.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.