Input forms are commonly used throughout your blog, and I see a lot of input forms that surprisingly are left untouched and uncared for.
When you want people to signup for your newsletter or RSS feed via email, you usually have an input form that will take the users email address and submit it. But did you know that the way you style and display your input form has an affect on who notices it?
Everything in your blog design is vital for you to pay attention to. This post is about customizing the input forms on your blog, and hopefully increasing the number of times they are used. Here are four tricks I use to customize my input forms.
What An Input Form Looks Like
An input form is somewhere you enter text into. Usually on a blog the to main uses for an input form are to comment, and subscribe to an email newsletter. Here are a few screenshots of some forms found on Blogussion:
You can enter your email address here and get subscribed to our RSS Feed via Email
You can fill out some details here and you can submit a comment
Usability: On Focus Auto Clear
A good input form advertises what it is right in the actually text area. The great input forms do the same, except clear the text when you click in the input form.
Take for example the orange subscribe box in the sidebar. When you click “Enter Email…” it clears for you to put your email address into. Pretty convenient right? And all it takes is a little Javascript.
value="Enter Email..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"
Just add that code somewhere in your input tag, edit the value and you will get that nice little effect.
Aesthetics: Rounded Corners
Everything looks good with rounded corners, especially input forms! Rounding corners are easy to do with CSS and will really make your input form look great.
Simply add this to your style sheets somewhere:
input {
-moz-border-radius: 5px; /* rounded corners in Mozilla browsers, adjust to a higher value for more roundness */
-webkit-border-radius: 5px; /* works in Webkit based browsers */
}
And that will make the search bar have rounded edges. These corners will not be rounded in Internet Explorer, but who cares? It’s friggen’ Internet Explorer!
Usability: Change Style On Focus
This is a really cool technique. It’s another CSS trick, and when the user clicks on the input form, it will change according to what you want it to do.
To see this in action, click on any form in the comments form and the color will change from gray to white.
Just add this to your style sheets:
input:focus {...}
Aesthetics: More CSS Tricks
Just like anything else in CSS, you can style a variety of things on your input form. Here are a few things you can do to style your input form, other than :focus and rounded corners.
Add a background image
Have a pattern or gradient image you want to add to the search form? Use this CSS line here:
input { background: #FFF url(path/to/image) repeat-x; }
Change Border Color
Chances are that there is a default border color of gray, or even some other color there. It may not match your design, you will need to change the border color.
input { border: 1px solid #color; }
Change font, font size, style
You can easily change the way the text in the input form looks when a user types.
input { font: italic 12px Arial, Verdana, sans-serif; }
I prefer to keep the text in my forms italic, but it’s just a personal preference.
It’s Important for users to like where they write
Make your input forms as user friendly and aesthetically pleasing as possible. The better the form looks, the better your chance of someone wanting to fill it out on your blog will be!
The Discussion
Leave a Comment Read Again?Great tips Alex, do you think these would also help in increasing number of orders on my site? (Do check out my order form and see if I can make it less daunting)
I’m sure they could.
I think the more appealing you make your site, the better the response will be in any aspect.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
This is a good article, Alex! I’ll definitely be using a few of these and referring back to this article. Is there a reason you changed your contact form?
.-= Nick Tart | JuniorBiz´s last blog ..JuniorBiz in Local Newspapers – JJ Entry #22 =-.
The old plugin form sucked against combating spam, and it was just getting to the point where I would get at least 5+ spam emails an hour.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Was it Contact Form 7? I just started using it and it looked similar to your old one.
.-= Nick Tart | JuniorBiz´s last blog ..JuniorBiz in Local Newspapers – JJ Entry #22 =-.
Yes, it was Contact form 7.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
You should really start a blog theme designing company Alex, you are gifted in it, and I’m positive you’ll have a lot of clients too (I could even promote your services for free). You’re just so good at it, plus you have a strong background in blogging so you’ll have more understanding in the concerns of a blogger
About this post, couldn’t add anything more. very great work.
.-= Liane YoungBlogger´s last blog ..Keepin The Passion Strong: Blogging For Two Solid Years Now and Counting =-.
Hey Liane, I’m already a few steps ahead of you there. :p I have been freelancing at http://kolakube.com/ since April and have had quite the work load since its birth!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
I’m currently trying to set up somethign like this to place a newsletter sign-up box on my blog. I’m having a lot of trouble with it.
I’ll bookmark this page and see if it helps me.
.-= Dean Saliba´s last blog ..We’re Not Just About Making Money =-.
Hope so Dean, good luck!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Thanks. I just beautified my contact form with a few of your suggestions.
.-= Nicholas Z. Cardot´s last blog ..Valp: Interview with a Creative Mastermind =-.
Looking good Nicholas!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
I think this is a great post. Focusing on making your blog beautiful is a great way to attract new visitors and get them to participate once they arrive. Beautiful post.
.-= Seth W´s last blog ..4 Tricks For “Awesome-izing” Input Forms =-.
Every little thing counts, don’t you think?
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
I especially like how the background changes on this form. It’s not too loud or drastic of a change but yet noticeable enough to let you know what field you are typing in. Thanks for sharing some info on ways to make our forms more appealing Alex.
Thanks a lot Bill, I agree with your point. It’s noticeable, but it’s not in your face.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Alex, first of all I stumbled on your site and absolutely loved it. I spend hours (during work hours, tsk, tsk, tsk, reading the posts).
Claudia
The Form beautifying post is great!
Any ideas when the Directory link will be in working order?
thx,
Thanks a lot Claudia!
Yeah, we’ve had that effect on someone else here too! I’m just glad you like our articles.
The link directory is being reworked, and the idea will be changed. It just got so full of spam that I had to close it down.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Hey Alex,
Is there any way you can point me int he right direction on how to have the icons hanging over the right edge? I love that look. I am trying to revamp my boring site and getting Thesis was the first step. Now, I realize I need way more than time and beer. Cheers!
Great tips and this is an area of my blog that I have not too much about until now. I will have to make some adjustments based on your suggestions.
.-= Tycoon Blogger´s last blog ..DOES SEO MEANS OPTIMIZATION ONLY FOR GOOGLE? =-.
Awesome, let me know when you apply the changes!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Nice one. I think I’ll need to bookmark this so it would be my reference when I fully move to wordpress. You are a hell of a web designer, Alex.
Ugo.jar
http://www.javamobilecrunch.com
Appreciate it bro, good luck with the move to Wordpress.
But you can use this stuff on non-Wordpress blogs too you know!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Alex Fraiser you articles helping very much, i really need a contact form for my blogs as well.
.-= Dzinepress´s last blog ..20+ Best Live Streaming Website Designs =-.
Thanks a lot! Glad my posts help you out.
These are some nice tips about the design of Your website. What do You think about Your input forms? They look quite average
Anyway Your article s very good, I enjoyed reading a lot. Thanks.
I think the forms in Thesis looks great, and they match the site well. So I don’t mind there.
Glad you liked the article!
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
I like how you styled the input value for your “email updates” box, you don’t see bold and italic for input fields that often, it looks good here
Specially with the rounded corners. I might take some of your tips here along with me when I start to use Thesis theme on my site. Thanks!
.-= Klaus at TechPatio´s last blog ..Summary: Apple Q3 2009 Quarterly Financial Statement =-.
Awesome Klaus! Glad you like the input form in the sidebar. I think it’s a nice little edit.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Cool article, but you forgot submit buttons.
You can use an image for a submit button and make the form even more appealing.
.-= Corey Freeman´s last blog ..7 Amazingly Useful Writing Quotes for Better Writing =-.
I was actually thinking about them, but I just wanted to stick with the actual input box. I don’t use submit buttons much in my forms (besides comment forms) much anyways.
.-= Alex´s last blog ..Young Blogger Interviews #2: Liane from Better Blogging for Bloggers =-.
Excellent post Alex,
Besides the styling, one thing to mention is to place these particular boxes, especially ones that collate details above the fold. This one move alone can seriously boost the conversion for the numbers that subscribe.
Keep it up bud
.-= Azzam´s last blog ..SEO Copywriting – Copy editing =-.
Really nice tips. But I don’t understand why the heck those people at Microsoft care even a bit about CSS standards.
.-= Shubh-Regular Blog Tips´s last blog ..Now your blog’s speed can affect its Google ranking =-.
Nice to end up visiting your weblog again, is actually often months for me. Well this post that we have waited for so long. require this article to complete my personal assignment in the college, and it’s same topic together with post. Many thanks, excellent discuss.
Hi Alex,
Thanks for that. My question is: how do you change the background color of the subscribe box – and where EXACTLY do you put that line of code?
Many thanks for your insights ~ Jacqui
Nice tips. My only concern with omitting textual labels and submit buttons is how this will acceft a site’s accessibility for those who are visually impaired and rely on audio browsers. Clear textual markers still need to be included, to help these folks navigate the site.
It is a greta idea to use auto clear. It save time and people like the fact they do not have to remove text example. Simple things do make it easier for people to use and want to sign up or post.
Hey that was rad, the orange on that form was actually really drawing my eyes away from the text–I am at the stage where I need to do some of this tweaking on one of my blogs–got some good ideas from here.
it’s been a while since i wanted to create that e-mail subscriber with some color on it but don’t know where to start and i can’t find any tutorials about it. Hope you can help me.
Comments on this entry are closed.