How to Add a Password Visibility Toggle Button to your forms

Markdownを表示

はじめに

訪問者に、フォームに入力する際にパスワードを表示または非表示にするオプションを提供しますか？デフォルトでは、WPFormsのパスワードフィールドはセキュリティのため、入力をアスタリスクでマスクします。

WPFormsには、ビルダーでワンクリックでパスワード表示トグルを追加できる組み込み設定が含まれています。より詳細な制御のためにコードでこの機能を追加したい場合は、このチュートリアルでスニペットを使用して追加する方法も紹介します。

パスワード表示の組み込みオプション

WPFormsバージョン1.9.8以降では、ユーザーがパスワード表示を切り替えることができる組み込みオプションを有効にできます。カスタムコードは不要です。

この機能を有効にするには、フォームビルダーでパスワードフィールドをクリックして、フィールドオプションパネルを開きます。次に、一般タブの下にあるパスワード表示を有効にする設定をオンにします。

これは、フォームにパスワード表示トグルを追加する最も迅速かつ簡単な方法です。

より詳細な制御が必要な場合や、動作とスタイルをカスタマイズしたい場合は、以下のチュートリアルに従ってコードスニペットでこの機能を追加することもできます。

スニペットの追加

パスワード表示トグルを手動で追加するには、サイトに小さなコードスニペットを配置する必要があります。この方法では、トグルの見た目と動作を調整するためのより多くの柔軟性が得られます。

以下のスニペットをサイトにコピーしてください。

注意: このコードスニペットを追加する前に、Font Awesomeプラグインがインストールされていることを確認してください。

カスタムコードスニペットの追加方法と場所についてサポートが必要な場合は、このチュートリアルを確認してください。

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

このスニペットは、WPFormsで追加されたすべてのパスワードフィールドに適用されます。before疑似クラスを使用して特定のアイコンクラスを自動的に適用します。このアイコンをクリックすると、アスタリスクの代わりにパスワードを表示するためにpassword-toggleのCSS IDが呼び出されます。

カスタムCSSの適用

次に、最後のステップとして、このアイコンをスタイルするためにカスタムCSSを追加します。これを行うために、このカスタムCSSをコピーしてサイトに貼り付けます。

カスタムCSSの追加方法と場所についてサポートが必要な場合は、このチュートリアルを確認してください。

.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;
}

これで、フォームを見ると、パスワード表示トグルスイッチが表示されます。

これで完了です！サブラベルも変更したいですか？パスワードフィールドのサブラベルを変更する方法に関するチュートリアルを確認してください。

よくある質問

アクション参照: wpforms_wp_footer_end

パスワード表示切り替えボタンの追加方法

AI要約