HTML5/CSS3 Contact Form Tutorial

HTML5 and CSS3 are very useful for web designer. this is an example tutorial HTML5 and CSS3 on page contact us. Did you know you clear about HTML5 property? Check out this beautiful contact form demo that I’ve created with HTML5 filter property and CSS3 Font property @font-face. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

Demo Download

The Contact Form is Contact 3 Input and 1 text area:

1. Name

2. Email address

3. Subject

4. Message

The HTML

The First you need to do is to create the html structure. We need a box container with four divs, one for each step. The basic HTML code is the following:

<!DOCTYPE html>

<html lang="en"><!-- This is a demonstration of HTML5 goodness with healthy does of CSS3 mixed in --><head>

<title>CSS3/HTML5 Contact Form by Freshdesignweb.com</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

</head>

<body>

<div >

<h2>Contact Me</h2>

<form id="contactform">

<p><label for="name">Name</label></p>

<input id="name" name="name" placeholder="First and last name" required="" tabindex="1" type="text">

<p><label for="email">Email</label></p>

<input id="email" name="email" placeholder="example@domain.com" required="" tabindex="2" type="text">

<p><label for="Subject">Subject</label></p>

<input id="subject" name="subject" placeholder="Subject" required="" tabindex="2" type="text">

<p><label for="comment">Your Message</label></p>

<textarea name="comment" id="comment" tabindex="4"></textarea> <br>

<input name="submit" id="submit" tabindex="5" value="Send Message" type="submit">

</form>

</div>

<div style="float:right; padding-right:30px;padding-bottom:30px;"><a href="http://www.freshdesignweb.com"> Back to homepage </a></div>

</body></html>

CSS Code

Now we need to add the style on the form. First, we use the @fontface rule for using a custom font. The complete CSS Code is listed below:

@font-face {

font-family: 'YanoneKaffeesatzRegular';

src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot');

src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),

url('fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),

url('fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'BebasNeueRegular';

src: url('fonts/BebasNeue-webfont.eot');

src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/BebasNeue-webfont.woff') format('woff'),

url('fonts/BebasNeue-webfont.ttf') format('truetype'),

url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');

font-weight: normal;

font-style: normal;

}

body, div, h1, form, fieldset, input, textarea {

margin: 0; padding: 0; border: 0; outline: none;

}

html {

height: 150%;

}

body {

background: #728eaa;

background: -moz-linear-gradient(top, #CCC 0%, #728EAA 150%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */

font-family: sans-serif;

}

.cover{

background:#CCC; width:700px; margin:auto; padding-left:60px;

}

h2.contact { padding-left: 125px; font-size: 66px; color: #ff5400; height: 105px; background: url(images/contact.png) no-repeat -10px -10px;  font-family: 'YanoneKaffeesatzRegular';}

p.contact { font-size: 24px; margin-bottom: 15px; line-height: 36px; font-family: 'BebasNeueRegular', Arial; color: #4b4b4b; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

#contact { margin-bottom: 0px; }

input[type="text"] { width: 400px; }

textarea { width: 600px; height: 275px; }

label { color: #ff5400; }

input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 24px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; }

input:focus, textarea:focus { border: 5px solid #ff5400; background-color: rgba(255, 255, 255, 1); }

input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 24px; background-color: #7ac000; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.23, #619702),

color-stop(0.62, #7ac000)

);

background: -moz-linear-gradient(

center bottom,

#619702 23%,

#7ac000 62%

);

}

input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400;

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.23, #c34000),

color-stop(0.62, #ff5400)

);

background: -moz-linear-gradient(

center bottom,

#c34000 23%,

#ff5400 62%

);

}

input[type="submit"]:active { top: 1px; }

You can enjoy with source bellow:

View Demo |Download File (8474)

Written by Graham

Graham Bill has been a professional web developer and designer with more experience on coding HTML5, CSS3, php, javascript, jquery, ajax, jsp, XML, MySQL, SEO and especially on development joomla templates and wordpress themes.

Feedback 6 Leave a comment
  1. I’m start learning html5 and your form ezample is really good, but i’m a bit lost, where I need to put the reference to point to the php that send the form? or this code use a different way to send it?

Leave a Reply

Your email address will not be published. Required fields are marked *

Please check to comfirm

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>