Cara Membuat Formulir Kontak Pada Blog

Widget Formulir pada blog atau website sangat penting. Mungkin semua sudah tau apa fungsi dari widget ini. Dengan Widget ini kita bisa memberikan kritik, saran dan bertanya kepada admin blog. Formulir kontak ini juga sangat cocok untuk yang berjualan online.

Formulir kontak untuk blogger ini jika di letakkan di sidebar pasti nya akan membuat loading pada blog anda akan lambat. Namun pada kenyataan nya koneksi di indonesia memang lambat. Jadi, lebih bagus nya formulir kontak ini di letakkan di halaman statis. Baik lah tanpa panjang lebar lagi berikut ini cara membuat nya.

1. Silahkan pergi ke Tata letak, kemudian tambahkan widget nya terlebih dahulu terserah mau di letakkan dimana di sidebar blog juga boleh.

2. Silahkan pasang dulu font Awesome nya, jika sebelumnya anda sudah memasangnya silahkan lewati langkah ini.

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

3. Kemudian pergi ke Template, lalu Edit Html. Lanjut Copy kode pada langkah nomor 2 lalu paste kan di atas kode </head>.

4. Masih pada Html, carilah kode ]]></b:skin> atau </style> lalu tambahkan kode di bawah ini setelah kode tadi.

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

5. Klik Simpan Template.
6. Sekarang menuju Laman kita akan membuat Laman baru, Setelah itu isikan judul laman dengan Contact atau apa lah terserah anda, lalu klik HTML kemudian paste kan kode di bawah ini.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Name</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> Email Address <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</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> Content <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</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="SEND" />
<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>

 6. Lihatlah pada bagian kan di situ ada Pilihan, ada bacaan Baris baru pilih menjadi Tekan "Enter" untuk baris baru. Ini bertujuan agar tampilan tidak berantakan.

7. Selesai silahkan di Publis dan lihat hasil nya.

Bagaimana mudah sekali bukan? Jika ada yang masih bingung atau pun kurang paham silahkan berkomentar atau bisa kontak saya. Semoga tutorial di atas bermanfaat sekian terima kasih.