FRAMEWORK

Next.js'te form gönderimlerini işleyin

Formstork, Next.js formunuzun POST'unu alan backend'dir. Alanlarınızı access key'inizle endpoint'e gönderin; Formstork her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve aranabilir bir panelde saklar. API route ya da veritabanı gerekmez.

Nasıl çalışır

Biri Next.js formunuzu gönderdiğinde alanlar, access key'inizle birlikte HTTP POST olarak Formstork endpoint'ine iletilir. İster sade bir form action, ister fetch kullanan bir client component, ister bir Server Action kullanın; bu yalnızca bir HTTP isteği olduğu için sonuç aynıdır. Formstork gönderimi doğrular ve saklar, ziyaretçinin adresini reply-to olarak ayarlayıp size e-postayla iletir ve aranabilir, etiketlenebilir bir panelde listeler. Yanıtları toplamak için ne bir Route Handler yazarsınız, ne bir SMTP sunucusu bağlarsınız, ne de bir veritabanı çalıştırırsınız. Oradan gönderimleri Slack, Notion, Google Sheets ya da imzalı bir webhook'a yönlendirebilirsiniz; hepsi panelde ayarlanır.

tsx

"use client";

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

export default function ContactForm() {
  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",
      body: new FormData(event.currentTarget),
    });
    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 disabled={status === "sending"}>Send</button>
    </form>
  );
}

Kurulacak API route ya da veritabanı yok

Next.js'te form gönderimlerini işlemek genelde bir Route Handler ya da Server Action yazmak, bir e-posta servisi bağlamak ve satırları bir yerde saklamak demektir. Formstork bu backend'in kendisidir; formunuzu tek bir endpoint'e yönlendirir, gerisini atlarsınız.

Her Next.js yaklaşımıyla çalışır

Bir gönderim yalnızca bir HTTP POST olduğu için App Router'da da Pages Router'da da, fetch kullanan bir client component'te de, bir Server Action'da da, statik export'ta da aynı şekilde davranır. @formstork/react paketi de var, ama sade bir fetch çağrısı 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

1Formstork panelinde bir form oluşturun ve access key'ini kopyalayın.
2Next.js sayfanıza, access_key adında ve bu anahtara ayarlı gizli bir input içeren bir form ekleyin.
3Form alanlarını https://api.formstork.com/submit adresine POST edin; bunu bir client component içinde fetch ile ya da formun action attribute'uyla yapabilirsiniz.
4Formu bir kez test amaçlı gönderin. Artık her gönderim hem e-postayla hem de panelinize düşer.

Sık sorulanlar

Next.js'te form gönderimlerini nasıl işlerim?

Next.js formunuzu Formstork endpoint'ine yönlendirin. access_key adında gizli bir alan ekleyin ve alanları https://api.formstork.com/submit adresine POST edin; bunu bir client component'te fetch ile ya da formun action attribute'uyla yapabilirsiniz. Formstork her gönderimi size e-postayla iletir ve panelinizde saklar, yani kendi API route'unuza ihtiyacınız olmaz.

API route ya da Server Action gerekiyor mu?

Hayır. POST'u alan backend Formstork'un kendisi olduğu için istemci tarafında sade bir fetch ya da bir HTML form action yeterli. Server Action tercih ederseniz aynı endpoint'i sunucudan da ç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. Ü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