FRAMEWORK

Qwik uygulamanıza bir form backend ekleyin

Formstork, herhangi bir Qwik formundan gelen gönderimleri alır, her birini size e-postayla iletir ve tüm mesajları aranabilir bir panelde saklar. component$'ınız form verisini bir onSubmit$ handler'ından POST eder; kuracağınız bir sunucu ya da API route yoktur.

Nasıl çalışır

Bir Qwik component'i formunuzu tarayıcıda render eder ve resumability sayesinde onSubmit$ handler'ını baştan fazla JavaScript göndermeden bağlar. Ama framework'ün gönderimi tek başına iletecek bir yeri yine de yoktur. Formstork, POST'u alan backend'dir. onSubmit$ handler'ınız bir FormData oluşturur ve bunu 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 tek başına bir Qwik uygulamasında ister bir Qwik City projesinde 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.

tsx

import { component$, useSignal } from "@builder.io/qwik";

export default component$(() => {
  const status = useSignal("idle");

  return (
    <form
      preventdefault:submit
      onSubmit$={async (event, form) => {
        status.value = "sending";
        const res = await fetch("https://api.formstork.com/submit", {
          method: "POST",
          body: new FormData(form),
        });
        status.value = res.ok ? "sent" : "error";
      }}
    >
      <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></textarea>
      <button type="submit" disabled={status.value === "sending"}>
        {status.value === "sent" ? "Thanks!" : "Send"}
      </button>
    </form>
  );
});

Kurulacak API route yok

Qwik uygulamanız yalnızca frontend olarak kalır. onSubmit$ handler'ı sade bir fetch() ile doğrudan Formstork'a POST eder; yani yazıp deploy edip ayakta tutacağınız bir sunucu, serverless function ya da Qwik City routeAction$'ı 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ıtladığınızda 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 e-posta göndermeden önce uzak tutar. İşaretlenen gönderimler size ulaşmadan filtrelenir, böylece Qwik formunuzun kendi anti-spam mantığına ihtiyacı olmaz.

Kurulum

1Formunuzu ihtiyacınız olan alanlarla (name, email, message) bir Qwik component'i olarak oluşturun ya da Formstork'un no-code form oluşturucusundan başlayın.
2access_key adında gizli bir input ekleyin, sonra bir onSubmit$ handler içinde formdan bir FormData oluşturup 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 göstermek için res.ok değerini bir useSignal ile izleyin ve panelde Slack ya da Google Sheets gibi bir entegrasyonu bağlayın.

Sık sorulanlar

Qwik'te backend olmadan form gönderimlerini nasıl işlerim?

Form verisini bir onSubmit$ handler'ından 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.

routeAction$ ya da server endpoint gerekiyor mu?

Hayır. POST'u alan backend Formstork'un kendisi olduğu için onSubmit$ içindeki istemci tarafında bir fetch() yeterli. Qwik City'nin routeAction$'ını tercih ederseniz aynı endpoint'i sunucudan da çağırabilirsiniz, ama bu isteğe bağlı.

Ü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