Come realizzare un form funzionante su un progetto esportato da Webflow.

Quando si esporta un progetto da Webflow, le funzionalità che prevedono l'elaborazione dei dati server-side vengono perse per ovvie ragioni. Tra queste funzionalità ci sono i contenuti dinamici, ad esempio, ma anche i form.

Ci sono dei servizi di terze parti che permettono di elaborare e trasmettere i dati, come per esempio Airtable, Getform, e molti altri. Questi servizi, tuttavia, hanno due svantaggi principali:

  1. I dati vengono trasmessi a terze parti, e ciò rappresenta un problema per la privacy e il rispetto della normativa GDPR.
  2. I form, il più delle volte, non sono customizzabili e vanno incorporati all'interno del progetto, e potremmo sentirci limitati da questo.

In questa breve guida andremo a vedere in che modo è possibile realizzare un form, nativo in Webflow, le cui funzionalità vengono preservate anche nel progetto esportato, e i cui dati vengono inoltrati ed elaborati direttamente dal server su cui andranno caricati il resto degli asset del progetto esportato.

Step 1 Il form in Webflow

Andiamo a vedere come predisporre un form su Webflow perché, una volta esportato, sia funzionante.

Nelle Form Settings, impostiamo l'Action /form.php e il Method POST.

Step 2 Elaborazione e trasmissione dei dati

Creiamo un file form.php che andremo a caricare successivamente nel server insieme al progetto.

Sarà necessario cambiare il valore della variabile $to con l'email del destinatario, riga 9.

È possibile aggiungere anche i campi cc e bcc.

Step 3 Success & Error state

Come ultimo step ci servirà uno script che preserverà le interazioni native degli stati Success ed Error del form di Webflow.

Creiamo uno script che posizioneremo nel tag body.

È tutto! Abbiamo sviluppato un form in Webflow, che ne preserva le interazioni e le funzionalità anche una volta esportato.

Made with 💪 by Paul.