Riepilogo AI
Desideri bloccare parole specifiche in un campo di testo a riga singola prima che un utente invii il tuo modulo? Per impostazione predefinita, la protezione antispam di WPForms si attiva quando il modulo viene inviato. Con un piccolo snippet JavaScript, puoi aggiungere un elenco di parole chiave bloccate in tempo reale che mostra un messaggio di errore non appena viene inserita una parola soggetta a restrizioni.
In questo tutorial vi mostreremo come utilizzare wpforms_wp_footer_end e jQuery Validate per aggiungere la convalida delle parole chiave lato client che funziona in modo simile a una maschera di input.
Creazione del modulo
Per prima cosa, crea il tuo modulo e aggiungi un campo di testo a riga singola che desideri proteggere con la lista di parole chiave. Puoi anche aggiungere qualsiasi altro campo necessario per il tuo modulo.
Se hai bisogno di aiuto con questo passaggio, consulta la nostra guida sulla creazione del tuo primo modulo in WPForms.
Prendi nota di:
- L'ID del modulo
- L'ID campo del campo di testo a riga singola che desideri convalidare
Questi valori saranno necessari per configurare lo snippet riportato di seguito.
Aggiunta dello snippet di codice
Per aggiungere la lista di parole chiave bloccate in tempo reale, usa il seguente snippet. Questo esempio stampa un piccolo blocco JavaScript nel footer del tuo sito usando il wpforms_wp_footer_end azione.
Se hai bisogno di aiuto per aggiungere codice personalizzato, consulta il nostro tutorial su come aggiungere PHP o JavaScript personalizzati a WPForms.
Una volta aggiunto e salvato questo codice, visita una pagina con il tuo modulo sul front-end e prova il campo Testo a riga singola digitando una delle parole bloccate.
Non appena viene rilevata una parola chiave soggetta a restrizioni, dovrebbe apparire un messaggio di convalida rosso sotto il campo, senza bisogno di inviare il modulo.
Personalizzazione dello Snippet
Per adattare questo esempio al tuo modulo, modifica la sezione di configurazione nella parte superiore dello script utilizzando i numeri di riga riportati nella schermata.
- ID modulo
Su linea 14:var targetFormID = 100; // Replace with your Form ID
Cambia100all'ID del modulo che contiene il campo Testo su riga singola. - ID campo
Su linea 15:var targetFieldID = 1; // Replace with your Field ID
Cambia1all'ID del campo Testo a riga singola che dovrebbe utilizzare il blocco di parole chiave. - Parole chiave bloccate
Su linea 16:var blockedWords = ['badword', 'spam', 'unwanted']; // List of keywords to block
Sostituisci le parole di esempio con l'elenco delle parole chiave che desideri bloccare. Puoi aggiungere o rimuovere elementi dall'array secondo necessità. - Messaggio di errore
Su linea 17:var customError = 'This content contains restricted keywords.';
Aggiorna il testo tra virgolette per modificare il messaggio che appare sotto il campo quando viene rilevata una parola chiave soggetta a restrizioni.
Domande frequenti
Di seguito abbiamo risposto ad alcune delle domande più frequenti sull'utilizzo di questo filtro personalizzato per parole chiave.
In che modo questo differisce dal filtro parole chiave integrato nella Protezione antispam e sicurezza?
Il filtro parole chiave integrato è configurato in Impostazioni » Protezione antispam e sicurezza e si applica a tutti i moduli e campi del sito quando il modulo viene inviato. Questo snippet si applica solo a un campo di testo a riga singola specifico in un modulo e mostra immediatamente il messaggio di errore mentre l'utente sta digitando.
Il filtro parole chiave standard è il metodo principale per bloccare le parole proibite in tutti i moduli e continuerà a funzionare anche se JavaScript è disabilitato.
Questo snippet è ideale come controllo aggiuntivo in tempo reale per campi importanti in cui si desidera un feedback immediato.
Ecco fatto. Ora hai imparato come aggiungere un elenco di parole chiave bloccate in tempo reale a un campo di testo a riga singola utilizzando una regola di convalida JavaScript personalizzata.
Desideri mostrare o nascondere in modo condizionale il pulsanteInviain un modulo in base a uno dei campi del modulo? Consulta il nostro tutorial suCome mostrare in modo condizionale il pulsante Invia.