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

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

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

フォームの作成

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

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

フォームの作成に成功したら 段落テキスト フィールドの中に入れる。フィールドの 上級 タブに wpf-disable-field として 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>
	<?php
}
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 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, .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>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );