Puoi avere il sito più curato del mondo, ma se il visitatore non ha un modo semplice per lasciarti il suo contatto, quel traffico si disperde. Il form è l'unico elemento della pagina che trasforma un lettore anonimo in un contatto reale: una richiesta di preventivo, un'iscrizione alla newsletter, una candidatura. Su Framer i form sono nativi, non richiedono plugin esterni e sono disponibili anche nei piani più economici. In questa guida partiamo dalle basi, inserire il primo campo, e arriviamo alle configurazioni più avanzate: invio dei dati verso strumenti esterni, validazione, protezione dallo spam e ottimizzazione della conversione.

Come inserire un form in una pagina Framer

Il modo più rapido è partire dal pannello Insert, sezione Forms: Framer offre form già impostati, dal semplice campo email con pulsante fino a moduli di contatto completi con nome, email e messaggio. Trascini il blocco in pagina e hai già una struttura funzionante. Se preferisci il controllo totale, puoi costruirlo da zero: crei un frame, lo imposti come Form dal pannello di destra e poi inserisci al suo interno gli elementi Input, Textarea, Select, Checkbox e il pulsante di invio. La logica è identica a quella di qualsiasi layout Framer, quindi stack, padding e breakpoint responsive funzionano esattamente come sei abituato. Il consiglio pratico: costruisci il form dentro uno Stack verticale con gap costante, così aggiungere o togliere un campo non ti costringe a riposizionare tutto a mano.

Dove finiscono i dati: email, CMS e webhook

Questa è la domanda che ferma la maggior parte delle persone. Selezionando il form, nel pannello di destra trovi il campo Action, che decide la destinazione dei dati. L'opzione predefinita è l'invio via email: indichi un indirizzo e ogni compilazione ti arriva in casella, senza configurare nulla. La seconda strada è il webhook: incolli un URL e Framer inoltra lì i dati in formato strutturato. È l'opzione che apre tutto il resto, perché quell'URL può essere un automatismo Make o Zapier che scrive su Google Sheets, crea una riga in Notion o Airtable, aggiunge il contatto a Mailchimp e nel frattempo ti manda una notifica su Slack. La terza possibilità è collegare il form direttamente a una collezione CMS del sito: utile per candidature, iscrizioni a eventi o form interni dove i dati devono restare consultabili dentro Framer. Un'avvertenza importante: i form funzionano solo sul sito pubblicato, non nell'anteprima dell'editor. Se stai testando e non ricevi nulla, verifica prima di tutto di essere sul dominio live.

Validazione, campi obbligatori e stati di risposta

Ogni Input ha un tipo, e sceglierlo bene evita metà dei problemi. Impostando il tipo su Email il browser verifica automaticamente il formato dell'indirizzo, con Phone su mobile compare il tastierino numerico, con URL viene controllata la struttura del link. Il flag Required blocca l'invio se il campo è vuoto e mostra l'avviso nativo del browser. Altrettanto importante è cosa succede dopo il click: nel pannello del form puoi definire lo stato di successo, cioè il messaggio che sostituisce il modulo a invio riuscito, oppure il reindirizzamento a una pagina di ringraziamento dedicata. La pagina di ringraziamento è la scelta migliore se fai advertising, perché ti dà un URL univoco da tracciare come conversione in Google Analytics o nel pixel di Meta. Cura anche lo stato di errore: un form che non dice nulla quando qualcosa va storto è un form che perde contatti in silenzio.

Proteggere il form dallo spam senza infastidire gli utenti

Un form pubblico viene trovato dai bot nel giro di poche settimane, e la casella si riempie di messaggi automatici. Framer include una protezione antispam attivabile dalle impostazioni del form, che filtra la maggior parte del traffico automatico senza chiedere nulla al visitatore. Se il volume di spam resta alto puoi aggiungere un campo honeypot: un input nascosto via CSS che l'utente reale non vede e non compila, mentre il bot lo riempie, permettendoti di scartare la richiesta a valle nell'automazione. Evita invece i captcha visivi a meno che non siano indispensabili: ogni ostacolo aggiunto tra il visitatore e l'invio costa conversioni, e su un form di contatto standard il rapporto tra spam evitato e lead persi raramente conviene. Ricordati inoltre della privacy: se raccogli dati personali di utenti europei serve un checkbox di consenso non pre-spuntato con link alla privacy policy, e va gestito come campo obbligatorio.

Design e microinterazioni: il form come parte dell'esperienza

Su Framer un Input è un elemento come tutti gli altri, quindi puoi assegnargli stili di variabile, angoli arrotondati, bordi e ombre coerenti con il resto del sito. Sfrutta le varianti per costruire gli stati focus e hover: un bordo che si accende quando il campo è attivo comunica al visitatore esattamente dove si trova, e su moduli lunghi riduce gli abbandoni. Anche il pulsante di invio merita attenzione: uno stato di caricamento durante l'invio e una transizione morbida verso il messaggio di conferma trasformano un momento di attesa in un feedback rassicurante. Sul mobile controlla due cose spesso trascurate: l'altezza minima dei campi, che non dovrebbe scendere sotto i 44 pixel per restare comoda al pollice, e la dimensione del testo negli input, che sotto i 16 pixel fa scattare lo zoom automatico su iOS creando un effetto sgradevole.

Meno campi, più contatti: ottimizzare la conversione

La regola più solida nel design dei form è anche la più semplice: ogni campo in più abbassa il tasso di compilazione. Prima di aggiungere una voce chiediti se quel dato ti serve davvero adesso o se puoi recuperarlo nella conversazione successiva. Per una newsletter basta l'email, per una richiesta di preventivo nome, email e una breve descrizione sono quasi sempre sufficienti. Lavora poi sul contorno: una micro-copy sotto il pulsante che dice quanto tempo ci metti a rispondere, oppure che il contatto non verrà usato per invii commerciali, rimuove l'attrito residuo meglio di qualsiasi effetto grafico. Sostituisci il generico Invia con un'etichetta che descrive il beneficio, come Richiedi il preventivo o Ricevi la guida. Infine misura: collega la pagina di ringraziamento a un evento di conversione e osserva quante persone aprono il form rispetto a quante lo completano. Se lo scarto è ampio, il problema quasi sempre è un campo di troppo.

Conclusione

Costruire un form su Framer richiede pochi minuti, ma renderlo efficace è un lavoro di dettaglio: la destinazione giusta per i dati, una validazione che guida invece di bloccare, una protezione antispam invisibile e un design che riduce l'attrito. Sono scelte piccole che, sommate, cambiano sensibilmente il numero di contatti che ricevi ogni mese. Il momento migliore per intervenire è adesso: apri il tuo progetto, controlla dove finiscono davvero i dati del form che hai già in pagina e prova a togliere un campo. Se vuoi continuare, sul blog di Framer Italia trovi le guide dedicate al CMS, alla SEO e alle animazioni per completare il tuo sito.