Create A Clean and Stylish CSS3 Contact Form
Building stylish contact forms typically requires the use of images (and maybe some JavaScript) to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish.
In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.
Click the button below to view the live demo – it works in best in browsers powered by the WebKit rendering engine (i.e. Chrome and Safari), but also degrades well in Firefox, Opera, and IE.
Here’s a screenshot of what we’ll be creating:
Create The HTML Structure
To start with, create a new HTML document and add the following code inside the <body>:
<form action="#"> <fieldset id="user-details"> <label for="name">Name:</label> <input type="text" name="name" value="" /> <label for="email">Email:</label> <input type="email" name="email" value="" /> <label for="phone">Phone:</label> <input type="text" name="phone" value="" /> <label for="website">Website:</label> <input type="url" name="website" value="" /> </fieldset><!--end user-details--> <fieldset id="user-message"> <label for="message">Your Message:</label> <textarea name="message" rows="0" cols="0"></textarea> <input type="submit" value="Submit Message" name="submit" class="submit" /> </fieldset><!-- end user-message --> </form>
This is quite straightforward – we’re simply creating a form that has two containers – one that displays input fields for user details (#user-details) and another that displays a textarea for users to enter their message (#user-message).
Now add the following line in your <head>:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />This will make a nice font available from the Google Fonts directory – we then need to add some basic styling for the main document elements:
* { margin: 0px; padding: 0px; } body { margin: 0 auto; background: #f5f5f5; color: #555; width: 800px; /* make reference to the Yanone Kaffeesatz font */ font-family: 'Yanone Kaffeesatz', arial, sans-serif; } h1 { color: #555; margin: 0 0 20px 0; } label { font-size: 20px; color: #666; } fieldset { border: none; } #user-details { float: left; width: 230px; } #user-message { float: right; width: 405px; } textarea { width: 390px; height: 175px; }
Apply Some CSS3 Magic
Now onto styling the form – in each part we’ll initially add the standard CSS code first and then move on to discuss the CSS3 code that helps to enhance everything. So, to start with, add the following CSS code to style the form:
form { float: left; border: 1px solid #ddd; padding: 30px 40px 20px 40px; margin: 75px 0 0 0; width: 715px; background: #fff; }
If you check in the browser you should have something that looks like the following image:
We now want to add some rounded corners, a linear gradient background, and a drop shadow to the form – to achieve this we’re going to make use of some CSS3 code. Add the following code at the bottom of your “form” element:
form { ... /* -- CSS3 - define rounded corners -- */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* -- CSS3 - create a background gradient -- */ background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); /* -- CSS3 - add a drop shadow -- */ -webkit-box-shadow:0px 0 50px #ccc; -moz-box-shadow:0px 0 50px #ccc; box-shadow:0px 0 50px #ccc; }
In the above code, the “-moz” prefix is used to target Gecko based browsers (e.g. Firefox and Flock) whilst the “-webkit” prefix is used for browsers powered by the WebKit rendering engine (e.g. Chrome and Safari).
Once you’ve added this code your form should look something like the following screenshot:
As you can see, with just a few simple lines of CSS3 we’ve already significantly enhanced the appearance of the form. Now let’s add the basic code for the <input> and <textarea> elements:
input, textarea { padding: 8px; margin: 4px 0 20px 0; background: #fff; width: 220px; font-size: 14px; color: #555; border: 1px #ddd solid; }
Following this, we want to add a drop shadow to each input element and a CSS3 transition effect (i.e. an animation), so that we can fade in a different background color whenever the user hovers over an input/textarea element. To do this, we initially need to add the following code:
input, textarea { ... /* -- CSS3 Shadow - create a shadow around each input element -- */ -webkit-box-shadow: 0px 0px 4px #aaa; -moz-box-shadow: 0px 0px 4px #aaa; box-shadow: 0px 0px 4px #aaa; /* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */ -webkit-transition: background 0.3s linear; }
The transition effect will be triggered when the user hovers over the input and textarea elements – we therefore need to add the following code to define the action to be taken on this event:
input:hover, textarea:hover { background: #eee; }
If you now hover over an input field or the textarea you should see the background color change to grey over a short delay (0.3 seconds). Your form should now look almost complete:
It’s now time to work on the submit button – again we’ll add our standard CSS code first:
input.submit { width: 150px; color: #eee; text-transform: uppercase; margin-top: 10px; background-color: #18a5cc; border: none; }
Then add a CSS3 transition, gradient, and some rounded corners:
input.submit { ... /* -- CSS3 Transition - define which property to animate (i.e. the shadow) -- */ -webkit-transition: -webkit-box-shadow 0.3s linear; /* -- CSS3 Shadow - create a shadow around each input element -- */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); /* -- CSS3 - Rounded Corners -- */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
We then need to trigger the animation on the :hover event, so let’s add the code for that:
input.submit:hover { -webkit-box-shadow: 0px 0px 20px #555; -moz-box-shadow: 0px 0px 20px #aaa; box-shadow: 0px 0px 20px #555; cursor: pointer; }
If you now test the code in your browser you’ll see a fairly large shadow around the button whenever you hover over it (note that this effect is only available for WebKit browsers, so you’ll need to test it in Chrome or Safari to see it working).
Your form should now be complete:
All Done …
That’s everything done – you now have a clean contact form made with nothing other than CSS. Of course, there are still some issues with implementing CSS3 in that it wont work in all browsers, but the form has been designed to degrade well in older browsers.
You can use the buttons below to take a closer look through the live demo – you can also download and have a play around with the source code.
I hope you found this useful – let me know in the comments below if you have any comments/suggestions/feedback.
June 30th, 2010 at 6:46 am
OK, cool…thx!
But the hardiest elements to stylish in a form are errors…
June 30th, 2010 at 7:08 am
Awesome! great art work, indeed.
June 30th, 2010 at 7:38 am
Great looking contact form! Is it possible to integrate the form into a WordPress theme in a easy way?
June 30th, 2010 at 11:15 am
Yes, integrating the form into a WordPress theme would be straightforward to do. You could use a number of different approaches – perhaps the easiest would be to create a new page template and then incorporate this code into that new template. You could then assign the template to a “Contact” page that you create in your WordPress admin area.
June 30th, 2010 at 11:33 am
Nice looking form, good work, but accessibility fail. Missing “for” attributes and of course labels.
June 30th, 2010 at 11:47 am
Nice tutorial. However, a couple things.
First, you should also use the non-vendor specific tags as well.
Also, instead of using DIV to split your form, you should instead use FIELDSET.
June 30th, 2010 at 12:06 pm
Why the Mozilla hate? Firefox 4 previews have css 3 transitions, add some -moz-transition in there.
June 30th, 2010 at 12:09 pm
Couple fails on an overall good tutorial..
Never ever use * { margin: 0px; padding: 0px; }
When you define border-radius for webkit and mozilla you forgot the actual css3 call for border-radius, both chrome and opera already support it, so you are essentially ignoring the browsers that you should be targeting. Your code should have been,
/* — CSS3 – define rounded corners for the form — */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Same thing for box shadow
/* — CSS3 – add a drop shadow — */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
June 30th, 2010 at 1:22 pm
You should really use input type = email for the email and type = url for the website. You can then use the :valid and :invalid pseudo classes to add validation information.
Also, you should add the require attributes to any things you want to be filled in – modern browsers won’t submit the form until these are filled.
June 30th, 2010 at 1:46 pm
Labels don’t use HTML label element. That’s basic thing!
You’re using only proprietary -xx-border-radius and -xx-box-shadow properties. Include standard CSS3 ones!
June 30th, 2010 at 3:09 pm
Great, looks fine and degrades okay in IE, except for the ugly duckling, 6.
The message box doesn’t come out aligned, and actually comes out below the contact form a little odd.
Of course, in 2010, it’s hard to still support this browser, but there’s a considerable amount of people still using it.
June 30th, 2010 at 3:37 pm
Invalid markup for a form.
Sure, there’s many ways to create forms and a lot of people debate between using ’s to split up fields, and or ’s, and or “’s”; however you missed one thing that should *always* be satisfied.
Instead of using a tag you’re using a tag. This is no good. Label’s are meant to be in place next to fields for many reasons due to standards. One obvious functional one is that if a label is properly tied to a field and you click on that label, it’ll make that respective field active.
June 30th, 2010 at 4:28 pm
haha, your markup needs major work
June 30th, 2010 at 4:32 pm
Thanks everyone for the comments and feedback. As highlighted, there are clearly issues with this form from an accessibility perspective – my primary focus in the tutorial was to highlight the CSS3 functionality – when creating a contact form like this for a “real world” project many of the suggestions made would certainly need to be incorporated into the code/design.
June 30th, 2010 at 5:13 pm
I’ve been designing web pages for 15 years, and even I know that your form fields are labeled wrong. You have the labels as paragraph elements, when in fact, they should be elements. It’s logical, and proper HTML. Styling them as defies the contents, when they are sub-set of the form elements themselves.
As noted before, separating the two sets of form fields with DIV elements is amateur, too. Use the HTML standard FIELDSET, which is logical.
Then of course, you deviate from standards again by suggesting forking the CSS for 2 independent browsers (for rounded corner effects!). Fail #3.
June 30th, 2010 at 7:56 pm
I love the way it looks, but I can’t bring myself to use it because of the forking for specific browsers. I can’t wait until there is a standard implementation!
July 1st, 2010 at 1:46 am
Nice looking, but don’t use legend für the headline (h1), no fieldset and you don’t use labels (p). Nice looking is one site, the other and more important site is developing accessible and semantik code.
July 3rd, 2010 at 5:36 am
Two big minuses:
* message textbox bottom is not aligned with box in left column
* submit button is not aligned with box in left column
July 3rd, 2010 at 11:26 am
Nice looking form
July 9th, 2010 at 12:59 pm
is it possible to link to a php page send code cant get it to work
July 13th, 2010 at 3:46 pm
NIce CSS3 “work”. I am not complaining about the XHTML, you focused on the CSS3 part and that was done nice
July 20th, 2010 at 3:38 pm
Can this be adapted to incorporate into Google Sites? Google sites don’t allow uploading of CSS and HTML files but to a certain extent one can work in Code View.