Come aggiungere l'autofocus al tuo modulo

Sei interessato ad abilitare l'autofocus sul tuo modulo per migliorare l'esperienza utente? Con l'autofocus, il cursore si attiva automaticamente all'interno del primo campo del modulo al termine del caricamento della pagina, semplificando l'interazione dell'utente. Questo semplice miglioramento può essere ottenuto con uno snippet di codice JavaScript, e ti guideremo attraverso il processo.

Creazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo e aggiungere i campi del modulo. Se hai bisogno di aiuto nella creazione di un modulo, consulta questa documentazione.

Creazione dello snippet per aggiungere l'autofocus

Successivamente, dovrai aggiungere questo snippet di codice al tuo sito.

Se hai bisogno di aiuto nell'aggiungere snippet al tuo sito, consulta questo 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 );

Questo snippet di codice si applicherà solo a WPForms perché cerca solo forms.wpforms-form e cercherà il primo campo del modulo nel tuo modulo e aggiungerà immediatamente l'elemento :focus a questo campo.

E questo è tutto! Hai implementato con successo la funzionalità di autofocus su tutti i tuoi moduli basati su WPForms. Vuoi aggiungere del CSS per far risaltare maggiormente quel focus? Dai un'occhiata al nostro articolo su Come aggiungere CSS al focus del campo del modulo.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Come posso mantenere attivo l'autofocus su un modulo multipagina?

R: Se hai un modulo multipagina, usa semplicemente questo snippet di codice.

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