HeadstartWP – Aggiungi un modulo con Contact Form 7
Quasi tutti i siti web dispongono di un modulo di contatto, o almeno in ogni sito che realizzo mi viene richiesto espressamente di inserirne uno nella pagina dei contatti. In WordPress i plugin più diffusi per l’aggiunta di un modulo di contatto sono: Contact Form 7, Ninja Forms e Gravity Form. Personalmente utilizzo Contact Form 7 poiché è gratuito, ampiamente utilizzato, aggiornato e facilmente estendibile.
Se volete saperne di più, visitate la pagina sul repository:
Andiamo subito al sodo di questo articolo, che promette di essere piuttosto corposo. Mi sono chiesto: «Posso installare Contact Form 7, aggiungere un blocco Gutenberg e avere un modulo sul mio sito realizzato con HeadstartWP?» La risposta è sì, ma dobbiamo scrivere un po’ di codice; in questo articolo vedremo come procedere.
Creazione del modulo
di contatto Se abbiamo una certa familiarità con WordPress, e presumo che sia così, installiamo Contact Form 7 dal backend e creiamo un modulo di contatto con questo contenuto:
1
2
3
4
5
6
7
8
9
10
11
12
13
<label> Your name
[text* your-name autocomplete:name] </label>
<label> Your email
[email* your-email autocomplete:email] </label>
<label> Subject
[text* your-subject] </label>
<label> Your message (optional)
[textarea your-message] </label>
[submit "Enter"]In questo articolo creeremo e gestiremo una soluzione semplice che non copre tutti i casi, ma solo campi di tipo input o textarea con i campi racchiusi in tag label.
Creazione della pagina con il modulo
di contatto Passiamo ora a creare una pagina di prova in cui inseriremo il blocco Gutenberg di Contact Form 7 e selezioneremo con cura il modulo che abbiamo appena creato. La pagina del backend avrà questo aspetto:
Nel frontend, invece, non vedremo altro che il titolo. Ispezionando il codice, troveremo qualcosa di molto simile a questo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dg3g6rf">
<div class="wp-block-contact-form-7-contact-form-selector" data-wp-block="{"id":151,"title":"Modulo di contatto 1","output":"form"}" data-wp-block-name="contact-form-7/contact-form-selector">
<div class="wpcf7 no-js" id="wpcf7-f151-o1">
<div class="screen-reader-response">
<p role="status"></p>
<ul></ul>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>Così ho cercato un po’ su Google e ho scoperto che, grazie all’ID del modulo di Contact Form 7 che si trova in `data-wp-block`, possiamo sfruttare l’API resa disponibile all’indirizzo [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback. [ A questo punto devo ringraziare @mahesh_joshi per questo articolo in cui ho trovato alcune informazioni molto utili e che consiglio di leggere per approfondire l’argomento https://medium.com/@mahesh_joshi/wordpress-contact-form-7-rest-api-endpoints-bf45907b571c ] Possiamo effettuare una richiesta POST all’endpoint per inviare l’e-mail.
Proviamo con Postman. Presumo che abbiate tutti familiarità con Postman https://web.postman.co/; in ogni caso, leggete il paragrafo seguente. Impostiamo un POST sull’endpoint [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback where [backend] è l’URL dell’host del nostro backend WordPress e [cf7-id] è l’ID del modulo di contatto. Cliccando sul pulsante di invio otteniamo la seguente risposta:
1
2
3
4
5
6
7
{
"code": "wpcf7_unsupported_media_type",
"message": "The request payload format is not supported.",
"data": {
"status": 415
}
}Nota a margine: con l’italiano come lingua del backend, il messaggio era “Circuito di pagamento non supportato”, che non corrisponde alla traduzione del messaggio che vedete in inglese. Se volete, ho scritto un articolo su come suggerire le traduzioni corrette a WordPress.
Ora andiamo alla scheda “Body”, selezioniamo “form-data” e aggiungiamo come chiave “value” tutti i campi richiesti dall’e-mail:
In questo modo dovreste ottenere una risposta simile alla mia con lo stato: "mail_sent" e ricevere l’e-mail nella vostra casella di posta.
Abbiamo quindi visto che funziona in modo molto semplice; passiamo ora a un’implementazione frontend molto lineare, in cui tralasceremo, in questa fase, la parte relativa alla convalida degli input e al filtraggio dello spam.
Mettiamoci all’opera con Blocks.js
Passiamo ora alla parte principale di questo articolo, dove potremo sporcarci un po’ le mani con un po’ di codice. Come sempre, vi consiglio di consultare la documentazione appropriata all’indirizzo https://headstartwp.10up.com/docs/learn/gutenberg/rendering-blocks/, poiché è necessario comprendere come funziona la conversione dei blocchi del backend in componenti frontend in HeadstartWp.
Per semplificare al massimo, possiamo dire che nel file src/components/Blocks.js i componenti inseriti in <BlocksRenderer> vengono visualizzati se vengono soddisfatte determinate condizioni.
Nel nostro caso definiremo un componente chiamato ContactFormBlock che verrà visualizzato quando viene analizzato un div con tagName e classe "wp-block-contact-form-7-contact-form-selector" viene analizzato. A questo componente passiamo come props l’html del blocco. Grazie a questo codice html possiamo recuperare l’id del modulo di contatto e, con l’ausilio di alcune espressioni regolari, anche tutti i campi di input, le etichette, i nomi e i tipi dei campi di input. Vi fornirò il codice tra poche righe, ma per ora vorrei condividere con voi due risorse che ho trovato molto utili: https://regex101.com/ e https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms.
Prima di mostrarvi le mie righe di codice, lasciatemi dire che, come abbiamo visto nel capitolo precedente, l’attributo `enctype` deve essere impostato su `multipart/form-data e il mio consiglio è di considerare questo codice come un semplice esempio (POC) e, nel caso in cui vogliate utilizzarlo in produzione, di scrivere prima una funzione JavaScript per la richiesta POST, in modo da poter effettuare la convalida ed evitare che la pagina POST venga visualizzata al momento dell’invio.
Vediamo ora il risultato:
Una volta completato il modulo e cliccato su “Invia”, vi verrà mostrata questa pagina con lo stato “mail_sent” e troverete l’e-mail nella vostra casella di posta in arrivo:
Come promesso, troverete tutto il codice a questo link https://gist.github.com/riccardodicurti/2bf7cafb419237a257975323588a8760; ricordate che è puramente a scopo dimostrativo e ben lungi dall’essere considerato pronto per la produzione. Ma continuate a leggere il paragrafo successivo, poiché abbiamo alcune conclusioni da trarre.
Conclusioni
Abbiamo visto che la creazione di un componente collegato a un blocco Gutenberg non solo è possibile, ma anche molto semplice; tuttavia, desidero sottolineare che la soluzione sviluppata finora è molto rudimentale. Se dovessi sviluppare una soluzione più stabile, opterei molto probabilmente per la creazione di un blocco Gutenberg personalizzato che mi trasmettesse tutte le informazioni necessarie per la creazione del componente in formato JSON, senza dover ricorrere in modo estensivo alle espressioni regolari. Inoltre, in questo esempio abbiamo tralasciato del tutto la convalida e la verifica antispam. Chiunque abbia un sito web WordPress sa quanto possa essere opprimente la quantità di spam se non si protegge il modulo di contatto con un honeypot o un reCAPTCHA. Che il vostro codice sia privo di bug.