Aggiungere gli asterischi nei campi obbligatori del modulo di contatto Divi
Introduzione
Solitamente troviamo gli asterischi nei moduli di contatto per indicare quali sono i campi obbligatori. Una delle caratteristiche principali del modulo di contatto nel tema Divi è proprio l’assenza degli asterischi, ma non preoccuparti, è davvero facile aggiungerli! In questa breve guida, ti mostrerò come aggiungere gli asterischi nei campi obbligatori del modulo di contatto Divi.
1. Aggiungi una classe CSS personalizzata al modulo di contatto Divi
Il primo passaggio consiste nell’aggiungere una classe CSS personalizzata (selettore) al modulo di contatto Divi. Questo serve per segnalare il modulo corretto con il codice al fine di fare in modo che l’effetto desiderato venga applicato solo a questo determinato modulo. Questo selettore verrà nel codice Javascript che serve per attivare gli asterischi nel modulo di contatto, quindi fai attenzione copiarlo uguale.
Per aggiungere la classe CSS personalizzata, apri le impostazioni del modulo e vai alla scheda Avanzate. Vai all’interruttore ID & Classi CSS. Scrivi la classe “pa-contact-form-asterisks” nel campo di Categoria CSS del modulo di contatto.
2. Aggiungi lo snippet di codice Javascript personalizzato
Anche questo secondo passaggio è molto semplice. Dovrai aggiungere il codice Javascript personalizzato al tuo sito web. Quindi, copia il codice Javascript dal box sottostante e incollalo nel tuo sito Divi in Divi > Opzioni Tema > Integrazione > Aggiungi codice a < head > del tuo blog.
<script>
jQuery(document).ready(function(){
jQuery(".pa-contact-form-asterisks *").each(function(){
if(jQuery(this).attr('data-required_mark') == 'required' && !jQuery(this).hasClass('et_pb_contact_captcha')){
var x = jQuery(this).attr('placeholder');
var x = jQuery(this).attr('placeholder',x + ' * ');
}
});
});
</script>
Dopo aver aggiunto e salvato il codice, esci dall’amministrazione del tuo sito WordPress e ricarica la pagina del modulo sul frontend. Vedrai che tutti i campi del modulo Divi impostati su obbligatori ora avranno un asterisco.
Il codice verifica la presenza di qualsiasi campo all’interno del modulo di contatto con la classe personalizzata che ha l’attributo “richiesto” all’interno del codice. Questo attributo è visibile nel codice quando l’impostazione “Campo obbligatorio” è abilitata. Il codice Javascript avverte la presenza di questo “flag” e posiziona l’asterisco vicino al testo nei campi indicati come obbligatori.
3. Il metodo senza codici
Se non intendi ricorrere all’uso di un codice Javascript, puoi in alternativa inserire manualmente un asterisco affianco al testo all’interno del campo di inserimento. Questo è un metodo semplice, veloce e funziona!
Conclusione
Speriamo che questa breve guida ti abbia aiutato ad aggiungere gli asterischi nei campi obbligatori del modulo di contatto Divi. Se hai dubbi, domande o per qualsiasi richiesta, siamo a tua disposizione. Ciao, alla prossima!