Tutorial kali ini kita akan Membuat Form Komentar atau Kotak Komentar Sederhana dengan HTML dan CSS3 , Kolom Komentar yang sederhana namun Elegan dan Cantik untuk dipasang di website kita. dan mudah sekali untuk dibuat.

Untuk Membuat Kotak Komentar ini kita perlu menyediakan Text Editor seprti Notepad ++ , Sublime Text atau yang laiinya.. tentunya untuk menuliskan baris kode yang kita buat .

Disini kita tidak membahas validasi komentari dengan Javascript dulu, atau proses ke database dengan PHP MYSQL, jadi kita fokus terhadap kode Form komentar dan CSS nya saja.. di kesempatan  lain.. jika memang ada yang request Source Code dengan PHP, perlu diketahui dengan PHP MYSQL kita bisa menginput komentar dan membalas komentar... Nah nanti akan saya  buat...

OK... langsung saja  tampilan Form Komentar nya :

Buka text editor anda, silahkan mau pake apa..disini saya menggunakan Notepad++, paste potongan Code HTML5 dibawah ini :

<h2>Suckittrees.Com Form</h2>
<div id="comment_form">
    
    <div>
        <input type="text" name="name" id="name" value="" placeholder="Name">
    </div>
    <div>
        <input type="email" name="email" id="email" value="" placeholder="Email">
    </div>
    <div>
        <input type="url" name="website" id="website" value="" placeholder="Website URL">
    </div>
    <div>
        <textarea rows="10" name="comment" id="comment" placeholder="Comment Form by Suckittrees.com"></textarea>
    </div>
    <div>
        <input type="submit" name="submit" value="Add Comment">
    </div>
    
</div>

 Nah.. setelah itu tambahkan baris script CSS di atasnya :

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    font-size: 13px;
}

#comment_form input, #comment_form textarea {
    border: 2px solid rgba(0,0,0,0.1);
    padding: 8px 10px;
    outline: 0;
}
#comment_form input {
    width: 250px;
}
#comment_form textarea {
    width: 450px;
}

#comment_form input[type="submit"] {
    cursor: pointer;
    background: -webkit-linear-gradient(top, #efefef, #ddd);
    background: -moz-linear-gradient(top, #efefef, #ddd);
    background: -ms-linear-gradient(top, #efefef, #ddd);
    background: -o-linear-gradient(top, #efefef, #ddd);
    background: linear-gradient(top, #efefef, #ddd);
    color: #333;
    text-shadow: 0px 1px 1px rgba(255,255,255,1);
    border: 1px solid #ccc;
}

#comment_form input[type="submit"]:hover {
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -ms-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: linear-gradient(top, #eee, #ccc);
    border: 1px solid #bbb;
}

#comment_form input[type="submit"]:active {
    background: -webkit-linear-gradient(top, #ddd, #aaa);
    background: -moz-linear-gradient(top, #ddd, #aaa);
    background: -ms-linear-gradient(top, #ddd, #aaa);
    background: -o-linear-gradient(top, #ddd, #aaa);
    background: linear-gradient(top, #ddd, #aaa);    
    border: 1px solid #999;
}

#comment_form div {
    margin-bottom: 8px;
}

Sehingga Kode Lengkap dari Form Komentar kita yaitu :

<style>
body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    font-size: 13px;
}

#comment_form input, #comment_form textarea {
    border: 2px solid rgba(0,0,0,0.1);
    padding: 8px 10px;
    outline: 0;
}
#comment_form input {
    width: 250px;
}
#comment_form textarea {
    width: 450px;
}

#comment_form input[type="submit"] {
    cursor: pointer;
    background: -webkit-linear-gradient(top, #efefef, #ddd);
    background: -moz-linear-gradient(top, #efefef, #ddd);
    background: -ms-linear-gradient(top, #efefef, #ddd);
    background: -o-linear-gradient(top, #efefef, #ddd);
    background: linear-gradient(top, #efefef, #ddd);
    color: #333;
    text-shadow: 0px 1px 1px rgba(255,255,255,1);
    border: 1px solid #ccc;
}

#comment_form input[type="submit"]:hover {
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -ms-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: linear-gradient(top, #eee, #ccc);
    border: 1px solid #bbb;
}

#comment_form input[type="submit"]:active {
    background: -webkit-linear-gradient(top, #ddd, #aaa);
    background: -moz-linear-gradient(top, #ddd, #aaa);
    background: -ms-linear-gradient(top, #ddd, #aaa);
    background: -o-linear-gradient(top, #ddd, #aaa);
    background: linear-gradient(top, #ddd, #aaa);    
    border: 1px solid #999;
}

#comment_form div {
    margin-bottom: 8px;
}
</style>
<h2>Suckittrees.Com Form</h2>
<div id="comment_form">
    
    <div>
        <input type="text" name="name" id="name" value="" placeholder="Name">
    </div>
    <div>
        <input type="email" name="email" id="email" value="" placeholder="Email">
    </div>
    <div>
        <input type="url" name="website" id="website" value="" placeholder="Website URL">
    </div>
    <div>
        <textarea rows="10" name="comment" id="comment" placeholder="Comment Form by Suckittrees.com"></textarea>
    </div>
    <div>
        <input type="submit" name="submit" value="Add Comment">
    </div>
    
</div>

Nah.. copy dengan menggunakan CRTL + C , kemudian paste di text editor anda , dan save dengan nama komentar.html , silahkan anda jalankan ... Gimana.. ??? mudah bukan membuat Form komentar Website dengan HTML dan CSS3.. Semoga bermanfaat.