Creating Contact Us Page for Games Site in Zurb Foundation
In the end of this tutorial, your Contact Us page will look like,
Step 4.1: Create a duplicate of the index.html file and name it as contact.html.
Step 4.2: Open the contact.html file in a HTML editor and delete everything inside the body tags except header, footer and the attached scripts.
Step 4.3: Save the file and open it in your favorite browser, the web page will look like,
Step 4.4:We are going to use Section element for the contact form. Instead of section accordion, we are going to use section tabs. Type the below section tabs code in between headers and footers.
<div class="row">
<!-- Contact Details -->
<div class="large-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>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Contact Our Company</a></li>
<li class="tab-title"><a href="#panel1">Contact Our Company</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id"panel1">
<form>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline">Your Name</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourName" placeholder="name">
</div>
</div>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline"> Your Email</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourEmail" placeholder="email@domain-name.com">
</div>
</div>
<label>What's up?</label>
<textarea rows="4"></textarea>
<button type="submit" class="radius button">Submit</button>
</form>
</div>
<div class="content" id="panel2">
<ul class="large-block-grid-5">
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 1</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 2</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 3</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 4</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 5</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 6</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 7</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 8</a></li>
<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 9</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Contact Details -->
Step 4.5: Save the file and open it in your favorite browser, the web page will look like,
Step 4.6: To add map to contact page, we are going to use the element "Reveal". It is an element to create modals, check the provided link to learn more about the element, reveal. For map, I just copied a random location from Google map, add the below code above footer to complete the contact page.
<!-- Sidebar --> <div class="large-3 columns"> <h5>Map</h5> <!-- Clicking this placeholder fires the mapModal Reveal modal --> <p> <a href="" data-reveal-id="mapModal"> <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps f=d&source=s_d&saddr=USA&daddr=&hl=en&geocode=&aq=0&oq=usa&sll=13.045084,80.211027&sspn=0.023621,0.027595&mra=ls&ie=UTF8&ll=35.58537,0&spn=108.82926,360&t=m&output=embed"></iframe><br /> </a><br /> <a href="" data-reveal-id="mapModal">View Map</a> </p> <p>Address Line 1.<br/> Address Line 2. </p> </div> <!-- End Sidebar --> </div> <!-- End Main Content and Sidebar --> <!-- Map Modal --> <div class="reveal-modal" id="mapModal"> <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&source=s_d&saddr=USA&daddr=&hl=en&geocode=&aq=0&oq=usa&sll=13.045084,80.211027&sspn=0.023621,0.027595&mra=ls&ie=UTF8&ll=35.58537,0&spn=108.82926,360&t=m&output=embed"></iframe><br /> </p> <!-- Any anchor with this class will close the modal. This also inherits certain styles, which can be overriden. --> <a href="#" class="close-reveal-modal">×</a> </div>
Step 4.7: Save the file and open it in your favorite browser, the web page will look like,
