Twitter Bootstrap Free Tutorial

Step 5: Creating Contact US Page

In the end of this tutorial, your Contact page will look like,

Twitter Bootstrap Tourist Spot Website Contact US Page

Step 5.1: Open Tourist Spot Layout page and renamed as contact.html.

Step 5.1.1: Save the file and open it in your favorite browser, the web page will look like,

Step 5.2: Type the below Contact Form code in between headers and footers.

<div class="col-md-9 columns">
   <h3>Get in Touch!</h3>
   <p>We'd love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day <em>all day</em>.</p>
   <form role="form"> 
     <br />
     <div class="row">
	<div class="col-md-2"><label for="name">Your Name</label></div>
        <div class="col-md-10"><input type="text" id="name" class="form-control" placeholder="Your Name" /></div>
     </div>
     <br />
     <div class="row">
	<div class="col-md-2"><label for="email">Your Email</label></div>
  	<div class="col-md-10"><input type="email" id="email" class="form-control" placeholder="Your email" /></div>
     </div>
     <br />
     <div class="row">
	<div class="col-md-2"><label>What's up?</label></div>
	<div class="col-md-10"><textarea rows="3" class="form-control"></textarea></div>
     </div>
   </form>
</div>

Step 5.2.1: Save the file and open it in your favorite browser, the web page will look like,

Twitter Bootstrap Tourist Spot Website Contact US Without Map

Step 5.3: To add map to contact page, we are going to use the element "Modal". It is an element to create modals, check the provided link to learn more about the element, modal. For map, I just copied a random location from Google map, add the below code above footer to complete the contact page.

<div class="col-md-3 columns">
<h5>Map</h5>
<!-- Clicking this placeholder fires the mapModal Reveal modal -->
<p>
<a href="" data-toggle="modal" data-target="#myModal">  <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=d&amp;source=s_d&amp;saddr=USA&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=0&amp;oq=usa&amp;sll=13.045084,80.211027&amp;sspn=0.023621,0.027595&amp;mra=ls&amp;ie=UTF8&amp;ll=35.58537,0&amp;spn=108.82926,360&amp;t=m&amp;output=embed"></iframe><br />

</a><br />
<a href="" data-toggle="modal" data-target="#myModal">View Map</a>
</p>
<p>
Address Line 1.<br />
Address Line 2.
</p>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <h4>Where We Are</h4>
<p>  <iframe width="700" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=d&amp;source=s_d&amp;saddr=USA&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=0&amp;oq=usa&amp;sll=13.045084,80.211027&amp;sspn=0.023621,0.027595&amp;mra=ls&amp;ie=UTF8&amp;ll=35.58537,0&amp;spn=108.82926,360&amp;t=m&amp;output=embed"></iframe><br />
</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>
<hr/>

Step 5.3.1: Save the file and open it in your favorite browser, the web page will look like,

<< Step 4 Step 6 >>