sendesignz

Designing Contact form in CSS3 and HTML5

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" />

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation

Load Previous Comments
  • Guest (Donna Gabriel)

    We can increase rankings of your website in search engines. Please reply back for more details.

    0 Like Short URL:
  • Guest (Stella Fair)

    It’s a fact: more people find out about your business on Facebook or Twitter than on search engines. Making these sites work maybe tricky for you, but it’s business as usual for us. Let us improve your visibility and enhance your image. It’s part of our complete Internet Marketing package. We’ll be more than your friends --- we’ll be your partners.

    0 Like Short URL:
  • Guest (Ivan Ballard)

    We offer quality Search Engine Optimization / SEO Services and Internet Marketing Solutions. Our dedicated team of SEO Professionals ensures Top 10 search engine rankings. Our SEO Processes are designed in view of the SEO guidelines, and white hat SEO techniques are strictly followed to ensure that our clients from world over get the best SEO services. Please reply to this email so we can send you more details.

    0 Like Short URL:
  • Guest (Stacy Babb)

    You know how important it is to be visible.  You know you need to use the internet better.  But you also need to take care of your business.  You can’t do both.  Well, you take care of your business… we’ll take care of the internet for you.  Our expert staff understands how to make search engines your friend.  Email us and we’ll get started in $ 99 per month.

    0 Like Short URL:
  • Guest (Donna Gabriel)

    We can increase rankings of your website in search engines. Please reply back for more details.

    0 Like Short URL:
  • good information

    1 Like Short URL:
  • impressive

    0 Like Short URL:
  • Guest (Ivan Ballard)

    We offer quality Search Engine Optimization / SEO Services and Internet Marketing Solutions. Our dedicated team of SEO Professionals ensures Top 10 search engine rankings. Our SEO Processes are designed in view of the SEO guidelines, and white hat SEO techniques are strictly followed to ensure that our clients from world over get the best SEO services. Please reply to this email so we can send you more details.

    0 Like Short URL:
  • Guest (Stephen)

    Form does not seem to render properly in IE, any ideas?<br /><br />I know its a nightmare of a browser but I was always taught to make it render right in all browers.

    0 Like Short URL:
  • cool my master....it's a good

    0 Like Short URL: