Memindahkan Widget Contact Form ke Halaman Blogger
Pada awal-awal kemunculannya, Widget Contact Form hanya bisa dipasang pada sidebar blogspot. Namun memasuki 2015, form yang membantu kita berinteraksi langsung dengan pemilik blog ini sudah bisa digunakan tanpa harus 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 ~ menggunakan contact form dari penyedia pihak ketiga yakni dari 123ContactForm. Jika Anda juga berniat menggunakan metode ini tak ada salahnya, pelajari caranya disini (Cara Membuat Layanan Contact Us di Blog).
Pada tutorial kali ini kami akan menjelaskan cara 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 dapat memeriksa halaman Hubungi Kami dibagian footer blog ini.
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 ~ menggunakan contact form dari penyedia pihak ketiga yakni dari 123ContactForm. Jika Anda juga berniat menggunakan metode ini tak ada salahnya, pelajari caranya disini (Cara Membuat Layanan Contact Us di Blog).
Pada tutorial kali ini kami akan menjelaskan cara 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 dapat memeriksa halaman Hubungi Kami dibagian footer blog ini.
- Pertama, tambahkan formulir kontak untuk sidebar blog Anda untuk mengujinya. Pastikan bahwa Anda menerima email di kotak masuk Anda ketika 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. Cara mencari BlogId yakni pada URL bar browser Anda. Ketika berada di halaman manapun di dashboard blog kode unik ini akan selalu terlihat. BlogId ini diperlukan untuk menghasilkan kode untuk halaman Form Kontak baru. Gambar di bawah menjelaskan bagaimana cara dapat mengetahui BlogId. Setelah ditemukan, catat atau copy. Nomor ini diperlukan untuk menghasilkan kode untuk formulir kontak.
- Selanjutnya membuat halaman baru di blog Anda. (Baca: Cara Membuat Halaman Statis di Blogspot)
- Salin dan edit scirpt di bawah ini. Pada kode berwarna merah, ganti 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 dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang 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>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<div>
Pesan: <em>(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>
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 dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang 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>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<div>
Pesan: <em>(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 harus beralih ke mode HTML seperti yang ditunjukkan pada gambar di bawah. Kemudian paste kode di atas ke dalam post editor (setelah editing yang tepat), menonaktifkan komentar (Baca: Cara 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 yang dituju. Jika sukses mengirim pesan, artinya Anda berhasil memindahkan widget contact form ini ke halaman blog Anda.
