Bu makalede statik web sayfalarınıza esnek ve dinamik iletişim formunu nasıl kolay bir şekilde ekleyebileceğinizi anlatacağım.
Problem
Jekyll yardımıyla veya birkaç HTML dosyası kullanarak statik bir web sitesi hazırladınız. Fakat bir iletişim formuna ihtiyaç duydunuz. Online herhangi bir hizmetten faydalanabilirsiniz. Size iframe vs. bir kod verirler ve sizde onu sitenize eklersiniz vs. Fakat bu tarz harici eklemelerde malesef ki siz görsel tasarım konusunda kısıtlanmış olacaksınız.
Çözüm
Peki ya size bir hizmet formunuza komple hakim olmanıza olanak tanıyorsa? Formspree size tam olarak bu imkanı tanıyor. Hiç bir JavaScript veya PHP bilgisine ihtiyaç duymadan HTML ile kendi iletişim formlarınızı hazırlamanıza yardımcı oluyor.
Formunuzu Oluşturun
İlk ihtiyacınız olan HTML ile oluşturulmuş bir form. Benim hazırladığım form insanların benimle en kolay ve hızlı bir şekilde iletişime geçmelerini sağlayacak. Sadece isimlerini, e-posta adreslerini ve mesajlarını isteyeceğim.
<form id="iletisim" method="POST"> <input type="text" placeholder="İsminiz"> <input type="email" placeholder="E-posta adresiniz"> <textarea placeholder="Mesajınız"></textarea> <input type="submit" value="Gönder"> </form>
Gördüğünüz gibi <form> etiketinin arasına form elemanlarımı ekledim ve Submit butonu oluşturdum. iframe vs. gibi görsel olarak önüme engel teşkil edebilecek hiç bir içerik yok.
Özelliklerini Ekleyelim
Formspree‘nin formunuzu işleyebilmesi için <form> etiketinize aşağıdaki özellikleri(attributes) eklemelisiniz.
<form id="iletisim" action="//formspree.io/eposta@adresiniz.com" method="POST">
Burada eposta@adresiniz.com kısmını kendinize göre güncellemelisiniz.
Bir sonraki işlem ise bütün form inputlarına name özelliğini tanımlamak olacak. Form her gönderildiğinde size gelecek olan e-postada bu name karşısında formu dolduran kişinin girdiği değer olacak. Name için Formspree‘nin özel isimlerini de kullanabilirsiniz.
<form id="iletisim" method="POST"> <input type="text" name='isim' placeholder="İsminiz"> <input type="email" name='_replyto' placeholder="E-posta adresiniz"> <textarea name='mesaj' placeholder="Mesajınız"></textarea> <input type="submit" value="Gönder"> </form>
Farkettiyseniz isim ve mesaj kısmına normal name atadım fakat email için _replyto yazdım. Bu ismi Formspree tanıyacak ve size gönderilen formu cevaplamak istediğiniz alıcı yerine direkt olarak formu gönderen kişinin mail adresinin yazılmasını sağlayacak.
Kibarlığınızı belli edin :)
Formu gönderen kişilere teşekkür sayfalarına yönlendirmek için de bir input alanı oluşturabiliriz. Bu alanı hidden tipinde oluşturacağız ve name için _next adını vereceğiz.
<input type="hidden" name="_next" value="//siteniz.com/tesekkurler.html" />
Konu
Formspree’nin size göndereceği mailin konusunu da ayarlayabilirsiniz.
<input type="hidden" name="_subject" value="İletişim Formu Dolduruldu" />
Formunuzu Biraz Daha Güvenli Hale Getirelim
Formspree “honeypot” diye isimlendirilen spam önleme yöntemi kullanmaktadır. Bu yöntem şöyle çalışır. Formunuza _gotcha ismiyle bir input daha eklersiniz ve bunu css ile gizlerseniz. Kullanıcılar bu formu göremez fakat botlar görür ve otomatik olarak içini doldururlar. Bu form alanı dolu olursa Formspree bunun bir spam girişimi olduğunu anlar ve işlemi gerçekleştirmez. Bu sayede hem Formspree rahatlar hemde siz saatte belki 100lerce spam e-posta ile uğraşmaktan kurtulursunuz.
<input type="text" name="_gotcha" style="display:none" />
Güvenliği bir tık daha öteye taşımak isterseniz e-posta adresinizi botlardan JavaScript ile bir parça daha gizleyebilirsiniz. Bu gizleme ve formumuzun son hali aşağıdaki gibidir:
<form id="iletisim" method="POST">
<input type="text" name="isim" placeholder="İsminiz">
<input type="email" name="_replyto" placeholder="E-posta adresiniz">
<input type="hidden" name="_subject" value="İletişim Formu Dolduruldu" />
<textarea name="mesaj" placeholder="Mesajınız"></textarea>
<input type="text" name="_gotcha" style="display:none" />
<input type="submit" value="Gönder">
</form>
<script>
var iletisim = document.getElementById('iletisim');
iletisim.setAttribute('action', '//formspree.io/' + 'eposta' + '@' + 'adresiniz' + '.' + 'com');
</script>
Burada <form> etiketinin action özelliğini çıkardım ve bunu JavaScript ile ekledim. Bu sayede e-posta adresimizin güvenliğini de bir tık öteye taşıdık.
Formunuzu Test Edin ;)
Son adım da formumuzun çalışıp çalışmadığını test edeceğiz. Formunuzu eklediğiniz sayfaya tarayıcı ile erişim sağlayın ve daha sonra normal bir ziyaretçiymiş gibi formu doldurup gönderin. Formspree’den e-posta adresinizi doğrulamanızı isteyen bir e-mail alacaksınız.
E-posta adresinize gönderilen doğrulama linkine tıklayın ve bu kadar.
Bu formu eklediğiniz farklı sayfalar için bu aşamayı her seferinde tekrarlamanız gerekmektedir.
Umarım faydalı olmuştur, bu yazı çeviridir :) kolay gelsin,