Attention !

Cet article contient du code PHP et JavaScript et s'adresse aux développeurs. Nous proposons ce code à titre gracieux, mais nous n'offrons pas de support pour les personnalisations de code ou le développement tiers.

Pour obtenir de l'aide supplémentaire, veuillez consulter le tutoriel de WPBeginner sur l'ajout de code personnalisé.

Ignorer

Comment afficher conditionnellement le bouton de soumission

Mis à jour :
Afficher Markdown

Souhaitez-vous afficher ou masquer automatiquement le bouton Envoyer en fonction des réponses aux champs du formulaire ? Avec un simple extrait de code, vous pouvez contrôler la visibilité du bouton Envoyer de votre formulaire à l'aide de la logique conditionnelle.

Ce guide montre comment ajouter un extrait de code et configurer la logique conditionnelle pour contrôler la visibilité de votre bouton Envoyer.

Configuration du formulaire

Pour commencer, ouvrez le constructeur de formulaires en créant un nouveau formulaire ou en modifiant un formulaire existant.

Pour cet exemple, nous allons créer un formulaire de don avec un champ à choix multiples qui affiche les choix Oui/Non. Tous les autres champs supplémentaires du formulaire ne seront révélés que si Oui est sélectionné à l'aide de la logique conditionnelle.

Le bouton Envoyer apparaîtra uniquement lorsque Oui est sélectionné, et les utilisateurs seront redirigés vers une page de remerciement si Non est sélectionné.

Remarque : Notez l'ID de votre formulaire, car vous en aurez besoin lors de l'ajout de l'extrait de code. Si vous avez besoin d'aide pour trouver ces ID, consultez notre guide sur comment trouver les ID de formulaire et de champ.

Créez le formulaire et ajoutez vos champs

Configuration de la logique conditionnelle

Avant d'ajouter le code pour le bouton Envoyer, nous devons configurer la logique conditionnelle pour les autres champs de votre formulaire. Ces champs doivent rester masqués jusqu'à ce que l'utilisateur sélectionne « Oui » dans le champ à choix multiples.

Pour ce faire, ouvrez les paramètres de chaque champ et configurez la logique conditionnelle pour afficher le champ lorsque votre champ à choix multiples est égal à Oui. Cela garantit que ces champs restent masqués par défaut et n'apparaissent que lorsque nécessaire.

Remarque : Si vous avez besoin d'aide pour comprendre le fonctionnement de la logique conditionnelle dans WPForms, veuillez consulter notre guide détaillé sur la logique conditionnelle.

Création de la page de remerciement

Comme notre formulaire offre aux utilisateurs un choix Oui/Non, nous voulons offrir une bonne expérience même lorsque « Non » est sélectionné. Au lieu de simplement masquer le bouton Envoyer, nous redirigerons les utilisateurs vers une page de remerciement dédiée.

Pour ce faire, créez une nouvelle page dans WordPress et nommez-la Remerciements (ou tout autre nom de votre choix). C'est là que les utilisateurs qui sélectionnent « Non » seront automatiquement redirigés.

Notez le chemin d'URL de la page, car vous en aurez besoin pour la redirection dans notre extrait de code.

Ajout de l’extrait de code

L'extrait de code suivant contrôlera la visibilité de votre bouton Envoyer en fonction des réponses du formulaire :

Ce snippet utilise d'abord le CSS pour masquer le bouton Envoyer lors du chargement initial de la page. Ensuite, il configure un écouteur d'événements JavaScript qui surveille les modifications apportées aux options du champ à choix multiples de votre formulaire.

Lorsqu'un utilisateur sélectionne « Oui », le script ajoute une classe CSS qui rend le bouton Envoyer visible. S'il sélectionne « Non », le script le redirige automatiquement vers votre page de remerciement.

Remarque : Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter notre tutoriel sur l'ajout sécurisé d'extraits de code.

Personnalisation du code

