Riassunto AI
Vuoi bloccare parole specifiche in un campo Testo a riga singola prima che un utente invii il tuo modulo? Per impostazione predefinita, la protezione antispam di WPForms viene eseguita al momento dell'invio del modulo. Con un piccolo snippet JavaScript, puoi aggiungere una lista di parole chiave bloccate in tempo reale che mostra un messaggio di errore non appena viene inserita una parola non consentita.
In questo tutorial, ti mostreremo come utilizzare wpforms_wp_footer_end e jQuery Validate per aggiungere la validazione delle parole chiave lato client che si comporta in modo simile a una maschera di input.
Creazione del modulo
Innanzitutto, crea il tuo modulo e aggiungi un campo Testo a riga singola che desideri proteggere con la lista di parole chiave bloccate. Puoi anche aggiungere altri campi necessari per il tuo modulo.
Se hai bisogno di aiuto con questo passaggio, consulta la nostra guida su come creare il tuo primo modulo in WPForms.
Prendi nota di:
- Il Modulo ID
- Il Campo ID del campo Testo a riga singola che desideri convalidare
Avrai bisogno di questi valori quando configuri lo snippet seguente.
Aggiunta dello snippet di codice
Per aggiungere la lista di parole chiave bloccate in tempo reale, utilizza lo snippet seguente. Questo esempio stampa un piccolo blocco JavaScript nel footer del tuo sito utilizzando l'azione wpforms_wp_footer_end.
Se hai bisogno di aiuto per aggiungere codice personalizzato, consulta il nostro tutorial su come aggiungere PHP o JavaScript personalizzato a WPForms.
Una volta aggiunto e salvato questo codice, visita una pagina con il tuo modulo sul frontend e testa il campo Testo a riga singola digitando una delle parole bloccate.
Dovresti vedere un messaggio di validazione rosso sotto il campo non appena viene rilevata una parola chiave non consentita, senza dover inviare il modulo.
Personalizzazione dello snippet
Per adattare questo esempio al tuo modulo, modifica la sezione di configurazione in cima allo script utilizzando i numeri di riga dello screenshot.
- Modulo ID
Alla riga 14:var targetFormID = 100; // Sostituisci con il tuo Modulo ID
Cambia100con l'ID del modulo che contiene il tuo campo Testo a riga singola. - Campo ID
Alla riga 15:var targetFieldID = 1; // Sostituisci con il tuo Campo ID
Cambia1con l'ID del campo Testo a riga singola che dovrebbe utilizzare la lista di parole chiave bloccate. - Parole chiave bloccate
Alla riga 16:var blockedWords = ['parolaccia', 'spam', 'indesiderato']; // Elenco delle parole chiave da bloccare
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
Alla riga 17:var customError = 'Questo contenuto contiene parole chiave riservate.';
Aggiorna il testo tra virgolette per modificare il messaggio che appare sotto il campo quando viene rilevata una parola chiave riservata.
Domande frequenti
Di seguito, abbiamo risposto ad alcune delle domande più frequenti sull'utilizzo di questo filtro personalizzato per parole chiave.
In cosa differisce dal filtro parole chiave integrato in 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 tuo sito quando il modulo viene inviato. Questo snippet prende di mira solo un campo di testo a riga singola specifico su un modulo e mostra il messaggio di errore istantaneamente mentre l'utente digita.
Il filtro parole chiave standard è il modo principale per bloccare parole proibite su tutti i tuoi moduli e verrà comunque eseguito alla sottomissione anche se JavaScript è disabilitato.
Questo snippet è meglio utilizzarlo come controllo aggiuntivo in tempo reale per campi importanti in cui si desidera un feedback immediato.
Ecco fatto. Ora hai imparato come aggiungere una lista di blocco parole chiave in tempo reale a un campo di testo a riga singola utilizzando una regola di convalida JavaScript personalizzata.
Vuoi mostrare o nascondere condizionalmente il pulsante Invia su un modulo in base a uno dei tuoi campi modulo? Dai un'occhiata al nostro tutorial su Come mostrare condizionalmente il pulsante Invia.