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

¿Le gustaría bloquear palabras específicas en un campo de texto de una sola línea antes de que un usuario envíe su formulario? De forma predeterminada, la protección contra spam de WPForms se activa cuando se envía el formulario. Con un pequeño fragmento de código JavaScript, puede añadir una lista de palabras clave bloqueadas en tiempo real que muestra un mensaje de error tan pronto como se introduce una palabra restringida.

En este tutorial, le mostraremos cómo utilizar 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

En primer lugar, cree su formulario y añada un campo de texto de una sola línea que desee proteger con la lista de palabras clave. También puede añadir cualquier otro campo que necesite para su formulario.

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

Tenga en cuenta lo siguiente:

• El ID del formulario
• El ID de campo del campo de texto de una sola línea que desea validar.

Necesitarás estos valores al configurar el fragmento de código que aparece a continuación.

Añadir el fragmento de código

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

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

Una vez añadido y guardado este código, visite una página con su formulario en la interfaz y pruebe 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 utilizando los números de línea de la captura de pantalla.

• Formulario ID
  En línea 14:
  var targetFormID = 100; // Replace with your Form ID
  Cambiar 100 al ID del formulario que contiene el campo de texto de una sola línea.
• ID de campo
  En línea 15:
  var targetFieldID = 1; // Replace with your Field ID
  Cambiar 1 al ID del campo de texto de una sola línea que debe utilizar la lista de bloques de palabras clave.
• Palabras clave bloqueadas
  En línea 16:
  var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
  Reemplaza las palabras de ejemplo por la lista de palabras clave que deseas bloquear. Puedes añadir o eliminar elementos de la matriz según sea necesario.
• Mensaje de error
  En línea 17:
  var customError = 'This content contains restricted keywords.';
  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, respondemos 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 Configuración » Protección contra spam y seguridad y se aplica a todos los formularios y campos de su sitio web cuando se envía el formulario. Este fragmento de código solo se aplica a un campo de texto de una sola línea específico de un formulario y muestra el mensaje de error al instante mientras el usuario está escribiendo.

El filtro de palabras clave estándar es la forma principal de bloquear palabras prohibidas en todos tus formularios y seguirá funcionando en el envío incluso si JavaScript está desactivado.

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

Eso es todo. Ahora ya sabes cómo añadir una lista de palabras clave bloqueadas en tiempo real a un campo de texto de una sola línea utilizando una regla de validación JavaScript personalizada.

¿Desea mostrar u ocultar de forma condicional el botónEnviaren un formulario en función de uno de los campos del formulario? Consulte nuestro tutorial sobreCómo mostrar de forma condicional el botón Enviar.

Acción de referencia

wpforms_wp_footer_end