Cara Membuat Contact Form pada blog/web halaman statis

Daftar isi [Tampil]

Contact form adalah sebuah formulir yang bisa digunakan pengunjung sebagai sarana untuk berkomunikasi secara pribadi lewat email dengan pemilik blog / Website. Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan.

Keberadaan Contact form pada sebuah situs web / blog. Bisa di jadikan sebagai indikator bahwa situs tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya.

Sebenarnya Blogger.com sudah menyediakan fitur / layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di Blogspot. Tapi, sepertinya jarang sekali kita jumpai blog yang menggunakan widget formulir kontak.

Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga. Pada tutorial kali ini saya akan menjelaskan cara membuat/memasang Contact Form pada blog/web halaman statis. Silahkan ikuti langkah-langkah berikut:

1. Masuk Blogger, pilih Blog yang ingin Anda buatkan halaman contact form.

2. Pilih menu Laman (Pages), kemudian klik Laman baru.

3. Buat judul laman, misalnya Contact Us, Contact Me, Hubungi Kami, atau yang lainnya.

4. Masuk mode HTML (sebelah compose), kemudian copy dan pastekan kode di bawah ini sebagai isi Laman.

<script>
var blogId = '134777113111111111';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang 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>

5. Ganti kode yang di tandai warna merah dengan kode blogId milik blog Anda. Untuk mendapatkan kode tersebut, Anda bisa melihatnya pada bar address di halaman manapun dari dasbor blog Anda. Lihat contohnya pada gambar di bawah

6. Nonaktifkan kolom komentar, 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. Cara ini sudah saya coba terbukti sukses

Gambar testing mengirimkan
 pesan ke contact Us milik sendiri

Gambar testing cek email dan berhasil

 Catatan :

• Selama proses pembuatan halaman contact us/contact form, sebaiknya Anda tidak mengubah atau bergonta-ganti mode penulisan.
• Jika Anda ingin melakukan pengeditan setelah halaman contact form dipublikasikan, usahakan agar langsung masuk pada mode HTML.

Mudah-mudah share kali ini ada manfaatnya kalau tidak ada baiknya mohon jangan diambil. demikianlah postingan tentang Cara Membuat Contact Form pada blog/web halaman statis yang bisa saya sampaikan semoga bisa menambah pengetahuan anda, mungkin ada tambahan dari kamu sekalian? kalau ada silahkan isi di kolom komentar jangan lupa juga berikan sebuah saran  .

Berbagi :