area 
How to Create a Beautiful and Original Contact Page
Estimated Reading time: 2 – 4 minutes
Many web-designers often struggle to develop original, beautiful and cool contact pages. This short post proposes a quick and efficient way to pimp such (boring) pages by simply using a few lines of CSS and Google Map.
What you need first is to go to Google Map and to type your address. This done, click on “link” (top-right corner) and then click on “Customize and preview embedded map”. You are now ready to choose the format of your map/the zoom/the position of the label. Of course, you will need to choose a sufficiently large sized map since it will be the background of your form. When you are happy with your map, then copy the iframe code that should look like that:
<iframe width="700" height="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=oxford+internet+institute&sll=44.72293,-107.703874&sspn=143.717289,358.242188&ie=UTF8&hq=oxford+internet+institute&hnear=&cid=9782261097568857188&ll=51.759447,-1.287804&spn=0.058439,0.119991&z=13&iwloc=A&output=embed"></iframe>
<br /><small>
<a href="http://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=oxford+internet+institute&sll=44.72293,-107.703874&sspn=143.717289,358.242188&ie=UTF8&hq=oxford+internet+institute&hnear=&cid=9782261097568857188&ll=51.759447,-1.287804&spn=0.058439,0.119991&z=13&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a>
</small>
Paste this code into a specific div in your contact page code source, e.g.:
<div id="map">
<iframe blahblah.....>View Larger Map</a></small>
</div>
Now, what we need is to create a second div for the form, e.g.:
<div id="form">
:: Send me an Email<br /><br />
<form method="POST" action="">
Your Name:
<input type="text" name="name" size="35><br /><br />
Your Email:&amp;nbsp;
<input type="text" name="email" size="35>
[...]
</form>
</div>
We are almost done. We just need to apply some CSS to the two divs we created above, that is, for the map:
#map {
z-index:1; /*order of display*/
position: absolute;
display: block;
width: 700px; /*the width of your iframed map*/
height: 550px; /*the height of your iframed map*/
top:70px; /*the margin form the top*/
}
and for the form:
#form {
z-index:3;
position:absolute;
display: block;
overflow:auto;
left: 390px; /*position of the div w.r.t. the other one*/
top: 70px; /*position of the div w.r.t. the other one*/
width: 365px;
height: 530px;
padding:10px;
background: #fff; /*the background color, here white*/
filter:alpha(opacity=90); /*the transparency percentage, here, 90%. For different browsers, IE, Firefox, Safari, Chrome*/
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
That’s it! Wasn’t it simple? Demo here.