Jak dodać formularz kontaktowy na stronę internetową bez backendu

Zbudujesz zwykły formularz HTML, który każde zgłoszenie przesyła do Twojej skrzynki. E-mail wysyła Frontmail przez skrzynkę, której już używasz (Gmail, Outlook, dowolny serwer SMTP albo dostawca e-maili transakcyjnych), więc nie musisz utrzymywać własnego serwera.

Potrzebujesz: darmowego konta Frontmail i około dziesięciu minut.

1. Podłącz swoją skrzynkę

1. W panelu otwórz Usługi e-mail i kliknij Dodaj usługę.
2. Wybierz dostawcę. Gmail i Outlook łączysz przez swoje konto (hasło nie jest nigdzie zapisywane); SMTP, Resend, Postmark, Mailgun i inni wymagają klucza API albo danych logowania.
3. Zaznacz Ustaw jako domyślną i kliknij Zweryfikuj i zapisz. Frontmail sprawdzi dane dostępowe, niczego przy tym nie wysyłając.

2. Utwórz szablon z galerii

1. Otwórz Szablony → Z galerii i wybierz Formularz kontaktowy (kategoria Formularze).
2. Kliknij Użyj szablonu. W polu To jest Twój adres, a w Reply-To adres odwiedzającego, więc zwykłe Odpowiedz trafia prosto do niego.

Szablon oczekuje tych parametrów – staną się atrybutami name pól formularza:

Parametr	Wymagany	Co to jest
name	tak	Imię i nazwisko odwiedzającego
email	tak	Adres odwiedzającego (walidowany)
phone	nie	Numer telefonu
topic	nie	Temat, widoczny w tytule wiadomości
message	tak	Treść wiadomości

3. Dopuść swoją stronę

Klucz publiczny jest widoczny w źródle strony i to jest w porządku – ale korzystać z niego powinna tylko Twoja strona.

1. Otwórz Bezpieczeństwo i dodaj swoją domenę w sekcji Dozwolone domeny (na przykład example.com i www.example.com; na czas developmentu dodaj też localhost). Kliknij Zapisz.
2. Zalecane: utwórz darmowy widżet Cloudflare Turnstile dla swoich domen, wklej jego Klucz witryny i Klucz tajny w Bezpieczeństwo → Ochrona przed botami i kliknij Włącz CAPTCHA we wszystkich szablonach. Boty nie wykorzystają wtedy Twojego formularza, a ludzie zwykle nawet nie zauważą weryfikacji.

4. Wstaw formularz na stronę

Skopiuj Klucz publiczny (Bezpieczeństwo) i ID szablonu (zakładka Kod w szablonie), a potem wklej ten kod tam, gdzie ma się pojawić formularz:

<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() odczytuje pola po ich atrybucie name, więc formularz i szablon pozostają zgodne bez żadnego kodu mapującego. Błędy sieci i chwilowe problemy serwera są automatycznie ponawiane z tym samym kluczem idempotencji – odwiedzający nigdy nie wyśle Ci tej samej wiadomości dwa razy.

5. Przetestuj

Otwórz stronę, wypełnij formularz i wyślij go. E-mail dotrze do Twojej skrzynki w ciągu kilku sekund, a w panelu w sekcji Historia zobaczysz wiadomość z pełną osią czasu.

Jeśli coś nie działa, kod błędu powie Ci dlaczego:

• origin_not_allowed – domeny strony nie ma w Dozwolonych domenach (sprawdź www i port).
• captcha_required – szablon wymaga Turnstile, ale w formularzu brakuje widżetu.
• invalid_template_params – wymagane pole jest puste albo wartość nie pasuje do parametru.

Skończyły Ci się kredyty w gorącym tygodniu? Wiadomość nie przepadnie: zostanie przyjęta ze statusem held i wyjdzie automatycznie, gdy tylko doładujesz kredyty.

Co dalej

• Wyślij odwiedzającemu potwierdzenie: dodaj z galerii szablon Automatyczna odpowiedź: dziękujemy za wiadomość i wybierz go w szablonie kontaktowym w Ustawienia → Doręczanie.
• Używasz Reacta, Vue albo Svelte? Pakiety dla frameworków zawierają gotowy komponent FrontmailForm z wbudowanym widżetem Turnstile – szczegóły znajdziesz w dokumentacji SDK.