AI要約
ユーザーがフォームを送信する前に、一行テキストフィールドで特定の単語をブロックしますか？デフォルトでは、WPFormsのスパム保護はフォーム送信時に実行されます。簡単なJavaScriptスニペットを使用すると、制限された単語が入力されるとすぐにエラーメッセージを表示する、リアルタイムのキーワードブロックリストを追加できます。
このチュートリアルでは、wpforms_wp_footer_endとjQuery Validateを使用して、入力マスクと同様に機能するクライアントサイドのキーワード検証を追加する方法を説明します。
フォームの作成
まず、フォームを作成し、キーワードブロックリストで保護したい一行テキストフィールドを追加します。フォームに必要なその他のフィールドを追加することもできます。
この手順でヘルプが必要な場合は、WPFormsで最初のフォームを作成する方法に関するガイドを参照してください。
注意点：
- フォームID
- 検証したい一行テキストフィールドのフィールドID
以下のスニペットを設定する際にこれらの値が必要になります。
コードスニペットの追加
リアルタイムのキーワードブロックリストを追加するには、次のスニペットを使用します。この例では、wpforms_wp_footer_endアクションを使用して、サイトフッターに小さなJavaScriptブロックを印刷します。
カスタムコードの追加でヘルプが必要な場合は、WPFormsにカスタムPHPまたはJavaScriptを追加する方法に関するチュートリアルを参照してください。
このコードを追加して保存したら、フロントエンドでフォームが表示されているページにアクセスし、ブロックされている単語のいずれかを入力して一行テキストフィールドをテストしてください。
フォームを送信する必要なく、制限されたキーワードが検出されるとすぐに、フィールドの下に赤い検証メッセージが表示されるはずです。
スニペットのカスタマイズ
この例をフォームに適用するには、スクリプトの上部にある設定セクションを、スクリーンショットの行番号を使用して編集してください。
- フォームID
14行目：var targetFormID = 100; // フォームIDに置き換えてください100を、一行テキストフィールドが含まれるフォームのIDに置き換えてください。 - フィールドID
15行目：var targetFieldID = 1; // フィールドIDに置き換えてください1を、キーワードブロックリストを使用する必要がある一行テキストフィールドのIDに置き換えてください。 - ブロックするキーワード
16行目：var blockedWords = ['badword', 'spam', 'unwanted']; // ブロックするキーワードのリスト
例の単語を、ブロックしたいキーワードのリストに置き換えてください。必要に応じて配列に項目を追加または削除できます。 - エラーメッセージ
17行目：var customError = 'このコンテンツには制限されたキーワードが含まれています。';
制限されたキーワードが検出されたときにフィールドの下に表示されるメッセージを変更するには、引用符内のテキストを更新してください。
よくある質問
以下に、このカスタムキーワードフィルターの使用に関するよくある質問とその回答をいくつか紹介します。
これは、スパム保護とセキュリティの組み込みキーワードフィルターとどう違いますか？
組み込みのキーワードフィルターは、設定 » スパム保護とセキュリティの下で構成され、フォームが送信されたときにサイト上のすべてのフォームとフィールドに適用されます。このスニペットは、1つのフォームの特定の1つのテキストフィールドのみを対象とし、ユーザーが入力中にエラーメッセージを即座に表示します。
標準のキーワードフィルターは、すべてのフォームで禁止語をブロックする主な方法であり、JavaScriptが無効になっていても、送信時に実行されます。
このスニペットは、即時のフィードバックが必要な重要なフィールドの追加のリアルタイムチェックとして使用するのが最適です。
これで、カスタムJavaScript検証ルールを使用して、テキストフィールドにリアルタイムキーワードブロックリストを追加する方法を学びました。
フォームフィールドに基づいて、フォームの送信ボタンを条件付きで表示または非表示にしたいですか？送信ボタンを条件付きで表示する方法のチュートリアルをご覧ください。