el_chancho
♾️Grafik Gurusu♾️
- Katılım
- 21 Nis 2008
- Mesajlar
- 1,001
- Tepkime puanı
- 14
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:
CSS KODLARI:
JQUERY KODLARI (BU BÖLÜMÜ HEAD TAGLARI ARASINA EKLİYORSUNUZ):
BU KISMIDA EKLEMEYİ UNUTMAYINIZ...
son olarak aşağıdaki php kodlarını editlemeyi ve iletisim.php olarak uplaod etmeyi unutmayınız.
Uygulamayı İçerisindeki Grafiklerle bilrkte indirmek için
Uygulamanın Demo Sayfası için
HTML KODLARI:
Kod:
<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:
Kod:
.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):
Kod:
<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...
Kod:
<script src="https://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.
Kod:
<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ðiniz adres bu websitenizin ana sayfasýda olabilir ileþim sayfasýda
document.write('Mesajiniz Alinmistir Otomatik Olarak Yönlendirileceksiniz!' + shant)//ekranda çý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
