Jak udělat poptávkový formulář na web

Poptávkový formulář vám řekne víc než kontaktní: co zákazník potřebuje, jaký má rozpočet a do kdy. Postavíte ho v čistém HTML, každou poptávku dostanete jako přehledně uspořádaný e-mail a zákazníkovi automaticky odejde odpověď „máme to“.

Budete potřebovat: bezplatný účet Frontmail a zhruba patnáct minut.

1. Připojte svou schránku

V E-mailové služby → Přidat službu připojte Gmail, Outlook, SMTP server nebo transakční službu, zaškrtněte Nastavit jako výchozí a klikněte na Ověřit a uložit.

2. Vytvořte šablonu poptávky

1. Otevřete Šablony → Z galerie a vyberte Poptávka (kategorie Byznys).
2. Klikněte na Použít šablonu. Poptávka chodí na vaši adresu; Odpovědět na je zákazník.

Šablona má tyto parametry:

Parametr	Typ	Povinný	Poznámka
name	text	ano
email	e-mail	ano
phone	text	ne
company	text	ne
service	výběr	ano	jedna z hodnot uvedených na záložce Parametry
budget	výběr	ne	jedna z hodnot uvedených na záložce Parametry
deadline	datum	ne	YYYY-MM-DD, přesně to, co posílá <input type="date">
details	dlouhý text	ano	alespoň 10 znaků

service a budget přijímají jen uvedené hodnoty. Příklad kódu níže používá hodnoty anglické šablony z galerie (Website, E-shop, Mobile app, Consulting, Other a Under $5k, $5k–20k, $20k–50k, Over $50k). Když šablonu vytvoříte v češtině, má české hodnoty: Web, E-shop, Mobilní aplikace, Konzultace, Jiné a Do 100 tis. Kč, 100–500 tis. Kč, 500 tis. – 1 mil. Kč, Nad 1 mil. Kč. Upravte je na záložce Parametry podle toho, co nabízíte – formulář musí posílat přesně hodnoty, které tam jsou.

3. Přidejte automatické potvrzení

1. Šablony → Z galerie → Automatická odpověď: díky za zprávu → Použít šablonu.
2. Na její záložce Parametry nastavte výchozí hodnoty pro company_name (vaše firma) a response_time (například do jednoho pracovního dne). Uložit.
3. Otevřete šablonu poptávky → Nastavení → Doručování a jako Šablona automatické odpovědi zvolte novou šablonu. Uložit.

Jedno odeslání formuláře teď pošle dva e-maily: poptávku vám a potvrzení zákazníkovi. Automatickou odpověď může spustit jen váš vlastní formulář, takže ji nikdo nezneužije k posílání e-mailů cizím lidem.

4. Povolte svůj web

V sekci Zabezpečení přidejte do seznamu Povolené weby svou doménu a klikněte na Uložit. Pak formulář ochraňte proti botům: vytvořte si bezplatný widget Cloudflare Turnstile, vložte jeho klíče do Zabezpečení → Ochrana proti botům a zapněte CAPTCHA u všech šablon.

5. Přidejte formulář

Použijte svůj veřejný klíč a ID šablony ze záložky Kód pro web:

<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>

Prázdná nepovinná pole (nevybraný rozpočet, chybějící termín) se v e-mailu prostě nezobrazí.

6. Vyzkoušejte to

Odešlete zkušební poptávku se svou adresou v poli Email. Měla by vám přijít poptávka a chvíli po ní potvrzení. Obojí uvidíte v sekci Historie, každý e-mail s vlastní časovou osou.

Každý e-mail stojí jeden kredit, takže poptávka s automatickou odpovědí stojí dva. Když vám v sezóně dojdou kredity, poptávky počkají ve frontě pozdržených zpráv a odejdou hned po dobití – žádná se neztratí.

Další kroky

• Ukládejte si každého zákazníka do sekce Kontakty: šablona už má namapované email, name a company; stačí zapnout sběr kontaktů v Nastavení šablony.
• Chcete poptávku v jazyce zákazníka? Přidejte šabloně jazykovou verzi a posílejte formulář se skrytým polem fm_locale (například de).