AJAX iletişim formu
Aynı iletişim alanları fetch ile JSON olarak gider. Ziyaretçi sayfada kalır ve kısa bir durum görür.
Kopyaladığınız şey
Bu başlangıç şablonu aynı iletişim alanlarını fetch ile gönderir, böylece ziyaretçi sayfanızda kalır ve kısa bir durum okur.
Formun yine bir action değeri ve POST yöntemi vardır. JavaScript çalışmazsa tarayıcı normal bir gönderim yapar.
Bu yedek yol, eski tarayıcılar ve betikleri engelleyen kişiler için önemlidir. İki ayrı form sürdürmeniz gerekmez.
Asıl snippet JSON gönderir. Content-Type değerini application/json yapar ve Accept değerini application/json yapar.
Başarı, JSON içindeki success mantıksal değeridir. Bu değer true olduğunda snippet yanıt mesajını ya da kısa bir teşekkürü gösterir ve formu sıfırlar.
Değer false olduğunda snippet yanıt mesajını gösterir. Formgong bu mesajı _lang dilinde yazar.
JSON ve FormData
Bir JSON gövdesi, göndermek istediğiniz alanları tek tek listelemelidir. Snippet access_key, _lang, name, email, phone, message ve botcheck alanlarını içerir.
Turnstile satırlarını daha sonra yorumdan çıkarırsanız JSON yolu, bu alanda bir değer varken cf-turnstile-response değerini de kopyalar.
Ek snippet JSON yerine FormData kullanır. İçerik türünü, sınır değeriyle birlikte, tarayıcı belirler. Content-Type başlığını siz belirlemeyin.
FormData, formdaki her alanı alır. Widget formun içindeyse Turnstile belirtecini de alır.
Her iki yol da Accept: application/json gönderir. Bu başlık yoksa normal bir tarayıcı form gönderimi teşekkür sayfasını alır, JSON almaz.
Aynı anda hem bir JSON gövdesi hem bir multipart gövdesi göndermeyin. Birini seçin. İki snippet katman değil, alternatiftir.
Spam, Telegram ve sınırlar
Adı botcheck olan honeypot'u boş, ekran dışında ve tabindex -1 ile tutun. Doldurulmuş bir honeypot spam olarak saklanır ve iletilmez.
Alan adları kısa kalsın ki Telegram onları kalın yazabilsin. email adını uzun bir cümleye çevirmeyin.
Erişim anahtarı sayfada kalır. Onu bir sunucu sırrına taşımak formu daha güvenli yapmaz ve bu snippet'in bir sunucusu yoktur.
Ücretsiz planda Telegram anında gelir ve e-posta günlük bir özettir. Gelen kutusu başvuruları 30 gün tutar.
Ücretsiz plan ayda 300 başvuru içerir. Bir spam başvurusu bunlardan birini harcamaz.
Bu önizleme bir başvuru göndermez. Snippet'i kendi sitenize bağlayın, sonra denemeyi o sayfadan gönderin.
Hizmeti Formgong işletir. Ürünle ilgili yardım için support@formgong.com adresine yazın.
Önizleme
Form kodu
<form id="fg-ajax" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="tr">
<label>Ad <input type="text" name="name" autocomplete="name" required></label>
<label>E-posta <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mesaj <textarea name="message" required></textarea></label>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Bu alanı boş bırakın <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
İsteğe bağlı. Bu form için Turnstile açın, sonra bu yorum işaretlerini kaldırın ve site anahtarınızı yapıştırın.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="tr"></div>
-->
<button type="submit">Gönder</button>
<p data-status role="status"></p>
</form>
<script>
(function () {
var form = document.getElementById("fg-ajax");
if (!form) return;
var status = form.querySelector("[data-status]");
form.addEventListener("submit", function (event) {
event.preventDefault();
var data = {
access_key: form.access_key.value,
_lang: form._lang.value,
name: form.name.value,
email: form.email.value,
phone: form.phone.value,
message: form.message.value,
botcheck: form.botcheck.value
};
var token = form.querySelector('[name="cf-turnstile-response"]');
if (token && token.value) data["cf-turnstile-response"] = token.value;
var body = JSON.stringify(data);
fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: body
}).then(function (res) { return res.json(); }).then(function (result) {
if (status) status.textContent = result && result.success ? (result.message || "Gönderildi. Teşekkürler!") : ((result && result.message) || "Gönderilemedi. Lütfen tekrar deneyin.");
if (result && result.success) form.reset();
}).catch(function () {
if (status) status.textContent = "Gönderilemedi. Lütfen tekrar deneyin.";
});
});
})();
</script>JSON yerine FormData kullanan aynı form
<form id="fg-ajax" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="tr">
<label>Ad <input type="text" name="name" autocomplete="name" required></label>
<label>E-posta <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mesaj <textarea name="message" required></textarea></label>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Bu alanı boş bırakın <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
İsteğe bağlı. Bu form için Turnstile açın, sonra bu yorum işaretlerini kaldırın ve site anahtarınızı yapıştırın.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="tr"></div>
-->
<button type="submit">Gönder</button>
<p data-status role="status"></p>
</form>
<script>
(function () {
var form = document.getElementById("fg-ajax");
if (!form) return;
var status = form.querySelector("[data-status]");
form.addEventListener("submit", function (event) {
event.preventDefault();
var body = new FormData(form);
fetch("https://formgong.com/submit", {
method: "POST",
headers: { Accept: "application/json" },
body: body
}).then(function (res) { return res.json(); }).then(function (result) {
if (status) status.textContent = result && result.success ? (result.message || "Gönderildi. Teşekkürler!") : ((result && result.message) || "Gönderilemedi. Lütfen tekrar deneyin.");
if (result && result.success) form.reset();
}).catch(function () {
if (status) status.textContent = "Gönderilemedi. Lütfen tekrar deneyin.";
});
});
})();
</script>Sorular ve yanıtlar
Formda neden hâlâ bir action adresi var?
JavaScript kapalıyken gönderimin çalışması için. Betik, preventDefault çağrısını yalnızca kendisi çalışırken yapar.
JSON mu göndermeliyim, FormData mı?
İkisi de geçerlidir. JSON her alanı açıkça yazar. FormData, daha sonra girdi eklediğinizde daha kısadır, çünkü formu okur.
Durum satırı boş kalıyor. Ne başarısız oldu?
Accept değerinin application/json olduğunu, erişim anahtarının size ait bir formla eşleştiğini ve sayfanın yerel bir dosya olarak değil http ya da https üzerinden sunulduğunu kontrol edin.
Bu form bir dosya yükleyebilir mi?
Bu başlangıç şablonunda hayır. Dosya alanları için eklerin açık olması ve geçerli bir Turnstile belirteci gerekir. Bu kurulum için panel belgelerini kullanın.