Cara membuat form contact di blog

Form Contact adalah sebuah halaman yang bisa digunakan oleh pengunjung blog untuk menghubungi pemilik blog/website.

Form Contact memiliki beberapa istilah seperti Contact US, Contact me, hubungi kami. Tetapi walaupun memiliki banyak istilah fungsi form Contact sama untuk menghubungi pemilik blog/website.

Form Contact menjadi pilihan bagi para pengunjung blog/website yang ingin berkomunikasi secara private dengan pemilik blog, mungkin ada sesuatu yang mau disampaikan oleh pengunjung atau ada seseorang memberikan penawaran kerjasama.

Walaupun terkadang fitur Contact us disalahgunakan oleh beberapa pengunjung blog yang iseng mengirim pesan tidak penting, atau pesan spam. Tetapi walaupun seperti itu fitur Contact tetap harus di buat karena dibutuhkan.

Membuat form Contact sebenarnya bisa menggunakan widget form Contact yang dibuat oleh google, namun form Contact tersebut akan di tampilkan di sidebar atau di footer, tidak bisa di taruh dihalaman khusus.

Untuk membuat form Contact di halaman khusus harus membuat menggunakan script HTM. Kelebihan Form contact yang dibuat menggunakan halaman khusus, bisa diletakkan dimana saja sesuai keinginan.

Untuk membuat form contact bisa dilakukan dengan cara berikut.

Tambah widget contact form di blog

Agar form contact yang dibuat menggunakan html berfungsi langkah pertama harus menambahkan widget contact form buatan Google di blog.

1. Kunjungi blogger.com

2. Pilih tata letak

3. tambahkan gadget

4. Cari Contact form lalu klik dan simpan

Jika widget contact form sudah ditambahkan ke blog langkah selanjutnya sembunyikan widget tersebut dengan cara

Copy kode ini #ContactForm1{display: none ! important;}

Lalu buka tema edit html lalu paste kodenya di atas kode ]]></b:skin> lalu klik simpan

Langkah selanjutnya buat halaman baru

Sebelum membuat halaman contact kalian harus mengetahui ID blog kalian dulu. Untuk mengetahui

Buka dasboard blogger dan lihat di URL bar browser kalian.

Setelah tau id blog langkah selanjutnya buat halaman baru.

1. Buka halaman

2. Buat halaman baru

3. Beri nama halaman contoh Contact atau hubungi kami

4. Pilih Mode HTM

5. Copy dan paste kode di bawah ini

<script>
var blogId = '7885578534166076773';//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="" />

Baca Juga:

<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>

6.Ganti kode berwarna merah dengan id blog kalian

7. Agar halaman ini tidak dikomentari pengunjung, Nonaktifkan kolom komentar melalui opsi. kemudian langsung publikasikan halaman contact form pada mode HTML.

7. Lihat atau kunjungi halaman contact form Anda, kemudian cobalah kirim pesan untuk mengetahui apakah formulir kontak bekerja sesuai dengan yang diharapkan.

Kalian bisa mencatumkan URL halaman contact di blog kalian.