How To Add Contact Form Widget into (Blogger) Static Page

Widget Contact Form merupakan salah satu widget/gadget yang terdapat di dalam Blogger yang berfungsi untuk memfasilitasi pengunjung blog agar mereka dapat melakukan interaksi secara personal dengan pemilik blog yang dikunjunginya dengan menggunakan email.

Disamping fungsinya sebagai fasilitas dan sarana komunikasi personal antara users dan site-owner. Widget Contact Form juga dianggap sebagai widget yang wajib ada dalam sebuah blog karena widget tersebut merupakan salah satu faktor yang dipercaya dapat meningkatkan 'kepercayaan' pengunjung terhadap blog yang Ia kunjungi.

Anda pasti paham SEO, dan Anda pasti tahu betapa pentingnya faktor kepercayaan pengunjung. So, then, bagi Anda yang belum memasang widget contact form di dalam blognya, berikut adalah Tutorial Memasang Widget Contact Form di Halaman Statis Blogger.

Just follow the steps, and let the magic happens :D

7 Langkah Membuat Widget Contact Form di Halaman Statis Blogger

1. First of all, tambahkan terlebih dahulu widget contact form. (Lihat gambar)

Gambar 1.1 - Menambahkan Gadget Contact Form Blogger

Note :

Pastikan template yang Anda gunakan saat ini mendukung fitur FontAwesome.

Namun apabila di dalam template Anda tidak terdapat FontAwesome, Anda cukup menambahkan link berikut sebelum </head>

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

2. Next > buka dan edit Template, kemudian simpan kode CSS berikut tepat sebelum </style> atau ]]></b:skin>

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

3. Save/Simpan Template.

4. Kembali ke dashboard blogger kemudian pilih Pages/Laman.

Gambar 1. 2 - Dashboard Blogger, Laman Blogger

5. Buat laman baru > tambahkan judul laman, dan sesuaikan pengaturan laman Anda seperti gambar berikut :

Gambar 1. 3 - Pengaturan Laman Blogger dan Penerapan kode Contact Form

6. Finally, tambahkan kode di bawah ini pada tab HTML
(Lihat gambar yang dilingkari sebelumnya).

<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>

7. Publikasikan laman tersebut, and You're done!

Dapatkan tutorial terbaru dari WikiWidgets?

Subscribe!