REHBER

Web sitenize iletişim formu ekleme

Bir iletişim formu iki parçadan oluşur: insanların doldurduğu HTML ve gönderdiklerini yakalayan backend. Markup beş dakikada biter; asıl takılınan yer backend'dir, çünkü ham bir formun POST edeceği bir yer yoktur. Bu rehber önce önemli alanları anlatır, sonra formu Formstork'a bağlar; böylece gönderimler siz bir sunucu çalıştırmadan gelen kutunuza ve bir panele düşer.

Bir iletişim formu gerçekte nelerden oluşur

Her iletişim formunun iki yarısı vardır. Ön taraf, adlandırılmış input'ları (name, email, message) ve bir gönder butonu olan bir HTML formudur; bunu tarayıcı kendi başına gösterebilir. Arka taraf ise POST'u alan, doğrulayan, saklayan ve sizi bilgilendiren bir endpoint'tir. Backend'i atlarsanız, biri Gönder'e bastığında form hiçbir şey yapmaz.

Gönderimleri işlemek için üç seçeneğiniz

Kendi backend'inizi yazabilirsiniz (isteği ayrıştıran, e-posta gönderen ve satırları saklayan bir route ya da serverless function), insanları kendi e-posta istemcisine atıp geri kalan her şeyi kaybeden bir mailto: linkine geri düşebilirsiniz ya da POST edeceğiniz bir endpoint veren hosted bir form backend kullanabilirsiniz. İlkini kurup ayakta tutmak gerçek bir iştir; ikincisi form sayılmaz bile. Aksi halde statik olan bir site için hosted bir backend kısayoldur.

Gerçekten çalışan HTML'i yazın

Her input'a bir name attribute'u verin, çünkü her değerin altında geleceği anahtar odur. Tarayıcının adresi doğrulaması için type="email" kullanın, zorunlu alanlara required attribute'unu ekleyin ve her kontrolü bir label içine sarın; böylece form erişilebilir ve mobilde kullanışlı olur. Yalnızca gerçekten okuyacağınız alanlarla sınırlı tutun; daha kısa bir form daha sık doldurulur.

Formu Formstork'a bağlayın

Formun action'ını https://api.formstork.com/submit yapın ve tek bir gizli alan ekleyin: access_key, değeri de panelinizdeki anahtar (kısa /f/YOUR_ACCESS_KEY URL'si de çalışır). Backend'in tamamı bu kadar. Her gönderim, ziyaretçinin adresi reply-to olarak ayarlanmış şekilde size e-posta olur; yanıtladığınızda mesaj onlara ulaşır ve her mesaj aranabilir, etiketlenebilir bir panelde saklanır; CSV ya da JSON olarak dışa aktarabilirsiniz. Ücretsiz plan, kredi kartı olmadan ayda 250 gönderimi kapsar.

Spam'i uzak tutun, iyi olanları yönlendirin

Herkese açık bir form botları çeker; bu yüzden Formstork varsayılan olarak gizli bir honeypot alanı ve sunucu tarafında bir içerik filtresi ekler, görünür bir kontrol istediğinizde de isteğe bağlı Turnstile, hCaptcha ya da reCAPTCHA sunar. Temiz gönderimler, zaten çalıştığınız yerlere dağılabilir: Slack, Discord, Telegram, Notion, Airtable, Google Sheets, Mailchimp ya da imzalı (HMAC) bir webhook. Bunların hiçbirini sayfaya eklemezsiniz; hepsi formun kendisinde yapılandırılır.

html

<form action="https://api.formstork.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label>
    Name
    <input type="text" name="name" required />
  </label>

  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <button type="submit">Send</button>
</form>

Sık sorulanlar

Web siteme iletişim formu eklemek için backend'e ihtiyacım var mı?

Hayır. HTML tarayıcıda çalışır, gerisini hosted bir form backend halleder. Formun action'ını Formstork'a yöneltin ve access_key'inizi ekleyin; POST'u alır, size e-posta gönderir ve gönderimi saklar. Kuracağınız bir sunucu ya da serverless function yoktur.

İletişim formu gönderimlerini e-postayla nasıl alırım?

Her Formstork gönderimi otomatik olarak size e-posta olur; ziyaretçinin adresi reply-to olarak ayarlanır, böylece gelen kutunuzdan yanıtladığınızda mesaj yazan kişiye ulaşır. Aynı mesaj panelinizde de saklanır, yani e-postayı kaçırırsanız hiçbir şey kaybolmaz.

Hiç kod yazmadan iletişim formu ekleyebilir miyim?

Evet. Formstork'un hosted, no-code bir form builder'ı ve link verebileceğiniz ya da embed edebileceğiniz hosted form sayfaları, ayrıca bir popup feedback widget'ı var. Markup'ın kontrolünü elinizde tutmayı tercih ederseniz HTML'i elle yazıp yalnızca action ve access_key'i ayarlayabilirsiniz.

Formstork'u ücretsiz dene

Tam panelle ayda 250 gönderim. Kredi kartı gerekmez.

Access key'ini al Dokümanları oku