Panoramica
Si desidera disattivare i messaggi di errore di convalida, mantenendo però la rappresentazione visiva dell'errore?
Per impostazione predefinita, quando un campo non supera la convalida in un modulo, si vedrà un bordo intorno al campo, ma anche un testo con un'icona che spiega il fallimento della convalida. È possibile modificare facilmente il testo di questi controlli di validazione nelle impostazioni di WPForms. Per ulteriori informazioni su come modificare il testo, consultate questa utile guida.
Con un piccolo snippet CSS, è possibile nascondere facilmente il testo e l'icona che vengono visualizzati quando un campo obbligatorio non viene compilato, pur consentendo al campo di essere evidenziato in rosso, dando una rappresentazione visiva dell'errore. In questo tutorial, vi mostreremo il CSS necessario per disabilitare questi messaggi.
Aggiunta dello snippet
Per disabilitare il testo di errore, è sufficiente copiare e incollare questo snippet CSS nel sito.
Se avete bisogno di aiuto su come e dove aggiungere gli snippet CSS al vostro sito, consultate questa utile guida.
/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
display: none !important;
}
.wpforms-field-required ~ em, input.wpforms-error ~ em {
display: none !important;
}
Questo CSS disabilita tutti i messaggi di errore di convalida in WPForms per tutti i moduli. Rimarrà un bordo rosso intorno al campo, che fornirà una guida visiva al motivo per cui il modulo non è stato inviato, ma il messaggio di errore e l'icona non saranno più visibili.
Se si vuole puntare a un solo modulo, si deve usare questo CSS.
/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
display: none !important;
}
form#wpforms-form-3602 .wpforms-field-required ~ em, form#wpforms-form-3602 input.wpforms-error ~ em {
display: none;
}
È sufficiente modificare il valore -3602 nel CSS in modo che corrisponda all'ID del proprio modulo. Se avete bisogno di aiuto per trovare l'ID del vostro modulo, consultate questo tutorial.
E questo è tutto ciò che serve per disabilitare i messaggi di errore di validazione! Volete anche cambiare l'icona del campo obbligatorio che appare nei vostri moduli? Consultate il nostro tutorial su Come cambiare l'indicatore dei campi obbligatori.