Pazartesi , 24 Temmuz 2017
Anasayfa » WEB » CSS » CSS İletişim Formu Yapımı
CSS Contact Form
CSS Contact Form

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 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 Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

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