Remix

Remix, React üzerinde çalışır, bu yüzden @formstork/react hook’unu doğrudan bir route bileşenine ekleyebilirsiniz. Başka bir kurulum gerekmez: hook, alanları toplar ve sizin yerinize gönderir.

Route bileşeni

npm install @formstork/react

// app/routes/contact.tsx
import { useFormstork } from "@formstork/react";

export default function Contact() {
  const { submit, isSubmitting, isSuccess, message } = useFormstork({
    accessKey: "YOUR_ACCESS_KEY",
  });

  if (isSuccess) return <p>Thanks, {message}</p>;

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={isSubmitting}>
        {isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Adım adım

1. Panelde bir form oluşturun ve ücretsiz access key’ini kopyalayın.
2. Hook’u npm install @formstork/react ile kurun.
3. app/routes/contact.tsx gibi bir route dosyası ekleyin ve yukarıdaki bileşeni yapıştırın.
4. YOUR_ACCESS_KEY yerine kendi anahtarınızı yazın. Access key’i tarayıcıya göndermek güvenlidir, bu yüzden bir ortam değişkenine gerek yoktur.
5. Route’u açıp formu gönderin. Hook, https://api.formstork.com/submit adresine POST eder ve gönderim gelen kutunuza ve panelinize ulaştığında isSuccess değerini true yapar.

Ücretsiz plan ayda 250 gönderimi kapsar.

Remix action ile sunucu tarafında

İsteği istemciden uzak tutmak mı istiyorsunuz? Bir Remix action, aynı adrese fetch ile POST edebilir:

// app/routes/contact.tsx
export async function action({ request }: { request: Request }) {
  const form = await request.formData();
  form.append("access_key", "YOUR_ACCESS_KEY");

  await fetch("https://api.formstork.com/submit", {
    method: "POST",
    body: form,
    headers: { Accept: "application/json" },
  });

  return { ok: true };
}

Bunu düz bir <form method="post"> ile eşleştirin, Remix gönderimi hiçbir istemci JavaScript’i olmadan halleder.