Comment protéger un bouton de soumission par un mot de passe

Introduction

Souhaitez-vous protéger un bouton de soumission par un mot de passe ? Saviez-vous que vous pouvez déjà protéger un formulaire entier par un mot de passe en suivant le guide détaillé de cette documentation? Cependant, il peut arriver que vous souhaitiez placer le mot de passe uniquement sur le bouton Soumettre et dans ce tutoriel, nous allons vous montrer comment faire ! C'est parti !

Création du formulaire

Pour commencer, créez un nouveau formulaire et ajoutez vos champs. Si vous avez besoin d'aide pour créer un formulaire, consultez ce guide utile.

Le dernier champ de notre formulaire est un champ de texte à ligne unique que nous utiliserons pour permettre aux visiteurs de saisir un mot de passe.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait à votre site. Si vous ne savez pas où ou comment ajouter des snippets à votre site, veuillez consulter ce guide détaillé étape par étape.

/**
 * Password-protect a submit button
 *
 * @link https://wpforms.com/developers/how-to-password-protect-a-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
  
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-137 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
 
    #wpforms-form-137 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
  
    </style>
  
<?php } );
  
  
// Password logic for Submit button
function wpf_dev_password_submit() {
    ?>
    <script>
        jQuery(function($){

            // Look only at form ID 137 and field ID 10
            $( "#wpforms-137-field_10" ).change(function(){

                var selectedval = $( "#wpforms-137-field_10" ).val();

                if(selectedval === "employee referral code 896"){
					$( ".wpforms-submit" ).addClass( "show-submit" );
                } else {
					window.location = "https://myexamplesite.com/thank-you";
				}

            });

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_submit', 10 );

Ce snippet cachera automatiquement le bouton Submit lors du chargement du formulaire par défaut. Au fur et à mesure que les champs sont remplis, il restera caché jusqu'au champ ID 10. Si le mot de passe saisi ne correspond pas exactement au code de référence de l'employé 896, qui inclut les majuscules et les espaces, le formulaire ne sera pas soumis mais l'utilisateur sera redirigé vers une page de remerciement à la place. Si le mot de passe est saisi correctement, le bouton s'affichera et le formulaire pourra alors être soumis. N'oubliez pas de mettre à jour cet extrait pour qu'il corresponde au mot de passe que vous souhaitez utiliser.

C'est tout ce dont vous avez besoin pour protéger un bouton Submit par un mot de passe. Souhaitez-vous qu'un formulaire se soumette automatiquement en fonction d'un choix effectué dans le formulaire ? Consultez notre article sur la soumission automatique d'un formulaire à l'aide d'un choix de champ.

En rapport

Référence de l'action : wpforms_wp_footer_end