Attenzione!

Questo articolo contiene codice PHP e CSS ed è destinato agli sviluppatori. Offriamo questo codice per cortesia, ma non forniamo supporto per personalizzazioni del codice o sviluppo di terze parti.

Per ulteriore assistenza, consulta il tutorial di WPBeginner su come aggiungere codice personalizzato e CSS personalizzato.

Chiudi

Come personalizzare gli stili del modello di email

Desideri personalizzare gli stili del modello di email per le tue notifiche via email? Dalla versione 1.8.5, WPForms offre molti stili di modello diversi tra cui scegliere per le notifiche via email. Puoi leggere di più su questi modelli consultando questo post di annuncio.

Tuttavia, se desideri estendere lo stile di questi modelli, questo tutorial ti guiderà nel modo migliore per ottenerlo.

Per impostazione predefinita, WPForms offre già la possibilità di modificare lo schema di colori di ciascuno dei modelli e di aggiungere un'immagine di intestazione. Per maggiori dettagli su come farlo, consulta questa documentazione.

Ogni modello, ad eccezione di Testo Semplice, ti darà l'opzione di impostare il tuo schema di colori e caricare un logo di intestazione. Naviga semplicemente nella dashboard di WordPress » WPForms » Impostazioni » Email per impostare le tue preferenze sul modello da utilizzare e personalizzare il design del modello.

Abbiamo ora aggiunto la nostra immagine di intestazione e impostato la nostra combinazione di colori tramite le Impostazioni del Template Email di WPForms

Creazione del tuo modulo

Per iniziare, dovrai creare il tuo modulo e aggiungere i tuoi campi. Se hai bisogno di aiuto nella creazione del tuo modulo, consulta questa documentazione.

inizia creando il tuo modulo e aggiungendo i tuoi campi

Cerchi il modello Legacy? Questo modello è stato ritirato con la versione 1.8.5, tuttavia puoi ancora abilitarlo se lo desideri. Se stai cercando questo modello di email, consulta questo tutorial.

Modificare i messaggi di posta elettronica utilizzando HTML

Se desideri aggiungere ulteriori personalizzazioni alle tue notifiche via email semplicemente mettendo in grassetto le etichette nel testo dell'email, puoi farlo facilmente modificando il tuo modulo e nella scheda Impostazioni » Notifiche all'interno del generatore di moduli, modifica il tuo campo Messaggio. Puoi sostituire {all_fields} nel tuo campo Messaggio con:

<b>Nome:</b> {field_id="0"}<br> <b>Email:</b> {field_id="1"}<br> <b>Messaggio:</b> {field_id="2"}

aggiungere HTML standard al tuo template di notifica email

Utilizziamo Smart Tag nel nostro campo Messaggio per costruire questa risposta. Per ulteriore aiuto sull'utilizzo dei campi del modulo completati come Smart Tag, consulta questo tutorial.

dopo aver modificato il grassetto del testo nel campo del messaggio di notifica email

Personalizzazione del modello di email

Se vuoi cambiare l'aspetto dei tuoi modelli di email WPForms ma trovi la codifica un po' intimidatoria, non preoccuparti! Esiste un modo semplice per farlo senza addentrarsi troppo nei dettagli tecnici.

Immagina i tuoi modelli di email come gli abiti che indossano i tuoi moduli quando inviano messaggi. Possiamo modificare questi abiti regolando i file del modello nel tuo child theme. Per maggiori informazioni su come creare un child theme, consulta questa utile guida!

Supponiamo che tu voglia dare un colore di sfondo diverso al modello Classic. Ecco cosa devi fare:

Vai all'armadio: Cerca il file classic-style.php in wp-content/plugins/wpforms/templates/emails/.

Copia e Incolla: Prendi quel file e mettilo nella cartella wpforms/emails/ del tuo tema child. È come creare un armadio personalizzato per i tuoi moduli. Dovrai creare questa cartella nel tuo tema child.

Dai Stile: Apri il file che hai appena incollato e puoi aggiungere gli stili che desideri. Pensala come la scelta degli accessori per l'email del tuo modulo.

Ora, perché è fantastico? Qualsiasi stile aggiungerai verrà magicamente trasformato in CSS inline per ogni elemento dell'email. Questo assicura che i tuoi stili abbiano un bell'aspetto su diverse piattaforme e dispositivi di posta elettronica.

Ma ecco un consiglio da professionista: evita di usare tag di stile nell'elemento head; potrebbero non funzionare bene ovunque. Per maggiori informazioni, puoi consultare questa risorsa.

Ricorda, questo metodo potrebbe non funzionare perfettamente per alcuni client di posta elettronica come Outlook e Windows Mail. Possono essere un po' schizzinosi nel riconoscere certi stili.

Se ti senti in vena e vuoi modificare altri template, ognuno ha il suo file unico nella directory wpforms/emails/. Basta copiare, incollare e dare stile! Per i template nella versione pro, trovali in wp-content/plugins/wpforms/pro/templates/emails/ e portali nella cartella email del tuo tema child.

Ecco fatto! Ora i tuoi moduli sono vestiti con stili che corrispondono al tuo gusto, senza bisogno di una laurea in programmazione. 🌟

Vuoi anche cambiare o rimuovere completamente il testo del piè di pagina? C'è un modo semplice per farlo con un piccolo snippet PHP. Dai un'occhiata allo snippet su Come Rimuovere o Modificare il Testo del Piè di Pagina delle Notifiche Email.