HTML 5 İletişim Formu

HTML5 ve CSS ile şık tasarımlı iletişim formu.

Container ve  formumuzu oluşturuyoruz.

<div class="container">  
  <form id="contact" action="" method="post">
  </form>

Sayfamızda h1 Site Adı h2 site açıklması olacağı için h3 ve h4 etiketini kullanarak sayfamıza açıklama ekliyoruz.

<h3>İletişim</h3>
    <h4>En kıza sürede cevap verecğiz.</h4>

Textboxları oluşturuyoruz.

<fieldset>
      <input placeholder="Ad Soyad" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="E-Mail" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Telefon Numarası" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Website http://" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Mesajınız" tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">GÖNDER</button>
    </fieldset>
  </form>

Google Fontumuzu ekliyoruz.

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

Sayfamızın genel css’sini yazıyoruz.

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

Body kodunu yazıyoruz

body {
    font-family:"Open Sans", Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: 12px;
    line-height:30px;
    color:#777;
    background:#0CF;
}

Container kodunu yazıyoruz.

.container {
    max-width:400px;
    width:100%;
    margin:0 auto;
    position:relative;
}

Contact kodumuzu yazıyoruz.

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
    background:#F9F9F9;
    padding:25px;
    margin:50px 0;
}

#contact h3 {
    color: #F96;
    display: block;
    font-size: 30px;
    font-weight: 400;
}

#contact h4 {
    margin:5px 0 15px;
    display:block;
    font-size:13px;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
    width:100%;
    border:1px solid #CCC;
    background:#FFF;
    margin:0 0 5px;
    padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
    -moz-transition:border-color 0.3s ease-in-out;
    transition:border-color 0.3s ease-in-out;
    border:1px solid #AAA;
}

#contact textarea {
    height:100px;
    max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
    cursor:pointer;
    width:100%;
    border:none;
    background:#0CF;
    color:#FFF;
    margin:0 0 5px;
    padding:10px;
    font-size:15px;
}

#contact button[type="submit"]:hover {
    background:#09C;
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
    outline:0;
    border:1px solid #999;
}

fieldset kodunu yazıyoruz.

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

Sayfamıza renk vermek için kodumuzu yazıyoruz.

::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

Tüm HTML kodları

<div class="container">  
  <form id="contact" action="" method="post">
    <h3>İletişim</h3>
    <h4>En kıza sürede cevap verecğiz.</h4>
    <fieldset>
      <input placeholder="Ad Soyad" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="E-Mail" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Telefon Numarası" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Website http://" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Mesajınız" tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">GÖNDER</button>
    </fieldset>
  </form>
</div>

Tüm CSS kodları.

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body {
    font-family:"Open Sans", Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: 12px;
    line-height:30px;
    color:#777;
    background:#0CF;
}

.container {
    max-width:400px;
    width:100%;
    margin:0 auto;
    position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
    background:#F9F9F9;
    padding:25px;
    margin:50px 0;
}

#contact h3 {
    color: #F96;
    display: block;
    font-size: 30px;
    font-weight: 400;
}

#contact h4 {
    margin:5px 0 15px;
    display:block;
    font-size:13px;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
    width:100%;
    border:1px solid #CCC;
    background:#FFF;
    margin:0 0 5px;
    padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
    -moz-transition:border-color 0.3s ease-in-out;
    transition:border-color 0.3s ease-in-out;
    border:1px solid #AAA;
}

#contact textarea {
    height:100px;
    max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
    cursor:pointer;
    width:100%;
    border:none;
    background:#0CF;
    color:#FFF;
    margin:0 0 5px;
    padding:10px;
    font-size:15px;
}

#contact button[type="submit"]:hover {
    background:#09C;
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
    outline:0;
    border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

 

 

 

Demo için tıklayınız

Proje inin tıklayınız