Memindahkan Widget Contact Form Ke Halaman Blogger

Pada awal-awal kemunculannya, Widget Contact Form hanya sanggup dipasang pada sidebar blogspot. Namun memasuki 2015, form yg membantu kita berinteraksi pribadi dengan pemilik blog ini sudah sanggup dipakai tanpa Musti dipasang di sidebar.

bloGoooblok sendiri telah memasang widget ini di halaman khusus Hubungi Kami. Sehingga tidak membuat terlalu banyak space di sidebar.

(Baca: Menambahkan Contact Form di Sidebar Blogger).

Sebelumnya, bloGoooblok Memakai contact form dari penyedia pihak ketiga ialah dari 123ContactForm. Jika Anda juga berniat Memakai metode ini tak ada salahnya, pelajari triknya disini (Caranya Membuat Layanan Contact Us di Blog).

Pada tutorial kali ini saya bakal menjelaskan trik menambahkan widget contact form hanya muncul pada halaman tertentu saja. Ikuti langkah-langkah di bawah ini untuk memindahkan Formulir Kontak ke halaman terpisah. Jika Anda ingin melihat contohnya, Anda sanggup menyelidiki halaman Hubungi Kami dibagian footer blog ini.

• Pertama, tambahkan formulir kontak untuk sidebar blog Anda untuk mengujinya. Pastikan bahwa Anda mendapatkan email di kotak masuk Anda dikala Anda mengklik tombol kirim. (Ini hanyalah langkah opsional tidak untuk dipasang selamanya)
• Setelah diuji coba dan ternyata berhasil, silahkan menghapusnya. 
• Sekarang ketahui BlogId blog Anda. Caranya mencari BlogId ialah pada URL kafe browser Anda. Saat berada di halaman manapun di dashboard blog instruksi unik ini bakal selalu terlihat. BlogId ini diharapkan untuk menghasilkan instruksi untuk halaman Form Kontak baru. Gambar di bawah menjelaskan gimana trik sanggup mengetahui BlogId. Setelah ditemukan, catat atau copy. Nomor ini diharapkan untuk menghasilkan instruksi untuk formulir kontak.

• Selanjutnya membuat halaman gres di blog Anda. (Baca: Caranya Membuat Halaman Statis di Blogspot)

• Salin dan edit scirpt di bawah ini. Pada instruksi berwarna merah, ubah dengan  nomor BlogId Anda. 

<script>
var blogId = '7805508830166576773';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak sanggup dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan dihentikan kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yg valid diperlukan.'

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>
<form name="contact-form">
<div>
Nama Anda : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<div>
Email: <em>(Musti/wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div>
Pesan: <em>(Musti/wajib)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />

<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

• Saat membuat Halaman atau Page, Anda Musti beralih ke mode HTML menyerupai yg ditunjukkan pada gambar di bawah. Kemudian paste instruksi di atas ke dalam post editor (setelah editing yg tepat), menonaktifkan komentar (Baca: Caranya Menghilangkan Kolom Komentar Pada Halaman Blogspot) dan mempublikasikan halaman Anda.

• Setelah halaman diterbitkan, coba lakukan uji coba dengan mengisi form tersebut. Setelah klik tombol Kirim lakukan verifikasi ke email yg dituju. Jika sukses mengirim pesan, Maknanya Anda berhasil memindahkan widget contact form ini ke halaman blog Anda. 

Praktis bukan!

Tweet