Statik sitenize sunucu kurmadan HTML iletişim formu ekleyin

Sunucusuz görünen formun arkasında ne var?

Statik sayfa alanları gösterebilir ama mesajı kendi başına saklayıp e-posta göndermez. Bu örnekte alıcı hizmet Formgong'dur. Portfolyo, tanıtım sayfası ve metin alanlı iletişim formları için uygundur.

Zaten bir uygulama sunucunuz ve özel iş kurallarınız varsa onu kullanabilirsiniz. Buradaki amaç yeni sunucu yönetme yükünü kaldırmaktır.

Kodu eklemeden önce

Formgong'da form oluşturun, e-postayı doğrulayın ve site bağlantısından anahtarı alın. Örnek anahtarı gerçek olanla değiştirin. E-posta doğrulanmadan bildirimler bekletilebildiği için teslimat testini daha sonra yapın.

Sayfaya eklenecek örnek

Kodu iletişim bölümüne yerleştirin. Kendi CSS sınıflarınızı ekleyebilir, etiketleri değiştirebilirsiniz. Verilerin alan adlarını koruyun. Bu örnek dosya değil, metin gönderir.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_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>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

Alan adlarını atlamayın

action hedefi, method="POST" gönderim biçimini belirler. name olmadan yalnızca id verilmiş bir alan beklediğiniz değeri göndermez. Telefon için name="phone" ekleyebilirsiniz.

botcheck bot tuzağıdır. Ekran dışında ve boş kalmalıdır. Dolu gelirse kayıt spam sayılabilir ve bildirim gönderilmez.

Gönderimden sonraki sayfa

Varsayılan olarak Formgong sonuç sayfası açılır. Kendi teşekkür sayfanız için panelde tam HTTPS adresini belirtin. Gizli _redirect alanı da kullanılabilir; koddan gelen yönlendirmeleri yok sayma ayarı açıksa paneldeki adres geçerlidir.

Aynı sayfada kalmak isterseniz fetch gerekir. Yanıt kontrolünü tanılama rehberi anlatır.

Gerçek alan adından bir deneme

Yayınlanan siteden tanınabilir bir mesaj gönderin. Doğru formun kayıtlarında, e-postada ve spam klasöründe arayın. Telefon ekranında alanları, düğmeyi ve teşekkür sayfasını da kontrol edin.

Telegram bağlantısı ek bir kanal sağlar. Alıcı ve yönlendirme ayarlarını siteyi yeniden yayınlamadan değiştirebilirsiniz.

Koruma açıldığında örneği güncelleyin

Turnstile gereken form widget ve cf-turnstile-response tokenı ister. Yukarıdaki honeypot tek başına yetmez; güncel kodu panelden alın. İzin verilen alan adları listesi kullanıyorsanız yayınlanan domaini dahil edin; editör önizlemesi başka bir adres olabilir.