<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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippets"> <div class="row text-center"> <div class="col-sm-4"> <div class="contact-detail-box"> <i class="fa fa-th fa-3x text-colored"></i> <h4>Get In Touch</h4> <abbr title="Phone">P:</abbr> (58) 414-357.61.81<br> E: <a href="mailto:carmenestelasi@gmail.com" class="text-muted">carmenestelasi@email.com</a> </div> </div><!-- end col --> <div class="col-sm-4"> <div class="contact-detail-box"> <i class="fa fa-map-marker fa-3x text-colored"></i> <h4>Our Location</h4> <address> Carrera 15 entre 43 y 44.<br> Barquisimeto, Venezuela<br> </address> </div> </div><!-- end col --> <div class="col-sm-4"> <div class="contact-detail-box"> <i class="fa fa-book fa-3x text-colored"></i> <h4>24x7 Support</h4> <p>Industry's standard dummy text.</p> <h4 class="text-muted">1234 567 890</h4> </div> </div><!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-sm-6"> <div class="contact-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d15713.841410473819!2d-69.32947199999998!3d10.06131395!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2s!4v1481735102432" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div><!-- end col --> <!-- Contact form --> <div class="col-sm-6"> <form role="form" name="ajax-form" id="ajax-form" action="https://formsubmit.io/send/coderthemes@gmail.com" method="post" class="form-main"> <div class="form-group"> <label for="name2">Name</label> <input class="form-control" id="name2" name="name" onblur="if(this.value == '') this.value='Name'" onfocus="if(this.value == 'Name') this.value=''" type="text" value="Name"> <div class="error" id="err-name" style="display: none;">Please enter name</div> </div> <!-- /Form-name --> <div class="form-group"> <label for="email2">Email</label> <input class="form-control" id="email2" name="email" type="text" onfocus="if(this.value == 'E-mail') this.value='';" onblur="if(this.value == '') this.value='E-mail';" value="E-mail"> <div class="error" id="err-emailvld" style="display: none;">E-mail is not a valid format</div> </div> <!-- /Form-email --> <div class="form-group"> <label for="message2">Message</label> <textarea class="form-control" id="message2" name="message" rows="5" onblur="if(this.value == '') this.value='Message'" onfocus="if(this.value == 'Message') this.value=''">Message</textarea> <div class="error" id="err-message" style="display: none;">Please enter message</div> </div> <!-- /col --> <div class="row"> <div class="col-xs-12"> <div id="ajaxsuccess" class="text-success">E-mail was successfully sent.</div> <div class="error" id="err-form" style="display: none;">There was a problem validating the form please check!</div> <div class="error" id="err-timedout">The connection to the server timed out!</div> <div class="error" id="err-state"></div> <button type="submit" class="btn btn-primary btn-shadow btn-rounded w-md" id="send">Submit</button> </div> <!-- /col --> </div> <!-- /row --> </form> <!-- /form --> </div> <!-- end col --> </div> <!-- end row --> </div>