Bootstrap TemplatesHtmlJquery

Bootstrap Template Contact Us

Bootstrap Template Contact Us

Views

Hello to all, welcome to therichpost.com. In this post, I will show you Bootstrap Template Contact Us with proper code. Bootstrap is a very famous open-source front end library.

 I have made this Bootstrap Template Contact Us in wordpress.

Here is the working html code and I made this for wordpress template and you can add this into your wordpress template easily and also in simple html file:

Here is the code for wordpress template:
<?php
/*
Template Name: Bootstrap Contact Demo
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Page</title>
<link href="<?php echo get_template_directory_uri();?>/demo-code/main.css" rel="stylesheet">
<script src="<?php echo get_template_directory_uri();?>/demo-code/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/demo-code/bootstrap.min.js"></script>
</head>
<body>
<!-- Header Section End Here -->
<div class="header">
<div class="container">
<!-- Header Section Left Start Here -->
<div class="left">
<div class="logo"><a href="https://therichpost.com/">Company Logo</a></div>
</div>
<!-- Header Section Left End Here -->
<!-- Header Section Right Start Here -->
<div class="right navigation">
<ul id="menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
<!-- Header Section Right End Here -->
</div>
</div>
<!-- Header Section End Here -->
<!-- Buy Section Start Here -->
<div class="inner-story-section contact-page clearfix">
<div class="content">
<h1>Contact</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!-- Buy Section End Here -->
<!-- Fast & Easy Application Process Section Start Here -->
<div class="get-in-touch grey-bg clearfix">
<div class="container">
<div class="heading">
<h2>We are Get in Touch</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="content">
<div class="form">
<input type="text" value="" placeholder="Name" />
<input type="text" value="" placeholder="Email Address" />
<input type="text" value="" placeholder="Phone Number" />
<textarea type="text" value="" placeholder="Message" rows="5" cols="0"></textarea>
<a href="#">Submit &nbsp;<i class="fa fa-angle-right"></i></a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- Fast & Easy Application Process Section End Here -->
<!-- Testimonial Section Start Here -->
<div class="get-support clearfix">
<div class="container">
<div class="heading">
<h2>Get Support</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="content">
<div class="left">
<ul>
<li><i class="fa fa-envelope" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
<li><i class="fa fa-phone-square" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109552.36514763873!2d75.78663263792444!3d30.900326335489083 !2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a837462345a7d% 3A0x681102348ec60610!2sLudhiana%2C+Punjab!5e0!3m2!1sen!2sin!4v1517932988028" width="545" height="235" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="footer-logos clearfix">
<div class="container">
<div class="content">
<div class="item">
Image1
</div>
<div class="item">
Image2
</div>
<div class="item">
Image3
</div>
<div class="item">
Image4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer clearfix">
<div class="container">
<div class="top">
<div class="content">
<div class="left">
Company Logo
</div>
<div class="right">
<span>Signup Our Newsletter</span>
<div class="subscribe-input"><input type="text" value="" placeholder="Please enter email address...">
<a href="#">Go!</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="center">
<div class="content">
<div class="left">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul>
<li><i class="fa fa-map-marker" aria-hidden="true"></i><span>Lorem Ipsum is simply dummy text</span></li>
<li><i class="fa fa-phone-square" aria-hidden="true"></i><span>Lorem Ipsum</span></li>
</ul>
</div>
<div class="right">
<ul class="list-01">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu1</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu2</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu3</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu4</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu5</span></a></li>
</ul>
<ul class="list-02">
<li><a href="https://www.facebook.com/therichpost/"><i class="fa fa-facebook-f" aria-hidden="true"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i><span>Instagram</span></a></li>
<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i><span>YouTube</span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="bottom">
<div class="container">
<div class="content">
<div class="left">
<p>© Copyright 2018</p>
</div>
<div class="right">
<ul>
<li><a href="terms-of-use">Terms of use</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="privacy-policy">Privacy Policy</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo get_template_directory_uri();?>/demo-code/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</body>
<!-- Custom Javascript Start Here -->
<!-- Custom Javascript End Here -->
</html>

 

Here is the code for Html template:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Page</title>
<link href="demo-code/main.css" rel="stylesheet">
<script src="demo-code/jquery.min.js"></script>
<script src="demo-code/bootstrap.min.js"></script>
</head>
<body>
<!-- Header Section End Here -->
<div class="header">
<div class="container">
<!-- Header Section Left Start Here -->
<div class="left">
<div class="logo"><a href="https://therichpost.com/">Company Logo</a></div>
</div>
<!-- Header Section Left End Here -->
<!-- Header Section Right Start Here -->
<div class="right navigation">
<ul id="menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
<!-- Header Section Right End Here -->
</div>
</div>
<!-- Header Section End Here -->
<!-- Buy Section Start Here -->
<div class="inner-story-section contact-page clearfix">
<div class="content">
<h1>Contact</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!-- Buy Section End Here -->
<!-- Fast & Easy Application Process Section Start Here -->
<div class="get-in-touch grey-bg clearfix">
<div class="container">
<div class="heading">
<h2>We are Get in Touch</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="content">
<div class="form">
<input type="text" value="" placeholder="Name" />
<input type="text" value="" placeholder="Email Address" />
<input type="text" value="" placeholder="Phone Number" />
<textarea type="text" value="" placeholder="Message" rows="5" cols="0"></textarea>
<a href="#">Submit &nbsp;<i class="fa fa-angle-right"></i></a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- Fast & Easy Application Process Section End Here -->
<!-- Testimonial Section Start Here -->
<div class="get-support clearfix">
<div class="container">
<div class="heading">
<h2>Get Support</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="content">
<div class="left">
<ul>
<li><i class="fa fa-envelope" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
<li><i class="fa fa-phone-square" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i><span>therichposts@gmail.com</span></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109552.36514763873!2d75.78663263792444!3d30.900326335489083 !2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a837462345a7d%3A0 x681102348ec60610!2sLudhiana%2C+Punjab!5e0!3m2!1sen!2sin!4v1517932988028" width="545" height="235" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="footer-logos clearfix">
<div class="container">
<div class="content">
<div class="item">
Image1
</div>
<div class="item">
Image2
</div>
<div class="item">
Image3
</div>
<div class="item">
Image4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer clearfix">
<div class="container">
<div class="top">
<div class="content">
<div class="left">
Company Logo
</div>
<div class="right">
<span>Signup Our Newsletter</span>
<div class="subscribe-input"><input type="text" value="" placeholder="Please enter email address...">
<a href="#">Go!</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="center">
<div class="content">
<div class="left">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul>
<li><i class="fa fa-map-marker" aria-hidden="true"></i><span>Lorem Ipsum is simply dummy text</span></li>
<li><i class="fa fa-phone-square" aria-hidden="true"></i><span>Lorem Ipsum</span></li>
</ul>
</div>
<div class="right">
<ul class="list-01">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu1</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu2</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu3</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu4</span></a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i><span>Menu5</span></a></li>
</ul>
<ul class="list-02">
<li><a href="https://www.facebook.com/therichpost/"><i class="fa fa-facebook-f" aria-hidden="true"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i><span>Instagram</span></a></li>
<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i><span>YouTube</span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="bottom">
<div class="container">
<div class="content">
<div class="left">
<p>© Copyright 2018</p>
</div>
<div class="right">
<ul>
<li><a href="terms-of-use">Terms of use</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="privacy-policy">Privacy Policy</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="demo-code/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</body>
<!-- Custom Javascript Start Here -->
<!-- Custom Javascript End Here -->
</html>

There are so many in bootstrap templates codes and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL