Website Form With Progress Bar Create Log in Sign up Form- Website Design

Html CSS And Javascript Coding For Website Form With Progress Bar

Website Form With Progress Bar

Website Form HTML

<form id="msform">

<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>

<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>

Website Form CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/

/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;

/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}

Website Form JAVASCRIPT

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();

//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).parent();
previous_fs = $(this).parent().prev();

//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})

Input form with progress bar

Input form with progress bar HTML

<section class="section">
<h1>So you think you can create an ID?</h1>
<div class="form-progress">
<progress class="form-progress-bar" min="0" max="100" value="0" step="33" aria-labelledby="form-progress-completion"></progress>

<div class="form-progress-indicator one active"></div>
<div class="form-progress-indicator two"></div>
<div class="form-progress-indicator three"></div>
<div class="form-progress-indicator four"></div>

<p id="form-progress-completion" class="js-form-progress-completion sr-only" aria-live="polite">0% complete</p>
</div>

<div class="animation-container">

<div class="form-step js-form-step" data-step="1">
<p class="form-instructions"><strong>Click the continue button to show form progression.</strong><br>
Please fill out the fields below so we can learn some information about you. We promise to store these on Post-It<sup><small>TM</small></sup> notes around the office.</p>
<form action="" name="form-step-1">
<div class="fieldgroup">
<input type="text" name="firstName" id="firstName" />
<label for="firstName">First name</label>
</div>
<div class="fieldgroup">
<input type="text" name="lastName" id="lastName" />
<label for="lastName">Last name</label>
</div>
<div class="fieldgroup">
<input type="text" name="email" id="email" />
<label for="email">Email</label>
</div>
<div class="fieldgroup">
<input type="text" name="postalCode" id="postalCode" />
<label for="postalCode">Postal code</label>
</div>
<div class="buttons">
<button type="button" class="btn btn-alt js-reset">Reset</button>
<button type="submit" class="btn">Continue</button>
</div>
</form>
</div>


<div class="form-step js-form-step waiting hidden" data-step="2">
<p class="form-instructions"><strong>Click the continue button to show form progression.</strong>
<br> Please fill in the token below with yesterday's date plus the timestamp from the day of your birth (expressed as an integer) to the power of fourteen divided by two.</p>
<form action="" name="form-step-2">
<div class="fieldgroup">
<input type="text" name="token" id="token" />
<label for="token">Token</label>
</div>
<div class="buttons">
<button type="button" class="btn btn-alt js-reset">Reset</button>
<button type="submit" class="btn">Continue</button>
</div>
</form>
</div>


<div class="form-step js-form-step waiting hidden" data-step="3">
<p class="form-instructions"><strong>Click the continue button to show form progression.</strong>
<br> Please tell us your credit card information. We promise not to store it or use it to buy a new iPhone in the App Store.</p>
<form action="" name="form-step-3">
<div class="fieldgroup">
<input type="text" name="credit-card" id="credit-card" />
<label for="credit-card">Credit card number</label>
</div>

<div class="fieldgroup">
<input type="text" name="credit-card-expiry" id="credit-card-expiry" />
<label for="credit-card-expiry">Credit card expiry</label>
</div>
<div class="buttons">
<button type="button" class="btn btn-alt js-reset">Reset</button>
<button type="submit" class="btn">Continue</button>
</div>
</form>
</div>


<div class="form-step js-form-step waiting hidden" data-step="4">
<p class="form-instructions"><strong>Click the continue button to show form progression.</strong>
<br> Finally, please just write the words "I Agree" in the field below to consent to us using the previous data you entered to buy a new iPhone.</p>
<form action="" name="form-step-4">
<div class="fieldgroup">
<input type="text" name="agreen" id="agreen" />
<label for="agreen">I agree</label>
</div>
<div class="buttons">
<button type="button" class="btn btn-alt js-reset">Reset</button>
</div>
</form>
</div>
</div>
</section>

Input form with progress bar CSS

$green: rgb(11,204,108);
$page-animDuration: .2s;
// =============================
// Universal styles
// =============================
body {
background: rgba(0,0,0,.1);
line-height: 1.45rem;
color: #444;

&.freeze { pointer-events: none; }
}
h1 {
margin: 0;
margin-bottom: 2rem;
text-align: center;
font-weight: normal;
line-height: 2.2rem;
}
// =============================
// Form styles
// =============================
.section {
max-width: 500px;
padding: 4rem;
margin: 5vh auto 0 auto;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,.3);

