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

Introduction

Souhaitez-vous protéger par mot de passe un bouton Soumettre ? Saviez-vous que vous pouvez déjà protéger par mot de passe un formulaire entier en suivant le guide détaillé de cette documentation ? Cependant, il peut y avoir des moments où vous souhaitez simplement placer le mot de passe sur le bouton Soumettre uniquement et dans ce tutoriel, nous vous montrerons comment faire ! Commençons !

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, veuillez consulter ce guide utile.

Le dernier champ de notre formulaire est un champ Texte sur une seule ligne que nous utiliserons pour permettre aux visiteurs d'entrer un mot de passe.

Ajout du snippet

Il est maintenant temps d'ajouter le extrait de code à votre site. Si vous ne savez pas où ni comment ajouter des extraits de code à 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 );

Cet extrait de code masquera automatiquement le bouton Soumettre lorsque le formulaire se charge par défaut. Au fur et à mesure que les champs sont remplis, il restera masqué jusqu'à ce qu'ils atteignent le champ ID 10. Si le mot de passe saisi ne correspond pas exactement au code de parrainage employé 896, y compris la casse 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 de code pour refléter le mot de passe que vous souhaitez utiliser.

Et c'est tout ce dont vous avez besoin pour protéger par mot de passe un bouton Soumettre. Souhaitez-vous qu'un formulaire soit automatiquement soumis en fonction d'un choix dans le formulaire ? Consultez notre article sur Comment soumettre automatiquement un formulaire avec un choix de champ.

Articles associés

Référence d’action : wpforms_wp_footer_end