Bu yazımızda Css kullanarak bir Html İletişim Formu (İletişim Sayfası) tasarımı yapacağız. Bunun için öncelikle gerekli Html form kodlarını yazacağız. Daha sonra ise istediğimiz tasarıma uygun Css kodlarını yazmaya başlayacağız.
Html form oluşturma ile ilgili eksikleriniz olduğunu düşünüyorsanız Tüm Detaylarıyla Html Form Oluşturma yazımı okuyabilirsiniz.
Css konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımı inceleyebilirsiniz.
CSS İLE HTML İLETİŞİM FORMU OLUŞTURMA
İletişim Sayfasının Son Hali
İletişim Formu Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="container"> <form id="contact" action="" method=""> <h2>İletişim Sayfası</h2> <div class="form-control"> <input placeholder="Adınız Soyadınız" type="text" required autofocus> </div> <div class="form-control"> <input placeholder="E-Posta Adresiniz" type="email" required> </div> <div class="form-control"> <input placeholder="Konu" type="text" required> </div> <div class="form-control"> <textarea placeholder="Lütfen Mesajınızı Buraya Yazın.." required></textarea> </div> <div class="form-control"> <button name="submit" type="submit" id="submit">GÖNDER</button> </div> </form> </div> </body> </html> |
İletişim Formu Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; line-height: 30px; color: #888; background: #79A7A8; } .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font: 500 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #contact { background: #F9F9F9; padding: 25px; margin: 100px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #contact h2 { display: block; font-size: 30px; font-weight: 300; margin-bottom: 15px; } .form-control{ border: none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover { -webkit-transition: border-color 0.4s ease-in-out; -moz-transition: border-color 0.4s ease-in-out; transition: border-color 0.4s ease-in-out; border: 1px solid #aaa; } #contact textarea { height: 120px; max-width: 100%; resize: none; } #contact button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #79A7A8; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; } #contact button[type="submit"]:hover { background: #355C7D; -webkit-transition: background 0.4s ease-in-out; -moz-transition: background 0.4s ease-in-out; transition: background-color 0.4s ease-in-out; } #contact button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; } |
Önemli : Bu yazdığımız kodlar ile iletişim formunun sadece tasarım kısmını yapıyoruz. Yani bilgiler girildikten sonra Gönder butonuna tıklayınca herhangi bir E-posta (mesaj) gönderme işlemi gerçekleşmez.
Çalışan bir iletişim formu yapabilmek için yani girilen bilgilerin belirtilen E-posta adresine gönderilebilmesi için bu tasarım kodlarının arkaplanında çalışacak kodları da yazmamız gerekiyor.
Bunun için 2 alternatif var. Ya C#, Php vb.. bir programlama dili biliyor olmamız lazım. Böylece arkaplanda yazılması gereken kodları kendimiz yazabiliriz. Yada herhangi bir programlama dili bilmiyorsak WordPress vb.. hazır yazılımları kullanabiliriz.
WordPress‘te çalışan yani girilen bilgileri belirtmiş olduğumuz E-posta adresine gönderen iletişim formunun nasıl yapıldığını öğrenmek için WordPress İletişim Formu Eklentisi – Contact Form 7 Ayarları ve Kullanımı yazımı okuyabilirsiniz.
Şu yazılarda ilginizi çekebilir.
Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
 Oluşturma){kind=link}
Verdiğiniz bilgiler için çok teşekkürler.
Rica ederim Alperen.
e posta da gönderecek kod paylaşır mısınız
En kısa zamanda e-posta gönderme ile ilgili detaylı bir yazı yazıp yayınlayacağım. Takipte kalmanız dileğiyle.
baya uğraştım ben de bulamadım.
Admin siteyi 10/10 yapmışsın çok işime yarayacak vallaha