Move Cursor to Focus Form Input Text Field: Increase Search Views

By Posted 2012 Updated   BloggingTutorials

Move cursor to automatically focus on the form input text field of your search box to increase site search views. Usually when any web pages loads, the cursor is not present and not focused or blinking anywhere. When you click any form field or the browser url bar, the cursor instantly appears so that you can fill the form field, for example to post a comment or fill your e-mail address or password.

But see what happens when you visit the Google.com homepage (or Gmail or Dropbox) – the cursor is already blinking in the search box (or e-mail address input box)!

This means you minimize a step where the site visitor needs to click on the search box to get the cursor, instead they can immediately start typing and the search box gets filled up. This helps Google to get users starts searching immediately. Now you can easily implement similar functionality on your site search box (or e-mail subscription form / sales forms).

How to Automatically Move Cursor to Form Field

When your webpages load, would it not be great if the cursor would automatically start blinking in your search box, so that your site visitors can immediately start searching your site. Most forms have a basic format like this

<form action="" id="FormID">
<input name="" id="FieldID" type="text" />
<input type="submit" value="Search" />
</form>

Carefully note that there are two id tags here FormID and FieldID. You need to add a single line of javascript code beneath this form closing tag

<script type="text/javascript">FormID.FieldID.focus();</script>

Live example on QOT

You can see the simple script being in implemented on our website right now in our search box in the top right corner.

move cursor to search box

Here is what our search box code looks like (we use Google custom search)

<form action=" http://www.quickonlinetips.com/search/" id="mainsearch" >
<input type="text" id="searchterms"  name="q" />
<input type="submit" value="Search" />
</form>

Based on the format above, here is the simple one line script code which we added after the form closing HTML code as per our custom FormID (mainsearch) and FieldID (searchterms).

<script type="text/javascript">mainsearch.searchterms.focus();</script>

You will note that when any page on our website loads, the cursor automatically focuses on the form input text field in the search box, making it easier (and more motivating) to search our website. This will help us to increase search views on our website, which will convert to more page views and site traffic.

Note: You can also use this trick to focus cursor on your e-mail subscription form, to increase newsletter subscriptions for sale conversions easily. Remember NOT to use it on multiple forms to confuse browsers. Try it on your website and tell us how you find this quick tip.


12 comments on “Move Cursor to Focus Form Input Text Field: Increase Search Views

  1. Ngan Tengyuen says:

    No-wonder your site automatically jumps to the bottom of the page whenever i loads it. I was somewhat confused until I saw your article, this is because I am watching YouTube on a browser while surfing the internet on another, both side by side, thus with the responsive design, the search box is relocated to the bottom of the site.

    • QuickOnlineTips says:

      Thanks for pointing that out. It was indeed breaking the responsive theme. We moved the search box higher and fixed it.

  2. Santanu says:

    That’s superb trick. Let me try in my blog..

  3. Alex says:

    I Visit lot of sites but This site article is very nice beacuse this site content is very nice and this is google friendly site. thanks for good articles.

  4. Lucy says:

    Wow! Never really gave it a thought until I came across your post. This is why Google is so popular and has such a huge following. It takes care of these small things that ultimately adds up in a big way. I mean most just think of these small issues like the cursor thing as trivial.

  5. Ankur says:

    i m never find this method in earlier i m definately tried this .!!

    Thanks

  6. Blogspot Design says:

    Very helpful tutorial . I will try this .

  7. Blogger Whale says:

    Thanks for this great info. Will recommend it to friends.

  8. rajeev says:

    good post….thnx for the info…

  9. Fino Sosa says:

    Nice post on how to increase site views. Thank you.

  10. My Tech Tips24 says:

    yeah…really awesome post.

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php