So schützen Sie eine Senden-Schaltfläche mit einem Passwort

Einleitung

Möchten Sie eine Senden-Schaltfläche mit einem Passwort schützen? Wussten Sie schon, dass Sie ein ganzes Formular mit der detaillierten Anleitung in dieser Dokumentation schützen können? Es kann jedoch vorkommen, dass Sie das Passwort nur für die Senden-Schaltfläche festlegen möchten, und in diesem Tutorial zeigen wir Ihnen, wie das geht! Fangen wir an!

Erstellung des Formulars

Erstellen Sie zunächst ein neues Formular und fügen Sie Ihre Felder hinzu. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, sehen Sie sich bitte diese nützliche Anleitung an.

Das letzte Feld für unser Formular ist ein Einzeiliger Text-Feld, das wir verwenden werden, um Besuchern die Eingabe eines Passworts zu ermöglichen.

Hinzufügen des Snippets

Nun ist es an der Zeit, den Snippet auf Ihrer Website hinzuzufügen. Wenn Sie nicht sicher sind, wo oder wie Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte diese detaillierte Schritt-für-Schritt-Anleitung.

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

Dieser Snippet blendet die Senden-Schaltfläche beim Laden des Formulars standardmäßig automatisch aus. Wenn die Felder ausgefüllt sind, bleibt sie ausgeblendet, bis sie Feld-ID 10 erreichen. Wenn das eingegebene Passwort nicht genau mit dem Mitarbeiterempfehlungscode 896 übereinstimmt, einschließlich Groß-/Kleinschreibung und Leerzeichen, wird das Formular nicht gesendet, sondern der Benutzer wird stattdessen auf eine Dankesseite weitergeleitet. Wenn das Passwort korrekt eingegeben wird, wird die Schaltfläche angezeigt und das Formular kann dann gesendet werden. Bitte denken Sie daran, diesen Snippet zu aktualisieren, um das gewünschte Passwort widerzuspiegeln.

Und das ist alles, was Sie brauchen, um eine Senden-Schaltfläche mit einem Passwort zu schützen. Möchten Sie, dass ein Formular automatisch basierend auf einer Auswahl im Formular gesendet wird? Schauen Sie sich unseren Artikel über automatische Formularübermittlung basierend auf einer Feldwahl an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end