Passer automatiquement à la page suivante sur les formulaires multipages

Souhaitez-vous que vos formulaires multipage 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 les clics et rend vos formulaires plus intuitifs à remplir.

Ce guide vous montrera comment faire avancer automatiquement vos formulaires multipage en fonction des sélections des utilisateurs.

Création de la structure de votre formulaire

Tout d'abord, vous aurez besoin d'un formulaire multipage avec des champs de formulaire et des sauts de page.

Pour les besoins de ce tutoriel, nous créons un formulaire de feuille d'échantillons, 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 multipage.

Ajout du CSS d'avancement automatique

Puisque nous voulons que le formulaire passe automatiquement à la page suivante en fonction de n'importe quelle sélection, nous allons ajouter du CSS pour masquer les boutons Suivant de ce formulaire. Pour ce faire, copiez ce CSS sur votre site.

form#wpforms-form-1000 button.wpforms-page-button {
    visibility: hidden;
}

N'oubliez pas de remplacer 1000 par l'ID de votre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez notre guide sur la façon de trouver les ID de formulaire et de champ.

Ajout du JavaScript d'avancement automatique

Ensuite, ajoutez cet extrait de code pour activer l'avancement automatique des pages. 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'ID du formulaire (remplacez 1000 par votre ID), en écoutant les clics sur les entrées de Choix d'images, et en déclenchant automatiquement le clic sur le bouton Suivant 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 avance uniquement 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 les popups Elementor

Si votre formulaire se trouve dans une popup 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 voilà ! Vous pouvez maintenant passer automatiquement à la page suivante en fonction de la réponse à votre champ de formulaire. Ensuite, souhaitez-vous apprendre à sauter des pages entières en fonction des réponses des utilisateurs ? Consultez notre tutoriel sur le saut des sauts de page lors de l'utilisation de la logique conditionnelle pour plus de détails.

Article de référence

wpforms_wp_footer_end