1 Stupidly Simple Way to Make Users VERY Happy
April 14, 2011 5 Comments
This post will teach you how to automatically put cursor in form field – click here to drop down to the tutorial below.
If you’re like me, you like to try to use your keyboard as much as possible.. or use your mouse as little as possible.
So when you go to log into a website and the username field doesn’t automatically have the cursor in it when the page loads, you get a little frustrated.
Oh, that only happens to me?
No but seriously, shouldn’t all websites automatically put your cursor in the form field which you most likely want to fill out?!
Go to http://www.gmail.com – if you were logged in already, log out and then go to there.
Did you notice how the username box is automatically highlighted, the cursor is already in there, and you’re ready to type? Did you like that?
If you’re like me, you LOVED it! (I’m weird, have you got that by now?)
This is something that is super simple to do, and should definitely be done if you:
- Have a login screen – if someone is coming to your site to log in, they would really appreciate the username filed being auto-focused.
- Want someone to fill out your form – think about it… user comes to your site and lands on a page that has a lead capture form. If they see the first box of that form is already highlighted and has the cursor in there, ready to be typed into, they are more likely to fill it out! Make sure you know the secrets to turning leads into sales, otherwise: don’t waste your money on any form of marketing, OK?
How to Automatically Place Cursor In Text Field
It’s really easy if you:
- Have access to the source code of your site.
Let’s do a quick breakdown of the pieces at work here, but first, make sure you know what an HTML element id is.
Your form and input box might be something like this:
<form action="" method="get" id="theFormID"> <input name="username" id="theFieldID" type="text" /> </form>
The id of both the form and input elements are theFormID and theFieldID, repsectively. If your