Cara Membuat Contact Form Keren Dengan HTML5

Cara Membuat Contact Form Keren Dengan HTML5 - Contact form adalah formulir form yang digunakan pengunjung untuk mengirimkan pesan kepada pemilik website. Contact form atau form kontak sangat penting untuk sebuah website sebagai media penghubung antara pengunjung dan pemilik website, hal ini memudahkan pengunjung untuk memberikan pendapat feed back ke pemilik website.

Kali ini kita akan membuat contact form keren dengan HTML5 dan CSS untuk lebih jelasnya langsung saja kita meluncur ke prakteknya.

Pertama buatlah sebuah folder dengan nama Contact_Form

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

CSS

Pertama untuk style kontak formnya buatlah sebuah file CSS di dalam folder contact_form dengan nama style.css dengan isi script :

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

body {
 background: #f29107;
 color: #fff;
 font-weight: 400;
 font-size: 1em;
 font-family: 'Lato', Arial, sans-serif;
 margin:0;
 padding:0;
 padding-bottom:60px;
}
.wrapper{
 width:70%;
 margin:auto;
}
.ccheader {
 margin: 0 auto;
 padding: 2em;
 text-align: center;
}

.ccheader h1 {
 margin: 0;
 font-weight: 300;
 font-size: 2.5em;
 line-height: 1.3;
}
.ccheader {
 margin: 0 auto;
 padding: 2em;
 text-align: center;
}

.ccheader h1 {
 margin: 0;
 font-weight: 300;
 font-size: 2.5em;
 line-height: 1.3;
}

/* Form CSS*/
.ccform {
   margin: 0 auto;
}
.ccfield-prepend{
 margin-bottom:10px;
 width:100%;
}

.ccform-addon{
 color:#f8ae45; 
 float:left;
 padding:8px;
 width:8%;
 min-width: 35px;
 background:#FFFFFF;
 text-align:center;
 display: block; 
}

.ccformfield {
 color:#000000; 
 background:#FFFFFF;
 border:none;
 padding:15.5px;
 width:100%;
 display:block;
 font-family: 'Lato',Arial,sans-serif;
 font-size:14px;
}

.ccbtn{
 display:block;
 border:none;
 background:#f8ae45;
 float:right;
 color:#FFFFFF;
 padding:10px;
 cursor:pointer;
 text-decoration:none;
 font-weight:bold;
}
.ccbtn:hover{
 background:#d8850e;

}

HTML

Terakhir untuk markupnya buatlah sebuah file HTML di dalam folder contact_form dengan nama index.html dengan isi script :

<!doctype html>
<html>
<head>
 <title>HTML5 Contact Form | Jin Toples Programming</title>
 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 <link href="style.css" rel="stylesheet">
</head>
 <body>

 <header class="ccheader">
  <h1>HTML5 Contact Form</h1> 
 </header>
 <div class="wrapper">
  <form method="post" action="" class="ccform">
  <div class="ccfield-prepend">
   <span class="ccform-addon"><i class="fa fa-user fa-2x"></i></span>
   <input class="ccformfield" type="text" placeholder="Full Name" required>
  </div>
  <div class="ccfield-prepend">
   <span class="ccform-addon"><i class="fa fa-envelope fa-2x"></i></span>
   <input class="ccformfield" type="email" placeholder="Email" required>
  </div>
  <div class="ccfield-prepend">
   <span class="ccform-addon"><i class="fa fa-mobile-phone fa-2x"></i></span>
   <input class="ccformfield" type="number" placeholder="Phone">
  </div>
   <div class="ccfield-prepend">
   <span class="ccform-addon"><i class="fa fa-info fa-2x"></i></span>
   <input class="ccformfield" type="text" placeholder="Subject" required>
  </div>
  <div class="ccfield-prepend">
   <span class="ccform-addon"><i class="fa fa-comment fa-2x"></i></span>
   <textarea class="ccformfield" name="comments" rows="8" placeholder="Message" required></textarea>
  </div>
  <div class="ccfield-prepend">
   <input class="ccbtn" type="submit" value="Submit">
  </div>
  </form>
 </div>
</body>
</html>

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Untuk sekarang hanya tampilannya saja, untuk selanjutnya kita akan mengitegrasikannya dengan Email, PHP dan Database.

Baca di sini : Cara Membuat Contact Form Website Keren Dengan PHP

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Author : CODECONVEY
From : http://codeconvey.com/2014/02/22/creating-simple-html5-contact-form/
Modified By : Jin Toples

Contact Form Keren Dengan HTML5 anda sudah selesai, baca juga tutorial HTML5 dan CSS lainnya.