Cara Membuat Page Contact Form di Blogger

Tutorial Page Contact Form Blogger

OngkiE NgeBlog - Jika kamu mempunyai blog di blogger rasanya akan terasa kurang jika tidak memiliki halaman contact form yang berguna untuk menyampaikan pesan secara pribadi dari visitor pada admin blog.

Membuat contact form di blogger sangat mudah, kamu tinggal menambahkan widget ContactForm yang pasti akan tampil di bagian Sidebar bukan di halaman / static page.

Untuk sebagian orang mereka akan menggunakan code Contact Form dari pihak ketiga seperti 123contactform / foxyform untuk bisa menampilkan Contact form di Static pages.

Namun hal tersebut saya rasa terasa ribet dan mungkin juga akan merusak citra blog kita di mata Google karna lebih memilih contact form dari pihak lain.

Pada posting tutorial blogger kali ini mari kita belajar memasang / membuat page contact form di blogger dengan code resmi dari blogger.com

Code Contact Form Blogger.

Sebelumnya silahkan copy atau simpan terlebih dahulu code di bawah ini :


<script type="text/javascript">
var blogId = 'blogID';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Terima kasih, Pesan Kamu sudah terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Form 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>

Setelah terCopy ganti tulisan blogID, dengan angka id blog kamu. jika tidak tahu, lihat saja pada Address bar di browser saat buka blogger.com. disitu tertera id blog kamu

Membuat Page Contact Form

Jika sudah code di atas sudah di sesuaikan, ikuti langkah membuat page contact form di bawah ini :

  • Pertama buka Blogger.com.
  • Pilih blog yang akan kita tambahkan contact form.
  • Klik menu "Pages" pada Dashboard blogger. Kemudian "New Page".
  • Isi judul page terlebih dahulu seperti "Contact Us" atau semacamnya.
  • Pilih mode HTML dan Paste kan code yang sudah di siapkan tadi.
  • Jika sudah, Klik "Publish".
  • Beres...

Silahkan coba page contact form yang telah di buat, apakah berfungsi dengan baik.

Kelebihan contact form di atas menurut saya lebih simple, untuk demonya silahkan kunjungi page contact us di blog ini.

Sekian tutorial membuat contact form di blogger. Semoga bermanfaat...

Tidak ada komentar:

Silahkan berkomentar sesuai pembahasan postingan, No SARA!!!

Diberdayakan oleh Blogger.