Jak zrobić formularz zapytania ofertowego na stronę internetową

Formularz zapytania ofertowego mówi Ci więcej niż formularz kontaktowy: czego klient potrzebuje, jaki ma budżet i na kiedy. Zbudujesz go w czystym HTML, każde zapytanie dostaniesz jako czytelnie ułożony e-mail, a klient otrzyma automatyczną odpowiedź „mamy Twoje zapytanie”.

Potrzebujesz: darmowego konta Frontmail i około piętnastu minut.

1. Podłącz swoją skrzynkę

W Usługi e-mail → Dodaj usługę podłącz Gmail, Outlook, serwer SMTP albo dostawcę e-maili transakcyjnych, zaznacz Ustaw jako domyślną i kliknij Zweryfikuj i zapisz.

2. Utwórz szablon zapytania ofertowego

1. Otwórz Szablony → Z galerii i wybierz Zapytanie ofertowe (kategoria Biznes).
2. Kliknij Użyj szablonu. Zapytanie trafia na Twój adres; w Reply-To jest klient.

Szablon ma te parametry:

Parametr	Typ	Wymagany	Uwagi
name	string	tak
email	email	tak
phone	string	nie
company	string	nie
service	enum	tak	jedna z wartości podanych w zakładce Parametry
budget	enum	nie	jedna z wartości podanych w zakładce Parametry
deadline	date	nie	YYYY-MM-DD, dokładnie to, co wysyła <input type="date">
details	text	tak	co najmniej 10 znaków

service i budget przyjmują tylko wartości z listy. Przykładowy kod poniżej używa wartości z angielskiej wersji szablonu (Website, E-shop, … i Under $5k, …). Szablon utworzony po polsku ma polskie wartości: Strona internetowa, Sklep internetowy, Aplikacja mobilna, Konsultacje, Inne oraz Do 20 tys. zł, 20–100 tys. zł, 100–200 tys. zł, Powyżej 200 tys. zł. Dopasuj je w zakładce Parametry do tego, co sprzedajesz – formularz musi wysyłać dokładnie te wartości, które tam są.

3. Dodaj automatyczne potwierdzenie

1. Szablony → Z galerii → Automatyczna odpowiedź: dziękujemy za wiadomość → Użyj szablonu.
2. W jego zakładce Parametry ustaw wartości domyślne company_name (nazwa Twojej firmy) i response_time (na przykład w ciągu jednego dnia roboczego). Zapisz.
3. Otwórz szablon zapytania ofertowego → Ustawienia → Doręczanie i wybierz nowy szablon jako Szablon automatycznej odpowiedzi. Zapisz.

Jedno wysłanie formularza daje teraz dwa e-maile: zapytanie do Ciebie i potwierdzenie do klienta. Automatyczną odpowiedź może wywołać tylko Twój własny formularz, więc nikt nie wykorzysta jej do wysyłania e-maili obcym osobom.

4. Dopuść swoją stronę

W Bezpieczeństwo dodaj swoją domenę w sekcji Dozwolone domeny i kliknij Zapisz. Potem zabezpiecz formularz przed botami: utwórz darmowy widżet Cloudflare Turnstile, wklej jego klucze w Bezpieczeństwo → Ochrona przed botami i włącz CAPTCHA we wszystkich szablonach.

5. Wstaw formularz

Użyj swojego klucza publicznego i ID szablonu z zakładki Kod:

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

Puste pola opcjonalne (niewybrany budżet, brak terminu) po prostu nie pojawią się w e-mailu.

6. Przetestuj

Wyślij testowe zapytanie ze swoim adresem w polu Email. Powinno przyjść zapytanie, a chwilę później potwierdzenie. Oba e-maile znajdziesz w Historii, każdy z własną osią czasu.

Każdy e-mail zużywa jeden kredyt, więc zapytanie z automatyczną odpowiedzią kosztuje dwa. Jeśli w sezonie skończą Ci się kredyty, zapytania czekają w kolejce wstrzymanych wiadomości i wyjdą, gdy tylko doładujesz konto – żadne nie przepadnie.

Co dalej

• Zapisuj każdego klienta w Kontaktach: szablon ma już zmapowane email, name i company; włącz Zbieranie kontaktów w Ustawieniach szablonu.
• Chcesz zapytanie w języku klienta? Dodaj wersję językową szablonu i wysyłaj formularz z ukrytym polem fm_locale (na przykład de).