FRAMEWORK

Gatsby sitenize form backend ekleyin

Formstork, statik Gatsby sitenizin POST attığı backend'dir. Formunuz alanlarını access key'inizle bir Formstork endpoint'ine gönderir; Formstork her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve gönderimi aranabilir bir panele kaydeder.

Nasıl çalışır

Bir Gatsby sitesi statik HTML ve JavaScript'e derlenir, dolayısıyla yayına alındıktan sonra bir form POST'unu yakalayacak çalışan bir sunucu yoktur. İşte o sunucu Formstork'tur. Formunuzu tek bir Formstork endpoint'ine yönlendirir, gizli bir access_key alanı eklersiniz; her gönderim size e-postayla gelir ve ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde aranabilir, etiketlenebilir bir panelde saklanır. İstek doğrudan HTTPS üzerinden Formstork'a gittiği için Gatsby Functions'a, bir serverless handler'a ya da kendinize ait herhangi bir backend'e ihtiyaç duymazsınız. Statik çıktınızı Netlify'a, Vercel'e, bir CDN'e ya da düz object storage'a yayınlamanız fark etmez, aynı şekilde çalışır.

jsx

import React, { useState } from "react"

export default function ContactForm() {
  const [status, setStatus] = useState("")

  async function handleSubmit(e) {
    e.preventDefault()
    setStatus("sending")
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: new FormData(e.target),
    })
    setStatus(res.ok ? "sent" : "error")
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {status === "sent" && <p>Thanks, we got your message.</p>}
    </form>
  )
}

Statik kalın, backend'i atlayın

Siteniz tamamen statik kalır. Gatsby Functions, Lambda ya da bakımını üstleneceğiniz bir sunucu yoktur. Form doğrudan Formstork'a POST atar, gerisini Formstork halleder.

Her gönderim aranabilir

Formstork her gönderimi saklar; etiketleyebilir, arayabilir, CSV veya JSON olarak dışa aktarabilirsiniz. Ziyaretçinin e-postası reply-to olarak ayarlandığından yanıtı doğrudan e-postanızdan ya da panelden verirsiniz.

Spam filtrelenir, gönderim yönlendirilir

Gizli honeypot ve sunucu tarafı içerik filtresi otomatik çalışır; isterseniz Turnstile, hCaptcha ya da reCAPTCHA ekleyebilirsiniz. Kurallar motoru, alan değerine göre gönderimleri Slack, Google Sheets ve diğer entegrasyonlara yönlendirebilir.

Kurulum

1Formstork panelinizde bir form oluşturun ve access key'ini kopyalayın.
2Gatsby sayfanıza bir React bileşeni ekleyin ve form verisini https://api.formstork.com/submit adresine POST edin.
3Access key'inizi gizli bir access_key alanı olarak gönderin ki Formstork gönderimi doğru forma yönlendirsin.
4gatsby build çalıştırıp yayına alın. Test için bir kez gönderim yapın; gönderim hem e-postayla hem de panelinize düşer.

Sık sorulanlar

Gatsby'de form gönderimlerini nasıl işlerim?

Gatsby sitesi statik olduğundan yayında bir form POST'unu alacak sunucu yoktur. Formunuzu access key'inizle Formstork endpoint'ine yönlendirin; Formstork POST'u alır, size e-posta gönderir ve gönderimi panelinize kaydeder. Ekstra bir sunucuya gerek kalmaz.

Gatsby Functions veya serverless backend'e ihtiyacım var mı?

Hayır. Form doğrudan HTTPS üzerinden Formstork'a POST atar, yani Gatsby Functions, bir Lambda ya da kendi API'niz olmadan çalışır. Statik çıktınızı istediğiniz yere yayınlayabilirsiniz.

Bir Gatsby formu için Formstork ücretsiz mi?

Evet. Ücretsiz plan ayda 250 gönderim, tam panel, e-posta teslimi, spam filtreleme, entegrasyonlar, CSV ve JSON dışa aktarma ve 90 günlük saklama içerir, kredi kartı gerekmez.

Formstork'u ücretsiz dene

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

Access key'ini al Dokümanları oku