&:before {
content: "";
width: 100%;
background: lighten($green, 5%);
height: 170px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-bottom: 1px solid rgba(0,0,0,.2);
}
}
.form-instructions {
text-align: center;
}
form {
margin: 2rem auto;
width: 100%;
max-width: 330px;
will-change: transform;
}
// =============================
// Input styles
// =============================
.fieldgroup {
margin: 1.5rem 0;
position: relative;
}
label {
position: absolute;
top: .8rem;
left: 0;
display: block;
font-size: 1rem;
transition: $page-animDuration ease-out;
opacity: .5;
will-change: top, font-size;

&:hover {
cursor: text;
}
}
input {
border: 1px solid #fff;
font-size: 1.2rem;
padding: .6rem;
padding-left: 0;
background:transparent;
border: none;
border-bottom: 2px solid #444;
transition: $page-animDuration;
width: calc(100% - .6rem);
max-width: 350px;
border-radius: 0;

&:focus {
outline: none;
}

&:valid {
border-color: #444;
}

&:focus + label,
&.hasInput + label {
top: -.8rem;
font-size: .7rem;
}
}
// =============================
// Buttons
// =============================
.btn {
color: #fff;
background-color: $green;
padding: .8rem;
font-size: 1.2rem;
line-height: 1.2rem;
border-radius: 5px;
border: 2px solid transparent;
min-width: 45px !important;
&:hover,
&.hover {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
transition: .2s;
}
&:active,
&.active {
color: #fff;
background-color: darken($green, 20%);
box-shadow: inset 0 2px 10px rgba(0,0,0,.3);
outline: 2px solid $green;
}
&:focus,
&.focus {
color: #fff;
outline: 2px solid $green;
outline-offset: 2px;
}
&:active:focus,
&.active.focus {
outline: 4px solid $green;
}
//Reset outlines on button with frozen states
&.hover,
&.active { outline: none; }
}
//Alternate action
.btn-alt {
background-color: transparent;
color: $green;
border: 2px solid $green;
&:hover,
&.hover {
background-color: transparent;
color: darken($green, 40%);
border-color: darken($green, 40%);
text-shadow: none;
}
&:focus,
&.focus {
color: darken($green, 20%);
}
&:active,
&.active {
color: #fff;
background-color: $green;
text-shadow: 0 -1px 0 rgba(255,255,255,.2);
}
//Reset outlines on button with frozen states
&.hover,
&.active { outline: none; }
}
.buttons {
display: flex;

.btn { margin-right: 15px; }
}
form .btn {
display: inline-block;
width: 100%;
max-width: 220px;
margin: 4rem auto 0 auto;
}
[data-step="4"] button.btn {
display: block;
margin: 0 auto;
}
// =============================
// Progress bar
// =============================
.form-progress {
position: relative;
display: block;
margin: 3rem auto;
width: 100%;
max-width: 400px;
}
progress {
display: block;
position: relative;
top: 5px;
left: 5px;
-webkit-appearance: none;
appearance: none;
background: $green;
width: 100%;
height: 5px;
background: none;
transition: 1s;
will-change: contents;

&::-webkit-progress-bar {
background-color: #ddd;
}

&::-webkit-progress-value {
background-color: $green;
transition: all 0.5s ease-in-out;
}
}
.form-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
background: white;
border: 3px solid #ddd;
border-radius: 50%;
transition: all .2s ease-in-out;
transition-delay: .3s;
will-change: transform;

&.one { left: 0; }
&.two { left: 33%; }
&.three { left: 66%; }
&.four { left: 100%; }

&.active {
animation: bounce .5s forwards;
animation-delay: .5s;
border-color: $green;
}
}
// =============================
// Form animations
// =============================
.animation-container {
position: relative;
width: 100%;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
transition: 1s ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
animation: left-and-out .5s forwards;
}
.form-step.waiting {
transform: translateX(400px);
}
.form-step.coming {
animation: right-and-in .5s forwards;
}
// =============================
// Animation definitions
// =============================
@keyframes left-and-out {
100% {
opacity: 0;
transform: translateX(-400px);
}
}
@keyframes right-and-in {
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
// =============================
// Helpers
// =============================
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.hidden {
display: none;
}

Input form with progress bar JAVASCRIPT

Bootstrap 3 Contact form with Validation

Contact form with Validation HTML

<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>

<legend>Contact Us Today!</legend>

<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label" >Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>



<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
</div>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option >Arizona</option>
<option >Arkansas</option>
<option >California</option>
<option >Colorado</option>
<option >Connecticut</option>
<option >Delaware</option>
<option >District of Columbia</option>
<option> Florida</option>
<option >Georgia</option>
<option >Hawaii</option>
<option >daho</option>
<option >Illinois</option>
<option >Indiana</option>
<option >Iowa</option>
<option> Kansas</option>
<option >Kentucky</option>
<option >Louisiana</option>
<option>Maine</option>
<option >Maryland</option>
<option> Mass</option>
<option >Michigan</option>
<option >Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option> Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option >Washington</option>
<option >West Virginia</option>
<option>Wisconsin</option>
<option >Wyoming</option>
</select>
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>

<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div>

Contact form with Validation CSS

Contact form with Validation JAVASCRIPT

$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply your phone number'
},
phone: {
country: 'US',
message: 'Please supply a vaild phone number with area code'
}
}
},
address: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message:'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});

