Ako vytvoriť dopytový formulár na web

Dopytový formulár vám povie viac než kontaktný: čo zákazník potrebuje, aký má rozpočet a do kedy. Vytvoríte ho v čistom HTML, každý dopyt dostanete ako prehľadne usporiadaný e-mail a zákazníkovi automaticky odíde odpoveď „dopyt sme prijali“.

Potrebujete: bezplatný účet Frontmail a zhruba pätnásť minút.

1. Pripojte svoju schránku

V E-mailové služby → Pridať službu pripojte Gmail, Outlook, SMTP server alebo transakčného poskytovateľa, zaškrtnite Nastaviť ako predvolenú a kliknite na Overiť a uložiť.

2. Vytvorte šablónu dopytu

1. Otvorte Šablóny → Z galérie a vyberte Dopyt (kategória Biznis).
2. Kliknite na Použiť šablónu. Dopyt príde na vašu adresu; Reply-To je zákazník.

Šablóna má tieto parametre:

Parameter	Typ	Povinný	Poznámka
name	string	áno
email	email	áno
phone	string	nie
company	string	nie
service	enum	áno	jedna z hodnôt uvedených na karte Parametre
budget	enum	nie	jedna z hodnôt uvedených na karte Parametre
deadline	date	nie	YYYY-MM-DD, presne to, čo posiela <input type="date">
details	text	áno	aspoň 10 znakov

service a budget prijímajú iba uvedené hodnoty. Príklad kódu nižšie používa hodnoty anglickej šablóny z galérie (Website, E-shop, Mobile app, Consulting, Other a Under $5k, $5k–20k, $20k–50k, Over $50k). Keď šablónu vytvoríte v slovenčine, hodnoty budú slovenské: Web, E-shop, Mobilná aplikácia, Konzultácie, Iné a Do 5 000 €, 5 000 – 20 000 €, 20 000 – 50 000 €, Nad 50 000 €. Upravte ich na karte Parametre podľa toho, čo ponúkate – formulár musí posielať presne tie hodnoty, ktoré sú tam uvedené.

3. Pridajte automatické potvrdenie

1. Šablóny → Z galérie → Automatická odpoveď: ďakujeme za správu → Použiť šablónu.
2. Na jej karte Parametre nastavte predvolené hodnoty pre company_name (názov vašej firmy) a response_time (napríklad do jedného pracovného dňa). Uložiť.
3. Otvorte šablónu dopytu → Nastavenia → Doručovanie a ako Šablóna automatickej odpovede vyberte novú šablónu. Uložiť.

Jedno odoslanie formulára teraz pošle dva e-maily: dopyt vám a potvrdenie zákazníkovi. Automatickú odpoveď môže spustiť iba váš vlastný formulár, takže ju nikto nezneužije na posielanie e-mailov cudzím ľuďom.

4. Povoľte svoj web

V Zabezpečenie pridajte svoju doménu do Povolené weby a kliknite na Uložiť. Potom formulár ochráňte pred robotmi: vytvorte si bezplatný widget Cloudflare Turnstile, vložte jeho kľúče do Zabezpečenie → Ochrana pred botmi a zapnite CAPTCHA pre všetky šablóny.

5. Vložte formulár

Použite svoj verejný kľúč a ID šablóny z karty Kód:

<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ázdne nepovinné polia (nevybraný rozpočet, žiadny termín) sa v e-maili jednoducho nezobrazia.

6. Vyskúšajte to

Odošlite skúšobný dopyt s vlastnou adresou v poli Email. Mal by vám prísť dopyt a o chvíľu aj potvrdenie. Oba e-maily nájdete v História, každý s vlastnou časovou osou.

Každý e-mail stojí jeden kredit, takže dopyt s automatickou odpoveďou stojí dva. Ak vám v sezóne dôjdu kredity, dopyty počkajú vo fronte pozdržaných e-mailov a odídu hneď po dobití – žiadny sa nestratí.

Ďalšie kroky

• Ukladajte si každého zákazníka do Kontakty: šablóna už má namapované email, name a company; stačí zapnúť zber kontaktov v Nastavenia šablóny.
• Chcete dopyt v jazyku zákazníka? Pridajte šablóne jazykovú verziu a odošlite formulár so skrytým poľom fm_locale (napríklad de).