Pazartesi , 11 Aralık 2017
Anasayfa » WEB » CSS » CSS İletişim Formu Yapımı

CSS İletişim Formu Yapımı

Şunu kabul edelim HTML formlar webin önemli bir parçasıdır. Kullanıcıların sayfa ile etkileşimi için güçlü ve önemli birer araçtır. Tasarımı kötü olan bir formun kullanıcıların sayfa hakkındaki görüşlerini olumsuz yönde etkileyeceği gerçeği kaçınılmaz bir gerçektir.

Bu yazıda kullanabileceğiniz örnek bir kaç form ile sayfanızın daha güzel görünmesini sağlayabilirsiniz.  Şunu öncelikle belirteyim aşağıdaki formlar güncel tarayıcılar ile tam uyumlu çalışacaktır. Eski tarayıcılarda kararlı şekilde çalışıp çalışmayacağı konusunda bir garanti veremem.

CSS Contact Form: DEMO

Textarea nesnesindeki arkaplan resim

1.Adım: CSS Form Tasarımı

Öncelikle bir grafik programında formumuzu tasarlamamız uygun olacaktır. Grafik programı yardımıyla tasarımı istediğimiz gibi şekillendirmek daha kolaydır. Aşağıda tasarlanmış bir tane CSS İletişim Formu ( CSS Contact Form )  görüyorsunuz.

CSS Contact Form
CSS Contact Form

2.Adım: Temel HTML Etiketlerinin Yazılması

Standart bir html sayfasında olması gereken html etiketlerini yazıyoruz.

 

3.Adım: Form Etiketlerinin Yazılması

HTML5 kurallarına uygun olarak oluşturmak istediğimizi HTML iletişim formu etiketlerini yazıyoruz. type=”email” yapıldığında bu alana sadece eposta adresi girilebiliyor.  placeholder yine HTML5 özelliği olduğu ve Türkçesinin yer tutucu yani biz birşey girene kadar açıklama olarak ekranda kalacağı anlamına geliyor.

4.Adım: Label Etiketlerinin Biçimlendirilmesi

Label etiketlerini biçimlendirmek için gerekli olan CSS kodları

5.Adım: İletişim Form Divinin CSS Kodu

6.Adım: Form Alanın Ortalanması

6.Adım input ve textarea nesnesinin CSS kodu

7.Adım: Kaydet Butonun Tasarımı

 

Hazır İletişim Formları

 

CSS FORM  1

iletisim-formu

DEMO

HTML & CSS

 

CSS FORM  2

css-contact-form-sample

DEMO

HTML & CSS & JS

CSS Form 3

css-contact-form-tutorial

DEMO

HTML & CSS

 

KAYNAKLAR

https://codepen.io/rexkirby/pen/Fdnlz

https://www.sanwebe.com/2014/08/css-html-forms-designs

Hakkında Hayri

İlginizi Çekebilir

CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Layout, CSS içinde bulunan en güçlü yerleşim düzenidir.  Tek boyutlu flexbox’ın aksine hem …

6 Yorumlar

  1. Merhaba, öncelikle hangi programlama dilini kullanıyorsunuz? 2. olarak da input nesnesinin name içindeki değer ile formdaki bilgileri alabilirsin.
    Eğer php tarafında alacaksan şuna benzer bir kod yazmış olman gerekiyor.

    $_POST[“field2”]

    • Hocam dediğim gibi ben CSS Form 3 altındaki kodları aynen yapıştırdım. Çalıştırmak için ayrıca kod mu yazmam gerekiyor? Ben blogger’da yaptığım için kodlarla küçük eklentiler ekliyorum sadece. Çok fazla kod bilgim yok…

      • Anladığım kadarıyla webtasarımı konusunda yenisin galiba. Buradaki kodlar sadece tasarım kısmı içinde. Tasarım ile birlikte programlama da yapman gerekiyor. Tavsiye, html css ile birlikte sunucu tarafında çalışan bir programlama dilini öğrenmeye başla. Php yada asp.net ile başlayabilirsin.

        • Aslında yeni değilim ama ben programlama dilleri değil de wordpress, bloogger vs. gibi alt yapılarla birşeyler yapmaya çalışıyorum. Birine bir site yaptım, bir iletişim kutusu koyamadım sadece. Kolay bir kodu var mıdır bu işi yapabilmemin?

  2. Hocam merhaba, ben CSS Form 3 hazır kodlarını blogger’da yaptığımı siteye ekledim fakat mail adresi belirtmiyor muyuz? Alanları doldurup göndere bastığımda maili göndermiyor. Yardımcı olabilirseniz sevinirim…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir