jQuery

jQuery hâlâ pek çok canlı siteyi çalıştırıyor ve bir formunu Formstork’a bağlamak yalnızca birkaç satır sürüyor. İster @formstork/js SDK’sını ekleyin, ister API’ye kendiniz gönderim yapan küçük bir jQuery submit işleyicisi yazın.

@formstork/js SDK’sını kullanma

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) bir submit işleyicisi ekler, alanları toplar ve sizin adınıza gönderir; böylece ağ çağrısıyla hiç uğraşmazsınız.

Düz jQuery submit işleyicisi

Bağımlılık eklemek istemiyor musunuz? Gizli bir access_key alanı ekleyip formu kendiniz gönderin:

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

$("#contact").on("submit", async function (e) {
  e.preventDefault();
  const res = await fetch("https://api.formstork.com/submit", {
    method: "POST",
    body: new FormData(this),
    headers: { Accept: "application/json" },
  });
  const data = await res.json();
  alert(data.message);
  if (data.success) this.reset();
});

Accept: application/json başlığı, Formstork’a JSON yanıt vermesini söyler; böylece data.success değerini okuyup data.message metnini ziyaretçinize gösterebilirsiniz.

Adım adım

1. app.formstork.com adresinde hesap açın ve ücretsiz erişim anahtarınızı panodan kopyalayın.
2. YOUR_ACCESS_KEY olarak ayarlanmış gizli bir access_key input’u içeren bir form ekleyin.
3. jQuery’yi yükleyin, ardından ister @formstork/js kurun ister yukarıdaki submit işleyicisini yapıştırın.
4. İşleyiciyi formun submit olayına bağlayın ve sayfanın yeniden yüklenmesini durdurmak için preventDefault çağırın.
5. FormData’yı Accept: application/json başlığıyla https://api.formstork.com/submit adresine gönderin.
6. data.success değerini okuyun ve data.message metnini ziyaretçiye gösterin.
7. Bir test mesajı gönderin ve panonuza düştüğünü doğrulayın.

Ücretsiz plan ayda 250 gönderimi kapsar; bir iletişim formunu yayına almak için fazlasıyla yeterlidir.