Cara Mudah Membuat Formulir Contact Us / Hubungi Kami di Blogger

Pada kesempatan ini kita akan membuat halaman Contact Us atau Hubungi Kami di Blogger, form ini merupakan suatu kewajiban yang harus Anda tambahkan ke dalam blog Anda atau website yang mana bertujuan untuk mempermudah komunikasi sama pengunjung blog Anda. Ada banyak cara atau layanan yang dapat membantu Anda dalam membuat form ini tapi disini saya akan menerapkannya dengan 3 cara saja agar anda tidak terlalu pusing untuk memilih mana yang lebih bagus menurut anda, berikut 3 cara yang membuat formulir contact us /hubungi kami:

Dengan Google Drive.


menggunakan Google Drive dengan langkah-langkah yang mudah. Google Drive yang akan kita hubungkan ke blog akan langsung terintegrasi dengan email google Anda, sehingga apabila pengunjung blog mengirim suatu pesan maka secara otomatis masuk ke email google Anda yang langsung di arahkan ke Google Drive website atau aplikasi mobile Google Drive. Nah, langsung saja kita terapkan cara dibawah ini.

Cara Membuat Form Hubungi Kami

• Log in dengan email google Anda di Google Drive
• Klik Buat dan pilih formulir, seperti berikut :

• Selanjutnya Anda akan diarahkan di tab baru untuk mengisi title dan memilih theme form yang akan digunakan setelah selesai klik oke.

• Pada tahap ini kita akan membuat isi dari form kontak seperti nama, email, subjek pesan dan isi pesan dan untuk menambahkan form baru klik tambahkan item.

• Nah, Untuk menambahkan subjek baru (email, subjek pesan dan isi pesan) gunakan teknik yang sama seperti diatas dan untuk isi pesan beri uncheck pada pertanyaan wajib.
• Setelah menyelesaikan langkah diatas klik pada Kirim Formulir dan pilih sematkan. Copy dan simpan HTML yang ada di dalam box yang nanti akan ditambahkan di blog Anda.

• Sampai disini form kontak telah berhasil dan kita akan melakukan sedikit pengaturan. Pada menu bar klik Pilih Tujuan Tanggapan

• akan muncul popup dan atur seperti dibawah ini.

• Masih dihalaman yang sama klik Lihat tanggapan 

• Anda akan di arahkan ke halaman formulir dan klik alat pada menu bar, pilih Aturan pemberitahuan dan atur seperti dibawah ini.

Sampai disini Kontak Form siap ditambahkan di blog Anda. Next menambahkan Form Hubungi Kami di blog.

menggunakan layanan dari foxyform.com 

Cara yang kedua ini cukup simple dan keren, perlu anda ketahui sebelumnya bahwa cara ini menggunakan layanan gratis dari phak ketiga, Ada banyak situs yang menyediakan layanan ini , misal foxyform.com freecontactform.com contactr.com emailmeform.com. Kali ini saya menggunakan layanan dari foxyform.com, Ok simak langkah-langkahnya

1. Buka situs foxyform
2. Pada Setting, pilih informasi yang harus diisikan oleh pengunjung. Centang "required field" untuk menentukan informasi mana yang wajib diisi oleh pengunjung.

3. Kostumisasi form kontak anda pada Advanced setting, disini anda dapat menetukan warna background, warna huruf, jenis huruf, dan ukuran huruf.
   
4. Masukkan email yang nantinya akan jadi target pengiriman pada Target e-mail address
   
5. Pratinjau tampilan form anda apakah sudah sreg atau belum.
   
6. Klik Create Formular untuk mendapatkan kode form contact us anda
7. Copy kode HTML yang muncul dan pastekan pada entri baru di blog anda, tapi ingat anda harus memasukkanya pada mode edit HTML bukan Compose
   

Selesai....

dan cara terakhir adalah

Copy paste kode html ini

kali ini saya akan menunjukan cara mudah untuk membuat form Contact Us. Pertama kita masuk dulu ke akun blogger kita, Masuk ke Posting > Edit Pages, dan klik buat halaman baru, berikan judul (Seperti Contact Us atau Hubungi Kami) klik Edit HTML dan copy script dibawah ini (dari snaphost.com) lalu publish page. 

<form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);"><input name="skip_WhereToSend" type="hidden" value="contohnya@domainanda.com" /><input name="skip_SnapHostID" type="hidden" value="YCUNN4U2ZE8M" /><input name="skip_WhereToReturn" type="hidden" value="http://zhackgp.blogspot.com/2014/04/terima-kasih.html" /><input name="skip_Subject" type="hidden" value="Contact Form" /><input name="skip_ShowUsersIp" type="hidden" value="1" /><input name="skip_SendCopyToUser" type="hidden" value="1" /><script type="text/javascript">function ValidateForm(frm) {if (frm.Name.value == "") {alert('Name is required.');frm.Name.focus();return false;}if (frm.FromEmailAddress.value == "") {alert('Email address is required.');frm.FromEmailAddress.focus();return false;}if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.FromEmailAddress.focus();return false;}if (frm.Comments.value == "") {alert('Please enter comments or questions.');frm.Comments.focus();return false;}if (frm.skip_CaptchaCode.value == "") {alert('Enter web form code.');frm.skip_CaptchaCode.focus();return false;}return true; }function ReloadCaptchaImage(captchaImageId) {var obj = document.getElementById(captchaImageId);var src = obj.src;var date = new Date();var pos = src.indexOf('&rad=');if (pos >= 0) { src = src.substr(0, pos); }obj.src = src + '&rad=' + date.getTime();return false; }</script><table border="0" cellpadding="5" cellspacing="0" style="width: 600px;"><tbody><tr> <td><b>Name*:</b></td> <td><input maxlength="60" name="Name" style="width: 350px;" type="text" /></td> </tr><tr> <td><b>Phone Number*:</b></td> <td><input maxlength="43" name="PhoneNumber" style="width: 350px;" type="text" /></td> </tr><tr> <td><b>Email*:</b></td> <td><input maxlength="60" name="FromEmailAddress" style="width: 350px;" type="text" /></td> </tr><tr> <td><b>Message*:</b></td> <td><textarea cols="40" name="Comments" rows="7" style="width: 350px;"></textarea></td> </tr><tr> <td align="center" colspan="2">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td colspan="2" style="padding-bottom: 18px;">
<a href="http://www.snaphost.com/" style="color: #000099; font-family: Verdana, Arial, Helvetica; font-size: 11px; text-decoration: none;">rel="nofollow">This web form is protected from SPAM by<span style="text-decoration: underline;">SnapHost.com</span></a></td></tr><tr valign="top"><td><i>Enter web form code*:</i><input maxlength="6" name="skip_CaptchaCode" style="width: 80px;" type="text" /></td><td><a href="http://www.snaphost.com/" rel="nofollow"><img alt="Web Form Code" id="CaptchaImage" src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=YCUNN4U2ZE8M&amp;ImgType=2" style="margin-left: 20px;" title="Anti-spam web forms" /></a></td></tr></tbody></table>* - required fields. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input name="skip_Submit" type="submit" value="Submit" /></td></tr></tbody></table></form>

Form Contact Us Blog

KETERANGAN
Untuk yang berwarna biru, diganti dengan email yang anda pakai.  Sementara untuk yang berwarna merah, sesuaikan dengan halaman yang anda buat sebelumnya (halaman yang muncul ketika pengunjung mengklik tombol submit)

Demikian Artikel dari saya semoga bermanfaat.....