Contact Form 7 è forse il plugin più utilizzato su WordPress quando si ha bisogno creare form di contatto. Le ragioni sono da ricercare nelle sue caratteristiche tecniche: anche se molto spartano per chi non conosce il codice, è gratuito da sempre ed in realtà sotto la sua leggerezza si nasconde un plugin molto potente, capace di collegarsi ai più importanti CRM, garantire alti standard di sicurezza e grande personalizzazione.
Contact Form 7 permette di fare infatti di fare tantissime cose: indirettamente, tramite l’uso di appositi addon, può essere espanso esattamente come WordPress con i plugin, ad esempio permettendo di creare un bottone PayPal, o un form complesso con campi condizionali; direttamente, integrando sia un sistema di captcha a quiz, sia avvalendosi di addon specifici, come Really Simple Captcha.
Contact Form 7: captcha integrati e pagine in cache
Molti probabilmente non ne sono a conoscenza, tuttavia uno dei “problemi” di Contact Form 7 risiede nei captcha integrati – proprio Quiz e Really Simple Captcha – quando si usa un sistema di cache, ad esempio W3 Total Cache, Autoptimize oppure WP Super Cache fra gli altri.
Quando usiamo un sistema di cache, stiamo salvando una copia statica delle nostre pagine dentro una directory specifica: quando l’utente visiterà il sito web, verrà inviata al browser questa copia, evitando quindi di doverla calcolare “dinamicamente”, come normalmente succede sul web moderno, aumentando la velocità di caricamento e risparmiando risorse sul server.
Per Contact Form 7, il problema è proprio questo: i sistemi di captcha integrati, infatti, hanno bisogno di generare dinamicamente alcuni campi nascosti nel form per poter validare la risposta, o aggiornare l’immagine distorta che propongono, fornendone una diversa per ogni utente. Questo è fondamentale, altrimenti il captcha stesso perderebbe senso.
Contact Form 7: la funzione refill
Per ovviare a questo problema, quando la pagina è in cache sul server, Contact Form 7 aggiorna gli elementi di cui ha bisogno durante il caricamento della pagina: una richiesta AJAX viene inviata al server, che risponde inviando il nuovo Quiz a cui dare risposta, oppure la nuova immagine di Really Simple Captcha. Questo aggiornamento viene gestito dalla funzione refill.
Si ma qual è il problema della funzione refill?
Ecco la risposta: il problema della funzione refill è che genera un’enorme perdita di tempo, da 500 a 1000ms o più per richiesta a seconda della velocità del server e del tipo di captcha utilizzato.
La perdita di tempo è enorme, perché 1.6 secondi possono significare anche metà del tempo di caricamento della pagina. In qualche modo quindi, se è vero che questa funzione è fondamentale per garantire la funzionalità dei captcha, è anche controproducente perché solitamente se configuriamo un sistema di cache è perché vogliamo rendere più veloce il sito web… non il contrario!
Risolvere il problema della funzione refill su Contact Form 7
Ora, se è vero che questa funzione è fondamentale per il funzionamento dei captcha, è pure vero che non è possibile perdere uno o due secondi per ogni form integrato nella pagina. Come possiamo risolvere quindi, volendo preservare sia la sicurezza che la velocità del nostro sito web?
Molti articoli simili a questo tentano di dare una soluzione drastica al problema: disabilitare il captcha integrato in Contact Form, magari passando ad altri sistemi anti spam come Honeypot per Contact Form 7.
Honeypot per Contact Form 7 ci permette di creare delle trappole per spam bot, inserendo dei campi fake visti solo da loro che, se compilati, inibiscono l’invio del form compilato. Intelligente, no?
Si, è senz’altro una strategia valida, però alcuni bot sono abbastanza intelligenti da superare questi controlli (provare per credere). Se questa soluzione non ci soddisfa, possiamo passare al captcha per eccellenza: Recaptcha!
Recaptcha: alla richiesta refill, il server risponde con… niente!
Studiando le varie strade per risolvere il problema, ci siamo resi conto di un elemento importante. Quando c’è Google Recaptcha configurato su Contact Form 7, la funzione refill restituisce una risposta vuota!
Questo significa che l’implementazione di Recaptcha presente in Contact Form 7 non fa uso pratico della funzione refill. Questa ipotesi si conferma facilmente verificando come viene utilizzata la funzione stessa nel codice del plugin:
- scripts.js: il file degli script di Contact Form 7 richiama la funzione refill quando la variabile globale wpcf7.cached è uguale a 1 (o true)
- la variabile refillCaptcha creata a riga 432 si occupa del refill di Really Simple Captcha
- la variabile refillQuiz a riga 440 si occupa del refill dei Quiz
- Guardando il relativo codice PHP richiamato dalla richiesta AJAX, i riferimenti alla funzione refill esistono solo per questi due tipi di Captcha
Tutto ciò che dobbiamo fare, quindi, è impostare a 0 la variabile wpcf7.cached quando Google Recaptcha è attivo.
Disabilitare la richiesta refill quando ReCaptcha è attivo
Come tutti i migliori plugin per WordPress, anche Contact Form 7 utilizza un eccellente sistema di filtri ed azioni per permetterci di modificare il suo comportamento. Possiamo legarci poi alle sue funzioni ed ai suoi metodi per rilevare lo stato di alcuni servizi interni del plugin stesso: per esempio, possiamo sapere se Recaptcha è attivo richiamando la singola istanza della classe WPCF7_RECAPTCHA.
Il codice risultante è il seguente:
/**
* Disables REFILL function in WPCF7 if Recaptcha is in use
*/
add_action('wp_enqueue_scripts', 'wpcf7_recaptcha_no_refill', 15, 0);
function wpcf7_recaptcha_no_refill() {
$service = WPCF7_RECAPTCHA::get_instance();
if ( ! $service->is_active() ) {
return;
}
wp_add_inline_script('contact-form-7', 'wpcf7.cached = 0;', 'before' );
}Con questo piccolo snippet, ci leghiamo a wp_enqueue_scripts (un’action di WordPress) e lanciamo la nostra funzione wpcf7_recaptcha_no_refill() descritta in seguito. La funzione:
- Salva in $service l’istanza corrente di WPC7_RECAPTCHA
- Se il metodo $service->is_active() valuta falso (e quindi il servizio non è attivo), non fa nulla
- Se invece il servizio non è attivo, modifica la variabile wpcf7.cached con wp_add_inline_script, legandosi allo script principale di Contact Form 7 (handle: contact-form-7) posizionando la definizione della variabile subito prima di esso
Fatto! A questo punto, in frontend non dovremmo più trovarci richieste AJAX inutili.
