357
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 <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> | </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 <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> | </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
