Come proteggere con password un pulsante di invio

Introduzione

Volete proteggere con una password un pulsante di invio? Sapevate che potete già proteggere con password un intero modulo seguendo la guida dettagliata in questa documentazione? Tuttavia, può capitare di voler inserire la password solo nel pulsante di invio e in questo tutorial vi mostreremo come fare! Iniziamo!

Creazione del modulo

Per iniziare, creare un nuovo modulo e aggiungere i campi. Se avete bisogno di aiuto per creare un modulo, consultate questa utile guida.

L'ultimo campo del nostro modulo è un campo di testo a riga singola che utilizzeremo per consentire ai visitatori di inserire una password.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al vostro sito. Se non siete sicuri di dove o come aggiungere gli snippet al vostro sito, consultate questa guida dettagliata passo dopo passo.

/**
 * 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 );

Questo snippet nasconde automaticamente il pulsante Invia quando il modulo viene caricato per impostazione predefinita. Man mano che i campi vengono compilati, rimarrà nascosto fino al campo ID 10. Se la password inserita non corrisponde esattamente al codice di riferimento dei dipendenti 896, che include le maiuscole e gli spazi, il modulo non verrà inviato, ma l'utente verrà reindirizzato a una pagina di ringraziamento. Se la password viene inserita correttamente, il pulsante viene visualizzato e il modulo può essere inviato. Ricordarsi di aggiornare questo snippet per riflettere la password che si desidera utilizzare.

Questo è tutto ciò che serve per proteggere con password un pulsante di invio. Volete che un modulo venga inviato automaticamente in base a una scelta del modulo stesso? Date un'occhiata al nostro articolo su Come inviare automaticamente un modulo con una scelta di campo.

Correlato

Riferimento azione: wpforms_wp_footer_end