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)

samsung 1080p hdtv Kas 20 2011 - 15:21 Cevapla
You must have perfect timing. I was looking for an article on this same subject. Your post is such an exquisite article. The extensive detail and information fit the bill.
LA Weight Ara 11 2011 - 23:44 Cevapla
Teşekkür ederim işime yaradı kullandım sitemde
LA Weight Loss Ara 15 2011 - 17:00 Cevapla
Teşşekür ederim gayet güzel anlatmışsınız başarılarınızın devamını dilerim
Hsyn Ara 18 2011 - 20:22 Cevapla
Teşşekür ederim kardeşim başarılarının devamını dilerim. Yalnız css çağırmayı göremedim onuda yazarsan kesin bilgi olur. =))
- MilaT Ara 18 2011 - 20:32 Cevapla
  Rica Ederim uyarı için teşekkür ederim gerekli düzenleme yapılmıştır
Bizimakin Oca 6 2012 - 01:44 Cevapla
Gerçekten güzel bir tasarımı var kullanımı kolay ve hoş, teşekkürler paylaşım için ^^
- MilaT Oca 6 2012 - 10:00 Cevapla
  Rica ederim İyi kullanımlar
bedrettinr Oca 27 2012 - 14:38 Cevapla
emeğine sağlık üstad,
- MilaT Oca 27 2012 - 15:36 Cevapla
  Teşekkür ederim iyi kullanımlar
Ahmet Oca 27 2012 - 18:46 Cevapla
Elinize sağlık çok güzel olmuş sitemde kullanacağım AMA
Butonsuz olarak sayfam açılınca direk açılan iletişim formu olarak yazabilirmiyiz.
Veya benim hazırladığım iletişim formunu adresleyebilirmiyiz
Cevap gelirse çok sevineceğim.
- MilaT Oca 27 2012 - 20:38 Cevapla
  Bunu otomatik olarak açamazsınız ama kendi hazırlayacağınız iletişim formunu Buradaki Gibi popup açtırıp içine yerleştirebilirsiniz.Ayrıntılı olarak Bu konuda Popup açmayı anlatmıştım hazırlayacağınız iletişim formunu popup içine yerleştirip çalıştırabilirsiniz
Ahmet Oca 28 2012 - 01:10 Cevapla
Hocam cevap için teşekkürler.
popup konusundaki gibi bir Popup açıyorum.
ama html yada php dosyamı popup içine yerleştiremedim.
neresine yazacağım adresi
Çok teşekkürler
Ahmet Oca 28 2012 - 02:27 Cevapla
sayfayı mesaj.php olarak js dosyasının altına attım.
<img src="js/mesaj.php"
yazdım href denedim olmadı
lütfen yardım
Ahmet Oca 28 2012 - 02:57 Cevapla
Hocam nedemek istediğinizi biraz uğraşınca anladım.
Popup içine dosya içeriğini attım gayet güzel oldu çalışıyor
Elinize emeğinize sağlık.
Bilgiyi paylaşmanızdaki cömertliğinizede teşekkür ederim.
Selamlar
- MilaT Oca 28 2012 - 11:41 Cevapla
  Rica ederim elimden geldiğince yardımcı olmaya çalışıyorum.İşinize yaramasına sevindim iyi kullanımlar.
Yakup Oca 28 2012 - 16:44 Cevapla
Tşkler Paylaşım için süper
- MilaT Oca 28 2012 - 21:22 Cevapla
  rica ederim iyi kullanımlar
Yorqun Şub 16 2012 - 22:43 Cevapla
Merhabalar
Öncelikle Emeklerinize Sağlık Gayet Güzel
Vede Oldukça Başarılı Bir Çalışma Olmuş Tebrikler
Benim Şöyle Bir Sorum Olacak
Ben Popup Sayfanın İçerisinde Başka Bir Html Veya Php Belgesi Açmak İstiyorum
Mesela Menü İçeriğinden Bir Kaçını iframe Yöntemiyle Popup Açmak İstiyorum
Bunu Nasıl Yapabilirim Acaba Şimdiden Teşekkürler
Saygılarımla
- MilaT Şub 16 2012 - 22:57 Cevapla
  Rica ederim beğenmenize sevindim
  Cevap : Bu Konumuzdaki gibi popup açtıgınızda
```
<div class="gg-fb">
buraya istediğiniz html kodlarını yazabilirsiniz.
</div>
```
  olacak şekilde istediğiniz işlemi gerçekleştirebilirsiniz
medesan Şub 29 2012 - 11:21 Cevapla
hocam iletişim formunu, yazılanları mail adresine değilde veritabanına kaydedilecek şekilde değiştirdim. fakat buna güvenlik kodu entegre etmeye çalışıyorum ama soınuç alamadım yardımcı olabilirmisin aceba. güvenlik kodu nasıl entegre edebiliriz iletişim formuna ???
darke Mar 10 2012 - 17:52 Cevapla
bunu wordpresse nasıl uyarlarız dostum?
- MilaT Mar 10 2012 - 18:43 Cevapla
  Bunun eklenti şeklinde olanı var onu kullanabilirsiniz
  Burdan Ulaşabilirsiniz
ender Nis 3 2012 - 10:30 Cevapla
merhaba
form flash kullanılan sitelerde flash arkasında kalıyor form gözükmüyor bi çaresi varmı bilgi verirseniz sevinirim.
- MilaT Nis 3 2012 - 16:47 Cevapla
  Flash embed koduna vmode=”transparent” kodunu eklerseniz sorun yaşamazsanız