Facebox İle iletişim Formu

Tarih: 19 Şubat 2010   Yazar: SO  |  2.956 kez okundu
Facebox İle iletişim Formu

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.



    Bu yazı için 6 yorum yapılmış.
  1. Ozan Öztürk dedi ki:

    said harikasın. Ellerine sağlık

  2. Oğuzhan TEKİN dedi ki:

    Teşekkürler tamda bunu arıyordum ama rar şifresi nerde acaba ?

  3. said yavuz dedi ki:

    şifre “sorbize.com” dur arkadaşlar

  4. www dedi ki:

    gmaili mi kabul ediyor sadece?

  5. saidyavuz dedi ki:

    hayır bütün e-mail adreslerini yapmanız gerek tek şey indirdiğiniz dosyadaki mail adresini değiştirme

  6. Muhammed dedi ki:

    çok tşk ler işime yaradı.


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.