How to Add Autofocus on Your Form

Introduction

Would you like to add autofocus on your form when the page loads? What this means is that when the page is finished loading and the form is displayed, the cursor will automatically be active inside the first form field on the page. This can be easily done using a small JavaScript code snippet to your site and we’ll show you how.

Creating your form

First, you’ll need to start by creating your form and adding your form fields. If you need any help in creating a form, please see this documentation.

Creating the snippet to add autofocus

Next, you’ll need to add this code snippet to your site.

If you need help in adding snippets to your site, please see this tutorial.

/**
 * Add autofocus to the first form field of the form
 *
 * @link https://wpforms.com/developers/how-to-add-autofocus-on-your-form/
 */

function wpf_dev_autofocus() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        var first_input = jQuery( 'form.wpforms-form input[type=text]:visible:enabled:first, textarea:visible:enabled:first' )[0];
        
        if (first_input != undefined) {
            first_input.focus();
        }
        
    });
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofocus', 10 );

This code snippet will only apply to WPForms because it’s only looking for forms.wpforms-form and will look for the first form field on your form and immediately add the :focus element to this field.

And that’s it! You’ve successfully implemented the autofocus functionality on all of your forms powered by WPForms. Would you like to add some CSS that will make that focus stand out more? Check out our article on How to Add CSS to the Form Field Focus.

Related

Action Reference: wpforms_wp_footer_end

FAQ

Q: How can I keep the autofocus active on a multi page form?

A: If you have a multi page form, just use this code snippet.

/**
 * Add autofocus to first form field of form
 *
 * @link https://wpforms.com/developers/how-to-add-autofocus-on-your-form/
 */

function wpf_dev_autofocus() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        var first_input = jQuery( 'form.wpforms-form input[type=text]:visible:enabled:first, textarea:visible:enabled:first' )[0];
        
        if (first_input != undefined) {
            first_input.focus();
        }
        
        jQuery( '.wpforms-page-next' ).on("click", function() {
            var page_first_input = jQuery(this).closest( '.wpforms-page' ).next().find( 'input, textarea' ).first();
            
            if (page_first_input != undefined) {
                setTimeout(function() {
                    page_first_input.focus();
                }, 100);
            }
        });
        
    });
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofocus', 10 );