Cara Memindahkan Contact Form Blogger Ke Static Page

Contact adalah salah satu element terpenting yang diperlukan sebagai syarat pemasangan AdSense disebuah blog. Contact memiliki fungsi sebagai perantara komunikasi antara pengunjung blog kepada pemiliki ataupun semua admin blog. Dengan Contact ini pengunjung blog dapat menanyakan sesuatu tentang blog terkait, mengajukan diri sebagai admin, mengajak pemilik blog membangun suatu kerja sama, dan lain sebagainya. Berbeda dengan fitur Comment, Contact bersifat private. Jadi chat yang kamu dilakukan tidak akan terekspos oleh pengunjung blog lainnya.

Terdapat penyedia dan pembuat Contact Form berbayar. Pembuat Contact Form ini menyediakan sebuah Static Page khusus Contact dengan script yang cukup kompleks dengan berbagai fitur ataupun element-element yang umumnya sudah menjadi sebuah standar untuk blog professional.

Diluar itu, blogger juga menyedikan sebuah Contact Form official yang dapat digunakan oleh para pemilik blog secara cuma-cuma. Sayangnya penggunaannya relatif terbatas, terutama pada lokasi penempatannya dan form yang disediakan. Contact form official yang telah disediakan berbentuk Widget yang hanya dapat diletakan Sidebar pada sebuah blog. Dan mungkin beberapa orang akan berpendapat bahwa lokasi Contact Form di Sidebar kurang enak dipandang, karena akan berhimpitan dengan Widget lainnya. Sehingga tampilan blog terlihat semakin sesak.

Alternatif pertama bagi pemilik blog, mungkin mereka akan membuat Static Page yang berisikan Script Contact Form yang telah didapatkan dari source lain (selain blogger). Namun ternyata kita bisa memindahkan Contact Form yang telah disediakan blogger ini, dari Sidebar ke sebuah Static Page, hanya dengan sedikit mengakalinya. Jadi kita tidak perlu lagi repot mencari script contact form dari berbagai source lain.

Cara Memindahkan Contact Form Blogger Ke Static Page

Ikuti langkah-langkah berikut. Untuk Demo, kamu bisa melihat Contact page milik Akira di Blog ini. Atau langsung klik di sini.. Contact Me

1. Pasang widget Contact Form yang telah disedikan blogger. Pasang di Sidebar pada blog.

2. Temukan dan salin BlogID milik kalian. BlogID dibutuhkan untuk memunculkan code yang nantinya berfungsi untuk menciptakan Contact Form baru. BlogID bisa kamu temukan di address bar pada browser saat kamu sedang membuka blog milik kamu. Contoh BlogID pada screenshot dibawah ini.

3. Buat page baru. Dan salin Script di bawah ini. Paste pada page tersebut dalam mode HTML. Ubah juga bagian BlogID, gunakan BlogID kalian masing-masing, yang sudah kamu dapatkan dari step 2 tadi.

<script>
var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

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>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' 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' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

5. Setelah Script sudah terpasang sempurna dan menggunakan BlogID milikmu, pastikan kamu telah men-disable comment untuk page yang sudah kamu buat ini sebelum nantinya kamu publish.

6. Masuk ke blogger. Template > Customize > Advanced > Add CSS. Masukan CSS di bawah ini, kemudian klik Apply to Blog. CSS ini berfungsi untuk menyembunyikan Contact Form yang berada di Sidebar tadi.

#ContactForm1 {display:none;}

FAQ: Frequently Asked Question

Pertanyaan #1: Kenapa kita harus menambahkan Comtact Form pada Blog?

Contact Form akan memudahkan para pengunjung blog untuk menghubungi pemilik ataupun para admin blog. Dengan ini para pembaca tidak perlu lagi susah-susah mengirim pesan via e-mail. Para pengunjung bisa mengirim pesan secara langsung, disertai mengisi form e-mail miliknya. Nantinya jika pemilik blog ingin membalas atau membahas percakapan lebih lanjut, maka pemilik blog bisa menghubungi pengunjung tadi melalui e-mail yang telah disertakan tadi. Dengan Contact Form, pemilik atau admin blog pun tidak perlu mencantumkan e-mail secara langsung pada blog, yang menurut sebagian orang hal ini sensitif, karena e-mail bisa dilihat oleh semua pengunjung, dan mungkin saja menjadi sasaran para spammer.

Pertanyaan #2: Kenapa harus memisahkan Contact Form ke Static Page? Kenapa tidak di Sidebar saja?

Hal ini adalah selera masing-masing dari para pemilik blog. Beberapa pemilik blog ingin tampilan blog yang lebih simpel dan rapih, dengan membatasi penggunaan widget. Berhubung Contact Form adalah syarat di-approve-nya Google AdSense, beberapa pemilik blog ini lebih memilih memisahkan Contact Form ke Static Page-nya sendiri,sehingga blog tetap memiliki Contact Form namun tidak mengganggu tampilan halaman utama blog.

Pertanyaan #3: Apa kita bisa menambah form tambahan di Contact Form ini?

Bila kita lihat memang Contact Form official ini sangat simpel dan termasuk basic-nya contact form. Form yang ada hanyalah Nama, e-mail, serta Pesan. Berbeda dengan contact form lain yang cenderung lebih kompleks. Sampai sekarang,  sangat sulit menemukan tutorilal tentang penambahan form ini. Tapi,  jika kamu seorang ahli dalam Javascript dan HTML, menambah form bukanlah hal mustahil.

Pertanyaan #4: Apa Contact Form Blogger akan mempunyai dapak positif atau negatif?

Tidak

Pertanyaan #5: Apa Contact Form aman dari SPAM?

Iya. Blogger sendiri sudah mempunyai proteksi yang akan mencegah masuknya komentar spam otomatis yang bersasal dari mesin. Tapi, tidak dengan spammer  manusia.

Perntanyaan #6: Kemana pesan yang berasal dari Contact Form akan terkirim?

Pesan akan sampai ke semua admin blog. Pesan yang terkirim bukanlah pesan yang berasal dari e-mail para pengunjung blog.

Pertanyaan #7: Contact Form menyatakan "Pesan Teririm" tapi saya tidak menerimanya?

Memang ada beberapa blog yang mengalami ini, seperti yang telah di laporkan oleh Google. Jika kamu mengalaminya, solusi terbaik adalah menghubungi langsung official Blogger Support. Atau kamu juga bisa mencari solusi di komunitas blogger yang ada.

source:http://www.bloggerplugins.org/2013/05/create-separate-contact-page-for-blogger.html
Translated & Improved by Akira Asayami