Formularz JavaScript, który wysyła e-mail

Formgong team · Updated 2026-10-06

Formularz JavaScript i tak potrzebuje adresu na POST. Wywołaj fetch, wyślij pola i odczytaj odpowiedź JSON. Formgong przyjmuje to wywołanie bez Twojego serwera. Biblioteka i ścieżka API nie są potrzebne. W planie darmowym Telegram jest od razu, a poczta to dzienny zbiorczy mail.

Skopiuj ten formularz JavaScript

Język formularzaEtykiety, podpowiedzi, przycisk i komunikaty Formgong dla odwiedzających (_lang).

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="pl">
  <label>Imię <input type="text" name="name" autocomplete="name" placeholder="Twoje imię" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="ty@example.com" required></label>
  <label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Pozostaw to pole puste<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Wyślij</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Wysłano. Dziękujemy!" : "Nie udało się wysłać. Spróbuj ponownie.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "Brak połączenia. Spróbuj ponownie.";
    } finally {
      button.disabled = false;
    }
  });
</script>

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" placeholder="आपका नाम" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">भेजें</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result.success) form.reset();
    } catch {
      status.textContent = "कनेक्शन विफल। कृपया फिर से कोशिश करें।";
    } finally {
      button.disabled = false;
    }
  });
</script>

Wyślij FormData zamiast JSON

Wyślij FormData zamiast JSON

<script>
  const form = document.querySelector("#fg-contact");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = form.querySelector("[role=status]");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Wysłano. Dziękujemy!" : "Nie udało się wysłać. Spróbuj ponownie.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "Brak połączenia. Spróbuj ponownie.";
    }
  });
</script>

Sam fetch, jeśli formularz już jest na stronie

Sam fetch, jeśli formularz już jest na stronie

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "pl", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Nie udało się wysłać. Spróbuj ponownie.");
  return result.message; // localized "Sent. Thank you!"
}

Jak działają formularze w JavaScript

Ludzie szukają formularza JavaScript, który wysyła maila, a nie formularza fetch. fetch to tylko wywołanie przeglądarki, które robi POST. EmailJS, Axios i ścieżka serwera nie są potrzebne.

Wyślij nagłówek Accept o wartości application/json, inaczej adres odpowie przekierowaniem, jak zwykły formularz. Nieudany fetch rzuca błąd. Odrzucone zgłoszenie wraca z success równym false i tekstem, który możesz pokazać.

Konfiguracja w JavaScript

Utwórz formularz w Formgong i skopiuj klucz.
Wklej kod powyżej. To formularz i krótki skrypt: async i await, JSON oraz try catch na błędy sieci.
Zostaw pole-pułapkę puste i poza ekranem. Jeśli bot je wypełni, zgłoszenie trafia do spamu i nie jest dostarczane.
Skrypt wyłącza przycisk na czas żądania, potem pokazuje tekst odpowiedzi. Sukces czyści formularz.
Otwórz żywą stronę i wyślij test. Sprawdź skrzynkę, potem podłącz Telegram, jeśli chcesz sygnał na telefon.

Jak wysłać formularz JavaScript

Opcja	Co uruchamiasz	Co dostajesz
mailto:	Nic na serwerze. Otwiera się poczta.	Wiadomość tylko jeśli gość ją wyśle. Na telefonie łatwo to zepsuć.
Własna ścieżka API	Serwer, SMTP i sekret.	Pocztę, którą kontrolujesz. Masz też spam, awarie i kod.
EmailJS	Ich skrypt na stronie.	Pocztę przez ich usługę. Tu nie ma ceny. Nie sprawdzano jej na stronie cen tego dnia.
Formspree	Nic. Przeglądarka wysyła do Formspree.	Pocztę i panel. Za darmo 50 zgłoszeń miesięcznie. Personal kosztuje 15 dolarów miesięcznie.
Formgong	Nic. fetch wysyła do Formgong.	Telegram od razu. W Free poczta to dzienny zbiorczy mail. 300 zgłoszeń miesięcznie, dane w UE.

Ceny Formspree pochodzą z formspree.io/plans z 2026-10-06. Limity Formgong pochodzą z kodu produktu. EmailJS jest w wynikach tego zapytania. Jego ceny tego dnia nie sprawdzano. Web3Forms.com zwrócił HTTP 403, więc nie ma go w tabeli.

Cennik · Formgong vs Formspree · Formularz HTML, który wysyła na maila

Pakiet z komponentem: npm install @formgong/core (npm: @formgong/core)

Dodaj do istniejącego projektu: npx formgong init (npm: formgong)

fetch, biblioteka czy własny serwer?

Użyj tej strony przy zwykłym JavaScript, małym widgecie albo oknie modalnym. Gość zostaje na stronie.

Użyj zwykłego HTML, gdy JavaScript może być wyłączony. Formularz powyżej i tak ma action, więc działa bez skryptu.

Pisz własny serwer tylko wtedy, gdy zgłoszenie ma zmienić dane w Twojej aplikacji. EmailJS wysyła przez swój skrypt. Formgong to jeden POST.

Pytania i odpowiedzi

Czy JavaScript wyśle formularz na maila bez serwera?

Przeglądarka nie mówi SMTP. Może wysłać pola POST do backendu formularza. Ten backend wysyła maila. Dla tego formularza nie prowadzisz serwera.

Wysyłać FormData czy JSON?

JSON pasuje do pól tekstowych. FormData pasuje, gdy formularz już jest, i gdy wysyłasz pliki. Oba trafiają do tej samej skrzynki. Przy FormData nie ustawiaj sam Content-Type.

Dlaczego dostaję przekierowanie zamiast JSON?

Zwykły POST formularza zwraca przekierowanie. Aby dostać JSON, wyślij nagłówek Accept o wartości application/json. Potem odczytaj success i tekst.

Jak obsługiwać błędy?

Nieudany fetch rzuca błąd. To błąd sieci. Odrzucone zgłoszenie zwraca JSON, w którym success jest false. Pokaż ten tekst i zostaw to, co gość wpisał.

Czy potrzebuję EmailJS albo innej biblioteki?

Nie. fetch jest w przeglądarce. Biblioteka jest w porządku, jeśli już ją masz. Wyślij te same pola i te same nagłówki.

Zacznij za darmo

Wszystkie platformy →