Designing Contact form in CSS3 and HTML5

, , Leave a comment

Designing with CSS3 become a trend in web design world. The options for fun in CSS3 is the modern design elements that can be created without graphics. Most of the modern browsers now support for CSS3. Today I will show you how to design a contact form in CSS3.

Demo

Let start with HTML

Markup

<div class="box">  <div class="rectangle">  <h2>Contact Us</h2>  </div>  <div class="triangle-l"></div>  <div class="triangle-r"></div>  <div class="form">  <!--form Element-->  </div>  </div>

 

Styling with CSS

Basic Styles

body  {  font-family:Tahoma, Geneva, sans-serif;  background-color:#f0f0f0;  }

 

Rounded Corners

.box  {  background-color: #9b9a98;  -moz-border-radius: 15px;  -webkit-border-radius: 15px;  padding: 10px;  width:300px;  height:470px;  margin-left:50px;  position:relative;  clear:both;  }

 

Ribbon Rectangle

.rectangle {  background: #424242;  height: 50px;  width: 360px;  position: relative;  left:-30px;  top: 30px;  float: left;  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);  z-index: 100;  }

 

box-shadow accepts four parameters

  • x-offset
  • y-offset
  • blur
  • shadow color

In my example

x-offset: 0

y-offset: 0

blur: 4px

shadow color: rgba(0,0,0,0.55);

Triangles

.triangle-l {  border-color: transparent #424242 transparent transparent;  border-style:solid;  border-width:20px;  height:0px;  width:0px;  position: relative;  left: -50px;  top: 10px;  z-index: -1; /* displayed under box */  }  .triangle-r {  border-color: transparent transparent transparent #424242;  border-style:solid;  border-width:20px;  height:0px;  width:0px;  position: relative;  left: 310px;  top: -30px;  z-index: -1; /* displayed under box */  }

 

For deeper view please visit my previous tutorial: How to Draw Speech Bubble and Shapes with CSS3

Letterpress Text Effect with Text-Shadow

.rectangle h2 {  font-size: 30px;  color: #222;  margin-top:5px;  text-shadow: 0px 2px 3px #555;  text-align: center;  }

 

Form Element

.form{  padding: 30px 25px 35px 25px;  }  .form ul{  list-style: none;  padding:0;  margin:2px;  }  .form ul li{  margin:0 0 9px 0;  padding:0;  }  /* Make inputs go to their own line */  .form input{  display:block;  }

 

Add Form Element in HTML

<div class="form">  <!--form Element-->  <ul>  <li>  <label for="first_name">First Name</label>  <input id="first_name" type="text"  autofocus="true"  name="first_name" placeholder="'John'" >  </li>  <li>  <label for="last_name">Last Name</label>  <input id="last_name" type="text"  name="last_name" placeholder="'Smith'" >  </li>  <li>  <label for="email">Email</label>  <input id="email" type="email"  name="email" placeholder="Email address" >  </li>  <li>  <label for="url">Website</label>  <input id="url" type="url"  name="url" placeholder="www.example.com">  </li>  <li>  <label for="password">Password</label>  <input id="password" type="password" name="password" value=""  autocomplete="off" placeholder="8-10 characters" />  </li>  <li>  <label for="password_confirmation">Password Confirmation</label>  <input id="password_confirmation" type="password"  name="password_confirmation" value=""  autocomplete="off" placeholder="Type your password again" />  </li>  <li><input type="submit" value="Sign Up"></li>  </ul  </div>

 

We are making this form with labels.This is essential when creating accessible forms. The

"for" attribute of the label references the ID of its associated form element. I used <ul> to reduce the complex tables or DIV structures.

Email

The email input type is designed to hold either a single email address or an email address list, so that’s the perfect candidate for our email field.

<label for="email">Email contact</label>  <input type="email" name="email" id="email">

 

Mobile devices get the most benefit from this type of form field, because the virtual keyboard layouts will change making entering email addresses easier.

URL

This is more useful if your visitor uses an iPhone, because it displays a different keyboard layout, displaying helper buttons for quickly entering web addresses, similar to the keyboard displayed when entering a URL into Mobile Safari's address bar.

<label for="url">Website</label>  <input type="url" name="url" id="url">

 

Autofocus

You can really speed up data entry if you place the user's cursor in the first field on the form when they load the page. Now HTML5 provides this capability as part of the language.

you can  add the autofocus attribute to any form field.

<label for="first_name">First Name</label>  <input id="first_name" type="text" name="first_name" autofocus="true" >

 

PlaceHolder

Placeholder text provides users with instructions on how they should fill the fields.

To add placeholder text, you just add the placeholder attribute to each input field. Like this:

<input id="first_name" type="text" Â name="first_name" placeholder="'John'" >

 

Preventing Autocompletion

HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we rather not let users do that. We have added the attribute to the password fields on this form.

<label for="password">Password</label>  <input id="password" type="password" name="password" value="" autocomplete="off" />

 

Share this: