HTML iletişim formu kodu

Düz HTML ile bir iletişim formu. Tarayıcı gönderir. Backend, framework veya yazı tipi gerekmez.

Kopyaladığınız şey

Bu başlangıç şablonu, düz HTML ile yazılmış bir iletişim formudur. Tarayıcı formu normal bir POST ile gönderir. Burada bir fetch çağrısı yoktur, bir framework yoktur ve bir derleme adımı yoktur.

İşaretlemeyi statik bir sayfaya, bir Webflow gömmesine ya da form öğesi kabul eden herhangi bir yere yapıştırın. Sayfanın bu form için kendi sunucusuna ihtiyacı yoktur.

Form bir ad, bir e-posta adresi ve bir mesaj sorar. Telefon isteğe bağlıdır. Bu sözcükler aynı zamanda alan adlarıdır.

Telegram her alan adını yanıtın üstünde kalın yazar. name, email ve message gibi kısa adlar telefonda okunaklı kalır.

Burada bir dosya, bir ödeme ya da Formgong'un bir puanı toplanmaz. Bu yalnızca ziyaretçinin size ulaşması için bir yoldur.

Gönderim nasıl çalışır

Formun action değeri, Formgong taban adresiniz artı /submit yoludur ve yöntem POST'tur. Gizli access_key alanı formu adlandırır.

Anahtar herkese açıktır ve sayfada durmalıdır. Ziyaretçinin bir başvuru göndermesine izin verir. Bu anahtarla alıcılar değiştirilemez ve bir webhook açılamaz.

Gizli _lang alanı sayfanın dilini taşır, örneğin en. Formgong bu değeri teşekkür sayfası ve hata metni için kullanır.

Bu alan ziyaretçinin mesajını çevirmez. Görünen etiketleri sayfanın dilinde yazın ve alan adlarını İngilizce bırakın.

Honeypot, adı botcheck olan bir girdidir. Ekranın dışında durur, tabindex değeri -1'dir ve autocomplete kapalıdır. İnsanlar bu alanı boş bırakır.

botcheck alanını dolduran bir başvuru spam olarak saklanır ve iletilmez. Ziyaretçi yine de normal başarı yolunu görür.

Turnstile isteğe bağlıdır. Snippet, widget'ı bir yorumun içinde bırakır. Bu şablonda bir site anahtarı yoktur.

Form için Turnstile'ı açarsanız yorum işaretlerini kaldırın ve kendi site anahtarınızı yapıştırın. O ana kadar bu satırlar hiçbir şey yapmaz.

Gizli bir _redirect alanı yoksa Formgong kendi teşekkür sayfasını gösterir. Ek snippet, _redirect değerini bir https adresine ayarlar.

https://example.com/thanks adresini sizin yönettiğiniz bir sayfayla değiştirin. Göreli bir yol kabul edilmez.

Yapıştırdıktan sonra

Panelde bir form oluşturun ya da bu sayfadaki düğmeyi kullanın ve yer tutucuyu kopyaladıysanız fk_your_access_key değerini değiştirin.

Mesajı telefonunuzda görmek istediğinizde form ayarlarından Telegram'ı bağlayın. Ücretsiz planda e-posta ertesi sabah 08:00'de günlük özet olarak gelir; Telegram ise anında gelir.

Denemeyi yayınlanmış sayfadan gönderin. file:// olarak açılmış bir dosya, canlı formun güvenilir bir sınaması değildir.

Ücretsiz plan başvuruları 30 gün saklar. Ücretli planlar onları daha uzun süre tutabilir. Formgong bu kayıtları AB'de saklar.

Ücretsiz plan ayda 300 başvuru içerir. Spam bu sayıya dahil edilmez.

Bir klinik, iş ya da teklif formu gerekiyorsa bu sitede daha aşağıda yer alan bir sektör şablonunu kullanın. Bu sayfa yalnızca sade iletişim düzenidir.

Hizmetle ilgili sorular support@formgong.com adresine yazılır. Hizmeti işleten Formgong'dur. Bu şablon, işleten olarak başka bir şirketin adını vermez.

Önizleme

Form kodu

HTML
<form 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>
</form>
Teşekkür sayfasına yönlendiren aynı form
Teşekkür sayfasına yönlendiren aynı form
<form 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">
  <input type="hidden" name="_redirect" value="https://example.com/thanks">
  <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>
</form>

Sorular ve yanıtlar

Bu form JavaScript gerektirir mi?

Hayır. Formu tarayıcı kendi başına gönderir. Sayfada fetch ile kalan başlangıç şablonu, AJAX şablonudur.

Mesajlar nereye gider?

Formgong gelen kutusuna ve siz bağladığınızda e-postaya ve Telegram'a gider. Sorunun kendisi hizmetle ilgiliyse support@formgong.com adresine yazın.

Daha fazla alan ekleyebilir miyim?

Evet. Kısa adlı girdiler ekleyin, örneğin city. Telegram bu adı yanıtın üstünde yazar. access_key ya da botcheck adını değiştirmeyin.

Önizleme gerçek bir mesaj gönderir mi?

Hayır. Bu sayfadaki önizleme yalnızca bir not gösterir. Snippet'i kendi sitenize gerçek bir erişim anahtarıyla koyana kadar hiçbir şey gönderilmez.