ユーザー入力を防ぐためにフォームフィールドを無効にする方法

ユーザーが特定のフォームフィールドにデータを入力できないようにしたいですか？フィールドを無効にしたり、読み取り専用にしたりすることは、ユーザーがフィールドの値を編集することなく表示したい場合に便利です。このチュートリアルでは、フォームフィールドを無効にする方法を説明します。

この方法は、通知メールやCSVエクスポートの {all_fields}スマートタグにこの値を含める場合にも有効です。

フォームの作成

まず、新しいフォームを作成します。このチュートリアルでは、フォーム送信のタイムスタンプとして現在の日付を表すスマートタグを持つメッセージを含む段落テキストフィールドを使用することを示します。

フォーム作成にサポートが必要な場合は、こちらのチュートリアルをご参照ください。

フォームの作成に成功したら 段落テキスト フィールドの中に入れる。フィールドの上級タブに wpf-disable-field として CSSクラス名 フィールドの無効化機能を有効にする。

フォーム・フィールドに複数のCSSクラスを使用する場合は、各クラス名の間にスペースを入れてください。

フォームフィールドを無効にする

いよいよ、このすべてをまとめるコード・スニペットを追加する番だ。

あなたのサイトにコードを追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Make standard form fields to make read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
 
function wpf_dev_disable_field() {
    <script type="text/javascript">
 
    jQuery(function($) {
 
        $( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
         
    });
 
    </script>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

上記のコードは、wpf-disable-fieldというCSSクラスを持つフォーム上のフォームフィールドを無効にするだけでなく、ユーザーが各フィールドをタブで移動する際に、これらのフィールドをスキップします。

これで、訪問者はフィールドとそこに配置されたデフォルトのテキストを見ることができますが、フィールドを変更することはできません。

ドロップダウン、チェックボックス、マルチプルチョイスなど、他のフィールドでの入力を防ぐ最善の方法は、ユーザーに単一の選択肢のみを提供することでしょう。

フォームフィールドを読み取り専用に設定するのに必要なのはこれだけです。名前フィールドのサブラベルを変更したいですか？名前フィールドのサブラベルを変更する方法の記事で、その手順を説明します。

参考アクション

wpforms_wp_footer_end

よくあるご質問

Q：これは他の分野にも使えますか？

A: もちろんだ！を置く限り wpf-disable-field 畑に行けば、すべての畑をカバーできる。

例として、このスニペットはドロップダウンのフォーム・フィールドを無効にします。

/**
 * Make standard form fields read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to the field in the form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
function wpf_dev_disable_field() {
    <script type="text/javascript">
      jQuery(function($) {
        $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select').attr({
          disabled: true,
          tabindex: '-1'
        });

        $('.wpforms-form').on('wpformsBeforeFormSubmit', function(){
          $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select')
            .removeAttr('disabled');
        });
      });
    </script>
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_field', 30);