Statik Siteler için İletişim Formu

Jekyll gibi statik site oluşturucularla oluşturulan web sitelerinde statik sitenin mantığı dolayısıyla veritabanı kullanmıyoruz. Formspree, sunucunuza herhangi bir ek gereksinim yaratmandan iletişim formu oluşturmanızı sağlayan bir fikir. Formspree sayesinde fonksiyonel HTML iletişim formlarınızı PHP veya Javascript kullanmak zorunda kalmadan oluşturabiliyorsunuz.

Form Oluşturma

Formspree.io adresine gittiğinizde son derece basit bir yapıda örnek iletişim formu dökümünü göreceksiniz.

   
<form action="[email protected]" method="POST">
   <input type="text" name="name">
   <input type="email" name="_replyto">
   <input type="submit" value="Send">
 </form>

Yukarıdaki örnek kodda göründüğü gibi Formspree’nin iletişim formunda çalışması için action niteliği ile mail adresinizi tanımlamanız gerekiyor.

Ek Özellikler

Yukarıdaki iletişim formu isim, mail bilgisi ve gönderme butonundan oluşan son derece basit bir iletişim formu. Bu formu ek özellikleri de kullanarak geliştirebiliriz.

 
<form id="contactform" action="[email protected]" method="POST">
   <input type="text" name="name" placeholder="İsminiz">
   <input type="email" name="_replyto" placeholder="Mail adresiniz">
   <textarea name="message" placeholder="Mesajınız"></textarea>
   <input type="submit" value="Gönder">
</form>

Burada formumuzu CSS ile özelleştirmek için contactform id değerini atadık ve kullanıcıların mesaj yazabileceği bir textarea ekledik. input bloklarındaki name niteliğine name, _replyto gibi Formspree tarafından tanımlanan değerleri ekledik.

Form Yönlendirmesi

Formspree tarafından tanımlanan _next değeri sayesinde iletişim formuyla mesaj gönderildikten sonra kullanıcıyı başka bir sayfaya yönlendirebiliyoruz.

<input type="hidden" name="_next" value="//site.com/tesekkurler.html" />

Yukarıdaki örnekte görüldüğü gibi name niteliğine Formspree tarafından tanımlanan ve tanınan _nextdeğerini girdik, value değerinde ise iletişim formundan sonra yönlenecek teşekkür sayfasını tanımladık.

Formu Güvenli Yapmak

Formspree ile oluşturduğumuz iletişim formunu “honeypot” olarak bilinen spam önleme yöntemiyle güvenli bir hale getirebiliriz. Honeypot tekniği oldukça basittir; iletişim formunun içerisine botların görebileceği ama kullanıcıların göremeyeceği bir alan oluştururuz. Spambot bu alanı doldurmaya çalışacak ama kullanıcılar bu alanı hiç görmediği için dolduramayacak. Bu alanın doldurularak gönderildiği gönderiler spam olarak kabul edilecek ve elenecek.

Bu tekniği formunuza şu kodu ekleyerek kullanabilirsiniz:

<input type="text" name="_gotcha" style="display:none" />

Buradaki style niteliği alanı formu kullanıcılara görünmez yapması bakımından, name niteliğine atanan _gotcha değeri ise Formspree’nin bu alanı tanıması ve bu alanın doldurularak gönderildiği iletileri engellemesi açısından önemlidir.

İletişim formunda action niteliğine tanımladığımız [email protected] değeri spambotlar tarafından HTML dosyasından alınabilir. Spambotların mail adresinizi seçebilmesi olasılığını düşürmek için Javascript kullanarak mail adresinizi tanımladığınız ifadeyi parçalara bölebilirsiniz.

<form id="contactform" method="POST">
   <input type="text" name="name" placeholder="İsminiz">
   <input type="email" name="_replyto" placeholder="Mail adresiniz">
   <textarea name="message" placeholder="Mesajınız"></textarea>
   <input type="text" name="_gotcha" style="display:none" />
   <input type="submit" value="Gönder">
</form>
<script>
   var contactform =  document.getElementById('contactform');
   contactform.setAttribute('action', '//formspree.io/' + 'mail' + '@' + 'adresin' + '.' + 'com');
</script>

Burada action niteliğini form elementinden kaldırdık ve formun altına eklediğim ufak bir JavaScript koduyla mail adresimizi belirtmiş olduk.

Formu Onaylama

Formu oluşturduktan sonraki son adımda formumuzun bulunduğu sayfayı internet tarayıcısından ziyaret ederek formumuzdan örnek bir ileti göndereceğiz ve ardından gelen pencerede formumuza tanımladığımız mail adresini onaylayacağız.

Formspree Onay

Mail adresinize gelen onay linkine tıkladıktan sonra onaylama işlemi tamamlanacak.

Formspree Onaylandı

Not: Bu onaylama işlemini formu yeni bir sayfaya eklediğinizde tekrar yapmanız gerekir.