Come creare un modulo di richiesta preventivo per il sito web

Un modulo di richiesta preventivo ti dice più di un modulo di contatto: di cosa ha bisogno il cliente, il budget e la scadenza. Lo creerai in semplice HTML, riceverai ogni richiesta come un’email chiara e ordinata e invierai al cliente una risposta automatica del tipo «l’abbiamo ricevuta».

Ti serve: un account Frontmail gratuito e circa un quarto d’ora.

1. Collega la tua casella di posta

In Servizi email → Aggiungi servizio collega Gmail, Outlook, un server SMTP o un provider transazionale, seleziona Imposta come predefinito e fai clic su Verifica e salva.

2. Crea il modello di richiesta preventivo

1. Apri Modelli → Dalla galleria e scegli Richiesta di preventivo (categoria Business).
2. Fai clic su Usa modello. La richiesta arriva al tuo indirizzo; Reply-To è il cliente.

Il modello ha questi parametri:

Parametro	Tipo	Obbligatorio	Note
name	string	sì
email	email	sì
phone	string	no
company	string	no
service	enum	sì	uno dei valori elencati nella scheda Parametri
budget	enum	no	uno dei valori elencati nella scheda Parametri
deadline	date	no	YYYY-MM-DD, esattamente ciò che invia <input type="date">
details	text	sì	almeno 10 caratteri

service e budget accettano solo i valori elencati. L’esempio di codice qui sotto usa i valori del modello inglese; se crei il modello in italiano, i valori sono Sito web, E-commerce, App mobile, Consulenza, Altro e Meno di 5.000 €, 5.000–20.000 €, 20.000–50.000 €, Oltre 50.000 €. Adattali nella scheda Parametri a ciò che vendi: il modulo deve inviare esattamente i valori elencati lì.

3. Aggiungi una conferma automatica

1. Modelli → Dalla galleria → Risposta automatica: grazie per il messaggio → Usa modello.
2. Nella sua scheda Parametri imposta i valori predefiniti di company_name (la tua azienda) e response_time (per esempio entro un giorno lavorativo). Salva.
3. Apri il modello di richiesta preventivo → Impostazioni → Consegna e scegli il nuovo modello come Modello di risposta automatica. Salva.

Ora un solo invio genera due email: la richiesta a te e la conferma al cliente. La risposta automatica può partire solo dal tuo modulo, quindi nessuno può sfruttarla per scrivere a sconosciuti.

4. Autorizza il tuo sito

In Sicurezza aggiungi il tuo dominio in Siti consentiti e fai clic su Salva. Poi proteggi il modulo dai bot: crea un widget Cloudflare Turnstile gratuito, incolla le sue chiavi in Sicurezza → Protezione dai bot e attiva il CAPTCHA per tutti i modelli.

5. Aggiungi il modulo

Usa la tua chiave pubblica e l’ID del modello dalla scheda Snippet:

<form id="quote">
  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Company <input name="company" /></label>
  <label>What do you need?
    <select name="service" required>
      <option>Website</option>
      <option>E-shop</option>
      <option>Mobile app</option>
      <option>Consulting</option>
      <option>Other</option>
    </select>
  </label>
  <label>Budget
    <select name="budget">
      <option value="">Not sure yet</option>
      <option>Under $5k</option>
      <option>$5k–20k</option>
      <option>$20k–50k</option>
      <option>Over $50k</option>
    </select>
  </label>
  <label>Deadline <input name="deadline" type="date" /></label>
  <label>Project details <textarea name="details" required minlength="10"></textarea></label>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Request a quote</button>
  <p id="quote-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('quote');
  const status = document.getElementById('quote-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thanks! Check your inbox – we’ve sent you a confirmation.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset();
    }
  });
</script>

I campi facoltativi lasciati vuoti (un budget non selezionato, nessuna scadenza) semplicemente non compaiono nell’email.

6. Provalo

Invia una richiesta di prova con il tuo indirizzo nel campo Email. Dovresti ricevere la richiesta e, un attimo dopo, la conferma. Entrambe compaiono in Cronologia, ognuna con la sua timeline.

Ogni email consuma un credito, quindi una richiesta con risposta automatica ne costa due. Se in alta stagione finisci i crediti, le richieste aspettano nella coda dei messaggi in attesa e partono appena ricarichi: nessuna va persa.

Prossimi passi

• Salva ogni cliente in Contatti: il modello mappa già email, name e company; attiva la Raccolta contatti nelle Impostazioni del modello.
• Vuoi la richiesta nella lingua del cliente? Aggiungi una variante linguistica del modello e invia il modulo con un campo nascosto fm_locale (per esempio de).