Ajouter une liste de mots bloqués en temps réel à un champ de texte sur une seule ligne

Souhaitez-vous bloquer des mots spécifiques dans un champ Texte sur une seule ligne avant qu'un utilisateur ne soumette votre formulaire ? Par défaut, la protection anti-spam de WPForms s'exécute lors de la soumission du formulaire. Avec un petit extrait de code JavaScript, vous pouvez ajouter une liste de mots-clés en temps réel qui affiche un message d'erreur dès qu'un mot restreint est saisi.

Dans ce tutoriel, nous vous montrerons comment utiliser wpforms_wp_footer_end et jQuery Validate pour ajouter une validation de mots-clés côté client qui se comporte de manière similaire à un masque de saisie.

---

Création du formulaire

Tout d'abord, créez votre formulaire et ajoutez un champ Texte sur une seule ligne que vous souhaitez protéger avec la liste de mots-clés. Vous pouvez également ajouter tous les autres champs dont vous avez besoin pour votre formulaire.

Si vous avez besoin d'aide pour cette étape, veuillez consulter notre guide sur la création de votre premier formulaire dans WPForms.

Notez :

• L'ID du formulaire
• L'ID du champ du champ Texte sur une seule ligne que vous souhaitez valider

Vous aurez besoin de ces valeurs lors de la configuration de l'extrait ci-dessous.

Ajout de l’extrait de code

Pour ajouter la liste de mots-clés en temps réel, utilisez l'extrait suivant. Cet exemple imprime un petit bloc JavaScript dans le pied de page de votre site en utilisant l'action wpforms_wp_footer_end.

Si vous avez besoin d'aide pour ajouter du code personnalisé, veuillez consulter notre tutoriel sur la façon d'ajouter du PHP ou du JavaScript personnalisé à WPForms.

Une fois ce code ajouté et enregistré, visitez une page avec votre formulaire sur le front-end et testez le champ Texte sur une seule ligne en tapant l'un des mots bloqués.

Vous devriez voir un message de validation rouge sous le champ dès qu'un mot-clé restreint est détecté, sans avoir besoin de soumettre le formulaire.

Personnalisation de l'extrait

Pour adapter cet exemple à votre formulaire, modifiez la section de configuration en haut du script en utilisant les numéros de ligne de la capture d'écran.

• ID du formulaire
  Sur la ligne 14 :
  var targetFormID = 100; // Remplacez par votre ID de formulaire
  Changez 100 par l'ID du formulaire qui contient votre champ Texte sur une seule ligne.
• ID du champ
  Sur la ligne 15 :
  var targetFieldID = 1; // Remplacez par votre ID de champ
  Changez 1 par l'ID du champ Texte sur une seule ligne qui doit utiliser la liste de mots-clés.
• Mots-clés bloqués
  Sur la ligne 16 :
  var blockedWords = ['badword', 'spam', 'unwanted']; // Liste des mots-clés à bloquer
  Remplacez les mots d'exemple par la liste des mots-clés que vous souhaitez bloquer. Vous pouvez ajouter ou supprimer des éléments du tableau selon vos besoins.
• Message d'erreur
  Sur la ligne 17 :
  var customError = 'Ce contenu contient des mots-clés restreints.';
  Mettez à jour le texte entre guillemets pour modifier le message qui apparaît sous le champ lorsqu'un mot-clé restreint est détecté.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes concernant l'utilisation de ce filtre de mots-clés personnalisé.

En quoi est-ce différent du filtre de mots-clés intégré dans la protection anti-spam et la sécurité ?

Le filtre de mots-clés intégré est configuré sous Paramètres » Protection contre le spam et sécurité et s'applique à tous les formulaires et champs de votre site lorsque le formulaire est soumis. Cet extrait cible uniquement un champ Texte d'une seule ligne spécifique sur un formulaire et affiche le message d'erreur instantanément pendant que l'utilisateur tape.

Le filtre de mots-clés standard est le principal moyen de bloquer les mots interdits sur tous vos formulaires et s'exécutera toujours à la soumission, même si JavaScript est désactivé.

Cet extrait est idéal comme vérification supplémentaire en temps réel pour les champs importants où vous souhaitez un retour immédiat.

C'est tout. Vous avez maintenant appris à ajouter une liste de blocage de mots-clés en temps réel à un champ Texte d'une seule ligne à l'aide d'une règle de validation JavaScript personnalisée.

Souhaitez-vous afficher ou masquer conditionnellement le bouton Soumettre d'un formulaire en fonction de l'un de vos champs de formulaire ? Consultez notre tutoriel sur Comment afficher conditionnellement le bouton Soumettre.

Action de référence

wpforms_wp_footer_end