Auto-Move Cursor to Site Search Form to Increase Search Views

Move the cursor to automatically focus on the form input text field of your search box to increase site search views. Usually, when any web pages load, 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.

search field cursor

Have you seen what happens when you visit the homepage (or Gmail or Dropbox) – the cursor is already blinking in the search box (or e-mail address input box)!

Why is this useful? 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 to start 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 Search 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" />

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>

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

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

<form action="" id="mainsearch" >
<input type="text" id="searchterms"  name="q" />
<input type="submit" value="Search" />

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.

Another Good Idea: You can also use this trick to focus cursor on your e-mail subscription form! This can 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.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.