Cara Simple Membuat Contact Form keren di halaman blog

Seperti yang kita ketahui, Contact Form bawaan Blogger tampilannya kurang menarik, karena Contact Form bawaan Blogger akan selalu tampil pada tiap halaman yang dibuka oleh pengunjung.

Untuk itu, supaya halaman Contact Form hanya tampil pada halaman tertentu yang kita inginkan, maka kita harus meng-Costumisasi Contact Form tersebut.

Cara nya pun mudah..

1. CSS

Copy kode CSS yg ada di bawah ini, lalu paste tepat di atas ]]></b:skin> atau </style>

#ContactForm1 {
    display: none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}
#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}
#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

2. Font Awesome

Kalo di Blog anda sudah ada Font Awesome nya , maka gak perlu lagi utk ikuti langkah yg ke-2 ini.
Tapi kalo belum ada Font Awesome, yaa tambahkan Link di bawah ini dan Paste di atas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3. HTML

Buat halaman baru di blog

Lalu Copy kode HTML di bawah ini dan Paste di bagian HTML bukan COMPOSE

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

4. Namai Halaman Contact form nya, lalu Publish.

Gimana?
Mudah bukan?
Semoga Bermanfaat 😁