Bu yazımızda hiç Css kodu yazmadan sadece Html ve Bootstrap 4 class’larını kullanarak, Bootstrap İ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 Bootstrap 4 class’larını ekleyeceğiz.
Html form oluşturma ile ilgili eksikleriniz olduğunu düşünüyorsanız Tüm Detaylarıyla Html Form Oluşturma yazımı okuyabilirsiniz.
Bootstrap 4 ile ilgili eksikleriniz varsa A’DAN Z’YE BOOTSTRAP DERSLERİ yazımı okuyarak detaylı bilgiler öğrenebilirsiniz.
BOOTSTRAP 4 İLE İLETİŞİM FORMU OLUŞTURMA
İletişim Sayfasının Son Hali
İletişim Formu Html ve Bootstrap 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 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="bg-info text-white text-center py-2 mt-5"> <h2>İletişim Sayfası</h2> </div> <div class="row"> <div class="col-md-6 col-sm-12"> <div> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d391768.355431781!2d32.48257158608294!3d39.90356622124967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d347d520732db1%3A0xbdc57b0c0842b8d!2sAnkara%2C+T%C3%BCrkiye!5e0!3m2!1str!2sus!4v1556530231994!5m2!1str!2sus" width="100%" height="435" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> <div class="col-md-6 col-sm-12"> <form action="" method=""> <div class="card mt-4"> <div class="card-body p-3"> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-user text-info"></i> </div> </div> <input type="text" class="form-control" name="" placeholder="Ad Soyad" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-envelope text-info"></i> </div> </div> <input type="email" class="form-control" name="" placeholder="E-Posta" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-tag text-info"></i> </div> </div> <input type="text" class="form-control" name="" placeholder="Konu" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-comment text-info"></i> </div> </div> <textarea class="form-control" placeholder="Lütfen Mesajınızı Buraya Yazın.." rows="6" required></textarea> </div> </div> <div class="text-center"> <input type="submit" value="GÖNDER" class="btn btn-info btn-block"> </div> </div> </div> </form> </div> </div> </div> </body> </html> |
Ö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.
Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma
Siteye Google Map Ekleme (Harita, Adres, Konum Ekleme)
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
 Oluşturma){kind=link}
peki bu gönderilen mailler neryee gidiyor ?
Bu örnekte iletişim formunun sadece tasarım kodları bulunuyor. Arkaplanda çalışacak kodlar bulunmadığı için bilgileri doldurup GÖNDER butonuna tıkladığında herhangi bir işlem yapılmıyor. Doldurulan bilgilerin belirtmiş olduğun bir eposta adresine iletilmesini istiyorsan bunu iki farklı şekilde yapabilirsin. İlk olarak herhangi bir programlama bilgin yoksa WordPress gibi hazır yazılımları kullanabilirsin. Bu şekilde hiç kod bilgin olmasa bile iletişim formunu etkin hale getirebilirsin. Yani forma girilen bilgiler, GÖNDER butonuna tıklandığında senin belirtmiş olduğun eposta adresine düşecektir. İkinci yöntem olarakta bu tasarımın arkaplanında çalışacak kodları kendin yazabilirsin. Tabiki bunun için C#, Php vb.. programlama dillerinden birini biliyor olman gerekiyor. Yakın zamanda WordPress ve C# ile ilgili yazılar da yazmaya başlayacağım.