Formstorkdok
FiyatlandırmaENTRPanel

Nuxt

Nuxt 3, Vue üzerinde çalışır, bu yüzden @formstork/vue composable herhangi bir <script setup> bileşenine doğrudan yerleşir. Tek bir dosyada, bakımını üstleneceğiniz sunucu kodu olmadan çalışan bir iletişim formu elde edersiniz.

Kurulum

npm install @formstork/vue

Bileşeni ekleyin

components/ altında bir ContactForm.vue dosyası oluşturun. Nuxt bunu otomatik olarak içe aktarır, böylece <ContactForm /> etiketini herhangi bir sayfaya bırakabilirsiniz.

<script setup>
import { useFormstork } from "@formstork/vue";

const { submit, isSubmitting, isSuccess, message } = useFormstork({
  accessKey: "YOUR_ACCESS_KEY",
});
</script>

<template>
  <p v-if="isSuccess">Thanks, {{ message }}</p>
  <form v-else @submit="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button :disabled="isSubmitting">
      {{ isSubmitting ? "Sending..." : "Send" }}
    </button>
  </form>
</template>

Composable, form alanlarını okur, sizin adınıza gönderir ve reaktif ref’ler sunar: isSubmitting, isSuccess ve message.

Adım adım

  1. app.formstork.com adresindeki Formstork panelinden ücretsiz bir access key alın.
  2. Composable’ı kurun: npm install @formstork/vue.
  3. Yukarıdaki ContactForm.vue dosyasını components/ altına ekleyin, ardından YOUR_ACCESS_KEY yerine kendi anahtarınızı yazın.
  4. <ContactForm /> etiketini pages/contact.vue gibi bir sayfaya yerleştirin.
  5. npm run dev komutunu çalıştırın, bir test mesajı gönderin ve panelinize düştüğünü görün.

Ücretsiz plan ayda 250 gönderimi kapsar.

Composable olmadan

Bir bağımlılık eklemek istemiyorsanız, formu doğrudan fetch ile gönderin. Bu, hiçbir içe aktarma olmadan herhangi bir Nuxt bileşeninde çalışır:

<script setup>
async function onSubmit(e) {
  e.preventDefault();
  await fetch("https://api.formstork.com/submit", {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
}
</script>

<template>
  <form @submit="onSubmit">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button>Send</button>
  </form>
</template>