Add a Real Time Keyword Blocklist to a Single Line Text Field

Would you like to block specific words in a Single Line Text field before a user submits your form? By default, WPForms spam protection runs when the form is submitted. With a small JavaScript snippet, you can add a real time keyword blocklist that shows an error message as soon as a restricted word is entered.

In this tutorial, we will show you how to use wpforms_wp_footer_end and jQuery Validate to add client side keyword validation that behaves similarly to an input mask.

---

Creating the Form

First, create your form and add a Single Line Text field that you want to protect with the keyword blocklist. You can also add any other fields you need for your form.

If you need help with this step, please see our guide on creating your first form in WPForms.

Make note of:

• The Form ID
• The Field ID of the Single Line Text field you want to validate

You will need these values when configuring the snippet below.

Adding the Code Snippet

To add the real time keyword blocklist, use the following snippet. This example prints a small JavaScript block into your site footer using the wpforms_wp_footer_end action.

If you need help adding custom code, please see our tutorial on how to add custom PHP or JavaScript to WPForms.

Once this code is added and saved, visit a page with your form on the front end and test the Single Line Text field by typing one of the blocked words.

You should see a red validation message under the field as soon as a restricted keyword is detected, without needing to submit the form.

Customizing the Snippet

To adapt this example to your form, edit the configuration section at the top of the script using the line numbers from the screenshot.

• Form ID
  On line 14:
  var targetFormID = 100; // Replace with your Form ID
  Change 100 to the ID of the form that contains your Single Line Text field.
• Field ID
  On line 15:
  var targetFieldID = 1; // Replace with your Field ID
  Change 1 to the ID of the Single Line Text field that should use the keyword blocklist.
• Blocked keywords
  On line 16:
  var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
  Replace the example words with the list of keywords you want to block. You can add or remove items from the array as needed.
• Error message
  On line 17:
  var customError = 'This content contains restricted keywords.';
  Update the text in quotes to change the message that appears under the field when a restricted keyword is detected.

Frequently Asked Questions

Below, we’ve answered some of the top questions about using this custom keyword filter.

How is this different from the built in keyword filter in Spam Protection and Security?

The built in keyword filter is configured under Settings » Spam Protection and Security and applies to all forms and fields on your site when the form is submitted. This snippet only targets one specific Single Line Text field on one form and shows the error message instantly while the user is typing.

The standard keyword filter is the main way to block prohibited words across all your forms and will still run on submission even if JavaScript is disabled.

This snippet is best used as an extra, real time check for important fields where you want immediate feedback.

That’s it. You’ve now learned how to add a real time keyword blocklist to a Single Line Text field using a custom JavaScript validation rule.

Would you like to conditionally show or hide the Submit button on a form based on one of your form fields? Check out our tutorial on How to Conditionally Show the Submit Button.

Reference Action

wpforms_wp_footer_end