Vous devrez personnaliser plusieurs valeurs clés dans l'extrait de code pour votre formulaire spécifique :

  • Sur les lignes 12 et 16, localisez le sélecteur CSS #wpforms-form-1000 et remplacez 1000 par l’ID de votre formulaire.
  • Sur la ligne 30, dans le sélecteur jQuery form#wpforms-form-1000, remplacez à nouveau 1000 par l’ID de votre formulaire.
  • Sur la ligne 33, vous trouverez le chemin de l’URL de redirection /thank-you. Mettez-le à jour pour qu’il corresponde au chemin d’URL réel de votre page de remerciement.
    • Par exemple, si vous avez nommé votre page « Merci », vous la changeriez en /merci.

Test de votre implémentation

Une fois que vous avez ajouté et personnalisé l’extrait de code, il est essentiel de tester minutieusement la fonctionnalité :

  • Commencez par charger votre formulaire et vérifiez que le bouton Envoyer est masqué par défaut.
  • Ensuite, sélectionnez Non dans votre formulaire et confirmez que vous êtes immédiatement redirigé vers votre page de remerciement.
  • Testez ensuite le chemin « Oui » – sélectionnez Oui et vérifiez que non seulement le bouton Envoyer apparaît, mais aussi que tous vos champs masqués conditionnellement deviennent visibles.
  • Enfin, remplissez et soumettez le formulaire avec Oui sélectionné pour vous assurer que l’ensemble du processus fonctionne comme prévu.

Questions fréquemment posées

Q : Peut-on l’utiliser pour un champ de texte d’une seule ligne ?

R : Absolument ! Voici un extrait de code qui fonctionne avec un champ de texte d’une seule ligne.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
    
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000.wpforms-submit  {
        visibility: hidden;
    }
   
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
        visibility: visible;
    }
    
    </style>
    
