Jquery ile Açılır-Kapanır İletişim Formu Yapımı

Php, Asp, Perl, Html - Jquery ile Açılır-Kapanır İletişim Formu Yapımı ...

Cevapla
Jquery ile Açılır-Kapanır İletişim Formu Yapımı
el_chancho isimli Üye şimdilik offline konumundadır

el_chancho(29)

Hiç Biri / Kocaeli

Standart

Jquery ile Açılır-Kapanır İletişim Formu Yapımı

Alt 05-02-2010 #1
Sponsorlu Bağlantılar

Nette iletişim form ararken gördüügm güzel bir uygulama.Normalde iletisim.php entegrei yoktu yani sadece xhml,css ve jquery kodları vardı ama biraz zorlayarak üzerine iletisim.php'yide entegre ettim umarım işinize yarar.

HTML KODLARI:

<div class="iletisimbuton">
<a href="#" class="ac">İLETİŞİM</a>
<a href="#" class="kapat" style="display: none">KAPAT</a>
</div>
 
 
<div id="iletisimformu">
<h2>İLETİŞİM FORMU </h2>
<form name="iletisim" method="post" action="iletisim.php">
<label>Adınız Soyadınız </label> <input type="text" name="isim" />
<label>E-Posta Adresiniz</label> <input type="text" name="e-posta" />
<label>Web Adresiniz</label> <input type="text" name="web" />
<label>Mesajınız</label> <textarea name="mesaj"></textarea>
<label></label><input type="submit" name="gonder" value="GÖNDER" />
 
</form>
</div>
CSS KODLARI:

.iletisimbuton {background:#81c8f4;
padding:6px;width:auto;
margin:50px 0px 0px 0px;
position:fixed;
left:0;
border:2px solid #6abee8;
}
 
a.ac {background:url(img/email_go.png) no-repeat;padding:0px 0px 0px 20px;color:#fff;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
a.kapat {background:url(img/cross.png) no-repeat;padding:0px 0px 0px 20px;color:#1a79a8;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
 
 
 
#iletisimformu {
width:350px;
background:#3ea2e1 url(img/formbg.gif) repeat-x;
padding:5px;
color:#fff;
border:2px solid #6abee8;
margin:90px 0px 0px -400px;
display:block;
position:fixed;top:0;left:0;
}
 
#iletisimformu h2 {
 
color:#fff;
font:18px/36px arial, verdana, helvetica, sans-serif;
padding:0px 0px 6px 6px;
margin:0;
}
 
 
#iletisimformu label {
float: left;
width: 100px;
font:12px arial, verdana, helvetica, sans-serif;
padding:4px;
clear:both;
margin:8px 2px 8px 2px;
}
 
#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px}
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px}
 
#iletisimformu input:focus, #iletisimformu textarea:focus {border:2px solid #bee2f4;background:#f5f5f5}
JQUERY KODLARI (BU BÖLÜMÜ HEAD TAGLARI ARASINA EKLİYORSUNUZ):

<script>
$(document).ready(function() {
    $(".iletisimbuton a").click(function() { //mouse in
        $("#iletisimformu").animate({ marginLeft: '0px' },100);
        
    });
 
 
    
    $("a.kapat").click(function() { //mouse in
        $("#iletisimformu").animate({ marginLeft: '-400px' },100);
        
    });
    $(".iletisimbuton a").click(function () {
        $(".iletisimbuton a").toggle();
    }); 
});
 
 
  </script>
BU KISMIDA EKLEMEYİ UNUTMAYINIZ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

son olarak aşağıdaki php kodlarını editlemeyi ve iletisim.php olarak uplaod etmeyi unutmayınız.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9\n">
</head>
<body>
<?php 
$to = "buraya mail adresi gelecek"; 
$subject = "Iletisim Formu";


$headers = "From:" . $_POST["isim"]; 
$headers .= "<" . $_POST["eposta"] . ">\r\n"; 
$headers .= "Reply-To: " . $_POST["eposta"] . "\r\n"; 
$headers .= "Return-Path: " . $_POST["eposta"]; 

