Souhaitez-vous que vos formulaires multipages avancent automatiquement lorsque les utilisateurs font des sélections ? Avec un simple extrait de code, vous pouvez créer une expérience de formulaire plus fluide en passant automatiquement à la page suivante lorsque les utilisateurs sélectionnent leurs réponses. Cette amélioration réduit le nombre de clics et rend vos formulaires plus intuitifs.
Ce guide vous montrera comment faire avancer automatiquement vos formulaires multipages en fonction des sélections de l'utilisateur.
Création de la structure du formulaire
Tout d'abord, vous aurez besoin d'un formulaire de plusieurs pages avec des champs de formulaire et des sauts de page.
Pour les besoins de ce tutoriel, nous créons un formulaire de feuille de cadeaux. Il y aura trois champs à choix multiples utilisant des choix d'images. Chaque sélection comprendra un saut de page.
Si vous avez besoin d'aide pour créer un formulaire multipage, veuillez consulter notre guide sur la création de formulaires multipages.
Ajouter le CSS Auto-Advance
Comme nous voulons que le formulaire passe automatiquement à la page suivante en fonction de la sélection , nous allons ajouter une feuille de style CSS pour masquer les boutons " Next" sur ce formulaire. Pour ce faire, copiez cette feuille de style CSS sur votre site.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
N'oubliez pas de remplacer 1000 avec l'identifiant de votre formulaire. Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, consultez notre guide sur l'identifiant de votre formulaire. comment trouver les identifiants des formulaires et des champs.
Ajouter le JavaScript Auto-Advance
Ensuite, ajoutez cet extrait de code pour activer l'avancement automatique de la page. Si vous avez besoin d'aide pour ajouter des extraits de code, veuillez consulter notre tutoriel sur l'ajout d'extraits de code.
Le script fonctionne en ciblant votre formulaire spécifique à l'aide de l'identifiant du formulaire (remplacez 1000 avec votre ID), en écoutant les clics sur les entrées Image Choice, et en déclenchant la fonction Suivant Cliquez automatiquement sur le bouton lorsqu'une sélection est effectuée.
Options de personnalisation
Vous pouvez modifier cette fonctionnalité pour cibler des questions spécifiques en ajustant le sélecteur jQuery, ajouter des conditions pour savoir quand avancer, ou rediriger vers différentes pages en fonction des réponses.
Voici un exemple qui ne progresse que lorsque "Oui" est sélectionné :
function wpf_dev_conditional_next_page() {
?>
<script type="text/javascript">
jQuery(function() {
jQuery( "ul#wpforms-1000-field_25 li input" ).click(function() {
if (jQuery(this).val() === "Yes")
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
else
location.assign( "https://myexamplesite.com/home" );
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 30);
Utilisation avec Elementor Popups
Si votre formulaire se trouve à l'intérieur d'une fenêtre contextuelle Elementor, utilisez plutôt cette version modifiée :
function wpf_dev_automatic_next_page_elementor_popup() {
?>
<script type="text/javascript">
jQuery( document ).on( 'elementor/popup/show', function( event, popup ) {
jQuery( "form#wpforms-form-3241 ul.wpforms-image-choices input" ).click(function() {
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_next_page_elementor_popup', 30);
Et le tour est joué ! Vous pouvez maintenant passer automatiquement à la page suivante en fonction de la réponse au champ de votre formulaire. Ensuite, vous souhaitez apprendre à sauter des pages entières en fonction des réponses de l'utilisateur ? Pour plus de détails, consultez notre tutoriel sur le saut de page à l'aide de la logique conditionnelle.