<?php } );
    
    
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
    ?>
    <script>
        jQuery(function($){
            // Form ID 1000 and Field ID 15
            $( "#wpforms-1000-field_15" ).change(function(){
 
                var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
                var specificText ="Some Text Here"
                if(inputvalue == specificText){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );

Q : Puis-je utiliser cet extrait pour le champ déroulant ?

R : Oui, vous pouvez l’utiliser avec les champs déroulants en utilisant l’extrait de code suivant :

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
   
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
   
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).on( 'change', function () {
                var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();              
                  if(selectedval == "First Choice"){
                    $( ".wpforms-submit" ).removeClass( "show-submit" );
                }
                else{
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Q : Peut-on l’utiliser aussi pour les boutons Page suivante et Page précédente ?

R : Pour utiliser cette même fonctionnalité pour les boutons de page, il vous suffit de changer .wpforms-submit en button.wpforms-page-next. L’extrait de code complet ressemblerait donc à ceci.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
 
<style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000 button.wpforms-page-next {
        visibility: hidden;
    }
  
    #wpforms-form-1000 button.wpforms-page-next.show-next {
        visibility: visible;
    }
  
</style>
 
<?php } );
 
 
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
    jQuery(function($) {
        $( "form#wpforms-form-1000" ).click(function() {
            var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
            if (selectedval == "No") {
                window.location = "/thank-you";
            }
            if (selectedval == "Yes") {
                $( "button.wpforms-page-next" ).addClass( "show-next" );
            }
        });
    });
  
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Q : Que faire si j’ai plus d’un champ à choix multiples sur la page ?

R : Si vous avez plus d’une question Oui ou Non, vous pouvez identifier le script en spécifiant l’ID du champ. Par exemple, si vous avez trois champs à choix multiples sur une page, votre script ressemblerait à ceci.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
   
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
   
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).click(function(){
             
                // Form ID 1000 and Field ID 15
                var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
                if(selectedval == "Yes"){
                    window.location = "/thank-you";
                }
                if(selectedval == "No"){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

L’ID de notre formulaire est 1000 et l’ID du champ à choix multiples que nous voulons utiliser dans notre code est 15. Par conséquent, nous définissons une variable pour évaluer avec $("div#wpforms-1000-field_15-container input[type='radio']:checked")

Q : Puis-je simplement désactiver le bouton d’envoi jusqu’à ce que tous les champs aient une valeur ?

R : Oui, cependant, cela ne validera pas les numéros de téléphone, les adresses e-mail, etc. Cet extrait ne recherchera aucune valeur avant de permettre au bouton d’envoi d’être cliqué.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
function wpf_dev_disable_submit_validation() {
    ?>
    <script type="text/javascript">
    jQuery(function () {
        
        // Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
        jQuery('#wpforms-submit-727').attr('disabled', true);
        
        // Look and listen for any change on the form ID 727, change the 727 to match your form ID
        jQuery('#wpforms-form-727').change(function () {
            
            // List all field IDs in this section using the && to join them
            if (jQuery('#wpforms-727-field_1').val() != '' && 
                jQuery('#wpforms-727-field_2').val() != '' && 
                jQuery('#wpforms-727-field_3').val() != '' &&

                // Check for radio button (adjust field number as needed)
                jQuery('input[name="wpforms[fields][4]"]:checked').val() &&

                // Check for checkbox (adjust field number as needed)
                jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
                
                // If all of those field IDs have values, the submit button can be clicked
                jQuery('#wpforms-submit-727').attr('disabled', false);
            } else {
                
                // Otherwise, the submit button for this form remains disabled
                jQuery('#wpforms-submit-727').attr('disabled', true);
            }
        });
     });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);

Remarque : Vous devez simplement vous assurer que 727 correspond à l’ID de votre formulaire et que vous avez listé chaque ID de champ de ce formulaire. Si vous avez besoin d’aide pour trouver les numéros d’ID de formulaire ou de champ, veuillez consulter ce tutoriel.

Q : Que faire si je veux comparer plus d’un choix pour un champ ?

R: Si vous avez plus d'un champ que vous souhaitez comparer, vous utiliseriez simplement l'équivalent PHP de l'opérateur OU.

Cet exemple utilise un formulaire de réservation simple avec le champ Case à cocher pour que l'utilisateur sélectionne l'heure demandée. Si l'utilisateur sélectionne 8:00 – 9:00, 9:00 – 10:00 ou 10:00 – 11:00, il sera redirigé vers la page Merci car ces créneaux sont déjà pris.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
  
add_action( 'wp_head', function () { ?>
   
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).click(function(){
                var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
                if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
                    window.location = "/thank-you";
                }
                 
                if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Remarque : Pour en savoir plus sur les opérateurs de comparaison PHP, veuillez consulter leur documentation à ce sujet ici.

Q: Pourrais-je modifier cela pour comparer deux dates ensemble ?

R: Absolument ! Supposons que vous ayez deux champs Date sur votre site. La date un serait la date de commande et la date deux serait la date de retrait. Mais vous ne voulez pas afficher le bouton Soumettre à moins que la date deux ne soit supérieure à la date un.

N'oubliez pas que pour toute aide sur l'ajout de snippets, consultez ce tutoriel.

/**
 * Conditionally show the submit button if date 2 is greater than date 1
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
add_action( 'wp_head', function () { ?>
   
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
    ?>
    <script>
        jQuery(function($){
             
            // Only fire this script when date 2 has been selected
            document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() { 
             
                // Set the first date picker variable
                var oneDate = $( "input#wpforms-1899-field_32" ).val();
                 
                // Set the second date picker variable
                var twoDate = $( "input#wpforms-1899-field_33" ).val();
                 
                // Now compare the 2 dates, show a message and keep the Submit button hidden 
                // if date 2 is less than date 1
                if(twoDate < oneDate){
                    alert( "Please make sure that the pickup date is after the dropoff date" );
                    e.preventDefault();
                    e.stopPropagation();
                }
                else {
                    // since date 2 is greater than date 1, go ahead and show the submit button
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            }
        });
         
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );

Chaque référence à 1899 dans le snippet ci-dessus est l'ID de mon formulaire. Les _32 et _33 sont les ID des champs pour les 2 sélecteurs de date de notre formulaire.

Vous devrez mettre à jour tous ces ID pour qu'ils correspondent à vos propres ID de formulaire et de champ. Pour obtenir de l'aide pour les trouver, consultez simplement ce tutoriel.

Q: Puis-je empêcher l'utilisateur de continuer dans le formulaire en fonction d'une option de liste déroulante ?

R: Absolument. Pour cet exemple, nous afficherons les boutons Suivant et Précédent comme prévu, mais s'ils sélectionnent Non dans le formulaire, nous voulons désactiver ces boutons pour ne pas permettre à l'utilisateur de continuer le formulaire.

/**
 * Conditionally show the Next button based on dropdown choice
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
function wpf_dev_conditional_next_page() {
?>
    <script>
        jQuery(function($){
             
            // Only run this on the form ID 727
            $( "form#wpforms-form-727" ).on( 'change', function () {
                 
                // Look at the field ID 9 which is a dropdown to see what the user selected
                var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();    
                   
                  // If the user selects no from the dropdown, disable the Next button
                  if(selectedval == "No"){
                    $( ".wpforms-page-next" ).attr({disabled: "true"});
                }
                 
                else {
                  
                 // Otherwise, the next button for this form remains disabled
                 $( '.wpforms-page-next' ).attr('disabled', false);
             }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );

Remarque : Lorsque vous utilisez ce snippet, gardez à l'esprit que l'utilisateur peut ne pas comprendre pourquoi le bouton est désactivé et cela peut prêter à confusion. Assurez-vous que l'utilisateur comprenne le flux de votre formulaire lors de l'utilisation de ce snippet.

Q: Comment puis-je empêcher le bouton Soumettre sauf si un champ Nombre est supérieur ou égal à 3 ?

R: Lors de l'analyse d'une quantité numérique, vous pouvez utiliser ce snippet.

/**
 * Check if amount entered on field ID 15 is greater than or equal to 3
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
  
add_action( 'wp_head', function () { ?>
    
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
    
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
    
    </style>
    
<?php } );
    
    
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
 
            $( "form#wpforms-form-1000" ).click(function(){
 
                // Form ID 1000 and Field ID 15
                var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
 
                if(selectedval <= "2"){
                    $( ".wpforms-submit" ).removeClass( "show-submit" );
                }
                if(selectedval >= "3"){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
 
            });
 
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Remarque : N'oubliez pas de changer l'ID du formulaire de 1000 pour qu'il corresponde à votre propre ID de formulaire et changez également l'ID du champ _15 pour qu'il corresponde à l'ID du champ de votre champ de formulaire Nombre.

Q: Comment puis-je masquer le bouton Suivant jusqu'à ce qu'un certain nombre de cases à cocher soient sélectionnées dans un formulaire multipage ?

R: Vous pouvez masquer le bouton Suivant jusqu'à ce qu'un nombre spécifique de cases à cocher soient sélectionnées en utilisant une combinaison de CSS et de JavaScript. Voici un exemple qui masque le bouton Suivant jusqu'à ce qu'au moins 2 cases à cocher soient sélectionnées :

/**
 * Hide Next button until multiple checkboxes are selected
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
 */
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
    visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
    visibility: visible;
}
</style>
<?php } );

function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
    // Function to check the number of selected checkboxes
    function checkCheckboxes() {
        var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
        if (minSelection >= 2) {
            $("button.wpforms-page-next").addClass("show-next");
        } else {
            $("button.wpforms-page-next").removeClass("show-next");
        }
    }

    // Check the checkboxes on form load and when any checkbox is clicked
    checkCheckboxes();
    $('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
        checkCheckboxes();
    });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );

Et c'est tout ce dont vous avez besoin pour afficher conditionnellement le bouton de soumission sur votre formulaire ! Souhaitez-vous en savoir plus sur la modification de la couleur du bouton de soumission ? Jetez un œil à notre article sur Comment changer la couleur du bouton de soumission.

Filtre de référence

wpforms_wp_footer_end

Étiqueté :
Toujours bloqué ? Comment pouvons-nous vous aider ?
Dernière mise à jour le 11 nov. 2024