DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS Contact Form

08.19.2009

| 960 views |

        Pure CSS styled contact form

  <div id="contactForm">
    <form action="http://www.studiomojo.co.uk/sendEmail.php" method="post" name="contact" id="contact">
      <div class="formContactLayout">
        <label>Name</label>
        <input name="Name" class="field" id="Name">
        <br>
        <label>Contact Number</label>
        <input name="ContactNo" class="field" id="ContactNo">
        <br>
        <label>Email Address</label>
        <input name="Email" class="field" id="Email">
        <br>
        <label>Message</label>
        <textarea name="Message" rows="12" class="field"></textarea>
        <br />
        <p class="center">
          <input name="Send" type="submit" class="button" value="Send" />
          <input name="sourceSite" type="hidden" value="http://www." />
          <input name="returnAddress" type="hidden" value="http://www." />
          <input name="valid" type="text" id="validator">
        </p>
      </div>
    </form>
  </div>

CSS

/* Form layout */
.formContactLayout {background:#FFF; padding: 10px; margin:0 auto; }
.formContactLayout .field { display: block; width: 360px; float: left; margin-bottom: 10px; }
.formContactLayout textarea { height:220px; }
.formContactLayout label { display: block; width: 250px; float: left; margin-bottom: 10px; text-align: right; padding-right: 20px; color:#336699; font-weight:bold; }
br { clear: left; }
.button { margin-left:340px; text-align:right; }
#validator {display:none;}
/* End for layout */

Tags: