ユーザーが特定のフォームフィールドにデータを入力できないようにしたいですか？フィールドを無効にしたり、読み取り専用にしたりすることは、ユーザーがフィールドの値を編集することなく表示したい場合に便利です。このチュートリアルでは、フォームフィールドを無効にする方法を説明します。
この方法は、通知メールや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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
上記のコードは、wpf-disable-fieldというCSSクラスを持つフォーム上のフォームフィールドを無効にするだけでなく、ユーザーが各フィールドをタブで移動する際に、これらのフィールドをスキップします。
ドロップダウン、チェックボックス、マルチプルチョイスなど、他のフィールドでの入力を防ぐ最善の方法は、ユーザーに単一の選択肢のみを提供することでしょう。
フォームフィールドを読み取り専用に設定するために必要なことは以上です。 名前フィールドのサブラベルを変更したいですか？名前フィールドのサブラベルを変更する方法の記事で、その手順を説明します。
参考アクション
よくあるご質問
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 );