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

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

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

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>İletişim Formu - Contact Form</title>
<style>
/* CSS Kodları */
</style>
</head>

<body>
</body>

</html>

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.

<div class="iletisim-form">
<form>

<label>İsim</label>
<input name="isim" placeholder="Adınız">

<label>E-Posta</label>
<input name="eposta" type="email" placeholder="Mail Adresiniz">

<label>İleti</label>
<textarea name="mesaj" placeholder="Mesajınız"></textarea>

<input id="kaydet" name="kaydet" type="submit" value="Kaydet">

</form>
</div>

4.Adım: Label Etiketlerinin Biçimlendirilmesi

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

label {
display:block;
margin-top:20px;
letter-spacing:2px;
}

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

.iletisim-form {
width:459px;
padding:50px;
display:block;
margin:0 auto;
background: rgb(255,214,94); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}

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

form {
margin:0 auto;
}

6.Adım input ve textarea nesnesinin CSS kodu

input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

textarea {
height:213px;

background:url(textarea-bg.png) right no-repeat #efefef;
background-size: contain;
}

input:focus, textarea:focus {
border:1px solid #97d6eb;
}

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

#kaydet {
width:127px;
height:38px;
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
border:none;
margin-top:20px;
cursor:pointer;
}

#kaydet:hover {
opacity:.9;
}

[divider]

Hazır İletişim Formları

CSS FORM 1

DEMO

HTML & CSS

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>İletişim Formu</title>
<style>

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;
background-size: cover;
height:100%;
}

#feedback-page{
text-align:center;
}

#form-main{
width:100%;
float:left;
padding-top:0px;
}

#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}

.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}

#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}

#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}

.submit:hover {
color: #3498db;
}

.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}

.submit:hover .ease{
width:100%;
background-color:white;
}

@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
</style>
</head>

<body>

<div id="form-main">
<div id="form-div">
<form class="form" id="form1">

<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="İsim" id="name" />
</p>

<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Eposta" />
</p>

<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Yorum"></textarea>
</p>


<div class="submit">
<input type="submit" value="KAYDET" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>



</body>

</html>

[divider]

CSS FORM 2

DEMO

HTML & CSS & JS

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>İletişim Formu</title>
<style>
.form-style-4{
width: 450px;
font-size: 16px;
background: #495C70;
padding: 30px 30px 15px 30px;
border: 5px solid #53687E;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #fff;

}
.form-style-4 label {
display:block;
margin-bottom: 10px;
}
.form-style-4 label > span{
display: inline-block;
float: left;
width: 150px;
}
.form-style-4 input[type=text],
.form-style-4 input[type=email] 
{
background: transparent;
border: none;
border-bottom: 1px dashed #83A4C5;
width: 275px;
outline: none;
padding: 0px 0px 0px 0px;
font-style: italic;
}
.form-style-4 textarea{
font-style: italic;
padding: 0px 0px 0px 0px;
background: transparent;
outline: none;
border: none;
border-bottom: 1px dashed #83A4C5;
width: 275px;
overflow: hidden;
resize:none;
height:20px;
}

.form-style-4 textarea:focus, 
.form-style-4 input[type=text]:focus,
.form-style-4 input[type=email]:focus,
.form-style-4 input[type=email] :focus
{
border-bottom: 1px dashed #D9FFA9;
}

.form-style-4 input[type=submit],
.form-style-4 input[type=button]{
background: #576E86;
border: none;
padding: 8px 10px 8px 10px;
border-radius: 5px;
color: #A8BACE;
}
.form-style-4 input[type=submit]:hover,
.form-style-4 input[type=button]:hover{
background: #394D61;
}
</style>

<script>

var artis=20;
function adjust_textarea(h) {
h.style.height = "20px";
h.style.height = (h.scrollHeight)+"px";
}
</script>

</head>

<body>

<form class="form-style-4" action="" method="post">
<label for="field1">
<span>Adınızı Girin</span><input type="text" name="field1" required="true" />
</label>
<label for="field2">
<span>E-Posta Adresi</span><input type="email" name="field2" required="true" />
</label>
<label for="field3">
<span>Özet</span><input type="text" name="field3" required="true" />
</label>
<label for="field4">
<span>Mesajınız</span><textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea>
</label>
<label>
<span>&nbsp;</span><input type="submit" value="Gönder" />
</label>
</form>



</body>

</html>

[divider]

CSS Form 3

DEMO

HTML & CSS

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>İletişim Formu</title>
<style>
<style type="text/css">

.iletisim-form{
width: 300px;
margin:auto;
}
.form-style-9{
max-width: 450px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #305A72;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style{
box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;

}.form-style-9 ul li .field-style:focus{
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
float:left;
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"], 
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover, 
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
</style>

</style>
</head>

<body>

<div class="iletisim-form">
<form class="form-style-9">
<ul>
<li>
<input type="text" name="field1" class="field-style field-split align-left" placeholder="İsim" />
<input type="email" name="field2" class="field-style field-split align-right" placeholder="Email" />

</li>
<li>
<input type="text" name="field3" class="field-style field-split align-left" placeholder="Telefon" />
<input type="url" name="field4" class="field-style field-split align-right" placeholder="Web Sitesi" />
</li>
<li>
<input type="text" name="field3" class="field-style field-full align-none" placeholder="Konu" />
</li>
<li>
<textarea name="field5" class="field-style" placeholder="Mesaj"></textarea>
</li>
<li>
<input type="submit" value="Gönder" />
</li>
</ul>
</form>
</div>


</body>

</html>

KAYNAKLAR

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

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

İlgili

Yorum

mavi dedi ki:
Mart 6, 2019, 8:26 pm
selam siteme ekledim fakat mail nereye gidiyor onu çözemedim
Cevapla
ramazan dedi ki:
Mart 8, 2018, 7:41 pm
Her şeyi hazırlıyorum sıkıntısız geliyor ekrana fakat formdan mesaj gönderirken hangi mail adresine göndereceğini nereden ayarlıyoruz?
Cevapla
- İlker dedi ki:
  Nisan 21, 2018, 2:40 am
  php ile işlem yaptırman lazım
  Cevapla
Rüveyda dedi ki:
Ocak 23, 2018, 3:09 pm
1. formda sarı renk nasıl değişiyo
Cevapla
- Hayri dedi ki:
  Ocak 24, 2018, 12:38 am
  5. Adımdaki background kodlarının tamamını değiştirip yapabilirsin.
  Değişecek kodlar
  background: rgb(255,214,94); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffd65e’, endColorstr=’#febf04′,GradientType=0 ); /* IE6-9 */
  Yukarıdaki kodları silip şu şekilde kullanabilirsin.
  background: red;
  Cevapla
Ahmet Can dedi ki:
Eylül 15, 2017, 12:08 pm
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”]
Cevapla
- Serkan dedi ki:
  Eylül 15, 2017, 2:54 pm
  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…
  Cevapla
  - Hayri dedi ki:
    Eylül 15, 2017, 7:06 pm
    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.
    Cevapla
    - Serkan dedi ki:
      Eylül 16, 2017, 8:05 am
      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?
      Cevapla
Serkan dedi ki:
Eylül 14, 2017, 10:15 pm
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…
Cevapla

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

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

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

4.Adım: Label Etiketlerinin Biçimlendirilmesi

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

CSS FORM 2

CSS Form 3

KAYNAKLAR

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X