Sintassi HTML su Contact Form 7

Per chi lavora con WordPress avrà già sentito parlare di Contact Form 7: uno dei più conosciuti plugin per creare form di richiesta informazioni. Nel tempo è riuscito a guadagnarsi una fetta considerevole di utilizzatori, grazie alla sua semplicità e facilità d’uso, condita con un’alta personalizzazione del form.

Ovviamente ci sono altrettante valide alternative, alcune sicuramente più potenti. Un esempio su tutti Gravity Forms che è forse uno dei più completi plugin per creare form di contatto. Presenta una miriade di funzionalità e permette di fare un sacco di cose. Il problema di questo strumento però è proprio nella complessità (oltre al fatto che risulta un plugin a pagamento).

Altra alternativa a CF7 è WP Forms, utilizzato da vari temi (come Ocean WP) che per certi versi risulta anche più semplice di Contact form 7, ma che pecca forse in personalizzazione lato front-end.

Tutto bello ma…

Lo scopo di questo articolo non è ne fare una disamina sui migliori plugin per moduli di contatto, e nemmeno spiegarvi come utilizzare Contact Form 7.

Queste righe sono rivolte a chi questo strumento già lo usa e che quasi sicuramente si sarà domandato almeno una volta: “perché l’area di testo, dove inserire il form, fa così pena?”.

Eh sì, perché quando vogliamo preparare in HTML il form da visualizzare nel front-end, dobbiamo avvalerci di una misera textarea, mono-colore, e senza alcuna possibilità di avere suggerimenti o correzioni di codice. Per chi viene da editor di codice questa risulta una vera e propria rottura di scatole.

Altra cosa che non ho mai sopportato di CF7 è che nell’area di testo dobbiamo inserire il nostro codice HTML ma a differenza del solito, qui ogni ritorno a capo è considerato tale. Il risultato: spesso ci troviamo con layout con doppi ritorni a capo e l’unica soluzione e attaccare tutto sulla stessa riga.

Ecco, in questo articolo voglio mostrarvi come risolvere questi 2 annosi problemi.

Sintassi HTML su CF7

Per risolvere il primo problema, facciamo affidamento ad una funzionalità già presente da qualche tempo su WordPress: il componente JavaScript “CodeMirror”. Questo componente è stato inserito dalla versione 4.9 e permette di trasformare un normale textarea in un editor di codice. Questa funzionalità è stata usata per gestire ad esempio il CSS aggiuntivo sul Personalizza di WP.

Possiamo quindi aggiungere questo componente anche al nostro Contact Form 7, inserendo un piccolo pezzetto di codice. Vediamo subito quale:

function vf_html_syntax_cf7()
{
    $settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) );
    if( $settings === false )
    {
        return;
    }

    // Abilito il code editor per il il form
    wp_add_inline_script(
        'code-editor',
        sprintf( 'jQuery( function() { wp.codeEditor.initialize( "wpcf7-form", %s ); } );', wp_json_encode( $settings ) )
    );
}
add_action( 'admin_print_styles-toplevel_page_wpcf7', 'vf_html_syntax_cf7');

Questo frammento di codice, per funzionare, va messo all’interno del file functions.php del vostro tema (o child-theme se state usando un tema free/premium).

Il risultato che otterrete è visibile qui sotto. Come potete notare, ora è ben visibile la sintassi HTML, con colori che indicano in maniera precisa tag, attributi e contenuto. E per concludere, è presente anche un suggeritore di tag e attributi. Comodo vero?

Ora potrete modificare direttamente il codice HTML del form sulla pagina del plugin senza rischiare di perdervi qualche tag di chiusura o sbagliare qualche sintassi. E anche il tasto di tabulazione funziona perfettamente.

C’è un MA: Eh sì,  c’è infatti un piccolo problemino (che devo ancora capire come sistemare): Abilitando questa funzionalità,  il pulsante “Inserisci tag” presente sul generatore di shortcode (vedi immagine qui sotto), non funziona più. Dovrete quindi copiare il codice che genera manualmente (con un classico copia/incolla) e inserirlo voi nel punto dell’HTML che volete. Sicuramente un fastidio, ma personalmente è un prezzo che pago molto volentieri.

Eliminare i ritorni a capo automatici su CF7

Un altro fastidioso comportamento di Contact Form 7 è l’aggiunta automatica di ritorni a capo, attraverso l’inserimento nel codice del form di tag <br>. Questo fa si che il layout di partenza HTML venga modificato creando delle fastidiose righe vuote. Normalmente, per risolvere questo problema siamo costretti a togliere dei ritorni a capo, mettendo il codice su una riga.

Ma fortunatamente c’è una soluzione più comoda: rimuovere del tutto questo comportamento da CF7. Per farlo, vi basterà inserire questo codice direttamente nel file functions.php:

add_filter( 'wpcf7_autop_or_not', '__return_false' );

Così facendo il plugin eviterà di tradurre ogni ritorno a capo con un tag <br>. Semplice e veloce.

Ecco, con questi piccoli accorgimenti abbiamo migliorato ancora di più la già ottima usabilità di questo plugin che personalmente trovo semplice ed efficace per quello che devo fare. E voi lo usate?