Merhaba arkadaşlar bugün web tasarım derslerimizden güzel bir ve fonksiyonel bir iletişim formu yapacağız bunu yaparken de facebox kullanacağız hem facebox un kullanımı hemde iletisim formu hazırlama oldukça zor olacağı için daha önce kendi blogumda yazdığım facebox un kullanımı hakkında oldukça basit ama sade bir yazı var dilerseniz burdan onu okuyabilirsiniz. Öncelikle söylemeden geçemeyeceğim dün Musa arkadaşımızın paylaştı yazıda sitebilginin yeni versiyonu hakkında bilgi verdi sitebilgiye girdiğimde sağ tarafta bir iletişim menusu gördüm eminin sizlerde farketmişsinizdir. Ben girdiğim çoğu sitenin özelliklerini didik didik eder hoşuma giden bişiler var ise alır kullanırım bu akşamda onu yapacağız görmeyenler var ise hemen adresi vereyim buradan siteye girdiğinizde hemen yan tarafta bir iletişim menusu var onu yapacağız sizlerle.

Öncelikle bize bir tane login form lazım bunun için kendimizi yormuyoruz ve hazır bir tane indiriyoruz. Buradan hazır bir tane indirebilirsiniz.

Ajax jquery iletişim formu– İndir

Evet arkadaşlar indirdiğiniz dosyada submitemail php dosyasını açıyorsunuz ve oraya aşağıdaki şekilde de gördüğünüz gibi kendi e-mail adresinizi giriyorsunuz.

$mailto = "saidyavuz21@gmail.com";
$cc = "";
$bcc = "";
$subject = "Email subject";
$vname = "Saidyavuz";

Yukarıda ben kendi e-mail adresimi yazdım siz kendi adresinizle değiştirirsiniz. Evet biz konumuza devam edelim sıra geldi menunuzu sağ tarafa almada oldukça basit bir css kodu kullanıyoruz

div#contact {

position:fixed;

top:200px;

right:0;

}

Eğer İE de sorun yaşıyorsanız bu kodu da eklemeniz yaralı olacaktır

div#contact {

position:absolute;

top:200px;

right:0;

}

İletişim Menusune hafif bir efeckt vermek isterseniz bu css kodunu da kullanabilirsiniz resmin üstüne geldinizde hafif koyulaştırıyor.

.contimage{

filter: alpha(opacity=80);-moz-opacity:.80;opacity:.80;

}

Şimdide klasik bilenen şuradaki jQuery kodunu biraz değiştirip facebox a uygun hale getireceğiz daha önce facebox’u nasıl kullanabiliriz diye size bakmanız için yukarıda bir adres verdim orada da dediğimiz gibi sıradan bişiye link verdiğimizde linkin hemen yanına rel parametresini facebox diye ayarlıyoruz yani şu şekilde

[/html]

<a href=index.php” rel=”facebox”><img src=”image.jpg”></a>/html]

Evet şimdide ekeyeceğiniz javascript kodu gelelim burada basit bir işlemden sonra script kodunu html dosyamıza ekliyoruz

$(document).ready(function(){

$(".contimage").hover(function() {

$(this).animate({

opacity:1

},200);

}, function() {

$(this).animate({

opacity:0.8

},200);

});

$('#submitform').ajaxForm({

target: '#error',

success: function() {

$('#error').fadeIn('slow');

}

});

$('a[rel*=facebox]').facebox()

});

Not:yukarıdaki kod klasik bir jQuery kodudur sadece içine facebox parametresini ekledim.

Bundan sonra yapacağınız işlem formunuzu hazırlamak olacaktır umarım beğenmişsinizdir.