Last Updated on March 4, 2024
Regarding contacting on a website there are two types: On the one hand the sites that provide a contact form to send a message to the operator. But there are also people who prefer to be contacted by a simple e-mail link – however accepting to receive potential spam. If you are more the contact form type I might have something for you. Let’s take a look at the contact form I have provided for you.
First the HTML of it. A simple form with an <h1/> for the title and a <div/> with a class – to get no problems at the assignment – for each form field.
<form action="#"> <h1>Get in touch with us</h1> <div class="row"><label for="name">Your name</label> <input type="text" id="name"/></div> <div class="row"><label for="email">Your e-mail address</label> <input type="text" id="email"/></div> <div class="row"><label for="msg">Your message</label> <textarea cols="58" rows="8" id="msg"></textarea></div> <div class="row"><button>Send message</button></div> </form>
The label makes sure that each field is easily accessible and semantically correct. The only real special about the page is the HTML5 doctype (not depicted, please have a look at the example file at http://www.css3files.com/if/contact_form). It doesn’t hurt to already use it and does no harm.
Now to the fun part of the whole thing: the CSS. The first thing to do is to set some reset styles which override the standard behavior of the used HTML elements. Please refer to http://html5doctor.com/html-5-reset-stylesheet for detailed information.
After that we set the body font size to 62.5 % (which equals the size of 1em to 10px) and our preferred typeface Georgia. In case a user hasn’t installed this font a font stack comes into play. This way really everybody should see a similar font.
body {font: 62.5% Georgia, Palatino, “Palatino Linotype”, Times, “Times New Roman”, serif}
We also set the same line for the every element within the body tag with the * universal selector so that it hasn’t to be particularly set for every element.
body * { font-family: Georgia, Palatino, “Palatino Linotype”, Times, “Times New Roman”, serif; color: #673b15; -webkit-text-stroke: 1px transparent; }
Simultaneously the a dark brown color is assigned to all typographic elements. The last line is a little bonus for WebKit browsers (Chrome, Safari, iOs, Android). Normally it is possible to assign a border to text with -webkit-text-stroke, but if you state transparent for the color the it gets smoothed nicely. Unfortunately this doesn’t work for other browser at the moment so they have to rely on the smoothing of the OS.
As you can see at the top of this article I only have used Georgia for the labels of the input fields. To give the form a personal, hand-written feel a Google Web Font called Kristi is used for the heading and the submit button. The straightforward way to implement the fonts of Google’s service is to just set a simple stylesheet at the <head> of your document. However for training purposes I choose to manually insert the font using the CSS3 @font-face rule. In special it’s the state-of-the-art “Further Hardening of the Bulletproof Syntax” by the font service Fontspring (http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax).
@font-face {font-family: 'Kristi';
src: url('../fonts/kristi.eot');src: url('../fonts/kristi.eot?iefix') format('eot'), url('../fonts/kristi.svg#Kristi') format('svg'), url('../fonts/kristi.ttf') format('truetype'), url('../fonts/kristi.woff') format('woff');font-weight: normal;
font-style: normal;
}
Like at every @font-face rule the first line defines the name to refer to it later in the stylesheet. To support the maximum range of browsers a bunch of font-files is set. For in-depth info please see http://www.css3files.com/font.
Regarding the styles there is nothing special for the form so we skip it here. I just want to mention one thing: For the background I used the pattern of traditional paper which fitted best for the appearance of a contact form. To tweak it a little bit I colored it with light brown tones and added a few gradients. The paper pattern is from my favorite pattern site “Subtle patterns” (http://subtlepatterns.com/?paged=4, „Exclusive paper“).
Things get special however at the next selector. You might have heard of the pseudo-element :before which equips every single HTML element with an additional selector (if you add :after that’s two). Separate, non-semantical elements aren’t needed this way. It’s even supported by Internet Explorer 8 and enables a wide range of amazing effects (http://css-tricks.com/9516-pseudo-element-roundup/). However the new spelling is with two colons (::before) but for maximum compatibility with older browsers I still use only one.
In our case this pseudo-element applies a postmark to the form. I follow the progressive enhancement path here because it doesn’t hurt older browses like Internet Explorer 6 if some parts aren’t present (in other words if the postmark is absent)
form:before {content: "";
position: absolute;
right: 3.7em; top: 19.5em;
width: 295px; height: 137px;
background: url(../img/stamp.png);
}
The stamp is actually a background-image and positioned absolutely. The given width and height complete the whole issue. Like briefly mentioned before I have also used the :after pseudo-element for even another possible element. In this case it takes care of the dog-ear at the top right corner.
form:after {content: "";
position: absolute;
right: 0; top: 0;
border: 43px solid #fff;
border-color: #fff #fff #f9ecb4 #f9ecb4;
-moz-box-shadow: -2px 2px 5px rgba(0,0,0,.06); -webkit-box-shadow: -2px 2px 5px rgba(0,0,0,.06); box-shadow: -2px 2px 5px rgba(0,0,0,.06);
}
Like before it is positioned absolutely but sans an image. The folded-corner is pure CSS, using the border property. The light-brown triangle is just a left and bottom border, the top and right ones are set to white so that they cover the form. For more info about this technique please refer to http://nicolasgallagher.com/pure-css-folded-corner-effect.
One last special thing about the dog-ear is that I have set a subtle drop-shadow which slightly lifts it from the background. The prefixed versions –moz- and –webkit- ensure the compatibility with older versions of Firefox and the current one of Safari. Chrome already relies the non-prefixed declaration. An opacity of just 6% (.06) at the rgba color (http://www.css3files.com/color/#rgba) makes the shadow very light.
The first time the web font Kristi is used is at the <h1>. Besides some standard properties I like to elaborate two lines.
-moz-transform: rotate(-1.5deg); -webkit-transform: rotate(-1.5deg); -o-transform: rotate(-1.5deg); -ms-transform: rotate(-1.5deg); transform: rotate(-1.5deg);
Firstly the heading is transformed by 1.5 degrees counter-clockwise to give it a natural, hand-written feel. The range of prefixes is even bigger here because the W3C transforms module is only at an early stage and so every browser manufacturer relies on its own at the moment. Note: For the following statements of transform I will leave out the vendor-prefixes to keep things tight.
text-shadow: 3px 3px 3px rgba(255,255,255,.8);
I have also set a decent white drop shadow for the text so that it looks embossed a bit. Vendor-prefixes aren’t needed here because this property is already supported by every modern browser (except Internet Explorer 9, which totally ignores it).
For the next selector, which represents the three folds (above the first one set at <h1/>), I have combined a few special things. First the formerly mentioned :before pseudo-element as well as :after. Furthermore the nth-of-type pseudo-selector which allows to select a particular element in the line of similar ones. In this case the third line of the form fields (containing the <textarea>) is addressed.
h1:before,
.row:nth-of-type(3):before,
.row:nth-of-type(3):after {…
background: url(../img/fold1.png) 0 100% no-repeat;
transform: rotate(1.5deg);
}
Because the <h1/> is rotated a little bit we have to roll it back to zero degrees (which is switched of a bit later at the lines for the form fields transform: rotate(0deg) respectively the transformation stated below).
To make things a little bit more interesting, the second fold (set with .row:nth-of-type(3):after) is mirrored with a value of -1 for the x-axis of the scale property. Of course it would also be possible to use a second image for that but why the double work if we can rope in CSS3 for that.
transform: scale(-1,1);
Our next stop are the actual form fields, the <input/> and the <textarea/>. Again we use a little bit of CSS3 to enhance their appearance. First the rounded edges, made possible by the common property border-radius. Although meanwhile all modern browsers support it without the vendor prefix we still note the ones with –moz- and –webkit-.
-moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em;
Since you are already familiar with the box-shadow property I don’t further explain it. Only one thing: I have used the keyword „inset“ so that the shadow is cast inside the element instead of outside. So we get form fields that seem to be a little bit embedded into the background.
box-shadow: -3px -3px 7px rgba(0,0,0,.08) inset;
Lastly I’d like to explain the CSS3 property box-sizing here. It makes sure that the standard box-model (which adds up width, padding and border for the final width) is overridden so that we can set the width of the element without the need to take care about possible paddings or borders. Internet Explorer 6 and 7 don’t support this property but we take the risk that the fields are a bit wider there. Remember, a website doesn’t have to look the same in every browser.
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
Instead of a traditional submit button we just use the words „Send message“ with a hand-drawn underline to make it more human. The earlier embedded Google Font “Kristi” is simply assigned with the font-family property. We use the CSS3 property transform: rotate again to make sure the „button“ gets turned a little bit.
button {font-family: Kristi, cursive;
…
text-shadow: 3px 3px 3px rgba(255,255,255,.8);
-moz-transform: rotate(-5.6deg); -webkit-transform: rotate(-5.6deg); -o-transform: rotate(-5.6deg); -ms-transform: rotate(-5.6deg); transform: rotate(-5.6deg);
}
Our knight in shining armor for the underline again is the :before pseudo-element, which ties it to the button. Since I drew the line at the Photoshop draft in its rotated form it has to be spinned back so that it doesn’t adopt the rotation of the button itself.
transform: rotate(5.6deg);
That was the last step to finish the contact form. It looks great in all modern browsers (Chrome, Firefox 4+, Safari 5 incl. Mobile Safari, Opera 11.10+ and Internet Explorer 9 (although it doesn’t support text-shadow); and still good in legacy browsers like Internet Explorer 6 and 7. They don’t support properties like border-radius, box-shadow or transform, but following graceful degradation that’s perfectly OK. You know, every browser only has to display what’s it’s capable of as far as everything still remains usable (which is the case here).
I hope you have learnt a few new things and are inspired a little bit fort he next time you have to come up with an idea for a contact form. If you wish to use the files listed in this tutorial, you can download them here.
Was this tutorial helpful? We would love your feedback, so don’t be shy and comment below. Please don’t forget to subscribe to the RSS-feed and follow Inspirationfeed on Twitter+ Facebook (100% Spam Free!) If you enjoyed the following article we humbly ask you to help us spread the word by sharing this article with your peers!
Posted by:Christian Krammer
Christian Krammer is web designer at one of Austria's biggest Newspaper called "Kleine Zeitung" where he worked for nearly ten years. He also is the proud owner of css3files.com, a comprehensive website about CSS3. A large range of properties is explained there for you to learn and look up. Besides that he is the proud father of a 4 years old boy and a passionate gamer.
ncG1vNJzZmihnqi9qr7AraCoppaasqV6wqikaKCfrHq1u4ydnKyhl6N6pLvDnmSaZZ6esKZ5wqilrZmTqXqnu9GmZg%3D%3D