Come aggiungere un modulo di contatto al tuo sito (che ti arriva davvero)

Per aggiungere un modulo di contatto che funziona, crea un modulo breve (nome, email, messaggio), invialo a una route del server che valida i dati, salva il messaggio in un database e poi ti manda una notifica via email tramite un provider di posta usando una chiave API segreta. Aggiungi un campo nascosto “honeypot” e il rate limiting per bloccare la maggior parte dello spam, mostra un messaggio di conferma chiaro e prova tutto dall’inizio alla fine sul sito pubblicato. Salvare prima di inviare l’email è la parte importante: se l’email dovesse fallire, la richiesta resta comunque a tua disposizione.

Le tue opzioni

Se il tuo sito ha già un backend e un database — cosa che spesso accade alle app costruite con app builder AI — l’ultima opzione è la più affidabile e tiene le richieste dove puoi vederle.

Cosa include un buon modulo di contatto

• Meno campi possibile. Nome, email, messaggio. Aggiungi un menu a tendina per l’oggetto (“Vendite”, “Assistenza”, “Altro”) solo se instraderai i messaggi in base a quello.
• Etichette chiare sopra ogni campo, non solo un testo segnaposto che scompare.
• Validazione utile: “Inserisci un indirizzo email valido”, mostrato accanto al campo.
• Uno stato di successo che dice cosa succede dopo: “Grazie — rispondiamo entro un giorno lavorativo.”
• Un’informativa sulla privacy che spiega come userai i dati, con link alla tua privacy policy.
• Un’alternativa come il tuo indirizzo email o numero di telefono per chi preferisce così.

Prompt di esempio

Il modulo base:

Aggiungi un modulo di contatto nella pagina Contatti con nome, email e messaggio (tutti obbligatori, messaggio fino a 2.000 caratteri). Invialo a una route del server che valida i dati, li salva in una tabella contact_messages con l’ora di ricezione e mostra un messaggio di successo: “Grazie, risponderemo entro un giorno lavorativo.” Mostra gli errori di campo accanto ai campi. Deve funzionare bene sul telefono.

Notifiche email:

Quando un messaggio di contatto viene salvato, inviami una notifica via email a hello@example.com usando Resend con la chiave in RESEND_API_KEY. Imposta reply-to sull’email del mittente così posso rispondere direttamente. Se l’invio fallisce, mantieni il messaggio salvato e registra l’errore senza esporre la chiave.

Protezione dallo spam:

Aggiungi la protezione dallo spam al modulo di contatto: un campo nascosto honeypot che deve restare vuoto, un limite di 5 invii per IP all’ora sul server, e rifiuta i messaggi con più di 3 link. Scarta in silenzio gli invii con honeypot compilato, ma mostra comunque il successo.

Una casella di posta:

Aggiungi una pagina di amministrazione protetta da password che elenca i messaggi di contatto dal più recente, con una casella “gestito” e un filtro per i messaggi non gestiti.

Passo dopo passo

1. Decidi dove vanno i messaggi: chi riceve le notifiche e chi risponde.
2. Costruisci il modulo con i campi sopra, etichette accessibili e campi ottimizzati per il mobile (usa il tipo di input email così il telefono mostra la tastiera giusta).
3. Crea la route del server. Controlla i campi obbligatori, il formato dell’email e i limiti di lunghezza. Non fidarti mai della sola validazione nel browser.
4. Salva prima nel database. Vedi come aggiungere un database alla tua app.
5. Configura un provider di email. Crea un account, verifica il tuo dominio di invio e conserva la chiave API come segreto. Come inviare email dalla tua app spiega nel dettaglio la configurazione del dominio (SPF, DKIM).
6. Invia la notifica dal server dopo il salvataggio. Usa il tuo dominio verificato come mittente e l’email del visitatore come reply-to — non inviare “da” l’indirizzo del visitatore, perché probabilmente verrà rifiutato come spoofing.
7. Facoltativamente, una risposta automatica al visitatore, ma breve; le risposte automatiche verso indirizzi di spam possono danneggiare la reputazione del tuo mittente.
8. Aggiungi la protezione dallo spam: honeypot, rate limiting, poi un controllo tipo CAPTCHA se serve.
9. Prova sul sito pubblicato: invia, controlla il database, controlla la casella di posta e la cartella spam, clicca su rispondi.

Bloccare lo spam

I moduli di contatto attirano bot pochi giorni dopo il lancio. Metti più difese in ordine dalla meno alla più invasiva:

1. Campo honeypot. Un campo nascosto agli umani; i bot lo compilano. Non costa nulla ai visitatori reali.
2. Rate limiting lato server. Limita quanti messaggi può inviare un indirizzo in un certo periodo.
3. Regole sul contenuto. Rifiuta messaggi pieni di link, o con un campo messaggio vuoto o assurdamente lungo.
4. Un controllo tipo CAPTCHA, come Cloudflare Turnstile o Google reCAPTCHA. Il token deve essere verificato sul tuo server; un controllo che gira solo nel browser può essere aggirato.

Errori comuni

• Mostrare “Inviato!” quando non è stato inviato nulla. L’interfaccia dichiara il successo prima o a prescindere dalla risposta del server. Aspetta sempre il server.
• Solo email, senza database. Basta una chiave configurata male e le richieste scompaiono per settimane senza che nessuno se ne accorga.
• Chiave API nel codice frontend. Chiunque può usarla per inviare email al tuo posto.
• Dominio di invio non verificato. Le notifiche finiscono nello spam o non arrivano mai.
• Inviare “da” l’email del visitatore. Usa invece reply-to.
• Nessun limite di lunghezza. I bot incollano blocchi enormi di testo.
• Non provare mai il sito live. Chiavi e domini spesso sono diversi tra anteprima e produzione.

Checklist

• Modulo breve con etichette visibili ed errori chiari
• Validazione lato server e limiti di lunghezza
• Ogni messaggio salvato nel database
• Email di notifica inviata da un dominio verificato, con reply-to impostato
• Chiave API email conservata solo come segreto lato server
• Honeypot e rate limiting attivi
• Messaggio di successo mostrato solo dopo la conferma del server
• Informativa sulla privacy con link alla privacy policy
• Provato dall’inizio alla fine sul sito pubblicato, inclusa la cartella spam

Moduli di contatto in Mythex

In Mythex puoi costruire tutto dalla chat. Chiedi il modulo e un database nello stesso prompt (oppure digita /database) così gli invii restano salvati. Mythex non ha un prodotto integrato per l’invio di email, quindi per le notifiche usi un provider come Resend, SendGrid o Postmark, aggiungi la sua chiave con /secrets o nelle impostazioni del progetto, e chiedi all’agente di inviare dal server — vedi Inviare email dalla tua app. Prima di affidartici, esegui il test dell’app (/test) sul modulo in Anteprima, poi pubblica e prova sull’URL live.

Un modulo di contatto è una parte chiave della maggior parte dei siti per piccole attività e delle landing page. Controlla la checklist di sicurezza prima del lancio.

Domande