FRAMEWORK

jQuery Ajax form gönderimlerini işleyin

Formstork, jQuery formunuzun Ajax POST'unu karşılayan backend'dir. Form verisini access key'inizle Formstork endpoint'ine yollayın; her gönderim size e-postayla gelir, aranabilir bir panele kaydedilir ve ziyaretçiye e-postayı yanıtlayarak dönebilirsiniz. Kuracağınız bir sunucu ya da API route yoktur.

Nasıl çalışır

jQuery, tarayıcıda bir formu bağlamak için harikadır ama gönderimi karşılayacak kendi sunucusu yoktur. İşte o backend Formstork'tur. $(...).on("submit") ile bir submit handler bağlar, formdan bir FormData oluşturur, access_key'inizi eklersiniz ve $.ajax() ile https://api.formstork.com/submit adresine gönderirsiniz. İnsanların çoğunlukla takıldığı tek ayrıntı şudur: FormData kullanırken processData: false ve contentType: false vermeniz gerekir, böylece jQuery değerleri bir query string'e serileştirmez ya da multipart gövdesini sıfırlamaz. Formstork POST'u alır, her gönderimi ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde size e-postayla iletir ve aranabilir, etiketlenebilir bir panelde saklar. Sade bir Ajax isteği olduğu için jQuery'yi zaten yükleyen her sayfada, build adımı ve kendi sunucunuz olmadan çalışır. Spam filtresini, otomatik yanıtı (autoresponder) ya da Slack veya Google Sheets gibi bir entegrasyonu istediğinizde açarsınız.

<!-- Contact form -->
<form id="contact">
  <input type="email" name="email" placeholder="Your email" required />
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

<script>
$("#contact").on("submit", function (e) {
  e.preventDefault();
  var data = new FormData(this);
  data.append("access_key", "YOUR_ACCESS_KEY");
  $.ajax({
    url: "https://api.formstork.com/submit",
    method: "POST",
    data: data,
    processData: false,
    contentType: false,
    dataType: "json",
    success: function () {
      $("#contact").replaceWith("<p>Thanks, we got your message.</p>");
    },
    error: function () {
      alert("Something went wrong. Please try again.");
    }
  });
});
</script>

Kuracak backend yok

Sayfanız yalnızca frontend olarak kalır. Form doğrudan Formstork'a Ajax-POST eder, yani sadece bir iletişim formunu toplamak için yazıp deploy edip ayakta tutacağınız bir Express sunucusu, PHP scripti ya da serverless function yoktur.

FormData doğru şekilde işlenir

Klasik jQuery tuzağı, $.ajax()'in verinizi serileştirmeye ve kendi content type'ını ayarlamaya çalışmasıdır. processData: false ve contentType: false ile tarayıcı düzgün bir multipart gövde gönderir; bu da ücretli planlarda dosya eklemenize olanak tanır.

Size ulaşmadan spam filtrelenir

Gizli bir honeypot ve sunucu tarafı bir içerik filtresi botları otomatik yakalar; daha fazlasını istediğinizde Turnstile, hCaptcha ya da reCAPTCHA'yı açabilirsiniz. Her gerçek gönderim saklanır, aranabilir ve CSV ya da JSON olarak dışa aktarılabilir.

Kurulum

1Formstork panelinde bir form oluşturun ve access key'ini kopyalayın. Ücretsiz plan için kredi kartı gerekmez.
2$("#contact").on("submit", ...) ile bir submit handler bağlayın, e.preventDefault() çağırın ve access_key'iniz eklenmiş şekilde formdan bir FormData oluşturun.
3$.ajax() ile https://api.formstork.com/submit adresine gönderin; FormData'nın doğru gönderilmesi için processData: false ve contentType: false ayarlayın.
4Bir kez test amaçlı gönderin. Gönderim, ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde gelen kutunuza ve panelinize düşer. İsteğe bağlı: teşekkür durumunu göstermek için success callback'ini kullanın.

Sık sorulanlar

Backend olmadan jQuery Ajax ile bir formu nasıl gönderirim?

Bir submit handler bağlayın, e.preventDefault() çağırın, formdan bir FormData oluşturun, access_key'inizi ekleyin ve $.ajax() ile https://api.formstork.com/submit adresine gönderin. Backend Formstork'tur: POST'u alır, gönderimi size e-postayla iletir ve bir panelde saklar, böylece hiç sunucu kodu yazmazsınız.

processData: false ve contentType: false neden gerekli?

Çünkü bir FormData nesnesi gönderiyorsunuz. Bu iki ayar olmadan jQuery verinizi bir query string'e serileştirir ve yanlış content type ayarlar, bu da multipart isteğini bozar. İkisini de false yapmak, tarayıcının doğru gövdeyi ve boundary'yi oluşturmasını sağlar.

Ücretsiz mi?

Evet. Ücretsiz plan; ayda 250 gönderim, tam panel, e-posta teslimatı, spam filtresi, entegrasyonlar, CSV ve JSON export ve 90 günlük saklama içerir, kredi kartı gerekmez. Ücretli planlar daha fazla hacim, kalıcı saklama, otomatik yanıtlar ve dosya yükleme ekler.

Formstork'u ücretsiz dene

Tam panelle ayda 250 gönderim. Kredi kartı gerekmez.

Access key'ini al Dokümanları oku