How to use jQuery to add focus to a form field
You will need some basic CSS skills in order to use the focus jQuery script that follows. jQuery targets the CSS ID or class of an element so in order for the jQuery to work we need to add the correct ID or Class to the script.
Here are the basic instructions with the script for using jQuery to add focus to a form field. I’ll then provide some examples using some popular WordPress form plugins:
- Make a note of the CSS class or ID of the form to which you want to add focus.
- Add and save the following to the footer of your WordPress website
- Change .class in the script to the ID or class of your form e.g. if your form ID is
'.class:first'as above must be changed to
You’ll notice that the script is added to the footer. This is best practice as there are no advantages in executing this script in the header and it may slow page load speed slightly by having the script in the header (bad for SEO).
If you’re not sure how to add script or code to the footer section of WordPress then install the Header and Footer plugin which makes adding code to the various sections of WordPress easy. Many Themes however allow for adding code e.g. StudioPress Genesis Themes have a section titled Enter scripts or code you would like output to
wp_footer(): in the Theme settings.
Here are a few examples where the script as above has been used to add focus to a field.
Adding focus to a Contact Form 7 field
The mighty and very popular Contact Form 7 plugin makes it simple to add focus to a form field. Just add this jQuery.
Adding focus to a Mailchimp Plugin field
If you use the Mailchimp List Subscribe Form plugin to show a subscribe form that automatically updates your Mailchimp list then subscriber numbers via the form may be increased via adding focus to the first form field. The jQuery script is
You may see an example of the form at WP Tips.
Adding focus to a Jetpack Contact Form field
On some fields, such as with the Jetpack Plugin Contact Form and Gravity Forms, the HTML input tag needs to be targeted. This is easily done as the following script used on a Jetpack contact form shows.
As can be seen from the examples above, it’s really easy to have focus on a form field. Whether a contact form, a subscription form (Mailchimp, Aweber, Constant Contact etc.), or any other form, your conversion rates are likely to increase by adding focus to a form field.