FRAMEWORK

Preact uygulamanıza bir form backend ekleyin

Formstork, herhangi bir Preact 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 Preact formu tamamen tarayıcıda çalışır: preact/hooks'tan gelen 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, ister Vite ister preact-cli ile kurun ister Preact'i mevcut bir sayfaya gömün, 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 "preact/hooks";

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

  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    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

Preact 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 backend route yoktur.

Doğrudan gelen kutunuzdan yanıtlayın

Her gönderim, ziyaretçinin adresi reply-to olarak ayarlanmış şekilde size e-posta olarak gelir; 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 hiç e-posta göndermeden durdurur. İşaretlenen gönderimler siz görmeden filtrelenir, böylece Preact formunuzun kendi anti-spam mantığına ihtiyacı olmaz.

Kurulum

1Formunuzu ihtiyacınız olan alanlarla (name, email, message) bir Preact 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 useState ile 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

Preact'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.

Preact formumdan dosya yükleyebilir miyim?

Evet, ücretli planlarda. Formu multipart/form-data olarak gönderin (bir FormData gövdesi bunu sizin için yapar); dosya diğer alanlarla birlikte gider ve her gönderim panelinizde saklanır. Dosya yükleme ücretli bir özelliktir; ücretsiz plan yine de tam panelle ayda 250 gönderim içerir.

Ü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