Fügen Sie eine Echtzeit-Keyword-Sperrliste zu einem einzeiligen Textfeld hinzu.

Möchten Sie bestimmte Wörter in einem einzeiligen Textfeld blockieren, bevor ein Benutzer Ihr Formular absendet? Standardmäßig wird der Spamschutz von WPForms ausgeführt, wenn das Formular abgeschickt wird. Mit einem kleinen JavaScript-Snippet können Sie eine Echtzeit-Keyword-Blockliste hinzufügen, die eine Fehlermeldung anzeigt, sobald ein unzulässiges Wort eingegeben wird.

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

---

Erstellen des Formulars

Erstellen Sie zunächst 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 Textfelds, das Sie validieren möchten

Sie benötigen diese Werte, um das unten stehende Snippet zu konfigurieren.

Hinzufügen des Codeschnipsels

Um die Echtzeit-Keyword-Blockliste hinzuzufügen, verwenden Sie den folgenden Ausschnitt. Dieses Beispiel fügt einen kleinen JavaScript-Block in die Fußzeile Ihrer Website ein, indem es die wpforms_wp_footer_end Aktion.

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

Sobald dieser Code hinzugefügt und gespeichert ist, rufen Sie eine Seite mit Ihrem Formular im Frontend auf und testen Sie das Feld „Einzeiliger Text“, indem Sie eines der gesperrten Wörter eingeben.

Sobald ein eingeschränktes Schlüsselwort erkannt wird, sollte unter dem Feld eine rote Validierungsmeldung angezeigt werden, ohne dass das Formular abgeschickt werden muss.

Anpassen des Snippets

Um dieses Beispiel an Ihr Formular anzupassen, bearbeiten Sie den Konfigurationsabschnitt oben im Skript unter Verwendung der Zeilennummern aus dem Screenshot.

• Formular-ID
  Auf Zeile 14:
  var targetFormID = 100; // Replace with your Form ID
  Änderung 100 auf die ID des Formulars, das Ihr einzeiliges Textfeld enthält.
• Feld-ID
  Auf Zeile 15:
  var targetFieldID = 1; // Replace with your Field ID
  Änderung 1 auf die ID des einzeiligen Textfelds, das die Schlüsselwortliste verwenden soll.
• Blockierte Schlüsselwörter
  Auf Zeile 16:
  var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
  Ersetzen Sie die Beispielwörter durch die Liste der Schlüsselwörter, die Sie blockieren möchten. Sie können nach Bedarf Elemente zum Array hinzufügen oder daraus entfernen.
• Fehlermeldung
  Auf Zeile 17:
  var customError = 'This content contains restricted keywords.';
  Aktualisieren Sie den Text in Anführungszeichen, um die Meldung zu ändern, die unter dem Feld angezeigt wird, wenn ein eingeschränktes Schlüsselwort erkannt wird.

Häufig gestellte Fragen

Im Folgenden haben wir einige der wichtigsten Fragen zur Verwendung dieses benutzerdefinierten Keyword-Filters beantwortet.

Wie unterscheidet sich dies vom integrierten Schlüsselwortfilter in Spam Protection and Security?

Der integrierte Schlüsselwortfilter wird unter „Einstellungen“ » „Spamschutz und Sicherheit“ konfiguriert und gilt für alle Formulare und Felder auf Ihrer Website, wenn das Formular abgeschickt 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 wichtigste Methode, um unzulässige Wörter in allen Ihren Formularen zu blockieren, und funktioniert auch dann noch bei der Übermittlung, 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 war's schon. Sie haben nun gelernt, wie Sie mithilfe einer benutzerdefinierten JavaScript-Validierungsregel eine Echtzeit-Keyword-Sperrliste zu einem einzeiligen Textfeld hinzufügen können.

Möchten Sie die Schaltfläche„Senden“in einem Formular basierend auf einem Ihrer Formularfelder bedingt ein- oder ausblenden? Sehen Sie sich unser Tutorialzum bedingten Einblenden der Schaltfläche „Senden“ an.

Referenz Aktion

wpforms_wp_footer_end