FRAMEWORK

Remix uygulamanıza bir form backend ekleyin

Formstork, herhangi bir Remix formundan gelen gönderimleri alır, her birini size e-postayla iletir ve tüm mesajları aranabilir bir panelde saklar. Route'unuz form verisini doğrudan Formstork'a POST eder; yani yazacağınız bir action ya da kuracağınız bir veritabanı yoktur.

Nasıl çalışır

Remix, full-stack bir React framework'üdür, yani size bir sunucu verir: bir route'un action fonksiyonu normalde form POST'unu karşılar. Ama o action'ı yine de yazmanız, bir e-posta servisi bağlamanız ve satırları bir yerde saklamanız gerekir. Formstork, işte tam da o hazır backend'dir. Remix action'ını tamamen atlayıp form verisini client tarafındaki bir onSubmit handler'ından doğrudan Formstork'a POST edebilir ya da isteği sunucuda tutmayı tercih ederseniz aynı endpoint'i action'ınızın içinden çağırabilirsiniz. Her iki durumda da formunuzun alanları ve gizli bir access_key, https://api.formstork.com/submit adresine gider; Formstork da her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve aranabilir, etiketlenebilir bir panele kaydeder. Spam filtresini, Slack ya da Google Sheets gibi bir entegrasyonu veya bir otomatik yanıtı istediğinizde açarsınız.

tsx

import { useState } from "react";
import type { FormEvent } from "react";

export default function Contact() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(event.currentTarget),
    });
    setStatus(res.ok ? "sent" : "error");
  }

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

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="email" name="email" placeholder="Your email" required />
      <textarea name="message" placeholder="Your message" required />
      <button disabled={status === "sending"}>Send</button>
    </form>
  );
}

Kurulacak action ya da veritabanı yok

Remix, form POST'ları için bir action fonksiyonu verir, ama onu yine de yazar, e-postayı bağlar ve satırları bir yerde saklarsınız. Formstork bu backend'in kendisidir; formunuzu tek bir endpoint'e yönlendirir, gerisini atlarsınız.

Client fetch ya da server action, seçim sizin

Bir gönderim yalnızca bir HTTP POST olduğu için onu client tarafındaki bir onSubmit handler'ından fetch() ile gönderebilir ya da isteği sunucuda tutmak için Remix action'ınızın içinden Formstork'u çağırabilirsiniz. @formstork/react paketi de var, ama sade bir fetch yeterli.

Spam filtresi ve entegrasyonlar dahil

Her form bir honeypot ve sunucu tarafı içerik filtresi alır; isteğe bağlı olarak Turnstile, hCaptcha ya da reCAPTCHA eklenir. Her gönderim ayrıca Slack, Discord, Telegram, Notion, Airtable, Mailchimp, Google Sheets ya da imzalı bir webhook'a yönlendirilebilir.

Kurulum

1Formunuzu ihtiyacınız olan alanlarla (name, email, message) bir Remix route bileşeni 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 (ya da aynı endpoint'i route'unuzun action'ından çağırın).
3app.formstork.com'da kaydolun, access key'inizi panelden kopyalayın ve YOUR_ACCESS_KEY yerine yapıştırın.
4Bir kez test amaçlı gönderin. Gönderim, ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde hem gelen kutunuza hem Formstork panelinize düşer. İsteğe bağlı: Slack ya da Google Sheets gibi bir entegrasyonu bağlayın.

Sık sorulanlar

Remix'te form gönderimlerini nasıl işlerim?

Remix formunuzu Formstork endpoint'ine yönlendirin. Gizli bir access_key alanı ekleyin ve alanları https://api.formstork.com/submit adresine POST edin; bunu client tarafındaki bir onSubmit handler'ında fetch() ile ya da route'unuzun action'ından yapabilirsiniz. Formstork her gönderimi size e-postayla iletir ve panelinizde saklar, yani kendi action'ınızı ya da veritabanınızı kurmanıza gerek kalmaz.

Bir Remix action'ı yazmam gerekir mi?

Hayır. POST'u alan backend Formstork'un kendisi olduğu için bir onSubmit handler'ından yapılan client tarafı fetch() yeterli. İsteği sunucuda tutmayı tercih ederseniz aynı endpoint'i bir Remix action'ının içinden çağırabilirsiniz, ama bu isteğe bağlı.

Başlamak ücretsiz mi?

Evet. Ücretsiz plan ayda 250 gönderim, tam panel, e-posta teslimatı, spam filtresi, entegrasyonlar ve CSV ile JSON export içerir; kredi kartı gerekmez ve 90 günlük saklama sunar. Ücretli planlar daha fazla hacim, kalıcı saklama, otomatik yanıtlayıcı 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