Cara Mudah Membuat Contact Form Dilengkapi dengan Alert

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan mengajarkan anda bagaimana cara singkat dan mudah untuk membuat kontak form. Kontak Form sendiri sangat dibutuhkan bagi sebuah blog terutama yang berhubungan dengan bisnis, informasi, dan lain-lain. Tidak hanya itu, kontak form juga menjadi salah satu aspek penting jika ingin mendaftarkan akun anda dalam Google Adsense. Hal ini menunjukkan keseriusan anda dalam mengembangkan sebuah blog.

Sebenarnya banyak cara yang dapat kita lakukan untuk membuat sebuah kontak form, salah satunya adalah menggunakan fasilitas widget yang disediakan oleh Blogger yaitu Contact Form. Cara ini dapat dilakukan dengan cara pilih menu Layout > Add a gadget > More Gadgets > Contact Form. Selain itu, ada juga cara lain yang saya sebut cara manual. Maksudnya adalah pembaca yang menulis kontak form tersebut ketika mengklik tombol send akan ditujukan ke Microsoft Outlook jika menggunakan laptop atau akun email mereka jika menggunakan smartphone/ipad. Cara ini terbilang lama dan membuat pembaca malas untuk mengirimkan pesan. Nah, yang akan kita pelajari adalah cara membuat kontak form yang langsung dikirim ke alamat email anda. Berikut langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard, pilih Layout > Pilih posisi dimana anda akan meletakkan kontak form > Add a gadget > HTML/JavaScript > Copy dan paste kode HTML ini

                                          <form action="//submit.form" id="NewsletterSubscription100" method="post" onsubmit="return ValidateForm(this);"> <script type="text/javascript"> function ValidateForm(frm) { if (frm.Name.value == "") { alert('Mohon isi nama anda.'); frm.Name.focus(); return false; } if (frm.FromEmailAddress.value == "") { alert('Mohon isi alamat email anda.'); frm.FromEmailAddress.focus(); return false; } if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) { alert('Tolong masukkan alamat email anda dengan benar.'); frm.FromEmailAddress.focus(); return false; } if (frm.Message.value == "") {alert('Mohon isi pesan yang ingin anda sampaikan.');frm.Message.focus();return false;} return true; } </script> <table border="0" cellpadding="5" cellspacing="0" style="width: 100%; margin: auto; text-align: left;"> <tr> <td> <label for="Name">NAMA</label> <input name="Name" type="text" maxlength="50" style="width: 276px;" /> </td> </tr> <tr> <td> <label for="FromEmailAddress">EMAIL</label> <input name="FromEmailAddress" type="text" maxlength="50" style="width: 276px;" /> </td> </tr> <tr> <td> <label for="Message">PESAN</label> <textarea cols="38" name="Message" rows="5" style="height: 100 px;" wrap="hard">(/textarea) </td></tr> <tr><td> <div style="float: left;"> <a href="https://www.100forms.com/" id="lnk100" title="web forms">forms</a></div> <script src="https://www.100forms.com/js/FORMKEY:MY3RN65JU78A/SEND:XXXX@XXXX.com" type="text/javascript"></script> <input name="skip_Reset" type="reset" value="RESET" /> <input id="skip_Submit" name="skip_Submit" type="submit" value="KIRIM" /> </td></tr> </table> </form>

2. Karena kode HTML di atas ditulis menggunakan text area, maka dari itu tag text area tidak berlaku. Oleh karena itu, anda harus mengganti (/textarea) menjadi </textarea>, anda dapat menemukannya pada baris ke 15 dari bawah.

3. Setelah itu, silakan ganti XXXX@XXXX.com dengan alamat email anda

4. Save Template

Silakan lihat hasilnya. Jika kontak form tersebut terlihat kurang rapi, anda dapat mengatur ukuran kotak isian (input) sesuai dengan ukuran blog anda. Cukup mudah bukan? Dengan kontak form ini, pembaca dapat dengan mudah berkomunikasi dengan anda baik untuk mengirimkan komentar, pertanyaan, maupun kritik. Penggunaan kode HTML diatas menggunakan 100forms sebagai host untuk mengirim email. Kelebihannya adalah jika pembaca mengosongkan atau salah memasukkan alamat email, secara otomatis akan muncul peringatan. Pembaca dapat mengirim pesan ke alamat email anda secara langsung tanpa perlu log in ke akun Microsoft Outlook atau email yang lain. Semoga tutorial ini dapat membantu anda. Terima kasih telah membaca.

loading...