Nowadays, contact forms can be found everywhere. To attract visitors’ attention, you need a cool CSS3 contact form, with a catchy look, one that your visitor would love to fill.
In this article you’ll learn how to create a nice CSS3 contact form using also some HTML5 features.
First of all
What’s so cool about this CSS3 contact form? There are so many others CSS3 contact form examples in the wild, why another one?
I’d say that, with CSS3, there are endless possibilities to create a contact form and this article is just about how to design a cool envelope style contact form.
form-inner ids are necessary for upcoming CSS styling.
Instead adding CSS classes for each form element, I could have used advanced CSS selectors like
input[type="text"]. But, for this demo, I just wanted to look decent on IE6. If you don’t give a damn about older browsers like IE6, feel free to simplify your HTML and CSS code.
for attribute for the HTML
label element does not miss here. Its purpose is to increase usability.
The HTML5 feature used for this CSS3 contact form is the
placeholder attribute. This is perhaps one of the coolest HTML5 new stuff. For browsers that do not support this new feature, check one of my previous articles to see how to create placeholder fallback using Jquery.
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry.
Using cool CSS3 box shadow and gradient effects , we’ll create a contact form with envelope look. Below you can see the initial CSS styling:
Below you have a beautiful CSS3 button, no images as you probably guessed:
This CSS3 contact form is awesome. Period. I hope you all agree with me and thanks for reading this article.