Gatsby

Gatsby, React’i istemci tarafinda render eder, bu yuzden @formstork/react hook’u herhangi bir sayfaya veya bilesene dogrudan yerlesir. API route veya serverless fonksiyon gerekmez.

Form bilesenini ekleyin

npm install @formstork/react

// src/components/contact-form.tsx
import { useFormstork } from "@formstork/react";

export function ContactForm() {
  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>
  );
}

<ContactForm /> bilesenini src/pages altindaki herhangi bir sayfaya, ornegin src/pages/contact.tsx dosyasina yerlestirin.

Adim adim

1. Hook’u kurun: npm install @formstork/react.
2. Formstork panosunda https://app.formstork.com adresinden ucretsiz access key’inizi olusturun ve YOUR_ACCESS_KEY yerine yazin.
3. Yukaridaki bileseni src/components altina ekleyin.
4. <ContactForm /> bilesenini src/pages icindeki bir Gatsby sayfasinda render edin.
5. gatsby develop komutunu calistirin ve bir test mesaji gonderin.
6. Formstork gelen kutunuzda kaydi kontrol edin.

Hook, form alanlarini toplar, bunlari gizli access_key alaniniz ile birlikte https://api.formstork.com/submit adresine POST eder ve gonderim ulastiginda isSuccess degerini true yapar. Access key istemci kodunda aciga cikarilmasi guvenli oldugundan ek bir yapilandirma gerekmez. Ucretsiz plan ayda 250 gonderimi kapsar.