Un modulo di contatto su Webflow ha un aspetto eccellente di default, ma Webflow ti invia semplicemente i dati della compilazione via email - non li salva in un database, non si connette al tuo CRM e non attiva alcuna logica personalizzata. Se hai bisogno di qualcosa in più di una semplice notifica via email, devi instradare le tue submission del modulo Webflow attraverso un servizio esterno. La buona notizia è che puoi farlo senza scrivere una sola riga di codice backend.
Indice dei contenuti
Cosa offre Webflow di default
Il gestore di moduli integrato di Webflow fa tre cose: invia una notifica email al proprietario del sito, mostra un messaggio di successo e registra le submission nella dashboard di Webflow (sui piani a pagamento). Questo è sufficiente per moduli di contatto semplici su siti piccoli, ma inizia a mostrare i suoi limiti non appena hai bisogno di una delle seguenti funzionalità:
- Risposte automatiche alla persona che ha compilato il modulo
- Inoltro delle submission a una casella di posta condivisa o a un CRM
- Logica condizionale (ad esempio, instradare i lead in base all'interesse per un prodotto)
- Filtro antispam più avanzato rispetto all'honeypot base di Webflow
- Un registro di consegna affidabile con timestamp e tentativi di reinvio
Nessuna di queste funzionalità è disponibile nativamente. Hai bisogno di un livello esterno, e ci sono tre modi concreti per aggiungerlo.
Integrazioni native - Zapier e Make
Webflow dispone di un'integrazione diretta con Zapier e Make (ex Integromat). Quando arriva una nuova submission, il trigger si attiva e puoi concatenare qualsiasi azione: aggiungere una riga su Google Sheets, creare un contatto su HubSpot, inviare un messaggio su Slack, e così via.
Questo è il percorso no-code a cui la maggior parte dei designer ricorre per prima. La configurazione funziona così:
- In Webflow, vai su Impostazioni progetto > Integrazioni e collega il tuo account Zapier.
- In Zapier, crea un nuovo Zap con Webflow - New Form Submission come trigger.
- Seleziona il modulo specifico per nome.
- Aggiungi il tuo step di azione (Gmail, Slack, Airtable, ecc.).
- Testa con una submission reale e attiva lo Zap.
Make è più economico per i flussi di lavoro complessi, ma entrambe le piattaforme introducono una dipendenza esterna: se Zapier o Make va offline o il tuo account raggiunge un limite, le submission falliscono in silenzio o si accodano senza notifica.
Usare un webhook Webflow
Un webhook Webflow è un percorso più diretto. Webflow invia un HTTP POST a un URL che specifichi tu ogni volta che un modulo viene compilato. Controlli tu l'endpoint ricevente, quindi puoi fare qualsiasi cosa con il payload.
Per configurarlo:
- Vai su Impostazioni progetto > Integrazioni > Webhook in Webflow.
- Clicca su Aggiungi webhook, scegli il trigger Invio modulo .
- Incolla l'URL dell'endpoint del tuo servizio ricevente.
- Salva e testa con una submission reale.
Il payload inviato da Webflow è un oggetto JSON contenente tutti i valori dei campi, il nome del modulo e i metadati del sito. Un payload tipico si presenta così:
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}Il problema è che hai bisogno di qualcosa per ricevere quel webhook. Le opzioni includono un piccolo Cloudflare Worker , un flusso di lavoro su Pipedream, o un backend dedicato per moduli. Scrivere il tuo receiver è esattamente il problema del "backend personalizzato" che questo articolo cerca di aiutarti a evitare. Ed è qui che i servizi form-to-email diventano la soluzione più pulita.
Sostituire l'endpoint del modulo con un servizio dedicato
Invece di usare il gestore di moduli di Webflow, puoi puntare l'attributo
action
del tuo modulo verso un servizio di moduli di terze parti. Il servizio riceve il POST, lo valida, filtra lo spam e ti invia i risultati via email. Nessun backend richiesto da parte tua.
Il flusso di lavoro in Webflow è:
- Nel Designer di Webflow, seleziona il tuo elemento modulo.
-
Nel pannello
Impostazioni modulo
, imposta il campo
Azione
sull'URL dell'endpoint del tuo servizio di moduli (ad esempio,
https://sendform.net/!your-form-id). - Imposta il Metodo su POST .
-
Assicurati che ogni campo di input abbia un attributo
name- Webflow li imposta di default. - Pubblica il sito e testa una submission.
Questo approccio bypassa completamente il gestore di moduli di Webflow. La submission va direttamente dal browser del visitatore al servizio di moduli. Tu ricevi l'email, il servizio gestisce i reinvii e lo spam, e Webflow rimane solo il livello UI.
Lo stesso schema funziona per qualsiasi sito statico o no-code. Se stai anche ospitando su GitHub Pages o Cloudflare Pages, l'articolo su come ospitare un sito statico gratuitamente con moduli di contatto funzionanti copre esattamente lo stesso approccio.
Sendform a confronto con le alternative
Diversi servizi di moduli funzionano con Webflow. Ecco come si confrontano le principali opzioni sugli aspetti che contano davvero per la configurazione di un modulo di contatto:
| Servizio | Piano gratuito | Complessità di configurazione | Reindirizzamento personalizzato | Filtro antispam | Compatibile GDPR |
|---|---|---|---|---|---|
| Sendform | Sì | Incolla un URL | Sì | Sì | Sì |
| Formspree | 50 submission/mese | Registrazione + incolla URL | Solo a pagamento | Base (reCAPTCHA a pagamento) | Parziale |
| Netlify Forms | 100 submission/mese | Richiede hosting su Netlify | Sì | Sì | Parziale |
| Zapier (via webhook) | 100 task/mese | Flusso di lavoro multi-step | Manuale | Nessuno integrato | Dipende dallo Zap |
| Basin | 100 submission/mese | Registrazione + incolla URL | Sì | Sì | Parziale |
Sendform si distingue per alcune ragioni concrete che vanno oltre quello che entra in una tabella:
- Configurazione senza attrito: Ottieni un URL endpoint per il modulo senza dover creare prima un account. Incollalo nel campo Azione di Webflow e hai finito.
- Nessuna archiviazione delle submission di default: Sendform invia i dati via email e non li conserva sui propri server, il che è il comportamento corretto per la conformità al GDPR. Concorrenti come Formspree archiviano tutte le submission nella loro dashboard, il che significa che i dati dei tuoi utenti risiedono su un server di terze parti a tempo indeterminato.
- Adatto agli sviluppatori ma utilizzabile senza codice: A differenza di Zapier, non c'è nessun flusso di lavoro da mantenere. A differenza di Netlify Forms, non è legato a un provider di hosting specifico - funziona con Webflow, GitHub Pages o qualsiasi altro host.
- Piano gratuito onesto: Nessun muro nascosto del tipo "passa al piano a pagamento per sbloccare i reindirizzamenti" che altri servizi usano per spingerti verso piani premium.
Quale approccio scegliere?
La risposta giusta dipende da cosa ti serve effettivamente dopo che il modulo viene inviato:
- Solo notifiche via email: Usa Sendform. Incolla l'URL dell'endpoint nel campo Azione di Webflow, fatto in due minuti.
- Email + sincronizzazione con CRM o foglio di calcolo: Usa Sendform per la consegna via email e aggiungi facoltativamente uno step Zapier attivato dall'email in arrivo, oppure usa l'output webhook di Sendform se disponibile nel tuo piano.
- Automazione complessa multi-step: Un webhook Webflow verso Make o Zapier ha senso in questo caso, ma metti in conto il costo del piano a pagamento.
- Sei già su Netlify: Netlify Forms va bene per i casi semplici, ma raggiungerai il limite di 100 submission al mese rapidamente su qualsiasi sito attivo.
Per la grande maggioranza dei moduli di contatto Webflow - un campo nome, email e messaggio che deve arrivare in modo affidabile nella tua casella di posta - Sendform è il percorso più rapido e pulito. Nessun backend, nessun limite mensile di task da monitorare e nessun dato delle submission che giace in una dashboard di terze parti che hai dimenticato di cancellare.
Gestisci il tuo modulo di contatto Webflow senza scrivere un backend
Sendform ti fornisce un endpoint pronto all'uso che puoi incollare direttamente nel campo Azione di Webflow - le tue submission arrivano immediatamente nella tua casella di posta, con filtro antispam e impostazioni predefinite conformi al GDPR già incluse.
Prova Sendform gratis →
Quando punti l'attributo Azione del modulo Webflow verso un endpoint esterno, lo stato di successo integrato di Webflow non si attiverà più automaticamente. La maggior parte dei servizi di moduli gestisce questo reindirizzando verso una pagina di ringraziamento che specifichi tu. In Sendform, imposti un URL di reindirizzamento nelle impostazioni del modulo, in modo che i visitatori atterrino sulla tua pagina di conferma personalizzata dopo l'invio. In alternativa, puoi usare JavaScript per intercettare l'evento di invio del modulo, inviare il POST tramite fetch(), e mostrare manualmente lo stato di successo di Webflow.
Sì. In Impostazioni progetto > Integrazioni > Webhook, puoi aggiungere un webhook che si attiva ad ogni nuova submission. Webflow invia un POST JSON all'URL specificato contenente tutti i valori dei campi, il nome del modulo e un timestamp. Questo richiede un endpoint ricevente - una funzione serverless, un flusso di lavoro su Pipedream, o un servizio di moduli che accetti webhook. La funzionalità webhook è disponibile sui piani CMS e Business di Webflow.
Zapier si interpone tra Webflow e la tua destinazione (email, CRM, ecc.) aggiungendo un livello di flusso di lavoro. È potente per le automazioni multi-step ma ha un costo oltre i 100 task al mese e introduce un punto di possibile guasto. Sendform è un endpoint diretto per i moduli - le submission vanno direttamente dal browser a Sendform, che ti invia subito un'email. Non c'è nessun flusso di lavoro da mantenere, nessun contatore di task e nessun rischio che uno Zap si rompa in silenzio. Per i moduli di contatto semplici, Sendform è più veloce da configurare e più affidabile nel quotidiano.
Dipende dal servizio. I servizi che archiviano le submission nel proprio database (Formspree, Basin, Netlify Forms) agiscono come responsabili del trattamento dei dati, il che significa che hai bisogno di un Accordo sul Trattamento dei Dati e devi menzionarli nella tua informativa sulla privacy. Sendform è progettato per inoltrare i dati senza conservarli di default, il che riduce significativamente l'onere di conformità. Indipendentemente dal servizio che utilizzi, dovresti aggiornare la tua informativa sulla privacy per indicare come i dati del modulo di contatto vengono gestiti e trasmessi.
Sì, e hai diverse opzioni. La maggior parte dei servizi di moduli, incluso Sendform, include un filtro antispam integrato sul loro lato. Puoi anche aggiungere un campo honeypot - un input nascosto che i bot compilano ma gli utenti reali non vedono - e il servizio ricevente ignora le submission in cui quel campo ha un valore. Per i moduli ad alto traffico, i servizi che supportano reCAPTCHA v3 o hCaptcha offrono un livello di protezione aggiuntivo. Il filtro antispam di Webflow si applica solo quando usi il gestore di moduli nativo di Webflow, quindi passare a un endpoint esterno significa affidarsi agli strumenti antispam del servizio scelto.
No. Puntare l'attributo Azione del modulo verso un URL esterno funziona su qualsiasi piano Webflow, incluso il piano gratuito Starter, perché stai semplicemente modificando un attributo HTML su una pagina pubblicata. La restrizione sui piani gratuiti riguarda la gestione nativa dei moduli di Webflow (archiviazione nella dashboard, notifiche email tramite Webflow), che richiede un piano sito. Usare un servizio esterno come Sendform aggira completamente quella restrizione - il modulo invia semplicemente un POST ai server di Sendform indipendentemente dal livello del tuo piano Webflow.