Souhaitez-vous activer l'auto focus sur votre formulaire afin d'améliorer l'expérience de l'utilisateur ? Avec l'auto focus, le curseur s'active automatiquement dans le premier champ du formulaire lorsque la page finit de se charger, ce qui simplifie l'interaction avec l'utilisateur. Cette amélioration simple peut être réalisée à l'aide d'un extrait de code JavaScript, et nous vous guiderons tout au long du processus.
Création du formulaire
Tout d'abord, vous devez commencer par créer votre formulaire et ajouter vos champs de formulaire. 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 devez ajouter cet extrait de code à votre site.
Si vous avez besoin d'aide pour ajouter des snippets à 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'applique qu'à WPForms car il ne recherche que forms.wpforms-form et cherchera le premier champ de votre formulaire et ajoutera immédiatement l'élément :focus à ce champ.
Et c'est tout ! Vous avez réussi à implémenter la fonctionnalité d'autofocus sur tous vos formulaires alimentés par WPForms. Souhaitez-vous ajouter du CSS qui rendra le focus plus visible ? Consultez notre article sur Comment ajouter du CSS au focus d'un champ de formulaire.
Référence Action
FAQ
Q : Comment puis-je garder l'autofocus actif sur un formulaire multi-pages ?
R : Si vous avez un formulaire multi-pages, il vous suffit d'utiliser 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 );