CSS İletişim Formu Yapımı - Yazılım Bilişim Programlama

Trang chủ » Html Hazır Iletişim Formu » CSS İletişim Formu Yapımı - Yazılım Bilişim Programlama

Có thể bạn quan tâ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.

<!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

iletisim-formu

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

css-contact-form-sample

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

css-contact-form-tutorial

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

Bunu paylaş:

  • Facebook

İlgili

Từ khóa » Html Hazır Iletişim Formu