Turn postcard photo into a stunning comment form using CSS
Comment forms allow visitors to leave their impressions about the content. Although the content is a king, general impression isn't negligible at all. Each element in a design can contribute to a better user experience. This applies to comment forms as well.
This tutorial will teach you how to make a stunning comment form using an old postcard photo. Final result can be seen on the image above.
see live demo
Make necessary images in Photoshop
1. Download an old postcard photo
First thing first. Get an old postcard photo :) Photo that is used in this tutorial can be downloaded from here. Now open it in Photoshop.
2. Resize it
This kind of photos are usually very large, so you'll have to shrink it to a size that fits your needs. To do this, go to Image -> Image Size or use shortcut (Alt + Ctrl + I). For this example, set the width to 500px. Height will be adjusted automatically.
3. Rotate it
Image that we downloaded for this tutorial is slightly rotated to the left, so we'll have to fix this. Go to Image -> Rotate Canvas -> Arbitrary and in Angle field type 2.5, and chose CW option (clock wise). That was easy.
4. Create a layout
As you saw in the beginning of this tutorial, the idea is to place labels and input fields on the left side of the postcard, and submit button to the bottom of the right side. We'll define backgrounds for four input fields: Name, Email, Website and Comment. These backgrounds are going to be slightly darker than original texture.
Tip: You can add a post mark in the top right corner of the postcard or use a space for address to add some text like "Postage paid by www.jankoatwarpspeed.com".
Ok, now add a new layer on the top of the postcard layer and draw a shape, size 121x24px, filled with black. This is going to be a background for Name field. A black rectangle? Doesn't this looks awful? We'll fix this in a second. Set blending mode to "Soft Light" and Opacity to 50% (you can play with these values to get interesting results).
Now this looks like something, doesn't it? Repeat this step for the other three fields.
Each field has to have an associated label. Here, we're going to digress from a common practice and instead of using standard <label> elements we'll type labels in Photoshop. Use Text tool to type necessary text above each input field background. After you are done, you should get something similar to the image below. Font that I used here is Reprobate (I noticed that many of you were interested in this particular one, although I used it just for the sample).
5. Slice images
Now when we have all necessary elements created, we can slice them. We'll have the entire postcard as a single image. And each input field background will become a single image. You should have five images similar to those below.
comment_form.jpg
name_bkg.jpg
email_bkg.jpg
website_bkg.jpg
comment_bkg.jpg
Tip: Name your images meaningful just like you name HTML elements.
Create HTML markup
After all work in Photoshop has been done, we can create HTML markup. This is going to be easier than you maybe think. The key is to absolutely position input fields inside of a relatively positioned container. You did this few times, am I right?
<div class="commentForm">
<input type="text" id="nameField" class="nameField" />
<input type="text" id="emailField" class="emailField" />
<input type="text" id="websiteField" class="websiteField" />
<textarea id="commentField" class="commentField" cols="10" rows="5"></textarea>
<input type="submit" id="sendButton" value="Send" class="sendButton" />
</div>
As you can see in the code above, input fields are just ordered one next to another. But don't worry, absolute positioning will handle this. Let's take a look at CSS:
.commentForm
{
width: 497px;
height: 324px;
position: relative;
background-image: url('comment_form.jpg');
background-repeat: no-repeat;
}
.commentForm input[type="text"], .commentForm textarea
{
width: 210px;
left: 32px;
position: absolute;
background-repeat: no-repeat;
border-width:0px;
font-weight:bold;
font-family:Arial, Sans-Serif;
font-size:0.9em;
}
.nameField
{
top: 44px;
height: 22px;
background-image: url('name_bkg.jpg');
}
.emailField
{
top: 90px;
height: 22px;
background-image: url('email_bkg.jpg');
}
.websiteField
{
top: 133px;
height: 22px;
background-image: url('website_bkg.jpg');
}
.commentField
{
top: 178px;
height:122px;
background-image: url('comment_bkg.jpg');
}
.sendButton
{
position:absolute;
top:268px;
left:362px;
width:100px;
height:30px;
border:solid 2px #000000;
background-color:#7c6852;
color:#e1cdae;
}
Although I think this is quite simple, let's explain CSS code briefly. Form container is relatively positioned and has a background image comment_form.jpg. All common input field attributes are defined in one class (.commentForm input[type="text"], .commentForm textarea), and each input field has a specific attributes defined in it's own class.
So, believe it or not, this is everything you'll need to create a comment form.
see live demo
Conclusion
You saw that it doesn't take much effort to build comment form which stands up. Basic Photoshop skills and basic CSS skills, that much. You can experiment and try with different postcard photos or different layouts.
The code is tested in IE7, Firefox, Safari and Google Chrome. There is a small bug in the last one - there is a tiny white border on comment input field. Whatever the reason is, maybe I wasn't that pessimistic at all?
Do you know any better way of doing this? Have another idea? Share it!
More articles in
Blog archive or
elsewhere