Bootstrap Snippet: Login Form

Login Form HTML

<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="Email Address" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>

Login Form CSS

@import "bourbon";
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
.form-signin-heading,
.checkbox {
margin-bottom: 30px;
}
.checkbox {
font-weight: normal;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
@include box-sizing(border-box);
&:focus {
z-index: 2;
}
}
input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}

Flat Responsive Comments Form using CSS3 and HTML5

Flat Responsive Comments Form HTML

Flat Responsive Comments Form CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;
background-size: cover;
height:100%;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}

.submit:hover {
color: #3498db;
}

.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}

Sign in and Sign up Form

Sign in and Sign up Form HTML

<div class="login-wrap">
<div class="login-html">
<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
<div class="login-form">
<div class="sign-in-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input">
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" class="input" data-type="password">
</div>
<div class="group">
<input id="check" type="checkbox" class="check" checked>
<label for="check"><span class="icon"></span> Keep me Signed in</label>
</div>
<div class="group">
<input type="submit" class="button" value="Sign In">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<a href="#forgot">Forgot Password?</a>
</div>
</div>
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input">
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="pass" class="label">Repeat Password</label>
<input id="pass" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="pass" class="label">Email Address</label>
<input id="pass" type="text" class="input">
</div>
<div class="group">
<input type="submit" class="button" value="Sign Up">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
</div>
</div>
</div>

Sign in and Sign up Form CSS

