Formstorkdok
FiyatlandırmaENTRPanel

Alpine.js

Alpine.js işaretlemenizi bildirimsel tutar, bu yüzden bir Formstork formu aslında alanları fetch ile gönderen bir x-on:submit.prevent işleyicisinden ibarettir. Derleme adımı ya da kendi çalıştıracağınız bir arka uç yok.

Formu Alpine ile gönderme

<form
  x-data="{
    sending: false,
    sent: false,
    error: '',
    async send(e) {
      this.sending = true;
      this.error = '';
      const res = await fetch('https://api.formstork.com/submit', {
        method: 'POST',
        body: new FormData(e.target),
        headers: { Accept: 'application/json' },
      });
      const data = await res.json();
      this.sending = false;
      res.ok ? (this.sent = true) : (this.error = data.message);
    }
  }"
  x-on:submit.prevent="send($event)"
>
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button :disabled="sending" x-text="sending ? 'Sending...' : 'Send'"></button>
  <p x-show="sent">Thanks, your message was sent.</p>
  <p x-show="error" x-text="error"></p>
</form>

Gizli access_key alanı, verinin hangi forma ait olduğunu Formstork’a bildirir. Accept: application/json başlığını eklemek, uç noktanın yönlendirme yapmak yerine JSON döndürmesini sağlar; böylece sent ve error durumunu satır içinde değiştirebilirsiniz.

@formstork/js ile tek satır

İşleyiciyi elle yazmak istemiyorsanız SDK’yı ekleyip formunuza yöneltin:

npm install @formstork/js
import { formstork } from "@formstork/js";

const form = document.querySelector("#contact");
formstork(form, {
  accessKey: "YOUR_ACCESS_KEY",
  onSuccess: () => alert("Thanks, your message was sent."),
  onError: (message) => alert(message),
});

formstork(form, options) alanları toplar, gönderir ve sizin yerinize onSuccess veya onError çağırır.

Adım adım

  1. https://app.formstork.com adresindeki Formstork panelinde ücretsiz bir access key oluşturun ve YOUR_ACCESS_KEY yerine yapıştırın.
  2. Alpine.js’i sayfanıza her zamanki gibi ekleyin.
  3. Form işaretlemesini yerleştirin ve gizli access_key alanını kendi anahtarınıza ayarlayın.
  4. x-on:submit.prevent işleyicisini fetch’e bağlayın; Accept: application/json başlığıyla bir FormData gövdesi gönderin.
  5. Onay ya da dönen mesajı göstermek için sent ve error durumunu kullanın.
  6. Bir test mesajı gönderin ve panelinizde görünmesini izleyin. Ücretsiz plan ayda 250 gönderimi kapsar.