Jquery İletişim Formu Uygulaması

Konu Kas 15, 2011 te Makaleler, Php Kategorisinde MilaT Tarafından Yazılmıştır. 37 Yorum Yapılmıs

Bu konumuzda sizlerle Jquery İletişim formunu ayrıntılı bir şekilde ele alalım uygulama konusuna değinelim.Ziyaretçiler bir butona veya linke veya da bir resime tıkladığında iletişim formumuz efektli bir şekilde açılsın.İsterseniz Hemen başlayalım.

1.) İlk olarak head tagları arasına kütüphenelerimizi çağıralım.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script type="text/javascript" src="js/contact.js"></script>
<link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />

2.) Body tagından sonra iletişim formu uygulamasını tetikleyecek kodlarımızı yerleştirelim.İster input olan butonu isterseniz a href olan link yapısını kullanabilirsiniz

<div id="contact-form">
 <input class="contact demo" type="button" name="contact" value="İletişim Formu" />
 <a class="contact" href="#">İletişim Formu</a>
</div>

Sayfamızda yapacağımız işlem bitti şimdi ayrıntılı şekilde inceleme yapalım kullanıp kullanmayacağınız özelllikleri belirtelim.

indirdiğiniz klasör içinde “dosya/iletisim.php” dosyasını açalım. 3 satırdaki aşağıdaki gibi bilgilerimizi düzenleyelim.

İşlemin gerçekleşmesi için hostinginizde mail fonksiyonun çalışması gerekiyor

// Ayarlar
$to 	 = "kendi mail adresiniz"; // mail adresiniz
$subject = "İletişim";             // mesajın konusu
// kullanmak istemediğiniz özelliği false yapınız
$extra = array(
    "form_subject"   => true, // mesaj konusu
    "form_cc"        => true, // mesaj kopyasını kendine gönder
    "ip"             => true, // mesaja gönderen kişinin ip adresi eklensin mi
    "user_agent"     => true  // mesaja gönderen kişinin user agent eklensin mi
);

Eğerki ekran siyah şeklinde kararmasını istemiyorsanız beyaz yada farklı bir renkte olmasını istiyorsanız
“css/contact.css” içerisindeki aşağıdaki gibi “background-color” kısmını değişin ayrıca “cursor:wait;” kısmını kaldırırsanız kararma alanında çıkan bekleme ifadesi kalkacaktır

#contact-overlay {background-color:#000; cursor:wait;}

Dosyalar ve Demo Aşağıdadır

Demo

dosyaları indir

Etiketler : İletişim Formu, jQuery Lightbox İletişim Formu, jquery uygulamaları, Simple modal iletişim formu

Populer Yazılar Benzer Yazılar

Yorumlar (37)

ender Nis 5 2012 - 11:53 Cevapla
Teşekkürler Flash sorunu halloldu fakat chorome’de medya player embed kodunda aynı sorun var bu soruna nasıl bir çare bulabiliriz.
- MilaT Nis 5 2012 - 12:17 Cevapla
  Çözüm yolu aynı flashı tranparant olarak kullanmanız gerekir bunu html kodlarıyla yapabilirsiniz
aysun Nis 30 2012 - 17:40 Cevapla
Çok güzel bir paylaşım çok teşekkür ederim bilgileriniz için :)
yener Haz 28 2012 - 17:54 Cevapla
merhabalar çalışma güzel olmuş ama ben yapamadım galiba. görsellikte sorun yok form geliyor ama mesaj gönder butonuna tıklayınca gönderilemedi diye hata alıyorum sürekli. mail adresi ısmını düzenledim ama yine hata devam ediyor
- MilaT Tem 1 2012 - 23:34 Cevapla
  Teşekkür ederim mesaj Gönderilemedi hatası alıyorsanız
  Sunucunuzda Mail Fonksiyonu kapalı demektir
Elif Tem 1 2012 - 22:51 Cevapla
Merhaba, bu formu çok sevdim ve kullanmak istedim. email alanına kendi emailimi yazdım ve bir adresde kullandım ama email gelmedi. Nerede hata yapmış olabilirim?. Php desteklenen bir hostingte kullandım bu arada. Teşekkürler.
- MilaT Tem 1 2012 - 23:37 Cevapla
  Merhabalar!
  “dosya/iletisim.php” dosyasında gerekli düzenlemeyi yapmayı unutmayın (hotmail kullanıyorsanız birde gmail adresi kullanmayı deneyiniz) ayrıca
  gelen mailler bazen spam kutusuna düşebiliyor spam klasörünüde kontrol etmenizde fayda var.
apu Tem 17 2012 - 21:34 Cevapla
Merhaba, bende herşey çalışıyor ancak form doldurulup, mail olarak geldiğinde, “konu” kısmı okunamıyor. Dil kodlamasından heralde, “denem bir iki Ã¼Ã§ Ä±ÅÃ§” diye geliyor mail. Bunu nasıl düzeltebilirim.
Ayrıca aynı formdan alan çıkartıp, sadece biz sizi arayalım şeklinde, telefon numarası toplayabilmek çok uğraşlı mı olur ?
Teşekkürler.
- MilaT Tem 22 2012 - 12:16 Cevapla
  Türkçe karakter sorununu dosyayı uft8 bom olarak kaydedip ftpnize atmakla çözebilirsiniz
  İkinci sorunuz ise hayır çok zor bir uygulama olmaz.Yapmaya çalışın olmazsa yardımcı olaiblirim
Kadri Ara 25 2012 - 23:40 Cevapla
Öncelikle paylaşımınız için teşekkür ederim. Ben bu jquery uygulamasını başka bir form için uygulamak istiyorum. Nasıl yapabileceğim hakkında bilgi verebilir misiniz? Teşekkürler.
- MilaT Ara 29 2012 - 18:34 Cevapla
  Dediğinizi tam olarak anlamadım fakat mail adresimi eklerseniz yardımcı olabilirim
  - Kadri Oca 3 2013 - 09:47 Cevapla
    Teşekkürler, davet gönderdim.
dd Nis 25 2014 - 14:59 Cevapla
hell know dosyayı indiriyorum ama açılmıyo bile neys bşi demyrm