Añadir una lista negra de palabras clave en tiempo real a un campo de texto de una sola línea

¿Te gustaría bloquear palabras específicas en un campo de Texto de una sola línea antes de que un usuario envíe tu formulario? Por defecto, la protección contra spam de WPForms se ejecuta cuando se envía el formulario. Con un pequeño fragmento de JavaScript, puedes añadir una lista de bloqueo de palabras clave en tiempo real que muestra un mensaje de error tan pronto como se introduce una palabra restringida.

En este tutorial, te mostraremos cómo usar wpforms_wp_footer_end y jQuery Validate para añadir validación de palabras clave del lado del cliente que se comporta de manera similar a una máscara de entrada.

---

Creación del formulario

Primero, crea tu formulario y añade un campo de Texto de una sola línea que quieras proteger con la lista de bloqueo de palabras clave. También puedes añadir cualquier otro campo que necesites para tu formulario.

Si necesitas ayuda con este paso, por favor consulta nuestra guía sobre cómo crear tu primer formulario en WPForms.

Toma nota de:

• El ID del formulario
• El ID del campo del campo de Texto de una sola línea que deseas validar

Necesitarás estos valores al configurar el fragmento a continuación.

Añadir el fragmento de código

Para añadir la lista de bloqueo de palabras clave en tiempo real, utiliza el siguiente fragmento. Este ejemplo imprime un pequeño bloque de JavaScript en el pie de página de tu sitio usando la acción wpforms_wp_footer_end.

Si necesitas ayuda para añadir código personalizado, por favor consulta nuestro tutorial sobre cómo añadir PHP o JavaScript personalizado a WPForms.

Una vez que este código se añada y se guarde, visita una página con tu formulario en el frontend y prueba el campo de Texto de una sola línea escribiendo una de las palabras bloqueadas.

Deberías ver un mensaje de validación rojo debajo del campo tan pronto como se detecte una palabra clave restringida, sin necesidad de enviar el formulario.

Personalización del fragmento

Para adaptar este ejemplo a tu formulario, edita la sección de configuración en la parte superior del script usando los números de línea de la captura de pantalla.

• ID del formulario
  En la línea 14:
  var targetFormID = 100; // Reemplaza con tu ID de formulario
  Cambia 100 por el ID del formulario que contiene tu campo de Texto de una sola línea.
• ID del campo
  En la línea 15:
  var targetFieldID = 1; // Reemplaza con tu ID de campo
  Cambia 1 por el ID del campo de Texto de una sola línea que debe usar la lista de bloqueo de palabras clave.
• Palabras clave bloqueadas
  En la línea 16:
  var blockedWords = ['palabramala', 'spam', 'no deseada']; // Lista de palabras clave a bloquear
  Reemplaza las palabras de ejemplo con la lista de palabras clave que deseas bloquear. Puedes añadir o eliminar elementos del array según sea necesario.
• Mensaje de error
  En la línea 17:
  var customError = 'Este contenido contiene palabras clave restringidas.';
  Actualiza el texto entre comillas para cambiar el mensaje que aparece debajo del campo cuando se detecta una palabra clave restringida.

Preguntas frecuentes

A continuación, hemos respondido a algunas de las preguntas más frecuentes sobre el uso de este filtro de palabras clave personalizado.

¿En qué se diferencia esto del filtro de palabras clave integrado en Protección contra spam y seguridad?

El filtro de palabras clave integrado se configura en Ajustes » Protección contra spam y seguridad y se aplica a todos los formularios y campos de tu sitio cuando se envía el formulario. Este fragmento solo se dirige a un campo de Texto de una sola línea específico en un formulario y muestra el mensaje de error al instante mientras el usuario escribe.

El filtro de palabras clave estándar es la forma principal de bloquear palabras prohibidas en todos tus formularios y se ejecutará al enviar, incluso si JavaScript está deshabilitado.

Este fragmento se utiliza mejor como una comprobación adicional en tiempo real para campos importantes en los que deseas una retroalimentación inmediata.

Eso es todo. Ahora has aprendido a añadir una lista de bloqueo de palabras clave en tiempo real a un campo de Texto de una sola línea utilizando una regla de validación JavaScript personalizada.

¿Te gustaría mostrar u ocultar condicionalmente el botón Enviar de un formulario basándote en uno de tus campos? Echa un vistazo a nuestro tutorial sobre Cómo mostrar el botón de envío condicionalmente.

Acción de referencia

wpforms_wp_footer_end