Responsive Material design form using by jQuery and sass.
A Pen by Nikhil Krishnan on CodePen.
<h1> Responsive Material Design Form | |
<small>Material Design delivers a cleaner and flatter user interface</small> | |
</h1> | |
<section class="contact-wrap"> | |
<form action="" class="contact-form"> | |
<div class="col-sm-6"> | |
<div class="input-block"> | |
<label for="">First Name</label> | |
<input type="text" class="form-control"> | |
</div> | |
</div> | |
<div class="col-sm-6"> | |
<div class="input-block"> | |
<label for="">Last Name</label> | |
<input type="text" class="form-control"> | |
</div> | |
</div> | |
<div class="col-sm-12"> | |
<div class="input-block"> | |
<label for="">Email</label> | |
<input type="text" class="form-control"> | |
</div> | |
</div> | |
<div class="col-sm-12"> | |
<div class="input-block"> | |
<label for="">Message Subject</label> | |
<input type="text" class="form-control"> | |
</div> | |
</div> | |
<div class="col-sm-12"> | |
<div class="input-block textarea"> | |
<label for="">Drop your message here</label> | |
<textarea rows="3" type="text" class="form-control"></textarea> | |
</div> | |
</div> | |
<div class="col-sm-12"> | |
<button class="square-button">Send</button> | |
</div> | |
</form> | |
</section> | |
<!-- follow me template --> | |
<div class="made-with-love"> | |
Made with | |
<i>♥</i> by | |
<a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a> | |
</div> |
Responsive Material design form using by jQuery and sass.
A Pen by Nikhil Krishnan on CodePen.
//material contact form animation | |
$('.contact-form').find('.form-control').each(function() { | |
var targetItem = $(this).parent(); | |
if ($(this).val()) { | |
$(targetItem).find('label').css({ | |
'top': '10px', | |
'fontSize': '14px' | |
}); | |
} | |
}) | |
$('.contact-form').find('.form-control').focus(function() { | |
$(this).parent('.input-block').addClass('focus'); | |
$(this).parent().find('label').animate({ | |
'top': '10px', | |
'fontSize': '14px' | |
}, 300); | |
}) | |
$('.contact-form').find('.form-control').blur(function() { | |
if ($(this).val().length == 0) { | |
$(this).parent('.input-block').removeClass('focus'); | |
$(this).parent().find('label').animate({ | |
'top': '25px', | |
'fontSize': '18px' | |
}, 300); | |
} | |
}) |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
//import font from google | |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900); | |
//import compass | |
@import "compass"; | |
//colors | |
$primary-color : #FF512F; | |
$secondary-color : #333; | |
$form-bg : #fff; | |
//contact form | |
.contact-form{ | |
margin-top: 30px; | |
.input-block{ | |
background-color: rgba(white, .8); | |
border: solid 1px $primary-color; | |
width: 100%; | |
height: 60px; | |
padding: 25px; | |
position: relative; | |
margin-bottom: 20px; | |
@include transition(all 0.3s ease-out); | |
&.focus{ | |
background-color: $form-bg; | |
border: solid 1px darken($primary-color, 10%); | |
} | |
&.textarea{ | |
height: auto; | |
.form-control{ | |
height: auto; | |
resize: none; | |
} | |
} | |
label{ | |
position: absolute; | |
left: 25px; | |
top: 25px; | |
display: block; | |
margin: 0; | |
font-weight: 300; | |
z-index: 1; | |
color: $secondary-color; | |
font-size: 18px; | |
line-height: 10px; | |
} | |
.form-control{ | |
background-color: transparent; | |
padding: 0; | |
border: none; | |
@include border-radius(0); | |
@include box-shadow(none); | |
height: auto; | |
position: relative; | |
z-index: 2; | |
font-size: 18px; | |
color: $secondary-color; | |
} | |
.form-control:focus{ | |
label{ | |
top: 0; | |
} | |
} | |
} | |
.square-button{ | |
background-color: rgba(white, .8); | |
color: darken($primary-color, 10%); | |
font-size: 26px; | |
text-transform: uppercase; | |
font-weight: 700; | |
text-align: center; | |
@include border-radius(2px); | |
@include transition(all 0.3s ease); | |
padding: 0 60px; | |
height: 60px; | |
border: none; | |
width: 100%; | |
&:hover, | |
&:focus{ | |
background-color: white; | |
} | |
} | |
} | |
//tablet and above devices | |
@media (min-width: 768px) { | |
.contact-wrap{ | |
width: 60%; | |
margin: auto; | |
} | |
} | |
////////////////////////// | |
/*----page styles---*/ | |
////////////////////////// | |
body{ | |
@include background-image(linear-gradient(to right, $primary-color, #DD2476)); | |
font-family: 'Roboto', sans-serif; | |
} | |
.contact-wrap{ | |
padding: 15px; | |
} | |
h1{ | |
background-color: white; | |
color: lighten($primary-color, 10%); | |
padding: 40px; | |
margin: 0 0 50px; | |
font-size: 30px; | |
text-transform: uppercase; | |
font-weight: 700; | |
text-align: center; | |
small{ | |
font-size: 18px; | |
display: block; | |
text-transform: none; | |
font-weight: 300; | |
margin-top: 10px; | |
color: lighten($primary-color, 10%); | |
} | |
} | |
//follow me template | |
.made-with-love{ | |
margin-top: 40px; | |
padding: 10px; | |
clear: left; | |
text-align: center; | |
font-size: 10px; | |
font-family: arial; | |
color: #fff; | |
i{ | |
font-style: normal; | |
color: #F50057; | |
font-size: 14px; | |
position: relative; | |
top: 2px; | |
} | |
a{ | |
color: #fff; | |
text-decoration: none; | |
&:hover{ | |
text-decoration: underline; | |
} | |
} | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |