"Quote request form template - responsive web design "
Bootstrap 4.0.0 Snippet by rootedlikeatree

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="space-medium"> <div class="container"> <div class="row"> <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12"> <div class="feature-description"> <h2>We’re ready to listen to your needs & would like to talk about how we can grow your business online.</h2> <hr> <!-- feature-left --> <div class="feature-left"> <div class="feature-icon"><i class="far fa-address-book"></i></div> <div class="feature-content"> <p>Nullam fringilla accumsan sem a luctuse llentesque dui rossollicitudin.</p> </div> </div> <!-- /.feature-left --> <!-- feature-left --> <div class="feature-left"> <div class="feature-icon"><i class="far fa-compass"></i></div> <div class="feature-content"> <p>Phasellus finibus tortor a purus ultricies dicestibulum sempera splacera. </p> </div> </div> <!-- /.feature-left --> <!-- feature-left --> <div class="feature-left"> <div class="feature-icon"><i class="far fa-question-circle"></i></div> <div class="feature-content"> <p>Vivamus eu nunc id dolor auctor eleifend mauris ante ligula vestibulum.</p> </div> </div> <!-- /.feature-left --> <hr> <p>Note : you can write whatever you want to describe here.</p> </div> </div> <!-- /.feature-sections --> <div class="offset-xl-1 col-xl-6 offset-lg-1 col-lg-10 offset-md-1 col-md-10 col-sm-12 col-12 mt30"> <form> <!-- service-form --> <div class="service-form"> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb10 "> <h3>Get Affordable & Best SEO Services</h3> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 "> <div class="form-group service-form-group"> <label class="control-label sr-only" for="name"></label> <input id="name" type="text" placeholder="First Name" class="form-control" required> <div class="form-icon"><i class="fa fa-user"></i></div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 "> <div class="form-group service-form-group"> <label class="control-label sr-only" for="name"></label> <input id="name" type="text" placeholder="Last Name" class="form-control" required> <div class="form-icon"><i class="fa fa-user"></i></div> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <div class="form-group service-form-group"> <label class="control-label sr-only" for="email"></label> <input id="email" type="email" placeholder="Email" class="form-control" required> <div class="form-icon"><i class="fa fa-envelope"></i></div> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <div class="form-group service-form-group"> <label class="control-label sr-only" for="phone"></label> <input id="phone" type="text" placeholder="Phone" class="form-control" required> <div class="form-icon"><i class="fa fa-phone"></i></div> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <div class="form-group service-form-group"> <label class="control-label sr-only" for="website"></label> <input id="website" type="text" placeholder="Website URL" class="form-control" required> <div class="form-icon"><i class="fa fa-link"></i></div> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <div class="form-group"> <label class="control-label sr-only" for="select"></label> <div class="select"> <select id="select" name="select" class="form-control"> <option value="">Budget</option> <option value="">$1000</option> <option value="">$5000</option> <option value="">$10000</option> </select> </div> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <div class="form-group"> <label class="control-label sr-only" for="textarea"></label> <textarea class="form-control" id="textarea" name="textarea" rows="3" placeholder="Messages"></textarea> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 "> <button type="submit" name="singlebutton" class="btn btn-default btn-block mb10">send message</button> <p><small>We promise we will never SPAM you with unwanted emails.</small></p> </div> </div> </div> </form> <!-- /.service-form --> </div> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center"> Created for <a href="https://goo.gl/tnr3zU" target="_blank">easetemplate</a> </div></div> </div> </div> </div><script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script>
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Barlow Semi Condensed', sans-serif; letter-spacing: 0px; font-size: 18px; color: #50595e; font-weight: 400; line-height: 28px; } h1, h2, h3, h4, h5, h6 { font-weight: 500; color: #06131a; margin: 0px 0px 15px 0px; font-family: 'Barlow Semi Condensed', sans-serif; } h1 { font-size: 36px; } h2 { font-size: 30px; line-height: 38px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } p { margin: 0 0 20px; line-height: 1.7; } p:last-child { margin: 0px; } ul, ol {} a { text-decoration: none; color: #50595e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #ce0058; } sub { bottom: 0em; } .lead { font-size: 20px; font-weight: 500; line-height: 1.7; font-family: 'Barlow Semi Condensed', sans-serif; color: #06131a; margin-bottom: 20px; } .feature-left { margin-bottom: 40px; } .feature-left .feature-icon { font-size: 50px; color: #4cbec5; display: inline-block; float: left; padding-right: 40px; padding-top: 7px; } .feature-left .feature-content { font-size: 20px; } .feature-left:last-child {} textarea.form-control { height: 90px; } .required {} .form-group { margin-bottom: 5px; } select.form-control:not([size]):not([multiple]) { height: 56px; color: #50595e; } .hero-section .form-control { border: 1px solid #8c897d; height: 58px; } .form-control { border-radius: 0px; font-size: 14px; font-weight: 500; width: 100%; height: 56px; padding: 14px 18px; line-height: 1.42857143; border: 1px solid #d2d8db; background-color: #fff; text-transform: capitalize; letter-spacing: 0px; margin-bottom: 14px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1); -webkit-appearance: none; } .form-control:focus { color: #06131a !important; outline: 0; box-shadow: 0 0 0 0.1rem rgb(234, 231, 222); border-color: #06131a; } input::-webkit-input-placeholder { color: #50595e !important; } textarea::-webkit-input-placeholder { color: #50595e !important; } .input-group-addon { background-color: transparent; border: 1px solid #eee; border-radius: 0px; position: absolute; right: 16px; top: 16px; font-size: 12px; } .focus { border: 1px solid #d2d8db; } .focus:focus { border: 1px solid #06131a; } .input-group-addon i { color: #63480f; } .btn-select { font-size: 14px; } select option { margin: 40px; background: rgba(255, 255, 255, 1); color: #50595e; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); position: relative; } select.form-control { position: relative; } select { -moz-appearance: none; border-radius: 0px; font-size: 14px; font-weight: 700; width: 100%; padding: 14px; line-height: 1.42857143; border: 1px solid #e0e5e9; background-color: #fff; text-transform: capitalize; -webkit-appearance: none; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } .select { position: relative; display: block; line-height: 2.2; overflow: hidden; } select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; cursor: pointer; color: #50595e; font-size: 16px; } .select::after { position: absolute; top: 0; right: 0; bottom: 0; padding: 10px 17px 0px 0px; background: transparent; pointer-events: none; font-family: 'FontAwesome'; content: "\f107"; font-size: 16px; } .select:hover::after { color: #50595e; } .select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; } select option { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; padding: 10px; width: 100%; background-color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; } .input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .service-form { background-color: #fafbfb; border: 1px solid #e4e8ea; padding: 40px 40px 20px 40px; } .service-form-group { position: relative; } .form-icon { position: absolute; right: 14px; bottom: 15px; font-size: 13px; } .btn { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 16px; text-transform: uppercase; font-weight: 700; padding: 10px 26px; letter-spacing: 0px; border-radius: 0px; line-height: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-default { background-color: #ce0058; color: #fff; border: 2px solid #ce0058; } .btn-default:hover { background-color: transparent; color: #ce0058; border: 2px solid #ce0058; } .btn-default.focus, .btn-default:focus { background-color: transparent; color: #ce0058; border: 2px solid #ce0058; box-shadow: 0 0 0 0.2rem rgb(206, 0, 88); } .space-medium{padding-top:80px; padding-bottom:80px;}

Related: See More


Questions / Comments: