送信ボタンにパスワード保護を適用する方法

はじめに

送信ボタンをパスワードで保護しますか？ このドキュメントの詳細ガイドに従って、フォーム全体をパスワードで保護できることをご存知でしたか？ ただし、パスワードを送信ボタンのみに配置したい場合もあります。このチュートリアルでは、その方法をご紹介します！始めましょう！

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。フォームの作成にヘルプが必要な場合は、この役立つガイドを確認してください。

フォームの最後のフィールドは、訪問者がパスワードを入力できるようにするために使用する一行テキストフィールドです。

スニペットの追加

次に、スニペットをサイトに追加します。スニペットをサイトに追加する場所や方法がわからない場合は、この詳細なステップバイステップガイドを確認してください。

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

このスニペットは、デフォルトではフォームの読み込み時に送信ボタンを自動的に非表示にします。フィールドが入力されると、フィールドID 10に達するまで非表示のままになります。入力されたパスワードが大文字と小文字、およびスペースを含む 従業員紹介コード 896と正確に一致しない場合、フォームは送信されず、代わりにユーザーは感謝のページにリダイレクトされます。パスワードが正しく入力されると、ボタンが表示され、フォームを送信できるようになります。使用したいパスワードを反映するように、このスニペットを更新することを忘れないでください。

これで、送信ボタンをパスワードで保護するために必要なすべてが揃いました。フォームの選択に基づいてフォームを自動的に送信したいと思いますか？ フォームの選択でフォームを自動的に送信する方法に関する記事をご覧ください。

関連

アクション参照: wpforms_wp_footer_end