body{
margin:0;
color:#6a6f8c;
background:#c8c8c8;
font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.login-wrap{
width:100%;
margin:auto;
max-width:525px;
min-height:670px;
position:relative;
background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
width:100%;
height:100%;
position:absolute;
padding:90px 70px 50px 70px;
background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
text-transform:uppercase;
}
.login-html .tab{
font-size:22px;
margin-right:15px;
padding-bottom:5px;
margin:0 15px 10px 0;
display:inline-block;
border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
color:#fff;
border-color:#1161ee;
}
.login-form{
min-height:345px;
position:relative;
perspective:1000px;
transform-style:preserve-3d;
}
.login-form .group{
margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
width:100%;
color:#fff;
display:block;
}
.login-form .group .input,
.login-form .group .button{
border:none;
padding:15px 20px;
border-radius:25px;
background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
text-security:circle;
-webkit-text-security:circle;
}
.login-form .group .label{
color:#aaa;
font-size:12px;
}
.login-form .group .button{
background:#1161ee;
}
.login-form .group label .icon{
width:15px;
height:15px;
border-radius:2px;
position:relative;
display:inline-block;
background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
content:'';
width:10px;
height:2px;
background:#fff;
position:absolute;
transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
left:3px;
width:5px;
bottom:6px;
transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
top:6px;
right:0;
transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
color:#fff;
}
.login-form .group .check:checked + label .icon{
background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
transform:rotate(0);
}
.hr{
height:2px;
margin:60px 0 50px 0;
background:rgba(255,255,255,.2);
}
.foot-lnk{
text-align:center;
}

Login With 15 Social Buttons (Bootstrap 4 Version)

Login With 15 Social Buttons HTML

Login Form With 15 Social Buttons CSS

/*

*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext);
@media (min-width: 768px) {
.kpx_row-sm-offset-3 div:first-child[class*="col-"] {
margin-left: 25%;
}
}
body {
font-family: 'Titillium Web', sans-serif;
}
a{
color:#ff5400;
}
a:hover {
opacity: 0.8;
color:#ff5400;
text-decoration:none;
}
.kpx_login .kpx_authTitle {
text-align: center;
line-height: 300%;
}

.kpx_login .kpx_socialButtons a {
color: white; // In yourUse @body-bg
opacity:0.9;
}
.kpx_login .kpx_socialButtons a:hover {
color: white;
opacity:1;
}
.kpx_login .kpx_socialButtons .kpx_btn-facebook {background: #3b5998; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-facebook:hover {background: #172d5e}
.kpx_login .kpx_socialButtons .kpx_btn-facebook:focus {background: #fff; color:#3b5998; border-color: #3b5998;}
.kpx_login .kpx_socialButtons .kpx_btn-twitter {background: #00aced; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-twitter:hover {background: #043d52}
.kpx_login .kpx_socialButtons .kpx_btn-twitter:focus {background: #fff; color:#00aced; border-color: #00aced;}
.kpx_login .kpx_socialButtons .kpx_btn-google-plus {background: #c32f10; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-google-plus:hover {background: #6b1301}
.kpx_login .kpx_socialButtons .kpx_btn-google-plus:focus {background: #fff; color: #c32f10; border-color: #c32f10}
.kpx_login .kpx_socialButtons .kpx_btn-soundcloud {background: #ff8800; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-soundcloud:hover {background: #c73e04}
.kpx_login .kpx_socialButtons .kpx_btn-soundcloud:focus {background: #fff; color: #ff8800; border-color:#ff8800}
.kpx_login .kpx_socialButtons .kpx_btn-github {background: #666666; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-github:hover {background: #333333}
.kpx_login .kpx_socialButtons .kpx_btn-github:focus {background: #fff; color : #666666; border-color: #666666}
.kpx_login .kpx_socialButtons .kpx_btn-steam {background: #878787; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-steam:hover {background: #292929}
.kpx_login .kpx_socialButtons .kpx_btn-steam:focus {background: #fff; color : #878787; border-color: #878787}
.kpx_login .kpx_socialButtons .kpx_btn-pinterest {background: #cc2127; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-pinterest:hover {background: #780004}
.kpx_login .kpx_socialButtons .kpx_btn-pinterest:focus {background: #fff; color: #cc2127; border-color: #cc2127}
.kpx_login .kpx_socialButtons .kpx_btn-vimeo {background: #1ab7ea; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-vimeo:hover {background: #162221}
.kpx_login .kpx_socialButtons .kpx_btn-vimeo:focus {background: #fff; color: #1ab7ea;border-color: #1ab7ea}
.kpx_login .kpx_socialButtons .kpx_btn-lastfm {background: #c3000d; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-lastfm:hover {background: #5e0208}
.kpx_login .kpx_socialButtons .kpx_btn-lastfm:focus {background: #fff; color: #c3000d; border-color: #c3000d}
.kpx_login .kpx_socialButtons .kpx_btn-yahoo {background: #400191; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-yahoo:hover {background: #230052}
.kpx_login .kpx_socialButtons .kpx_btn-yahoo:focus {background: #fff; color: #400191; border-color: #400191}
.kpx_login .kpx_socialButtons .kpx_btn-vk {background: #45668e; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-vk:hover {background: #1a3352}
.kpx_login .kpx_socialButtons .kpx_btn-vk:focus {background: #fff; color: #45668e; border-color: #45668e}
.kpx_login .kpx_socialButtons .kpx_btn-spotify {background: #7ab800; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-spotify:hover {background: #3a5700}
.kpx_login .kpx_socialButtons .kpx_btn-spotify:focus {background: #fff; color: #7ab800; border-color: #7ab800}
.kpx_login .kpx_socialButtons .kpx_btn-linkedin {background: #0976b4; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-linkedin:hover {background: #004269}
.kpx_login .kpx_socialButtons .kpx_btn-linkedin:focus {background: #fff; color: #0976b4; border-color: #0976b4}
.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon {background: #eb4924; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon:hover {background: #943019}
.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon:focus {background: #fff; color: #eb4924; border-color: #eb4924}
.kpx_login .kpx_socialButtons .kpx_btn-tumblr {background: #35465c; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-tumblr:hover {background: #142030}
.kpx_login .kpx_socialButtons .kpx_btn-tumblr:focus {background: #fff; color: #35465c; border-color: #35465c}

.kpx_login .kpx_loginOr {
position: relative;
font-size: 1.5em;
color: #aaa;
margin-top: 1em;
margin-bottom: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.kpx_login .kpx_loginOr .kpx_hrOr {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.kpx_login .kpx_loginOr .kpx_spanOr {
display: block;
position: absolute;
left: 50%;
top: -0.6em;
margin-left: -1.5em;
background-color: white;
width: 3em;
text-align: center;
}
.kpx_login .kpx_loginForm .input-group.i {
width: 2em;
}
.kpx_login .kpx_loginForm .help-block {
color: red;
}

@media (min-width: 768px) {
.kpx_login .kpx_forgotPwd {
text-align: right;
margin-top:10px;
}
}

Website Design99