Hinzufügen einer Schaltfläche zum Umschalten der Kennwortsichtbarkeit

Einführung

Möchten Sie Ihren Besuchern die Möglichkeit geben, ihr Passwort mit einem Kippschalter sichtbar zu machen? Wenn Sie Ihrem Formular ein Kennwortfeld hinzufügen, wird jede Eingabe in diesem Feld aus Sicherheitsgründen mit Sternchen versehen. Wenn Sie eine Schaltfläche zum Ein- und Ausschalten der Kennwortsichtbarkeit bereitstellen möchten, können Sie diesem Tutorial folgen, in dem wir ein Codeschnipsel erstellen, mit dem sich dies leicht erreichen lässt.

Erstellen des Formulars

Beginnen Sie mit der Erstellung eines neuen Formulars und fügen Sie diesem Ihre Felder hinzu. Da wir ein Formular erstellen, mit dem sie ihr eigenes Konto erstellen können, fragen wir sie nach ihrem Namen, ihrer E-Mail-Adresse, ihrem Benutzernamen, ihrem Passwort und einem Textbereich, in dem sie ein wenig über sich selbst angeben können.

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, können Sie diese Dokumentation einsehen.

Installieren des Font Awesome-Plugins

Wir wollen ein Icon für unseren Toggle-Button verwenden, also installieren wir nach einer Anleitung unserer Freunde von WPBeginner das Font Awesome Plugin, damit wir eines ihrer Icons für unseren Passwort-Sichtbarkeits-Toggle verwenden können.

Hinzufügen des Snippets

Kopieren Sie nun das unten stehende Snippet auf Ihre Website.

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte Codeschnipsel hinzufügen können, lesen Sie bitte diese Anleitung.

/**
 * Provide a password visibility toggle switch
 *
 * @link https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/
 */
 
function wpf_dev_password_toggle() {
    ?>

<script type="text/javascript">

    jQuery(function($){
         
        $( '.wpforms-field-password' ).each(function(){
             
            $(this).find( 'input' ).each(function(){
                 
                $(this).before( '<i class="fa fa-eye-slash fa-eye" id="password-toggle"></i>' );
                var $passwordInput = $(this);
                 
                $(this).parent().find( '#password-toggle' ).on( 'click', function(){
                     
                    var type = $passwordInput.attr( 'type' ) === 'password' ? 'text' : 'password';
                    $passwordInput.attr( 'type', type);
                    $(this).toggleClass( 'fa-eye-slash' );
                     
                });
                 
            });
             
        });
         
    });

    </script>

<?php
}
  
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_toggle', 30 );

Dieses Snippet wird auf alle Passwort Feld durch WPForms hinzugefügt. Es wird automatisch eine bestimmte Symbolklasse mit Hilfe der before Pseudo-Klasse. Wenn dieses Symbol angeklickt wird, ruft es die CSS-ID von password-toggle damit das Passwort anstelle der Sternchen angezeigt wird.

Anwenden von benutzerdefiniertem CSS

In unserem letzten Schritt fügen wir nun ein benutzerdefiniertes CSS hinzu, um das Symbol zu gestalten. Dazu kopieren wir dieses benutzerdefinierte CSS und fügen es auf Ihrer Website ein.

Wenn Sie wissen möchten, wie und wo Sie benutzerdefinierte CSS hinzufügen können, sehen Sie sich bitte dieses Tutorial an.

.wpforms-field-password,
.wpforms-field-password .wpforms-field-row-block {
     display: flex;
     flex-flow: wrap;
}

.wpforms-field-row-block *:not(input):not(i),
.wpforms-field-password *:not(input):not(i) {
     flex-basis: 100% !important;
}

#password-toggle {
     width: 35px;
	 font-family: "FontAwesome" !important;
     text-align: center;
     line-height: 35px;
     background: #d9d9d9;
     border-radius: 2px 0 0 2px;
     border: 1px solid #ccc;
     border-right: 0;
}

.wpforms-field-password input {
     width: calc(100% - 50px) !important;
     border-radius: 0 2px 2px 0 !important;
} 

.fa-eye-slash:before {
    font-size: 12px;
}

Wenn Sie nun das Formular sehen, sehen Sie den Schalter für die Sichtbarkeit des Passworts.

Und das war's! Möchten Sie auch die Unteretiketten ändern? Sehen Sie sich unsere Anleitung zum Ändern der Unteretiketten für das Kennwortfeld an.

FAQ

Referenz der Aktion: wpforms_wp_footer_end