CSS & PHP İle İletişim Formu Tasarımı
Merhaba Arkadaşlar,
Bu makalede sizlere CSS yardımıyla hazırlanmış bir HTML formun PHP yardımıyla nasıl düzenli bir mail olarak gönderilebileceğini anlatacağım. İşlemlerimize bakacak olursak öncelikle formumuzun bulunduğu HTML sayfanın görünüm açısından daha düzenli ve hoş bir görüntü vermesi için CSS ‘ten yardım alacağız ve daha sonra Gönder butonuna tıklandığında çekilecek verilerin yönlendirilmesi için PHP dilinden yardım alarak işlemimizi tamamlayacağız.
İlk olarak formumuzun tasarımı ile işlemlerimize başlayalım. Blogların, firmaların vb. web sitesi bulunan kurum ve kuruluşların web sitelerine baktığımızda hep iletişim bölümündeki formların sadeliği dikkat çekmektedir. Sitede bulunan kullanıcıdan çok uzun bilgiler almak yerine iletişim formları genellikle direkt ve kesin bilgileri almakla görevini tamamlar. Bu nedenle ” Ad & Soyad , E-Mail , İnternet Sitesi , Konu , Mesaj ” bilgileri bizim yapacağımız işlem için yeterli olacaktır diye düşünüyorum.
Bir klasör açıyor ve içerisine kodlarımızı yazacağımız ” iletisim.html ” , “iletisim.php” , “stil.css” dosyalarını oluşturuyoruz.
ilk olarak işlemlerimize iletisim.html ile başlayalım. Dosyayı bir metin editörü yardımı ile açıyoruz ve içeriğine aşşağıda bulunan kodları yapıştırarak kaydediyoruz.
<form action="iletisim.php" method="post"> <table> <tbody> <tr> <td>Adı & Soyadı</td> <td>:</td> <td><input type="text" name="adi" /></td> </tr> <tr> <td>E-Mail Adresi</td> <td>:</td> <td><input type="text" name="mail" /></td> </tr> <tr> <td>İnternet Sitesi</td> <td>:</td> <td><input type="text" name="internet" /></td> </tr> <tr> <td>Konu</td> <td>:</td> <td><input type="text" name="konu" /></td> </tr> <tr> <td>Mesaj</td> <td>:</td> <td><textarea name="mesaj" rows="7" cols="30"></textarea></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> <input type="submit" name="gonder" value="Formu Gönder" /><input type="reset" name="temizle" value="Formu Temizle" /> <span style="color: #222222;"><span style="line-height: 21px;"> </span></span></form>
Bu kodları yazıp sayfanızı çalıştırdığınız takdirde form görünümümüzün en sade hali ile oluştuğunu göreceksiniz. Şimdi sıra geldi CSS ile bu form için şık bir görünüm oluşturma işlemine..
İlk olarak stil dosyamızda yazacağımız kodların html sayfamıza etki edebilmesi için yazacağımız bağlantı satırını ekleyelim. Bunun için üstte bulunan kodlarımızdan <head></head> etiketleri arasına gelerek aşşağıdaki satırı ekleyin.
<link rel="stylesheet" type="text/css" href="stil.css" />
Bu işlemide gerçekleştirdikten sonra stil.css sayfasını açarak iletişim sayfamızın görünüm işlemi için kodlarımızı yazmaya başlayalım. Satır satır açıklayarak kod bloğunu yazmak gerekirse aşşağıdaki kısım bunun için en uygun anlatım olabilir diye düşünüyorum.
body{</pre>
//Arkaplan Rengi İçin Gradient kullanılarak maviden beyaza doğru giden bir renk tonu alındı.
background: #999CFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#999CFF), to(#FAFBF9));
background: -webkit-linear-gradient(#999CFF, #FAFBF9);
background: -moz-linear-gradient(#999CFF, #FAFBF9);
background: -ms-linear-gradient(#999CFF, #FAFBF9);
background: -o-linear-gradient(#999CFF, #FAFBF9);
background: linear-gradient(#999CFF, #FAFBF9);
}
// Tablo içerisindeki text alanları ve textarea için CSS3 yeniliklerinden radius özelliği ve genişlik/yükseklik ayarlamaları yapıldı
table input{border-radius: 10px; width: 350px; height: 40px;}
table input:focus{border: 2px solid darkblue;}
table textarea{border-radius: 10px; width: 350px; height: 150px;}
table textArea:focus{border: 2px solid darkblue;}
// Tablo dışında kalan butonlar için buradaki işlemler gerçekleştirildi.
input{width: 200px; height: 35px; border-radius: 8px;}
Görünüm ile ilgili işlemlerimizi burada sonlandırdığımıza göre artık PHP tabanlı sayfamızı kodlama işlemine geçebiliriz. Bu sayfayı kodlarken dikkat edeceğimiz en önemli nokta; formu tasarlarken oluşturduğumuz text alanlarına verdiğimiz isimler olacaktır. Çünkü PHP sayfamız üzerinden mail adresine gönderilecek veriler ilk olarak form içerisindeki text alanlarından çekilecektir.
Kodlama işlemi şu şekilde olmalıdır :
<?php
//iletisim.html adresinden verileri çekiyoruz..
$adi=$_POST["adi"];
$mail=$_POST["mail"];
$internet=$_POST["internet"];
$konu=$_POST["konu"];
$mesaj=$_POST["mesaj"];
//Hangi Mail Adresine Gideceği Belirleniyor..
$gitmail="info@bilgisayaci.org";
//Herhangi bir hataya karşın dil desteği sağlanıyor
$dil = "Content-Type: text/plain; charset=iso-8859-9\n";
//Mail içeriği kodlanıyor..
$mailkonu="SITENIZDEN GELEN ILETISIM FORMU";
//Eğer Aşşağıda belirtilen alanlar boş ise hata verilip işlemin durdurulması sağlanıyor..
if (empty($adi) or empty($mail) or empty($konu) or empty($mesaj))
{
echo"Hata";
}
//Bir sorun yok ise belirtilen sıraya göre mail gönderiliyor..
else
{
$mailicerik=
"
ADI & SOYADI: $adi
E-MAIL ADRESI: $mail
INTERNET SITESI: $internet
KONU: $konu
MESAJI: $mesaj";
if(mail($gitmail,$mailkonu,$mailicerik,$dil))
{
echo"Başarılı";
}
}
?>
İşlemlerimiz tamamlandı ve artık formumuz düzgün bir biçimde çalışarak belirtilen mail adresine hatasız bir biçimde mail gönderme işlemini gerçekleştiriyor.
NASIL DÜZENLEMELER YAPILABİLİR ?
Gerçekten çok güzel bir soru olurdu bu 🙂 . En basit bir biçimde düşünürsek iletisim.php sayfamızda yazdığımız kodlarda dikkat ettiyseniz ” Formu Gönder ” butonuna tıkladığınızda doldurulması gereken alanlardan bir veya birkaçı doldurulmadıysa ” Hata ” , eğer eksiksiz bir biçimde dolduruldu ise ” Başarılı ” mesajları verilmekteydi. Dilerseniz bunların yerine birer yeni sayfa oluşturarak içerisinde görseller bulunan şık mesajlar verebilirsiniz. Bunun için örneğin Hata mesajı için yönlendirilecek sayfanın linki şu biçimde olmalıdır :
header("location: hata.php");
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 1 No ‘lu Maddeden İndirebilirsiniz..
kod çalışmıyor mail göndermiyor bu sorunu çözebilirmisiniz