Contact Form 7 è uno dei plugin più utilizzati per la gestione dei moduli in WordPress. È semplice, flessibile e permette di personalizzare facilmente i campi del form.
Ci sono però situazioni in cui abbiamo bisogno di intervenire non sui singoli campi, ma sul tag HTML <form> generato direttamente da Contact Form 7.
Un caso abbastanza comune è la necessità di aggiungere un attributo id:
<form id="form-contatti">
Può servire, ad esempio, per:
- identificare in modo univoco il modulo tramite JavaScript;
- creare regole CSS specifiche;
- integrare librerie esterne;
- configurare tracciamenti tramite Google Tag Manager;
- intercettare eventi relativi a uno specifico form;
- integrare il modulo con script o servizi di terze parti.
Vediamo quindi qual è il problema e come risolverlo senza modificare direttamente Contact Form 7.
Di cosa parlerò in questa pagina
Il problema: il tag <form> non è nel template CF7
Quando creiamo un modulo con Contact Form 7 possiamo scrivere qualcosa del genere:
[text* your-name]
[email* your-email]
[submit "Invia"]
Contact Form 7 utilizza queste informazioni per generare il markup del modulo.
Il problema è che il vero elemento HTML:
<form>
non fa parte del contenuto che possiamo modificare dall’editor del modulo.
Il tag viene infatti generato direttamente dal plugin.
Non possiamo quindi semplicemente modificare il form inserendo:
<form id="form-contatti">
nell’editor di Contact Form 7.
Fortunatamente non è necessario modificare il plugin.
La soluzione: il filtro wpcf7_form_attributes
Contact Form 7 mette a disposizione il filtro:
wpcf7_form_attributes
che permette di modificare gli attributi HTML del tag <form> prima che questo venga generato.
Possiamo quindi aggiungere il nostro ID con poche righe di PHP:
add_filter( 'wpcf7_form_attributes', function( $atts ) {
$atts['id'] = 'form-contatti';
return $atts;
} );
Il risultato sarà un markup simile a questo:
<form id="form-contatti" class="wpcf7-form init" ...>
In questo modo abbiamo aggiunto il nostro attributo senza modificare nessun file di Contact Form 7.
Attenzione: così modifichiamo tutti i moduli
La soluzione precedente va bene se sul sito abbiamo un solo modulo o se, per qualche motivo, vogliamo assegnare quell’ID a tutti i form.
Normalmente però un sito WordPress contiene diversi moduli Contact Form 7.
Potremmo avere:
- modulo contatti;
- richiesta preventivo;
- iscrizione newsletter;
- richiesta informazioni prodotto;
- form di assistenza.
Assegnare lo stesso ID a tutti sarebbe sbagliato anche dal punto di vista HTML, perché un id dovrebbe identificare un solo elemento nella pagina.
Conviene quindi limitare la modifica al modulo che ci interessa.
Aggiungere l’ID solamente a uno specifico Contact Form 7
Possiamo recuperare l’oggetto del form attualmente elaborato da CF7 e verificarne l’ID.
Una soluzione più robusta è questa:
add_filter( 'wpcf7_form_attributes', function( $atts ) {
$contact_form = WPCF7_ContactForm::get_current();
if ( ! $contact_form ) {
return $atts;
}
if ( (int) $contact_form->id() === 123 ) {
$atts['id'] = 'form-contatti';
}
return $atts;
} );
Naturalmente dobbiamo sostituire:
123
con l’ID reale del nostro modulo Contact Form 7.
E possiamo sostituire:
form-contatti
con l’ID HTML che vogliamo utilizzare.
Quindi, ad esempio:
if ( (int) $contact_form->id() === 456 ) {
$atts['id'] = 'richiesta-preventivo';
}
produrrà:
<form id="richiesta-preventivo" ...>
solamente per il modulo CF7 con ID 456.
Dove inserire il codice
Il codice può essere inserito nel file:
functions.php
del child theme utilizzato dal sito.
Una soluzione ancora migliore, soprattutto se la personalizzazione ha una funzione tecnica e non grafica, è inserirlo in un piccolo plugin custom.
In questo modo la personalizzazione non dipende dal tema utilizzato dal sito e continuerà a funzionare anche in caso di cambio del tema.
Gestire più moduli con ID differenti
Lo stesso principio può essere utilizzato per assegnare ID diversi a più moduli.
Per esempio:
add_filter( 'wpcf7_form_attributes', function( $atts ) {
$contact_form = WPCF7_ContactForm::get_current();
if ( ! $contact_form ) {
return $atts;
}
$form_id = (int) $contact_form->id();
switch ( $form_id ) {
case 123:
$atts['id'] = 'form-contatti';
break;
case 456:
$atts['id'] = 'form-preventivo';
break;
case 789:
$atts['id'] = 'form-newsletter';
break;
}
return $atts;
} );
Avremo quindi tre form facilmente identificabili:
<form id="form-contatti">
<form id="form-preventivo">
<form id="form-newsletter">
Questa soluzione diventa particolarmente comoda quando sul sito sono presenti integrazioni JavaScript o configurazioni di tracking differenti per ogni modulo.
Perché non modificare direttamente Contact Form 7
Tecnicamente sarebbe possibile intervenire sul codice del plugin per cambiare il markup generato.
È però una soluzione da evitare.
Alla prima installazione di un aggiornamento di Contact Form 7, infatti, la modifica potrebbe essere sovrascritta.
Utilizzando invece:
add_filter( 'wpcf7_form_attributes', ... );
stiamo sfruttando il sistema di hook di WordPress e possiamo mantenere separata la nostra personalizzazione dal codice del plugin.
È una soluzione più pulita, manutenibile e soprattutto aggiornabile.
E se mi servisse solo per JavaScript?
Esiste anche una soluzione lato JavaScript:
document.querySelector('.wpcf7-form').id = 'form-contatti';
Oppure, identificando una specifica istanza di CF7:
document
.querySelector('.wpcf7-form')
?.setAttribute('id', 'form-contatti');
Può essere utile in casi particolari, ma quando abbiamo la possibilità di intervenire sul codice WordPress è generalmente preferibile generare fin dall’inizio il markup corretto lato server.
In altre parole: se l’elemento deve avere un ID, tanto vale che nasca già con quell’ID invece di aspettare JavaScript per appiccicarglielo dopo.
Un piccolo intervento che semplifica molte integrazioni
Aggiungere un ID al <form> di Contact Form 7 sembra una modifica banale, ma può diventare molto utile quando dobbiamo integrare WordPress con sistemi esterni.
Una volta ottenuto:
<form id="form-contatti">
possiamo identificare con precisione quel modulo tramite CSS, JavaScript, Google Tag Manager o altre librerie, senza utilizzare selettori fragili o dipendenti dalla struttura HTML della pagina.
Il punto importante è soprattutto non modificare direttamente Contact Form 7.
Il filtro wpcf7_form_attributes ci permette di ottenere lo stesso risultato attraverso le API messe a disposizione dal plugin, mantenendo il codice ordinato e molto più resistente agli aggiornamenti futuri.
Se ti serve effettuare delle modifiche al tuo sito WordPress, parliamone insieme.
