Cómo añadir enfoque automático a tu formulario

¿Te interesa habilitar el enfoque automático en tu formulario para mejorar la experiencia del usuario? Con el enfoque automático, el cursor se activa automáticamente dentro del primer campo del formulario cuando la página termina de cargarse, agilizando la interacción del usuario. Esta sencilla mejora se puede lograr con un fragmento de código JavaScript, y te guiaremos a través del proceso.

Creación de su formulario

Primero, deberás empezar creando tu formulario y añadiendo tus campos. Si necesitas ayuda para crear un formulario, consulta esta documentación.

Creación del fragmento para añadir el enfoque automático

A continuación, deberás añadir este fragmento de código a tu sitio.

Si necesitas ayuda para añadir fragmentos a tu sitio, consulta este 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 );

Este fragmento de código solo se aplicará a WPForms porque solo busca forms.wpforms-form y buscará el primer campo del formulario en tu formulario y añadirá inmediatamente el elemento :focus a este campo.

¡Y eso es todo! Has implementado con éxito la funcionalidad de enfoque automático en todos tus formularios impulsados por WPForms. ¿Te gustaría añadir algo de CSS para que ese enfoque destaque más? Consulta nuestro artículo sobre Cómo añadir CSS al enfoque de campos de formulario.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Cómo puedo mantener activo el enfoque automático en un formulario de varias páginas?

R: Si tienes un formulario de varias páginas, solo tienes que usar este fragmento de código.

/**
 * 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 );