"Enquery Form"
Bootstrap 4.1.1 Snippet by alamin001

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html><head> <title></title> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @media(max-width:576px){ .enq-form{width: 500px} } /*------------- Form ---------------*/ .enq-form { position: fixed; font-family: 'Roboto', sans-serif; z-index: 9999; width: 280px; background: #FFF; left: -285px; top: 50%; transition: all .8s cubic-bezier(0.43, 1.07, 0.66, 1.15) .2s; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); transform: translateY(-50%); cursor: pointer; } .enq-form:hover{ left: 0px; } .formrotate{ transform: rotate(90deg); position: absolute; z-index: 555; right: -137px; top: 88px; width: 80%; } .enq-form .user-icon { position: absolute; top: -40px; right: -140px; display: block; width: 50px; height: 50px; margin: 20px auto 15px; border-radius: 100%; background: #353E91; text-align: center; line-height: 50px; font-size: 24px; color: #fff; box-shadow: 0px 2px 4px 0px #00000094; } .enq-form .title { background: #353E91; padding: 12px 18px !important; color: #fff !important; border-radius: 10px 10px 0 0; font-size: 20px !important; font-weight: 500; margin: 0; } .enq-form p.message { position: relative; color: #000; font-size: 16px; padding-left: 12px; font-weight: 600; margin: 10px 5px; padding-bottom: 8px; } .enq-form p.message::before{ content: ""; position: absolute; height: 3px; width: 60px; background: #353e91; bottom: 0px; border-radius: 5px; left: 15px; } .enq-form button { display: block; margin: 12px auto; height: 54px; width: 54px; border-radius: 50%; cursor: pointer; transition: all .4s ease; color: #fff !important; border: none; background: #353e91; font-size: 22px; margin-bottom: 0; outline: none; } .enq-form select{ -webkit-appearance: none; appearance: none; background:#fff; } .enq-form button:hover { background: #FF1A7D; box-shadow: 1px 1px 3px #000; } .enq-form .group{ position:relative; margin-bottom:7px; } .enq-form form{ width: 96%; margin:10px auto; padding: 8px; box-sizing: border-box; } .enq-form input, .enq-form select{ font-size: 14px; padding: 10px 10px 10px 5px; display: block; width: 100%; border: none; box-sizing: border-box; border-bottom: 1px solid #757575b0; } .enq-form input:focus, .enq-form select:focus{ outline:none;border-bottom: none;} .enq-form input:focus ~ label, .enq-form select:focus ~ label{ display: none !important; } .enq-form input:valid ~ label, .enq-form select:valid ~ label{ display: none !important; } .enq-form label{ color: #999; font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; letter-spacing: 1px; } .enq-form .bar{ position:relative; display:block; width: 100%; } .enq-form .bar:before, .enq-form .bar:after { content:''; height:2px; width:0; bottom:1px; position:absolute; background:#5264AE; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .enq-form .bar:before { left:50%; } .enq-form .bar:after { right:50%; } .enq-form input:focus ~ .bar:before, .enq-form input:focus ~ .bar:after { width:50%; } .enq-form select:focus ~ .bar:before, .enq-form select:focus ~ .bar:after { width:50%; } .enq-form .highlight { position:absolute; height:60%; width:100px; top:25%; left:0; pointer-events:none; opacity:0.5; } .enq-form input:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } .enq-form select:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } </style></head> <body style="background: #eee;"> <div class="container"> <div class="row"> <div class="enq-form"> <div class="formrotate"> <p class="title">Quick Enquiry</p> <label class="user-icon"> <i class="fa fa-envelope" aria-hidden="true"></i> </label> </div> <p class="message"> Book Counsling Session With <br> Our Experts </p> <form> <div class="group"> <input type="text" required=""> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="text" required=""> <span class="highlight"></span> <span class="bar"></span> <label>Mobile No</label> </div> <div class="group"> <select required="" class="form-control"> <option value=""></option> <option value="1">Course 1</option> <option value="2">Course 2</option> <option value="3">Course 3</option> </select> <span class="highlight"></span> <span class="bar"></span> <label>Select Course</label> </div> <div class="group"> <select required="" class="form-control"> <option value=""></option> <option value="1">Delhi</option> <option value="2">Mumbai</option> <option value="3">Punjab</option> </select> <span class="highlight"></span> <span class="bar"></span> <label>Select State</label> </div> <div class="group"> <select required="" class="form-control"> <option value=""></option> <option value="1">Laxmi Nagar</option> <option value="2">Ambala</option> <option value="3">Jalandhar</option> </select> <span class="highlight"></span> <span class="bar"></span> <label>Select Center</label> </div> <button> <i class="fa fa-arrow-right"></i> </button> </form> </div> </div> </div> </body> </html>

Related: See More

Material Dashboard
login-form
Login Form
Contact Form

Questions / Comments: