Souhaitez-vous afficher ou masquer automatiquement le bouton Submit en fonction des réponses fournies dans les champs du formulaire ? Avec un simple extrait de code, vous pouvez contrôler la visibilité du bouton Submit de votre formulaire à l'aide d'une logique conditionnelle.
Ce guide montre comment ajouter un extrait de code et mettre en place une logique conditionnelle pour contrôler la visibilité de votre bouton Soumettre.
Mise en place du formulaire
Pour commencer, ouvrez le générateur 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 multiple qui affiche les choix Oui/Non. Tous les autres champs du formulaire ne seront affichés que si l'option Oui est sélectionnée à l'aide d'une logique conditionnelle.
Le bouton Soumettre n'apparaîtra que si l'option Oui est sélectionnée, et les utilisateurs seront redirigés vers une page de remerciement si l'option Non est sélectionnée.
Remarque : notez l'identifiant 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 identifiants, consultez notre guide sur la façon de trouver les identifiants des formulaires et des champs.
Définition de la logique conditionnelle
Avant d'ajouter le code du bouton Soumettre, nous devons mettre en place une logique conditionnelle pour les autres champs de votre formulaire. Ces champs doivent rester cachés jusqu'à ce que l'utilisateur sélectionne "Oui" dans le champ à choix multiple.
Pour ce faire, ouvrez les paramètres de chaque champ et configurez une logique conditionnelle pour afficher le champ lorsque votre champ à choix multiple est égal à Oui. Ces champs resteront ainsi masqués par défaut et n'apparaîtront qu'en cas de besoin.
Note : Si vous avez besoin d'aide pour comprendre comment fonctionne la logique conditionnelle dans WPForms, veuillez consulter notre guide détaillé sur la logique conditionnelle.
Création de la page de remerciement
Étant donné que notre formulaire propose aux utilisateurs un choix Oui/Non, nous voulons leur offrir une bonne expérience même lorsqu'ils choisissent "Non". Au lieu de simplement masquer le bouton Submit, nous allons rediriger les utilisateurs vers une page de remerciement dédiée.
Pour ce faire, créez une nouvelle page dans WordPress et nommez-la Merci (ou tout autre nom que vous préférez). C'est ici que les utilisateurs qui choisissent "Non" seront automatiquement redirigés.
Notez le chemin d'accès à l'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 Submit en fonction des réponses au formulaire :
Ce snippet utilise d'abord un CSS pour masquer le bouton Submit lors du chargement initial de la page. Ensuite, il met en place un récepteur d'événements JavaScript qui surveille les modifications apportées aux options du champ Choix multiples de votre formulaire.
Lorsque l'utilisateur sélectionne "Oui", le script ajoute une classe CSS qui rend le bouton Soumettre visible. S'il choisit "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 d'extraits de code en toute sécurité.
Personnaliser le code
Vous devrez adapter plusieurs valeurs clés de l'extrait de code à votre formulaire spécifique :
- Sur ligne 12 et ligne 16localisez le sélecteur CSS
#wpforms-form-1000et remplacer1000avec l'identifiant de votre formulaire. - Sur ligne 30dans le sélecteur jQuery
form#wpforms-form-1000, remplacer1000avec votre identifiant de formulaire. - Sur ligne 33vous trouverez le chemin de l'URL de redirection
/thank-you. Mettez-le à jour pour qu'il corresponde au chemin URL réel de votre page de remerciement.- Par exemple, si vous avez nommé votre page "Merci", vous la changerez en
/thanks.
- Par exemple, si vous avez nommé votre page "Merci", vous la changerez en
Test de la mise en œuvre
Une fois que vous avez ajouté et personnalisé l'extrait de code, il est essentiel de tester minutieusement la fonctionnalité :
- Commencez par charger votre nouveau formulaire et vérifiez que le bouton Submit est caché 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 Soumettre apparaît, mais aussi que tous les champs masqués sous condition deviennent visibles.
- Enfin, remplissez et envoyez le formulaire en sélectionnant Oui 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 Texte à ligne unique.
/**
* 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 ce snippet pour le champ Dropdown ?
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 également utiliser ce système pour les boutons de saut de page suivant et précédent ?
R : Pour utiliser cette même fonctionnalité pour les boutons de saut de page, il vous suffit de remplacer .wpforms-submit par 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 se passe-t-il si j'ai plus d'un champ à choix multiple sur la page ?
R : Si vous avez plus d'une question de type Oui ou Non, vous pouvez identifier le script en spécifiant l'identifiant du champ. Par exemple, si vous avez trois champs à choix multiples sur une page, votre script ressemblera à 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'identifiant de notre formulaire est 1000 et l'ID du Choix multiple que nous voulons utiliser dans notre code est 15. Par conséquent, nous définissons une variable à évaluer avec $("div#wpforms-1000-field_15-container input[type='radio']:checked")
Q : Puis-je désactiver le bouton de soumission jusqu'à ce que tous les champs aient une valeur ?
R : Oui, mais il ne validera pas les numéros de téléphone, les adresses électroniques, etc. Ce snippet ne recherchera qu'une valeur avant d'autoriser le clic sur le bouton d'envoi.
/**
* 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 le numéro 727 correspond à l'ID de votre formulaire et que vous avez répertorié chaque ID de champ sur ce formulaire. Si vous avez besoin d'aide pour trouver les numéros d'identification des formulaires ou des champs, veuillez consulter ce tutoriel.
Q : Que se passe-t-il si je souhaite comparer plusieurs choix pour un même champ ?
R : Si vous souhaitez comparer plusieurs champs, il vous suffit d'utiliser l'équivalent PHP de l'opérateur OR.
Cet exemple utilise un simple formulaire de réservation avec un champ à cocher permettant à l'utilisateur de sélectionner l'heure souhaitée. Si l'utilisateur choisit 8h00 - 9h00, 9h00 - 10h00 ou 10h00 - 11h00, il sera redirigé vers la page de remerciement 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 );
Note : Pour en savoir plus sur les opérateurs de comparaison en PHP, veuillez consulter leur documentation à ce sujet ici.
Q : Est-il possible de modifier cette méthode pour comparer deux dates ensemble ?
R : Absolument ! Supposons que vous ayez deux champs Date sur votre site. La date 1 correspond à la date de la commande et la date 2 à la date de l'enlèvement. Mais vous ne voulez pas afficher le bouton Soumettre si la date 2 n'est pas supérieure à la date 1.
Si vous avez besoin d'aide pour ajouter des 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 l'extrait ci-dessus est l'ID de mon formulaire. Les champs _32 et _33 sont les identifiants des deux sélecteurs de date de notre formulaire.
Vous devrez mettre à jour tous ces identifiants pour qu'ils correspondent à vos propres identifiants de formulaire et de champ. Pour vous aider à les trouver, consultez ce tutoriel.
Q : Puis-je empêcher l'utilisateur de continuer à remplir 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 si l'utilisateur sélectionne Non dans le formulaire, nous voulons désactiver ces boutons pour ne pas l'empêcher de continuer à remplir 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 cet extrait, gardez à l'esprit que l'utilisateur peut ne pas comprendre pourquoi le bouton est désactivé, ce qui peut être source de confusion. Veillez à ce que l'utilisateur comprenne le flux de votre formulaire lorsque vous utilisez cet extrait.
Q : Comment puis-je empêcher l'affichage du bouton "Soumettre" si la valeur d'un champ numérique est supérieure ou égale à 3 ?
R : Lorsque vous analysez un montant numérique, vous pouvez utiliser cet extrait.
/**
* 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 modifier l'ID du formulaire ( 1000) pour qu'il corresponde à votre propre ID de formulaire et de modifier également l'ID du champ (_15 ) pour qu'il corresponde à l'ID du champ de votre formulaire " Numéro".
Q : Comment puis-je masquer le bouton "Suivant" jusqu'à ce qu'un certain nombre de cases à cocher soient sélectionnées dans un formulaire à plusieurs étapes ?
R : Vous pouvez masquer le bouton "Suivant" jusqu'à ce qu'un certain nombre de cases soient cochées en utilisant une combinaison de CSS et de JavaScript. Voici un exemple qui masque le bouton "Suivant" jusqu'à ce qu'au moins deux cases soient coché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 de manière conditionnelle le bouton d'envoi de votre formulaire ! Vous souhaitez en savoir plus sur la modification de la couleur du bouton d'envoi ? Consultez notre article intitulé Comment modifier la couleur du bouton d'envoi.