Jquery İletişim Formu Uygulaması

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 


Yorumlar (37)
  • Avatar

    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.

  • Avatar

    LA Weight Ara 11 2011 - 23:44 Cevapla

    Teşekkür ederim işime yaradı kullandım sitemde

  • Avatar

    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

  • Avatar

    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. =))

  • Avatar

    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 ^^

  • Avatar

    bedrettinr Oca 27 2012 - 14:38 Cevapla

    emeğine sağlık üstad,

  • Avatar

    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.

    • Avatar

      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

  • Avatar

    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

  • Avatar

    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

  • Avatar

    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

  • Avatar

    Yakup Oca 28 2012 - 16:44 Cevapla

    Tşkler Paylaşım için süper

  • Avatar

    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

    • Avatar

      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

  • Avatar

    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 ???

  • Avatar

    darke Mar 10 2012 - 17:52 Cevapla

    bunu wordpresse nasıl uyarlarız dostum?

  • Avatar

    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.

Sende Bir Cevap Yazsan Ne Olurdu Ha Ne Olurdu

Ahmet Cevapla Vazgeç

Isim (Zorunlu)

Website