Formspree ile Static Web Sayfalarınıza İletişim Formu Ekleyin

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.

formspree-main-image

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.

confirm

E-posta adresinize gönderilen doğrulama linkine tıklayın ve bu kadar.

confirmed

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,

jQuery Easyui ile Form Onchange Problemi

Merhaba arkadaşlar,

jQuery easyUI kullananlar için faydalı olabilecek bir makale olacak bu. jQuery easyUI ile textbox, datebox, numberbox ve combobox fonksiyonlarına sahibiz. Bunlar form inputlarımıza kütüphanimizin özelliklerini ekliyor. Fakat bu özellikleri ekledikten sonra

<form action="#" id="trkodlamaForm" onChange="degisimYapildi()">

formumuza örnekteki gibi onChange özelliği eklediğimizde değişikliği yakalayamıyor. Bu da doğal olarak bu özellikten faydalanamamanıza sebep oluyor. onChange özelliğinden faydalanmak için formunuzun üstüne aşağıdaki kodu eklerseniz probleminiz çözülecektir.

(function($){
	var numberbox = $.fn.numberbox.defaults.onChange;
	$.fn.numberbox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		numberbox.call(this, newValue, oldValue);
	};
	var combobox = $.fn.combobox.defaults.onChange;
	$.fn.combobox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		combobox.call(this, newValue, oldValue);
	};
	var textbox = $.fn.textbox.defaults.onChange;
	$.fn.textbox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		textbox.call(this, newValue, oldValue);
	};
	var datebox = $.fn.datebox.defaults.onChange;
	$.fn.datebox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		datebox.call(this, newValue, oldValue);
	};

})(jQuery);

Umarım faydalı olur, iyi geceler,

Boşta Kalan Gerçek Ram Değerimi Nasıl Öğrenirim?

Merhaba arkadaşlar,

Hızlı bir ipucu paylaşıyorum. Şu sıralar sunucu optimizasyonuna kafa yoruyorum biraz. Linux sunucunuzda boşta kalan gerçek ram değerini aşağıdaki komut ile öğrenebilirsiniz:

free -m

Bu komutu çalıştırdığınızda şöyle bir çıktı elde edersiniz.

bostaki-ram-miktari

-/+ buffers/cache satırı ve free sütunundaki değer sizin gerçek boşta kalan bellek değeriniz.

Full Text ft_min_word_len Değerini Değiştirme – MySQL

MySQL full text kelimeleri 4 veya daha fazla karaktere sahip olmasına göre indeksler. Yani “PHP” kelimesini arattığınızda size hiçbir sonuç vermez. Bu yazımızda daha düşük karakterlerde indeksleme nasıl yapabileceğinizi göstereceğim.

/etc/my.cnf’de bulunun MySQL ayar dosyanızı açın ve 3 harfli olarak indekslemeyi açmak için [mysqld] bölümüne aşağıdaki satırı ekleyin:

ft_min_word_len = 3

Eğer ft_min_word_len daha önceden eklenmişse değerini değiştirin.

Değişiklikleri yaptıktan sonra MySQL sunucusunu yeniden başlatın. Bu değeri bir sorgu ile değiştirmek malesef mümkün değildir. (örn. “SET ft_min_word_len = 3″ sorgusunu çalıştırmayı denerseniz şu hatayı alırsınız: “#1193 – Unknown system variable ‘ft_min_word_len'”).

Artık ft_min_word_len değerini güncellediniz. Artık tablonuza yeni eklediğiniz veya güncellediğiniz satırlar istediğiniz gibi indekslenecekler fakat hiç dokunulmamış olan satırlar hala eski uzunluğa göre indekslenmiş olacak kalır. Bunun içinde tablonuzu bir kere onarmanız yeterlidir:

REPAIR TABLE tablom QUICK;

Bahsedilen bazı yorumlar var ki onarmanın hem yavaş hemde tam olarak başarıyla sonuçlanmadığını söyleyenler var. Onarmak yerine fulltext index’ini kaldırıp yeniden eklemeyi hem daha hızlı hemde daha kesin sonuçlandığını söylüyorlar. Fakat ekleyip kaldırma süresinde sitenizde MySQL hataları alma ihtimaliniz olduğundan bunu yaparken sitenizi kapatmanızı öneririm.

Umarım iş görücü olmuştur, kolay gelsin,

Normalize.css – Modern HTML5 için CSS Sıfırlama

Normalize.css bütün tarayıcılarda HTML etiketlerinizi düzgün ve benzer çıkmasını sağlayan bir sıfırlama dosyasıdır. Daha önce paylaşmış olduğum reset.css’den daha etkili ve başarılı bir çalışma. Kullanmanızda fayda var ;)

Normalize.css, css sıfırlamak için bir alternatiftir. @jon_neal ve @necolas tarafından 100’lerce saatlik bir çalışma sonucunda ortaya çıkmıştır.

  • Her tarayıcı etiketlerin aynı görüntüyü vermesini sağlar.
  • Bazı tarayıcı açıklarını düzeltir.

Daha detaylı bilgi için bu sayfayı ziyaret edebilirsiniz.