$message .= "Sitenizden gelen iletisim form islem sonucu\n\n";
$message .= "Adiniz Soyadiniz: " . $_POST["isim"] . "\r\n";
$message .= "E-Posta Adresiniz: " . $_POST["eposta"] . "\r\n";
$message .= "Web Adresiniz: " . $_POST["web"] . "\r\n";
$message .= "Mesajiniz: " . $_POST["mesaj"] . "\r\n";

mail($to, $subject, $message, $headers); 
?>
<SCRIPT LANGUAGE="JavaScript">
var shant="index.html" //yönlendirmek istedi&eth;iniz adres bu websitenizin ana sayfas&yacute;da olabilir ile&thorn;im sayfas&yacute;da
document.write('Mesajiniz Alinmistir Otomatik Olarak Yönlendirileceksiniz!' + shant)//ekranda ç&yacute;kacak mesaj
function forPage() 
{
location.href=shant
} 
setTimeout ("forPage()", 1000);//Bekleme süresi

</SCRIPT>
</body>
</html>
Uygulamayı İçerisindeki Grafiklerle bilrkte indirmek için


Uygulamanın Demo Sayfası için
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

bitamig isimli Üye şimdilik offline konumundadır

bitamig

Hiç Biri / Manisa

Standart
Alt 07-02-2010 #2
                             Sponsorlu Bağlantılar
z-indexleri ayarlanmamış.
Bu mesajdan alıntı yap
el_chancho isimli Üye şimdilik offline konumundadır

el_chancho(29)

Hiç Biri / Kocaeli

Standart
Alt 07-02-2010 #3
z-indexleri ayarlanmamış.
z-index konusunda pek bilgimin oldugunu soyleyemeyecegim:S
Bu mesajdan alıntı yap
bitamig isimli Üye şimdilik offline konumundadır

bitamig

Hiç Biri / Manisa

Standart
Alt 08-02-2010 #4
şimdi bu yana açılır menü mesela solda bir alan varsa onun üzerine açılsın.Bunun içinde
css de
#iletisimformu {
width:350px;
background:#3ea2e1 url(img/formbg.gif) repeat-x;
padding:5px;
color:#fff;
border:2px solid #6abee8;
margin:90px 0px 0px -400px;
display:block;
position:fixed;top:0;left:0;
z-index:2
}

diye z-index i öne alınmalı.
Bu mesajdan alıntı yap
tuNc isimli Üye şimdilik offline konumundadır

tuNc(25)

Webmaster / İzmir

Standart
Alt 08-02-2010 #5
Gerçekten güzel bi paylaşım elinize saglık.
Calısma tamamen size mi ait?
Bu mesajdan alıntı yap
el_chancho isimli Üye şimdilik offline konumundadır

el_chancho(29)

Hiç Biri / Kocaeli

Standart
Alt 08-02-2010 #6
Gerçekten güzel bi paylaşım elinize saglık.
Calısma tamamen size mi ait?

sadece iletisim.php kısımı ... çalışmayı yapan arkadasın sitesi demo sayfası sanırım
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 09-02-2010 #7
Zaten z-index Internet Explorer da sorun çıkarıyor.Onun için Firefox - Opera gibi tarayıcılar ile açılmalı sayfa eğer z-index kullanılacaksa..
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Yardım İletişim formu hazırlamak mayamatbaasi Php, Asp, Perl, Html 10 10-12-2010 17:51:13
Elimde Tema Var Ama İletişim Formu Gitmiyor Sroturkiye" Flash 4 08-08-2009 17:08:17
Jquery ile resim kaydıraç Bayfresh Php, Asp, Perl, Html 2 27-06-2009 17:06:13
Flash İletişim Formu İçin Link Ekleme Turgut Flash 7 21-10-2008 12:37:22

Kapat
Şifremi Unuttum?