Hinzufügen einer Echtzeit-Schlagwortsperrliste zu einem einzeiligen Textfeld

Möchten Sie bestimmte Wörter in einem Einzeiligen Textfeld blockieren, bevor ein Benutzer Ihr Formular absendet? Standardmäßig wird der Spam-Schutz von WPForms beim Absenden des Formulars ausgeführt. Mit einem kleinen JavaScript-Snippet können Sie eine Echtzeit-Blockliste für Schlüsselwörter hinzufügen, die eine Fehlermeldung anzeigt, sobald ein eingeschränktes Wort eingegeben wird.

In diesem Tutorial zeigen wir Ihnen, wie Sie wpforms_wp_footer_end und jQuery Validate verwenden, um eine clientseitige Schlüsselwortvalidierung hinzuzufügen, die sich ähnlich wie eine Eingabemaske verhält.

---

Erstellen des Formulars

Erstellen Sie zuerst Ihr Formular und fügen Sie ein Einzeiliges Textfeld hinzu, das Sie mit der Schlüsselwort-Blockliste schützen möchten. Sie können auch alle anderen Felder hinzufügen, die Sie für Ihr Formular benötigen.

Wenn Sie Hilfe bei diesem Schritt benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars in WPForms.

Beachten Sie:

• Die Formular-ID
• Die Feld-ID des Einzeiligen Textfeldes, das Sie validieren möchten

Sie benötigen diese Werte bei der Konfiguration des folgenden Snippets.

Hinzufügen des Code-Snippets

Um die Echtzeit-Blockliste für Schlüsselwörter hinzuzufügen, verwenden Sie das folgende Snippet. Dieses Beispiel gibt einen kleinen JavaScript-Block über die Aktion wpforms_wp_footer_end in Ihre Website-Fußzeile aus.

Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem Code benötigen, lesen Sie bitte unser Tutorial, wie Sie benutzerdefinierten PHP- oder JavaScript-Code zu WPForms hinzufügen.

Sobald dieser Code hinzugefügt und gespeichert wurde, besuchen Sie eine Seite mit Ihrem Formular im Frontend und testen Sie das Feld Einzeiliger Text, indem Sie eines der blockierten Wörter eingeben.

Sie sollten eine rote Validierungsnachricht unter dem Feld sehen, sobald ein eingeschränktes Schlüsselwort erkannt wird, ohne das Formular absenden zu müssen.

Anpassen des Snippets

Um dieses Beispiel an Ihr Formular anzupassen, bearbeiten Sie den Konfigurationsbereich am Anfang des Skripts anhand der Zeilennummern aus dem Screenshot.

• Formular-ID
  In Zeile 14:
  var targetFormID = 100; // Ersetzen Sie dies durch Ihre Formular-ID
  Ändern Sie 100 in die ID des Formulars, das Ihr Einzeiliges Textfeld enthält.
• Feld-ID
  In Zeile 15:
  var targetFieldID = 1; // Ersetzen Sie dies durch Ihre Feld-ID
  Ändern Sie 1 in die ID des Einzeiligen Textfeldes, das die Schlüsselwort-Blockliste verwenden soll.
• Blockierte Schlüsselwörter
  In Zeile 16:
  var blockedWords = ['badword', 'spam', 'unwanted']; // Liste der zu blockierenden Schlüsselwörter
  Ersetzen Sie die Beispielwörter durch die Liste der Schlüsselwörter, die Sie blockieren möchten. Sie können Elemente aus dem Array nach Bedarf hinzufügen oder entfernen.
• Fehlermeldung
  In Zeile 17:
  var customError = 'Dieser Inhalt enthält eingeschränkte Schlüsselwörter.';
  Aktualisieren Sie den Text in Anführungszeichen, um die Nachricht zu ändern, die unter dem Feld angezeigt wird, wenn ein eingeschränktes Schlüsselwort erkannt wird.

Häufig gestellte Fragen

Nachfolgend beantworten wir einige der häufigsten Fragen zur Verwendung dieses benutzerdefinierten Schlüsselwortfilters.

Wie unterscheidet sich dies vom integrierten Schlüsselwortfilter in Spam-Schutz und Sicherheit?

Der integrierte Schlüsselwortfilter wird unter Einstellungen » Spam-Schutz und Sicherheit konfiguriert und gilt für alle Formulare und Felder auf Ihrer Website, wenn das Formular übermittelt wird. Dieser Ausschnitt zielt nur auf ein bestimmtes einzeiliges Textfeld in einem Formular ab und zeigt die Fehlermeldung sofort an, während der Benutzer tippt.

Der Standard-Schlüsselwortfilter ist die Hauptmethode, um verbotene Wörter in all Ihren Formularen zu blockieren, und wird auch dann bei der Übermittlung ausgeführt, wenn JavaScript deaktiviert ist.

Dieser Ausschnitt eignet sich am besten als zusätzliche Echtzeitprüfung für wichtige Felder, bei denen Sie sofortiges Feedback wünschen.

Das ist alles. Sie haben jetzt gelernt, wie Sie eine Echtzeit-Schlüsselwort-Blockierliste zu einem einzeiligen Textfeld mit einer benutzerdefinierten JavaScript-Validierungsregel hinzufügen.

Möchten Sie die Schaltfläche Senden eines Formulars basierend auf einem Ihrer Formularfelder bedingt ein- oder ausblenden? Sehen Sie sich unser Tutorial an: So blenden Sie die Schaltfläche „Senden“ bedingt ein.

Referenzaktion

wpforms_wp_footer_end