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.
Contact form preview
The extra form-wrapper and 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.
The 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.