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.
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.
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!
Janko,
If you add the following CSS I think it will take care of the Chrome problem with the highlighted border messing up the design:
*:focus {outline: none;}
Thanks for the great post.
Bill
You’re on a roll. :D
HI. Great tutorial but I’d suggest using label tags and image replacement, so when CSS is on, it still looks like it does now, but when CSS is turned off, at least there will be labels to tell you which boxes are which!
Anthony
Bill, thanks for the tip, I’ll try that!
Anthony, you are absolutely right. I intentionally digressed from a common practice just to make this tutorial shorter. There are other things I omitted, because first version was too large and didn’t want to split it on two or more posts.
Thanks, guys!
Janko, nicely done and thanks for sharing a great idea!
As Mr. Hastings mentioned above this is an an example of incorrect markup. You should put a big warning next to that section of the post.
Only other thing, as I’ve mentioned before, specifying things in pixels is evil. I know in this situation it is mostly unavoidable and makes the designers life much easier but that post card won’t look right if someone is browsing with their text-size increased. Otherwise, very cool post and great job. :)
A couple ideas:
* slice the edges of the post card and use them as borders
* use jquery to show front side of postcard, perhaps do a cool animation when user clicks send
* use a dark background image for input fields that has alpha transparency -> same effect less images
Another excellent post! Thanks for sharing.
That’s just beautiful – Thank you for posting this!!!
Jarrett, I did this intentionally, as I mentioned above. You would normally use labels.
Regarding specifying things in pixels = evil, you can barely do something about it in this case.
"[quote]use a dark background image for input fields that has alpha transparency -> same effect less images[/quote]" Beside this, if you find appropriate texture, you can use a single image for all fields.
Have to say this looks really great. Thanks
Why not put the labels in and do a ‘form label {display: none; height: 0;}’? You’ll get the labels in there and not have to worry about positioning the background images.
Thanks for idea, from me too :) I really didn’t think about texbox a lot, so know You just showed how easy is to change comment form dramatically! Really appreciated!
If a user types more text then the width of the textfields, your background turns white. Maybe you should try to repeat it?
Wes, I like this "dirty" trick ;-)
Stipe, you are right, it’s happening in IE. Definitively, a fix for this will be background repeat.
Thanks guys!
Dude, you kill.
Pretty cool, but I don’t understand the use of all those background images…. Why didn’t you give the form fields a black background and some opacity using only css? That would have made it a lot more flexible…
Great tutorial, thanks so much! I love this effect! I might distress the send button a little to make it blend a bit better. I’m excited to try this one out!
@Webdesign Meppel: yeah, good point.
Angie, thanks!!
Is there a way to get rid of the text area scroll bars that show in IE and Opera?
Would Overflow-y:hidden; work?
Just a thought, thanks!
Hi,
I liked your post and wondering how can i hack this technique in Blogger.com
Since i have my blog(Angrezy.com) on blogspot, i wish to put this comment box in each post.
Can you help me out??
not sure why multiple people are commenting the use of dimmed opacity and a black background. you don’t get the same effect as the soft light blending mode from photoshop..
awesome tutorial. great way to make a fancy looking form in a matter of minutes!
Do you have tutorial step by step on how to create add comment form for javascript
WOW! Fantastic CSS design!
Thanks
Wow, nice tutorial. But i agree with some comments here that you should have given some sort of background for the input fields. Because that seems confusing whether there’re any input fields or not.
Hi everyone, I really like this design…I am fairly new to PHP and was hoping someone could help me with linking this form to an email account…I’ve got the whole thing working and looks perfect, just not sure how to send it…any help would be greatly appreciated!
This looks so cool. I really like this. It seems that blogs are getting more creative in every aspect and its nice to see. Thank you for sharing.
Supercool sample :) Although, I’d fill the right side of the image ;)
Unfortunately your print-layout does not work….
tested with Firefox 3.0.6
Connie: I haven’t even tested print layout, it is a webform and I don’t see much reasons for printing it
how to add to this example files with transparency? when i use .png files (with transparent background) as background to text input i get white background. i want to get a transparent background. how to get this?