Come creare un modulo di contatto per il sito web senza backend

Creerai un normale modulo HTML che invia ogni messaggio alla tua casella di posta. L’email parte da Frontmail attraverso la casella che usi già (Gmail, Outlook, qualsiasi server SMTP o un provider transazionale), quindi non devi gestire nessun server tuo.

Ti serve: un account Frontmail gratuito e una decina di minuti.

1. Collega la tua casella di posta

1. Nella dashboard apri Servizi email e fai clic su Aggiungi servizio.
2. Scegli il tuo provider. Gmail e Outlook si collegano con il tuo account (nessuna password salvata); SMTP, Resend, Postmark, Mailgun e gli altri richiedono una chiave API o le credenziali.
3. Seleziona Imposta come predefinito e fai clic su Verifica e salva. Frontmail controlla le credenziali senza inviare nulla.

2. Crea il modello dalla galleria

1. Apri Modelli → Dalla galleria e scegli Modulo di contatto (categoria Moduli).
2. Fai clic su Usa modello. Il destinatario (A) è il tuo indirizzo e Reply-To è il visitatore, quindi premendo Rispondi gli scrivi direttamente.

Il modello si aspetta questi parametri, che diventano gli attributi name dei campi del modulo:

Parametro	Obbligatorio	Che cos’è
name	sì	Il nome del visitatore
email	sì	L’indirizzo del visitatore (validato)
phone	no	Numero di telefono
topic	no	Argomento, mostrato nell’oggetto
message	sì	Il messaggio

3. Autorizza il tuo sito

La chiave pubblica si trova nel sorgente della pagina, e va bene così: però deve poterla usare solo il tuo sito.

1. Apri Sicurezza e aggiungi il tuo dominio in Siti consentiti (per esempio example.com e www.example.com; durante lo sviluppo aggiungi anche localhost). Fai clic su Salva.
2. Consigliato: crea un widget Cloudflare Turnstile gratuito per i tuoi hostname, incolla la chiave del sito e la chiave segreta in Sicurezza → Protezione dai bot e fai clic su Attiva il CAPTCHA per tutti i modelli. Così i bot non possono usare il tuo modulo, e per le persone di solito è invisibile.

4. Aggiungi il modulo alla pagina

Copia la chiave pubblica (Sicurezza) e l’ID del modello (scheda Snippet del modello), poi incolla questo codice dove deve comparire il modulo:

<form id="contact">
  <label>Name <input name="name" required maxlength="200" /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Turnstile adds a hidden cf-turnstile-response field; leave it out if you skipped the CAPTCHA -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</button>
  <p id="form-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('contact');
  const status = document.getElementById('form-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      // null = your default service
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thank you! We’ll get back to you soon.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset(); // a Turnstile token works only once
    }
  });
</script>

sendForm() legge i campi in base al loro name, quindi modulo e modello restano allineati senza alcun codice di mappatura. Gli errori di rete e i problemi temporanei del server vengono ritentati automaticamente con la stessa chiave di idempotenza: un visitatore non ti invierà mai due volte lo stesso messaggio.

5. Provalo

Apri la pagina, compila il modulo e invialo. L’email arriva nella tua casella in pochi secondi, e la Cronologia nella dashboard mostra il messaggio con tutta la sua timeline.

Se qualcosa non funziona, l’errore ti dice perché:

• origin_not_allowed – il dominio della pagina non è in Siti consentiti (controlla www e la porta).
• captcha_required – il modello richiede Turnstile, ma nel modulo manca il widget.
• invalid_template_params – un campo obbligatorio è vuoto oppure un valore non rispetta il parametro.

Hai finito i crediti in una settimana intensa? Il messaggio non va perso: viene accettato con lo stato held e parte automaticamente appena aggiungi crediti.

Prossimi passi

• Invia al visitatore una conferma: aggiungi dalla galleria il modello Risposta automatica: grazie per il messaggio e selezionalo in Impostazioni → Consegna del modello di contatto.
• Usi React, Vue o Svelte? I pacchetti per i framework includono un componente FrontmailForm pronto all’uso con il widget Turnstile integrato: trovi i dettagli nella documentazione dell’SDK.