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>

<!doctype html>

<html>

<head>

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

<form>

<label>E-Posta</label>

<label>İleti</label>

</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;
}

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 */
}

.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;
}

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;
}

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;
}

#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(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html{ background:url(https://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(https://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#name:focus{
background-image: url(https://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(https://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

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

#comment{
background-image: url(https://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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

<!doctype html>

<html>

<head>

<title>İletişim Formu</title>

<style>

@import url(https://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-size: 30px 30px;