"form"
Bootstrap 4.1.1 Snippet by Milind_Kamthe

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2 style="text-align:center">Material Design Form Created By <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2> <p style="text-align:center">creativemk22@gmail.com</p> <hr> <div class="row"> <div class="New_form_sec"> <form> <div class="row"> <div class="col-sm-6 "> <div class="form-group"> <input type="text" required> <label for="input" class="control-label">First Name</label> </div> </div> <div class="col-sm-6 "> <div class="form-group"> <input type="text" required> <label for="input" class="control-label">Last Name</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input name="email" type="email" required> <label for="input" class="control-label">Email</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input name="phone" type="text" required> <label for="input" class="control-label">Phone </label> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea required="required"></textarea> <label for="textarea" class="control-label">Textarea</label><i class="bar"></i> </div> <div class=""> <input type="submit" class="btn theme-btn" value="Send Now"> </div> </div> </div> </form> </div> </div> </div> <div>
.form-radio, .form-group { position: relative; margin-top: 0; margin-bottom: 25px; } .form-group input, .form-group textarea { display: block; background: none; padding: 0.125rem 0.125rem 0.0625rem; font-size: 1rem; border-width: 0; border-color: transparent; line-height: 1.9; width: 100%; color: transparent; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; box-shadow: none; } .form-group input { height: 1.9rem; } .form-group .control-label { position: absolute; top: 0.25rem; pointer-events: none; padding-left: 0.125rem; z-index: 1; color: #b3b3b3; font-size: 1rem; font-weight: normal; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; } .form-group select:focus, .form-group input:focus, .form-group textarea:focus { outline: none; } .form-group select, .form-group input:focus, .form-group input:valid, .form-group input.form-file, .form-group input.has-value, .form-group textarea:focus, .form-group textarea:valid, .form-group textarea.form-file, .form-group textarea.has-value { color: #333; } .form-group input, .form-group textarea { display: block; background: none; padding: 0.125rem 0.125rem 0.0625rem; font-size: 1rem; border-width: 0; line-height: 1.9; width: 100%; color: transparent; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; box-shadow: none; } .form-group input { height: 1.9rem; } .form-group select:focus ~ .control-label, .form-group input:focus ~ .control-label, .form-group textarea:focus ~ .control-label { color: #337ab7; } /* Main Focus */ .form-group select ~ .control-label, .form-group input:focus ~ .control-label, .form-group input:valid ~ .control-label, .form-group input.form-file ~ .control-label, .form-group input.has-value ~ .control-label { top: -14px !important; background: #fff !important; color: #1a73e8; padding: 0 10px; border-radius:5px } .form-group textarea:focus ~ .control-label, .form-group input:valid ~ .control-label{ top: -14px !important; background: #fff !important; color: #1a73e8; padding: 0 10px; border-radius:5px} /* Main Focus */ .form-group .control-label { position: absolute; top: 10px; pointer-events: none; padding-left: 0.125rem; z-index: 1; color: #b3b3b3; font-size: 14px; font-weight: normal; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; left: 15px; } .form-group input { height: 40px; border:1px solid #ccc; padding: 13px 15px;border-radius:5px; } .form-group textarea { border:1px solid #ccc; padding: 13px 15px;height:80px;border-radius:5px; } .form-control:focus { color: #495057; background-color: #fff; border-color: #1a73e8 !important; outline: 0; box-shadow: none; } .form-group input:focus { height: 40px; border: 1px solid #1a73e8; padding: 13px 15px; } .New_form_sec { padding: 30px 40px 36px; border: 1px solid #dadce0; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .New_form_sec2{border:none; padding: 30px 40px 36px;} .New_form_sec .btn { border-radius: 5px; min-width: 25%; letter-spacing: 0.8px; font-weight: bold;background:#1a73e8;color:#fff } .New_form_sec .contact-page-title22{text-align:center} .New_form_sec .contact-page-title22 { text-align: center; position: relative !important; background: #fff;text-align: left; } form-group textarea:valid ~ .control-label, .form-group textarea.form-file ~ .control-label, .form-group textarea.has-value ~ .control-label { font-size: 0.8rem; color: gray; top: -1rem; left: 0; }
$(document).ready(function(){ $('.form-group #a1').focus(function () { $('.label21').addClass('show22'); }); $('.form-group #a1').focusout(function(){ var fname = $('#a1').val(); if(fname==""){ $('.label21').removeClass('show22'); } }); <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 1000, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); new WOW().init(); (function($) { var element = $('.follow-scroll'), originalY = element.offset().top; // Space between element and top of screen (when scrolling) var topMargin = 600; // Should probably be set in CSS; but here just for emphasis element.css('position', 'absolute'); $(window).on('scroll', function(event) { var scrollTop = $(window).scrollTop(); element.stop(false, false).animate({ top: scrollTop < originalY ? 300 : scrollTop - originalY + topMargin }, 500); }); }); })($); </script>

Related: See More


Questions / Comments: