"Elegant Contact Form"
Bootstrap 3.3.0 Snippet by zxalif

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700"> <div class="row margin-top-bottom"> <div class="col-md-offset-3 col-sm-offset-2 col-md-6 col-sm-8"> <div class="row"> <div class="contact-us-detail"><a href="mailto:info@uipasta.com">info@uipasta.com</a></div> <form class="contact-us pattern-bg"> <div class="col-sm-6"> <div class="form-group"> <input type="text" id="name" class="form-control" placeholder="Your Name"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="email" id="email" class="form-control" placeholder="Your Email"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="text" id="website" class="form-control" placeholder="Your Website"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="text" id="address" class="form-control" placeholder="Where are You From?"> </div> </div> <div class="col-sm-12"> <select id="subject" class="form-group form-control"> <option value="" selected disabled>Subject</option> <option>Website Design & Development</option> <option>Wordpress Development</option> <option>Search Engine Optimization</option> <option>Mobile Website</option> <option>I Want to General Talk</option> <option>Other</option> </select> </div> <div class="col-sm-12"> <div class="textarea-message form-group"> <textarea id="message" class="textarea-message form-control" placeholder="Your Message" rows="5"></textarea> </div> </div> <div class="text-center"> <button type="submit" class="button button-style button-style-dark button-style-color-2">Submit</button> </div> </form> <p class="custom-margin">This Contact Form is a part of our free HTML template, Download the complete template from our website and It's fully responsive and works perfect on all devices. Please Download from here - http://www.uipasta.com/webres-personal-resume-template/</p> </div> </div> </div> </div>
.contact-us { padding: 50px; background-color: #ffffff; box-shadow: -2px 40px 34px -24px rgba(0, 0, 0, 0.2); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border: solid 7px #4c9cef; border-left-color: #f7639a; border-right-color: #f7639a; } .contact-us-detail { position: absolute; left: 83%; top: -4%; background-color: #4c9cef; padding: 10px 20px; border-radius: 5px; font-weight: 600; } .contact-us-detail:hover { background-color: #f7639a; } .contact-us-detail a { color: #ffffff; } .contact-us-detail a:hover { color: #ffffff; } .form-group { margin-bottom: 25px; } .form-control { border: 2px solid transparent; height: 50px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -ms-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -o-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -webkit-transition:all 150ms ease-in-out 0s; -moz-transition:all 150ms ease-in-out 0s; -ms-transition:all 150ms ease-in-out 0s; -o-transition:all 150ms ease-in-out 0s; transition:all 150ms ease-in-out 0s; } .form-control:focus { border-color: #171717; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .form-control:focus { border-color: #4c9cef; border-width: 2px; } .margin-top-bottom { margin-top: 100px; margin-bottom: 100px; } .custom-margin { margin-top: 80px; } .button { border: none; border-radius: 5px; font-family: inherit; font-size: 17px; color: inherit; background: none; cursor: pointer; padding: 20px 60px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .button:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .button-style { border: 3px solid #fff; color: #fff; } .button-style:hover, .button-style:active, .button-style:focus { color: #ffffff; background: #4c9cef; } .button-style-color-2:hover, .button-style-color-2:active, .button-style-color-2:focus { color: #ffffff; background: #f7639a; } .button-style-dark { border: 3px solid #000000; color: #000000; } .pattern-bg { background: url(https://s23.postimg.org/klq72xovv/pattern_bg.png); background-repeat: repeat; }

Related: See More


Questions / Comments: