Come mostrare il titolo del post o della pagina nelle email di Contact Form 7

Ti è mai capitato di voler mostrare, all’interno dell’email inviata tramite il form di contatto sul tuo sito web, il titolo del post o della pagina da cui è partita la richiesta?

Se usi WordPress, con molte probabilità avrai utilizzato per costruire i tuoi moduli di contatto Contact Form 7, plugin gratuito tra i più utilizzati dagli utenti, con oltre 10 milioni di installazioni attive.

In questa guida, ti spiego come mostrare il titolo del post o della pagina nelle email di Contact Form 7 automaticamente, anche se il modulo è inserito in sidebar o widget. Ma prima scopriamo qualcosa in più su CF7.

Che cos’è Contact Form 7 (CF7) e come usarlo su WordPress

Come anticipato, Contact Form 7 è un plugin di WordPress utilizzato di frequente per la creazione di moduli di contatto all’interno del progetto web. Totalmente gratuito, offre numerose opzioni di personalizzazione, sia per quanto riguarda i campi da compilare sia per quanto riguarda l’invio dei contenuti compilati.

Di base, CF7 fornisce due diversi tipi di tag:

• uno per il modulo, chiamato form-tags,
• l’altro per il modello dell’email, chiamato mail-tags.

La sintassi dei due tipi di tag, anche se fortemente legati tra di loro, è diversa.

Ti faccio un esempio. Nel modulo di contatto utilizziamo un campo testo: il codice, come vedrai di seguito, sarà “tipo di tag” + “nome assegnato”.

[text tuo-nome]

Nel modello dell’e-mail, invece, utilizzeremo solo [tuo-nome].

Ma quali sono i tag disponibili in CF7? Scopriamolo insieme.

Tag disponibili in CF7

I form-tag più utilizzati in Contact Form 7 includono:

• Campi di testo ( text, email, tel, url, textarea )
• Campi numerici ( number, range )
• Campo data ( date )
• Caselle di controllo, pulsanti di scelta e menu ( checkbox, radio, select )
• Campo di caricamento file ( file )
• Quiz ( quiz )
• Casella di controllo di accettazione ( acceptance )
• Pulsante Invia ( submit ).

Durante la creazione del modulo, questi tag possono essere combinati con più opzioni e, se necessario, resi obbligatori semplicemente aggiungendo un asterisco * alla fine del tag.

[text*]

Ogni form-tag in Contact Form 7 può essere composto da diverse parti:

• tipo di elemento (text, number, checkbox ecc)
• nome (nome, cognome, telefono, email ecc)
• opzioni disponibili solo per alcuni tipi di tag
• valore predefinito, che a volte può essere tramutato in un placeholder e inserito per indicare all’utente cosa scrivere in quel determinato campo

Ecco un altro esempio:

[text tuo-nome class:class minlength:20 maxlength:60 "il tuo nome"]

Quindi:

Campo di testo +  nome + classe per variazioni tramite css + lunghezza minima e massima del contenuto + valore (scrivibile in forma di placeholder così: placeholder “il tuo nome”).

In pratica, combinando queste opzioni, si ottiene un campo chiaro, guidato e facilmente adattabile allo stile del sito. Ma, parliamo adesso dei tag utilizzabili nella mail di CF7

Tag utilizzabili nella mail di CF7

I mail-tag in Contact Form 7 sono molto semplici da usare, perché contengono soltanto il nome del form-tag che abbiamo creato nel modulo.

Ad esempio, se nel form abbiamo inserito una tendina per far scegliere i nostri servizi:

Se nel form, ad esempio, abbiamo inserito una tendina per far visualizzare i nostri servizi [select servizi “Siti Web” “Social Media” “Campagne Ads”] nel nostro form mail non faremo altro che scrivere [servizi]. All’invio del form questo campo verrà popolato con la scelta effettuata dall’utente nella tendina.

Ma in alcuni casi riportare i semplici campi del form può non bastare. Necessitiamo di inviare maggiori informazioni, come il titolo del post/pagina, l’url di provenienza, l’ip del mittente e per inviare questo tipo di informazioni ci vengono incontro degli Special Mail-Tags. Scopriamo cosa sono.

Special Mail-Tags

Oltre ai normali mail-tag, Contact Form 7 offre i cosiddetti Special Mail-Tags, che servono a inserire automaticamente informazioni aggiuntive nella mail senza bisogno di creare campi appositi nel modulo. Ad esempio:

• [_post_name]— Questo tag visualizza il nome (slug) del post,
• [_post_title]— Questo tag visualizza il titolo del post,
• [_post_url]— Questo tag viene visualizza l’URL del permalink del post.

Spesso utilizzo i Special Mail-Tags in combinazione per mostrare direttamente nella mail informazioni sul post o sulla pagina da cui l’utente invia il modulo. Ad esempio:
Titolo Pagina: <a href=”[_post_url]”>[_post_title]</a>

È importante però ricordare che i tag del tipo [_post_*] funzionano solo quando il modulo di contatto è inserito direttamente nel contenuto del post. Se invece il modulo si trova in una posizione esterna, come un widget nella barra laterale, questi tag restituiranno un testo vuoto.

Un caso comune di questa situazione è quando si ha un’area news o un blog e si inserisce un “form di contatto rapido” nella colonna laterale. In questo scenario il modulo è utile per catturare l’utente interessato all’argomento, ma i tag [_post_*] non possono essere utilizzati perché non sono collegati a uno specifico post.

Attraverso questa guida ti spiego come risolvere il problema.

Come mostrare il titolo del post o della pagina nelle email di Contact Form 7

Per far visualizzare il titolo del nostro post o della nostra pagina all’interno della e-mail possiamo utilizzare del codice JS da inserire all’interno del file functions.php del nostro tema child (mi raccomando fai sempre un backup prima di modificare i file!).

Ecco i passaggi:

1) crea un Form-Tag campo nascosto ed inseriscilo nel tuo modulo di contatto dopo il pulsante di invio:

[hidden page_title id:page_title]

2) aggiungi una funzione al tuo file functions.php, in grado di richiamare il titolo della pagina e di memorizzarlo:

function cf7_add_post_title_script() {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
let titleField = document.getElementById("page_title");
if (titleField) {
// cerca il titolo principale del post
let postTitle = document.querySelector("h1.entry-title");
if (postTitle) {
titleField.value = postTitle.innerText;
} else {
// fallback: titolo della scheda browser
titleField.value = document.title;
}
}
});
</script>
<?php
}
add_action('wp_footer', 'cf7_add_post_title_script');

3) inserisci il tag-mail all’interno del template e-mail, nella posizione in cui vuoi che appaia una volta che il messaggio viene recapitato e salva:

Titolo del post: [page_title]

Conclusione

Se tutto è stato configurato correttamente, con queste poche righe di codice, quando un utente compilerà il modulo realizzato con Contact Form 7 e inserito tramite widget nella colonna della tua area news, il form sarà in grado di memorizzare nel campo nascosto il titolo della news corrente e inviarlo automaticamente nella mail.

In questo modo, puoi catturare informazioni preziose sul contesto dell’invio senza richiedere all’utente di inserirle manualmente, rendendo il modulo più intuitivo e utile per la gestione dei contatti.