Formgong

JavaScript iletişim formu e-posta gönderir

Formgong team ·

Bir JavaScript iletişim formunun yine de POST için bir adresi olmalıdır. fetch çağırın, alanları gönderin ve JSON yanıtını okuyun. Formgong bu çağrıyı sizin sunucunuz olmadan kabul eder. Kitaplık ve API yolu gerekmez. Ücretsiz planda Telegram hemen gelir, e-posta ise günlük özettir.

Bu JavaScript formunu kopyalayın

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="tr">
  <label>Ad <input type="text" name="name" autocomplete="name" placeholder="Adınız" required></label>
  <label>E-posta <input type="email" name="email" autocomplete="email" placeholder="siz@ornek.com" required></label>
  <label>Mesaj <textarea name="message" placeholder="Size nasıl yardımcı olabiliriz?" 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>Bu alanı boş bırakın<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Gönder</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 ? "Gönderildi. Teşekkürler!" : "Gönderilemedi. Lütfen tekrar deneyin.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "Bağlantı kurulamadı. Lütfen tekrar deneyin.";
    } finally {
      button.disabled = false;
    }
  });
</script>
JSON yerine FormData gönderin
JSON yerine FormData gönderin
<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 ? "Gönderildi. Teşekkürler!" : "Gönderilemedi. Lütfen tekrar deneyin.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "Bağlantı kurulamadı. Lütfen tekrar deneyin.";
    }
  });
</script>
Form zaten sayfadaysa yalnızca fetch çağrısı
Form zaten sayfadaysa yalnızca fetch çağrısı
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: "tr", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Gönderilemedi. Lütfen tekrar deneyin.");
  return result.message; // localized "Sent. Thank you!"
}

JavaScript ile formlar nasıl çalışır

İnsanlar e-posta gönderen bir JavaScript iletişim formu arar, fetch formu aramaz. fetch yalnızca POST yapan tarayıcı çağrısıdır. EmailJS, Axios ya da sunucu yolu gerekmez.

Accept başlığını application/json yapın. Yoksa uç nokta düz form gibi yönlendirme döner. Başarısız fetch hata fırlatır. Reddedilen kayıt success değerini false yapar ve gösterebileceğiniz bir ileti döner.

JavaScript ile kurulum

  1. Formgong'da bir form oluşturun ve erişim anahtarını kopyalayın.
  2. Yukarıdaki kodu yapıştırın. Bu bir form ve kısa bir betiktir: async ve await, JSON ve ağ hataları için try catch.
  3. Tuzak alanını boş ve ekran dışında tutun. Bir bot doldurursa kayıt spam olarak saklanır ve iletilmez.
  4. Betik istek sürerken düğmeyi kapatır, sonra yanıttaki iletiyi gösterir. Başarı formu temizler.
  5. Canlı sayfayı açın ve bir deneme gönderin. Gelen kutusuna bakın, telefona uyarı için Telegram'ı bağlayın.

JavaScript iletişim formunu gönderme yolları

SeçenekSizin çalıştırdığınız şeyNe alırsınız
mailto:Sunucuda bir şey yok. Posta uygulaması açılır.İleti ancak ziyaretçi gönderirse gelir. Telefonda kolay bozulur.
Kendi API yolunuzBir sunucu, SMTP ve bir sır.Kontrol ettiğiniz e-posta. Spam, kesinti ve kod da sizde kalır.
EmailJSSayfadaki onların betiği.Hizmetleri üzerinden e-posta. Burada fiyat yok. O gün fiyat sayfası yeniden bakılmadı.
FormspreeYok. Tarayıcı Formspree'ye gönderir.E-posta ve panel. Ücretsiz ayda 50 gönderim. Personal ayda 15 dolardır.
FormgongYok. fetch Formgong'a gönderir.Telegram hemen. Free planda e-posta günlük özettir. Ayda 300 gönderim, veriler AB'de.

Formspree fiyatları 2026-10-06 günü formspree.io/plans sayfasından alındı. Formgong sınırları ürün kodundan gelir. EmailJS bu aramada çıkar. Fiyatı o gün yeniden bakılmadı. Web3Forms.com HTTP 403 verdi, bu yüzden tabloda yok.

Fiyatlar · Formgong vs Formspree · HTML iletişim formu e-posta gönderir

Bileşen paketi: npm install @formgong/core (npm: @formgong/core)

Mevcut projeye ekleyin: npx formgong init (npm: formgong)

fetch, kitaplık ya da kendi sunucunuz?

Form düz JavaScript, küçük bir parça ya da pencere ise bu sayfayı kullanın. Ziyaretçi sayfada kalır.

JavaScript kapalı olabiliyorsa düz HTML kullanın. Yukarıdaki formun action değeri vardır, bu yüzden betik çalışmasa da gider.

Kendi sunucunuzu yalnızca kayıt uygulamanızdaki veriyi değiştirecekse yazın. EmailJS kendi betiğiyle gönderir. Formgong tek bir POST'tur.

Sorular ve yanıtlar

JavaScript sunucusuz bir formu e-postaya gönderir mi?

Tarayıcı SMTP konuşamaz. Alanları bir form uç noktasına POST edebilir. Postayı o uç nokta gönderir. Bu form için sunucu çalıştırmazsınız.

FormData mı JSON mu göndermeliyim?

JSON metin alanlarına uyar. FormData, form öğesi hazırsa ve dosya gönderiyorsanız uyar. İkisi de aynı gelen kutusuna gider. FormData için Content-Type koymayın.

Neden JSON yerine yönlendirme alıyorum?

Düz form POST'u yönlendirme döner. JSON için Accept başlığını application/json yapın. Sonra success ve iletiyi okuyun.

Hataları nasıl ele almalıyım?

Başarısız fetch hata fırlatır. Bu bir ağ hatasıdır. Reddedilen kayıt success değeri false olan JSON döner. O iletiyi gösterin ve yazılanı silmeyin.

EmailJS ya da başka bir kitaplık gerekir mi?

Hayır. fetch tarayıcıdadır. Zaten kullanıyorsanız bir kitaplık da olur. Aynı alanları ve aynı başlıkları gönderin.

Ücretsiz başla

Tüm platformlar →