Comment ajouter l'autofocus à votre formulaire

Souhaitez-vous activer le focus automatique sur votre formulaire pour améliorer l'expérience utilisateur ? Avec le focus automatique, le curseur s'active automatiquement dans le premier champ du formulaire lorsque la page se charge, simplifiant ainsi l'interaction utilisateur. Cette amélioration simple peut être réalisée avec un extrait de code JavaScript, et nous vous guiderons tout au long du processus.

Création de votre formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter vos champs. Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.

Création du snippet pour ajouter l'autofocus

Ensuite, vous devrez ajouter cet extrait de code à votre site.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

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

Cet extrait de code ne s'appliquera qu'à WPForms car il recherche uniquement forms.wpforms-form et trouvera le premier champ de formulaire sur votre formulaire et ajoutera immédiatement l'élément :focus à ce champ.

Et voilà ! Vous avez implémenté avec succès la fonctionnalité d'autofocus sur tous vos formulaires alimentés par WPForms. Souhaitez-vous ajouter du CSS pour que ce focus soit plus visible ? Consultez notre article sur Comment ajouter du CSS au focus des champs de formulaire.

Action de référence

wpforms_wp_footer_end

FAQ

Q : Comment puis-je maintenir l'autofocus actif sur un formulaire multipage ?

R : Si vous avez un formulaire multipage, utilisez simplement cet extrait de code.

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