Cara Membuat Contac Form Keren Di Blogger - JagoanQue

Cara Membuat Contac Form Keren Di Blogger - JagoanQue

JagoanQue - Contac Form / Contac Us adalah formulir yang bisa digunakan pengunjung website anda untuk berkomunikasi, endorse atau yang lainnya. Biasanya Contac Form ini memiliki kolom yang berisi Nama, Email, dan Pesan untuk mengirimkan email ke pemilik blog.

Contac Form ini biasanya sudah pasti ada di semua blogger ya, contac form ini juga bisa dijadikan sebagai indikator bahwa website ini memiliki keseriusan dalam membangun sebuah blogger / website.


Sebenarnya blogger.com sendiri sudah menyiapkan Contac Form / Layaran Formulir secara gratis dan sederhana, tetapi kebanyakan blogger blogger sekarang jarang menggunakannya ( Mungkin banyak yang tidak suka dengan bawaan blogger )

Pada kesempatan tutorial kali ini saya akan memberikan bagaimana sih Cara Membuat Contac Form Keren Di Blogger. Cara ini bisa dibilang sangat gampang dan tidak perlu meng-EDIT HTML lagi, daripada lama lama langsung saja ikuti tutorial di bawah ini.

Cara Membuat Contac Form Keren Di Blogger

1. Login ke akun blogger anda

2. Pilih menu halaman (pages dalam bahasa inggris) kemudian klik laman baru

3. Buat judul halaman yang anda inginkan ( Seperti contoh : Contac Us, Contac Form, Hubungi Kami, dan yang lainnya )

4. Masuk ke menu HTML ( Jangan compose )


<script>
var blogId = '123456789××××××××××';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

5. Ganti code yang berwarna kuning dengan CodeID blog anda, untuk melihat ID Blog. Anda bisa melihatnya pada bar address pada halaman di dasbor anda, untuk sebagai contoh gambar saya tampilkan di bawah ini


6. Setelah anda mengganti CodeID blog anda, sekarang anda nonaktifkan kolom komentar. Kemudian halaman Contac Us anda sudah bisa di publikasikan.

7. Selesai

Penutup

Bagaimana? apakah anda merasa keberatan memasang Contac Us yang saya berikan ini?, Pastinya tidak dong. Mungkin itu saja tutorial yang bisa sampaikan kali ini, oh yaa.. anda juga bisa menge-cek halaman Contac Us anda dengan cara mengirim pesan di Contac Us yang anda buat. Semoga dengan adanya tutorial ini bisa membantu atau mempermudah anda untuk membuat halaman Contac Us ini. Semoga bermanfaat dan Sekian Terimakasih