Come personalizzare il messaggio email del form di Elementor
In questa guida vedremo, passo dopo passo, come personalizzare l’email di conferma che riceve l’utente quando ha compilato il nostro form di contatto; nello specifico andremo a presonalizzare l’oggetto della mail inserendo un campo dinamico ed il corpo della mail dove inseriremo un’immagine e del codice CSS per abbellire il messaggio.
Per ottenere questo abbiamo bisogno che il nostro form invii 2 messaggi, il primo a noi, come amministratori del sito che ci avvisa che un utente ha compilato il nostro form, ed il secondo che sarà un messaggio di conferma verso l’utente.
Il primo passaggio da fare è aggiungere l’Email 2 nel nostro form, per farlo, dal pannello amministrativo del form, dobbiamo selezionare “Azioni dopo l’invio”, cliccare sul simbolo “+” del campo “Aggiungi azione” e selezionare “Email 2”; ora nel pannello di controllo del nostro form è stata aggiunta la voce “Email 2” subito sotto alla voce “Email”.
Cliccando sulla voce Email 2 si aprirà il pannello del controllo per personalizzare il messaggio di conferma che riceverà l’utente e sarà dove andremo ad operare per modificarlo secondo le nostre necessità.
Personalizzare l'oggetto del messaggio con un campo dinamico
Per rendere il messaggio più amichevole verso chi lo riceve daremo un tocco di personalizzazione che non fa mai male, nello specifico inseriremo nell’oggetto il nome che l’utente ha scritto compilando il nostro form, per fare questo dovremo inserire un campo dinamico nell’oggetto del messaggio.
Faccio una piccola spiegazione per chi non fosse esperto di questo argomento ed è la prima volta che ha a che fare con i campi dinamici, in questo caso viene inteso come “campo dinamico” un campo che cambia in base al valore che l’utente ha inserito nel form.
In questo esempio utilizzeremo come campo dinamico il nome di chi ha compilato il form, quindi se il form è stato compilato da Franco il messaggio avrà come oggetto: “Grazie Franco per averci scritto” se il form fosse stato compilato da Gianni l’oggetto del nostro messaggio sarà: “Grazie Gianni per averci scritto”; fatta questa precisazione andiamo avanti con il tutorial per ottenere il risultato voluto.
Andiamo nel campo Nome del nostro form, clicliamo su “Avanzato” e copiamo il valore che troviamo nel campo “Shortcode” (in questo caso: [field id=”name”]), ora andiamo su Email 2, cancelliamo tutto quello che è presente dentro al campo Oggetto e scriviamo “Grazie per averci scritto”.
Inseriamo il campo dinamico nell’oggetto del messaggio inserendo tra le parole “Grazie” e “per” il nostro shortcode che abbiamo copiato in precedenza ottenendo: “Grazie [field id=”name”] per averci scritto”; in questa maniera l’oggetto del messaggio riporterà il nome che l’utente ha inserito nel campo “Nome” del nostro form.
Fate una prova e vedrete che se inserite il nome Gianni nel form l’oggetto della mail che riceverete sarà: “Grazie Gianni per averci scritto”.
Ora dobbiamo fare in modo che il messaggio venga inviato alla casella postale dell’utente e non all’indirizzo mail dell’amministratore del sito; nulla di più semplice, basta andare nel pannello di controllo del form -> Campi modulo -> Email -> Avanzato -> Copiare il valore presente in Shortcode (in questo caso: [field id=”email”]).
Ora andiamo in “Email 2”, cancelliamo l’indirizzo mail dell’amministratore presente nel campo “A” e copiamo al suo interno [field id=”email”] , così facendo il messaggio Email 2 ora verrà inviato alla mail che l’utente scriverà nel campo “email” del nostro form.
Personalizzare il corpo del messaggio
Il campo “Messaggio” presente in Email 2 ci permette di inserire al suo interno del codice HTML e CSS, con questo presupposto possiamo dare sfogo alla nostra creatività e personalizzare il corpo del messaggio che riceverà l’utente.
In questo esempio andremo a fare delle semplice modifiche per inserire una sezione con uno sfondo colorato, personalizzare la grandezza ed il colore del font ed inserire il campo dinamico del nome dell’utente.
Per questo esempio ho deciso di creare una sezione con lo sfondo blu scuro, dove il messaggio sarà scritto in bianco ed avrà una grandezza maggiore di quella di default.
Nello specifico dobbiamo inserire questo codice nel campo “Messaggio” di Email 2:
[code]
Abbiamo ricevuto il tuo messaggio e ti risponderemo il prima possibile 🙂
[all-fields]
[/code]
Inserire un'immagine nel corpo del messaggio
<div style="width: 600px; margin: auto;">
<div style="background: #001635; padding: 30px; color: white; font-size: 36px;">Ciao [field id="name"], grazie per averci scritto!</div>
<div style="background: #F9F9F9; padding: 30px; font-size: 20px;">Abbiamo ricevuto il tuo messaggio e ti risponderemo il prima possibile :)
</div>
[all-fields]
</div>
Ora inseriremo un’immagine nel corpo del messaggio dell’email, il procedimento è sempre lo stesso, per poterlo fare dobbiamo utilizzare del codice HTML che andrà scritto nel campo “Messaggio” di Email 2.
Dobbiamo creare un div dove al suo interno verrà indicata la fonte dell’immagine, per ottenere la fonte dell’immagine dobbiamo andare nella sezione “Media” del pannello di controllo di WP, selezionare l’immagine desiderata e copiare l’URL del file attraverso l’apposito pulsante “Copia l’URL negli appunti”.
Una volta che abbiamo copiato l’url dobbiamo inserirlo nel div HTML che abbiamo creato in precenza in questo modo:
<div><img decoding="async" src="https://www.robertomarinello.com/wp-content/uploads/2022/10/logo-reCAPTCHA.jpg" /></div>
In modo che ora il codice presente nel campo “Messaggio” di Email 2 sia questo:
<div style="width: 600px; margin: auto;">
<div style="background: #001635; padding: 30px; color: white; font-size: 36px;">Ciao [field id="name"], grazie per averci scritto!</div>
<div style="background: #F9F9F9; padding: 30px; font-size: 20px;">
Abbiamo ricevuto il tuo messaggio e ti risponderemo il prima possibile :)
[all-fields]
</div>
<div><img decoding="async" title="Logo Elementor" src="https://www.robertomarinello.com/wp-content/uploads/2022/11/banner-guide-tutorial-elementor.png" alt="Logo Elementor" /></div>
</div>
Conclusioni
Come avete potuto vedere da questa guida modificare il messaggio email che riceve l’utente che ha compilato il nostro form di Elementor è molto semplice, basta utilizzare gli shortcode per sfruttare i campi dinamici e personalizzare il messaggio ed una conoscenza base del codice HTML per poter abbellire il nostro messaggio.
L’inserimento di un’immagine, oltre ad arricchire l’aspetto grafico, ci permette di inserire dei banner promozionali o comunque delgi elementi che attirano maggiormente l’attenzione del lettore in confronto a del semplice testo.
Ora che hai terminato di leggere questa guida puoi testarne direttamente il funzionamento inserendo i tuoi dati nel form sottostante ed inviandoti un messaggio che sarà uguale all’esempio che abbiamo utilizzato.