"Contact Us Body"
Bootstrap 3.0.0 Snippet by serhatkaraca

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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="container"> <div class="row"> <div class="col-md-7"> <h1 class="title">Get in touch with us.</h1> <p class="subtitle">We appreciate all feedback we receive – positive and constructive - and love to hear what you think about our programmes and services. </p> </div> </div> <div class="row map-form"> <div class="col-md-7"> <form class="form"> <div class="form__row"> <div class="ph1 ph-small ph-big" data-input="name">Full Name</div> <input type="text" class="form__field" name="name" id="name" required> </div> <div class="form__row"> <div class="ph2 ph-small ph-big" data-input="email">Email Adress</div> <input type="email" class="form__field" name="email" id="email" required> </div> <div class="form__row"> <div class="ph2 ph-small ph-big" data-input="phone">Phone Number with Country Code</div> <input type="text" class="form__field" name="phone" id="phone" required> </div> <div class="form__row"> <label class="form__title" for="job-function">Subject</label> <select class="form__field form__field--select" name="job-function" required> <option value="" selected="selected">Select a Subject</option> <option value="op1">Subject 1</option> <option value="op2">Subject 2</option> <option value="op3">Subject 3</option> <option value="op4">Subject 4</option> </select> </div> <div class="form__row"> <label class="form__title">Message</label> <textarea class="form__message" name="text" placeholder="Enter your message for us here. We will get back to you within 2 business days." required></textarea> </div> <input class="form__submit" type="submit" value="Send Message"> </form> </div> <div class="col-md-5"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10119.185074069741!2d29.031845602028582!3d41.05911758161741!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6477d93f7badc778!2sTRT+World!5e0!3m2!1str!2str!4v1496302367803" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe> <h2>Contact Details</h2> <h3>Address</h3> <p>TRT World Headquarters Ahmet Adnan Saygun Street No:83<br> 34347 Ulus, Besiktas<br> İstanbul / TURKEY</p> <div class="col-md-5 col-sm-6" style="padding-left:0px;"> <h3>Telephone</h3> <p>+90 (212) 326 3000<br> +90 (212) 403 4600</p> </div> <div class="col-md-5 col-sm-6" style="padding-left:0px;"> <h3>Email</h3> <p>enquiry@trtworld.com<br> pr@trtworld.com</p> </div> </div> </div> </div>
.title{ font-size:36px; opacity:0.87; font-weight:bold; line-height:1.5; letter-spacing:-0.4px; color:#1e1e1e; margin:0; } .subtitle{ font-size:20px; line-height:1.6; opacity:0.87; color:#1e1e1e; margin:20px 0px 0px 0px; } .map-form{ margin-top:40px; } .map-form h2{ margin:30px 0px 0px 0px; font-size:24px; line-height:1.5; font-weight:bold; opacity:0.5; letter-spacing:-0.4px; color:#1e1e1e; } .map-form h3{ margin:20px 0px 0px 0px; font-size:16px; font-weight:500; line-height:1.5; color:#1e1e1e; opacity:0.5; } .map-form p{ margin:10px 0px 0px 0px; opacity:0.87; font-size:16px; line-height:1.5; color:#1e1e1e; } .map-form .form { padding:20px; background-color:#f0f0f2; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); margin-bottom:20px; } .map-form .form__row { position: relative; margin-bottom: 20px; } .map-form .form__field { display: block; width: 100%; color: #1e1e1e; height: 50px; position: relative; padding: 19px 0px 7px 7px; border: 1px solid #8f8f8f; text-indent: 0; -webkit-appearance: none; border-radius: 3px; background: #fff; transition: all .2s linear; } .map-form .form__field:focus { outline: 0; } /* .map-form .form__field:required:valid { border: 2px solid #46af91; } .map-form .form__field:focus:required:invalid { border: 2px solid #e04f42; } */ .map-form .form__field--select { padding: 8px; color: #acacae; width:auto; cursor:pointer; height:40px; min-width:126px; } .map-form option { color: #333; } .map-form .ph-small { transition: all .2s; color: #8f8f8f; font-size: 10px; line-height: 1.6; margin-top: 2px; margin-left: 7px; position: absolute; z-index: 10; white-space: nowrap; color:#00b6ca; } .map-form .ph-big { font-size: 16px !important; margin: 11px 0px 15px 7px !important; color:#8f8f8f !important; } .map-form .form__submit { padding: 8px 24px; text-align: center; line-height: 1.5; background-color: #00b6ca; color: #f0f0f2; cursor: pointer; border: 0; outline: 0; transition: all 0.3s ease-in-out; font-size: 16px; font-weight: bold; } .map-form .form__title{ font-size:14px; font-weight:bold; line-height:1.43; color:#1e1e1e; opacity:0.5; margin-bottom:10px; } .map-form .form__message{ width: 100%; font-size: 16px; line-height: 1.5; color: #1e1e1e; border: solid 1px #8f8f8f; border-radius: 3px; padding: 12px 8px; min-height: 200px; resize: none; } .map-form .form__message:focus{ outline:none; }
//@TODO // Can we make it work with 'label' // how to init script when dom has changed with new fields? // on blur if value in field and invalid - make invalid (border red). // Grab all the inputs (not the submit button). var inputs = document.querySelectorAll('input:not(.form__submit)'); // For each input. inputs.forEach( function(input, index) { // Grab the 'name' attribute value. var inpAttr = input.getAttribute("name"); // Grab the correct element via the data attribute. var ph = document.querySelector('[data-input="' + inpAttr + '"]'); // When in focus, remove the class. input.onfocus = function() { ph.classList.remove('ph-big'); } // On blur, if input is empty add the class back on. input.onblur = function() { if (this.value === "") { ph.classList.add('ph-big'); } }; });

Related: See More


Questions / Comments: