FRAMEWORK

React uygulamanıza bir form backend ekleyin

Formstork, herhangi bir React formundan gelen gönderimleri alır, her birini size e-postayla iletir ve tüm mesajları aranabilir bir panelde saklar. Component'iniz form verisini POST eder; kuracağınız bir sunucu ya da API route yoktur.

Nasıl çalışır

Bir React formu tamamen tarayıcıda çalışır: useState ya da native form ile alanları toplayabilir ama bunları tek başına hiçbir yere iletemez. Formstork, POST'u alan backend'dir. Component'iniz form verisini access key'inizle bir Formstork endpoint'ine gönderir; Formstork da her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve aranabilir bir panele kaydeder. İstek sade bir fetch() olduğu için Create React App, Vite ya da herhangi bir React kurulumunda aynı şekilde çalışır; sizin tarafınızda deploy edilecek hiçbir şey yoktur. Spam filtresini, Slack ya da Google Sheets gibi bir entegrasyonu ya da bir otomatik yanıtı istediğinizde açarsınız.

jsx

import { useState } from "react";

export default function ContactForm() {
  const [sent, setSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.target);
    data.append("access_key", "YOUR_ACCESS_KEY");
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: data,
    });
    if (res.ok) setSent(true);
  }

  if (sent) return <p>Thanks, we got your message.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Your email" required />
      <textarea name="message" placeholder="Your message" required />
      <button type="submit">Send</button>
    </form>
  );
}

Kurulacak API route yok

React uygulamanız yalnızca frontend olarak kalır. Form, sade bir fetch() ile doğrudan Formstork'a POST eder; yani yazıp deploy edip ayakta tutacağınız bir Express sunucusu, serverless function ya da Next API route yoktur.

Doğrudan gelen kutunuzdan yanıtlayın

Her gönderim, ziyaretçinin adresi reply-to olarak ayarlanmış şekilde size e-posta olur; yanıtla dediğinizde mesaj yazan kişiye ulaşır. Her mesaj ayrıca aranabilir, etiketlenebilir bir panelde saklanır; CSV ya da JSON olarak dışa aktarabilirsiniz.

Spam sizin yerinize hallolur

Gizli bir honeypot, sunucu tarafında bir içerik filtresi ve isteğe bağlı Turnstile, hCaptcha ya da reCAPTCHA botları size e-posta olmadan önce uzak tutar. İşaretlenen gönderimler size ulaşmadan filtrelenir, böylece React formunuzun kendi anti-spam mantığına ihtiyacı olmaz.

Kurulum

1Formunuzu ihtiyacınız olan alanlarla (name, email, message) bir React component'i olarak oluşturun ya da Formstork'un no-code form oluşturucusundan başlayın.
2Gönderimde alanları FormData'ya toplayın, access key'inizi access_key olarak ekleyin ve fetch() ile https://api.formstork.com/submit adresine gönderin.
3Bir kez test amaçlı gönderin. Gönderim hem gelen kutunuza hem Formstork panelinize, ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde düşer.
4İsteğe bağlı: başarı durumunu göstermek için res.ok değerini okuyun ve panelde Slack ya da Google Sheets gibi bir entegrasyonu bağlayın.

Sık sorulanlar

React'te backend olmadan form gönderimlerini nasıl işlerim?

Form verisini bir fetch() POST ile bir Formstork endpoint'ine gönderin ve access key'inizi ekleyin. Backend Formstork'tur: gönderimi alır, size e-postayla iletir ve aranabilir bir panelde saklar. Kuracağınız bir sunucu ya da API route yoktur.

FormData mı yoksa JSON mı göndermeliyim?

İkisi de çalışır. FormData bir formdan en kısa yoldur ve ücretli planlarda dosya yüklemeyi destekler; JSON ise değerleri zaten state'te tuttuğunuzda pratiktir. İkisi de access_key'iniz eklenmiş olarak aynı endpoint'e POST eder.

Ücretsiz mi?

Evet, ücretsiz plan tam panel ve 90 günlük saklama ile ayda 250 gönderim içerir. Ücretli planlar daha yüksek hacim, kalıcı saklama, otomatik yanıtlar ve dosya yükleme/ek desteği ekler.

Formstork'u ücretsiz dene

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

Access key'ini al Dokümanları oku