Résumé de l'IA
Souhaitez-vous bloquer certains mots dans un champ de texte à ligne unique avant qu'un utilisateur ne soumette votre formulaire ? Par défaut, la protection anti-spam de WPForms s'active lorsque le formulaire est soumis. À l'aide d'un petit extrait de code JavaScript, vous pouvez ajouter une liste de mots-clés bloqué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 des mots-clés côté client qui fonctionne de manière similaire à un masque de saisie.
Création du formulaire
Commencez par créer votre formulaire et ajoutez un champ Texte à ligne unique que vous souhaitez protéger à l'aide de la liste de mots-clés. Vous pouvez également ajouter tout autre champ nécessaire à 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 bien :
- L'identifiant du formulaire
- L'ID du champ Texte à ligne unique que vous souhaitez valider
Vous aurez besoin de ces valeurs pour configurer l'extrait ci-dessous.
Ajout de l'extrait de code
Pour ajouter la liste de mots-clés bloqués en temps réel, utilisez l'extrait de code suivant. Cet exemple affiche un petit bloc JavaScript dans le pied de page de votre site à l'aide de la balise wpforms_wp_footer_end action.
Si vous avez besoin d'aide pour ajouter du code personnalisé, veuillez consulter notre tutoriel sur la manière d'ajouter du code PHP ou JavaScript personnalisé à WPForms.
Une fois ce code ajouté et enregistré, rendez-vous sur une page contenant votre formulaire et testez le champ Texte à ligne unique en saisissant l'un des mots bloqués.
Un message de validation rouge devrait s'afficher sous le champ dès qu'un mot-clé restreint est détecté, sans qu'il soit nécessaire 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 indiqués dans la capture d'écran.
- ID du formulaire
Sur ligne 14:var targetFormID = 100; // Replace with your Form ID
Changement100à l'ID du formulaire qui contient votre champ Texte à ligne unique. - ID du champ
Sur ligne 15:var targetFieldID = 1; // Replace with your Field ID
Changement1à l'ID du champ Texte à ligne unique qui doit utiliser le mot-clé blocklist. - Mots-clés bloqués
Sur ligne 16:var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
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 ligne 17:var customError = 'This content contains restricted keywords.';
Mettez à jour le texte entre guillemets pour modifier le message qui s'affiche 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 cela diffère-t-il du filtre de mots-clés intégré dans la protection contre le 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 de code ne cible qu'un champ de texte à ligne unique 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 dans tous vos formulaires et continuera de fonctionner lors de la soumission, même si JavaScript est désactivé.
Cet extrait de code est particulièrement utile comme vérification supplémentaire en temps réel pour les champs importants pour lesquels vous souhaitez obtenir un retour immédiat.
C'est tout. Vous savez désormais comment ajouter une liste noire de mots-clés en temps réel à un champ de texte à ligne unique à l'aide d'une règle de validation JavaScript personnalisée.
Souhaitez-vous afficher ou masquer de manière conditionnelle le bouton« Soumettre» d'un formulaire en fonction d'un de ses champs ? Consultez notre tutoriel intitulé «Comment afficher le bouton « Soumettre » de manière conditionnelle ».