AI要約
特定のフォームフィールドへのユーザー入力を防ぎたいですか？フィールドを無効にするか、読み取り専用にすると、ユーザーが編集せずにフィールド値を表示できるようにしたい場合に便利です。このチュートリアルでは、フォームフィールドを無効にして、ユーザー入力を効果的に防ぐ方法を説明します。
このアプローチは、通知メールの{all_fields}スマートタグやCSVエクスポートにこの値を含めたい場合にも役立ちます。
フォームの作成
始めるには、新しいフォームを作成することから始めます。このチュートリアルでは、フォーム送信のタイムスタンプとして現在の日付を表すスマートタグを含むメッセージを表示する段落テキストフィールドを使用してデモンストレーションします。
フォーム作成プロセスについてサポートが必要な場合は、このチュートリアルを参照して、ステップバイステップのガイダンスを確認してください。
フォームの作成が完了したら、段落テキストフィールドを挿入します。フィールドの詳細設定タブ内で、フィールドの無効化機能を有効にするために、CSSクラス名として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>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
上記のコードは、wpf-disable-fieldのCSSクラスを持つ任意のフォームの任意のフォームフィールドを無効にするだけでなく、ユーザーが各フィールドをタブで移動する際にこれらのフィールドをスキップします。
ドロップダウン、チェックボックス、または複数選択などの他のフィールドへの入力を防ぐ最良の方法は、ユーザーに1つのオプションのみを提供することです。
これで、フォームフィールドを読み取り専用に設定するために必要なすべてが揃いました。名前フィールドのサブラベルを変更しますか？名前フィールドのサブラベルを変更する方法に関する記事では、これを達成する方法の手順を説明します。
参照アクション
よくある質問
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);