Cara Cepat Membuat Penilaian Form di Blog

Pada kesempatan kali ini saya akan membahas mengenai form kembali seperti artikel sebelumnya tetapi kali ini saya akan mengajarkan cara sederhana membuat form/angket penilaian di blog/website. Form Penilaian atau istilah umumnya kuesioner dapat anda jumpai di berbagai tempat umum seperti hotel, rumah sakit, agen travel, perusahaan tertentu dan lain sebagainya. Mereka menyediakan fasilitas form penilaian sebagai sarana umpan balik/feedback untuk memajukan pelayanan maupun kualitas dari tempat itu sendiri.

Sebelum itu kita harus mengetahui apa itu form. Form digunakan untuk menyimpan data pengunjung yang mereka inputkan, dan dalam penggunaannya melibatkan bahasa pemrograman server seperti PHP misalnya. Pada proses pembuatan Form ada banyak elemen yang biasa dimasukkan seperti penggunaan textarea, input, legend, button dan penggunaan elemen lainnya.

Form penilaian biasanya dijumpai dalam bentuk print out untuk memudahkan pengguna mengisi form tersebut. Nah, sekarang saya akan mengajarkan anda untuk membuat form penilaian secara online. Hal ini berarti hasil dari form yang telah diisi akan langsung diterima oleh pemilik/pembuat form. Untuk postingan kali ini saya akan memberikan langkah-langkah membuat form yang saya ambil contoh yaitu form penilaian di hotel.

1. Log in ke akun blog anda > Pada dashboard silakan pilih Pages > New page

2. Copy dan paste kode HTML berikut pada menu HTML di sebelah kanan Compose

                            <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.room.value == "") { alert('Mohon isi nomor kamar anda.'); frm.room.focus(); return false; } if (frm.Address.value == "") { alert('Mohon isi alamat domisili anda.'); frm.Address.focus(); return false; } if (frm.Phone.value == "") { alert('Mohon isi nomor telepon anda.'); frm.Phone.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.checkin.value == "Pilih") { alert('Mohon isi tanggal menginap.'); frm.checkin.focus(); return false; } if (frm.checkin2.value == "Pilih") { alert('Mohon isi bulan menginap.'); frm.checkin2.focus(); return false; } if (frm.checkin3.value == "") { alert('Mohon isi tahun menginap.'); frm.checkin3.focus(); return false; } if (frm.Address.value == "") { alert('Mohon isi alamat domisili anda.'); frm.Address.focus(); return false; } if (frm.Phone.value == "") { alert('Mohon isi nomor telepon anda.'); frm.Phone.focus(); return false; } var radios = document.getElementsByName("porsi"); var radios = document.getElementsByName("rasa"); var radios = document.getElementsByName("saji"); var radios = document.getElementsByName("harga"); var radios = document.getElementsByName("jenis"); var radios = document.getElementsByName("service"); var radios = document.getElementsByName("bersih"); var radios = document.getElementsByName("fasilitas"); var radios = document.getElementsByName("nyaman"); var radios = document.getElementsByName("aman"); var radios = document.getElementsByName("restoran"); var radios = document.getElementsByName("pool"); var radios = document.getElementsByName("fitness"); var radios = document.getElementsByName("hall"); var radios = document.getElementsByName("wifi"); var radios = document.getElementsByName("end"); var formValid = false; var i = 0; while (!formValid && i < radios.length) { if (radios[i].checked) formValid = true; i++; } if (!formValid) alert("Mohon lengkapi form penilaian."); return formValid; if (frm.Message.value == "") {alert('Mohon isi pesan yang ingin anda sampaikan.');frm.Message.focus();return false;} return true; } </script> <br /> <div style="text-align: center;"> <span style="font-size: x-large;">Form Penilaian</span></div> <br /> <br /> <table align="center" style="width: 100%;"> <tbody> <tr><td><u><span style="font-size: large;">Data Pengisi</span></u></td></tr> <tr><td><label for="Name">Nama</label><span style="font-size: large;">                  </span>                  <input maxlength="50" name="Name" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="room">Nomor Kamar</label>                           <input maxlength="50" name="room" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Gender">Jenis Kelamin</label>                            <input checked="checked" name="Gender" type="radio" value="Pria" /> Pria <input name="Gender" type="radio" value="Wanita" /> Wanita</td></tr> <tr><td><label for="address">Alamat</label>                                       <input maxlength="50" name="Address" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Phone">Nomor Telepon</label>                        <input maxlength="50" name="Phone" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="FromEmailAddress">Alamat Email</label>                              <input maxlength="50" name="FromEmailAddress" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="checkin">Tanggal Menginap</label>                      <select name="checkin"><option value="Pilih">Pilih</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select><label for="checkin2"></label>- <select name="checkin2"><option value="Pilih">Pilih</option> <option value="Januari">Januari</option> <option value="Februari">Februari</option> <option value="Maret">Maret</option> <option value="April">April</option> <option value="Mei">Mei</option> <option value="Juni">Juni</option> <option value="Juli">Juli</option> <option value="Agustus">Agustus</option> <option value="September">September</option> <option value="Oktober">Oktober</option> <option value="November">November</option> <option value="Desember">Desember</option> </select><label for="Birthdate3"></label> - <input maxlength="50" min="2017" name="checkin3" style="width: 90px;" type="number" /></td></tr> </tbody></table> <table width="600px" align="left"> <tr><td><u><span style="font-size: large;">Kriteria Penilaian</span></u></td></tr> <tr><td>Skor Penilaian</td><td align="center">Sangat Kurang</td><td align="center">Kurang</td><td align="center">Cukup</td><td align="center">Baik</td><td align="center">Sangat Baik</td></tr> <tr><td><b>Makanan</b></td></tr> <tr><td>Porsi Makanan</td> <td align="center"><input name="porsi" type="radio" value="sangat kurang"/></td> <td align="center"><input name="porsi" type="radio" value="kurang"/></td> <td align="center"><input name="porsi" type="radio" value="cukup"/></td> <td align="center"><input name="porsi" type="radio" value="baik"/></td> <td align="center"><input name="porsi" type="radio" value="sangat baik"/></td></tr> <tr><td>Rasa Makanan</td> <td align="center"><input name="rasa" type="radio" value="sangat kurang"/></td> <td align="center"><input name="rasa" type="radio" value="kurang"/></td> <td align="center"><input name="rasa" type="radio" value="cukup"/></td> <td align="center"><input name="rasa" type="radio" value="baik"/></td> <td align="center"><input name="rasa" type="radio" value="sangat baik"/></td></tr> <tr><td>Penyajian</td> <td align="center"><input name="saji" type="radio" value="sangat kurang"/></td> <td align="center"><input name="saji" type="radio" value="kurang"/></td> <td align="center"><input name="saji" type="radio" value="cukup"/></td> <td align="center"><input name="saji" type="radio" value="baik"/></td> <td align="center"><input name="saji" type="radio" value="sangat baik"/></td></tr> <tr><td>Harga</td> <td align="center"><input name="harga" type="radio" value="sangat kurang"/></td> <td align="center"><input name="harga" type="radio" value="kurang"/></td> <td align="center"><input name="harga" type="radio" value="cukup"/></td> <td align="center"><input name="harga" type="radio" value="baik"/></td> <td align="center"><input name="harga" type="radio" value="sangat baik"/></td></tr> <tr><td>Jenis Makanan</td> <td align="center"><input name="jenis" type="radio" value="sangat kurang"/></td> <td align="center"><input name="jenis" type="radio" value="kurang"/></td> <td align="center"><input name="jenis" type="radio" value="cukup"/></td> <td align="center"><input name="jenis" type="radio" value="baik"/></td> <td align="center"><input name="jenis" type="radio" value="sangat baik"/></td></tr> <tr><td><b>Kamar</b></td></tr> <tr><td>Pelayanan</td> <td align="center"><input name="service" type="radio" value="sangat kurang"/></td> <td align="center"><input name="service" type="radio" value="kurang"/></td> <td align="center"><input name="service" type="radio" value="cukup"/></td> <td align="center"><input name="service" type="radio" value="baik"/></td> <td align="center"><input name="service" type="radio" value="sangat baik"/></td></tr> <tr><td>Kebersihan</td> <td align="center"><input name="bersih" type="radio" value="sangat kurang"/></td> <td align="center"><input name="bersih" type="radio" value="kurang"/></td> <td align="center"><input name="bersih" type="radio" value="cukup"/></td> <td align="center"><input name="bersih" type="radio" value="baik"/></td> <td align="center"><input name="bersih" type="radio" value="sangat baik"/></td></tr> <tr><td>Fasilitas</td> <td align="center"><input name="fasilitas" type="radio" value="sangat kurang"/></td> <td align="center"><input name="fasilitas" type="radio" value="kurang"/></td> <td align="center"><input name="fasilitas" type="radio" value="cukup"/></td> <td align="center"><input name="fasilitas" type="radio" value="baik"/></td> <td align="center"><input name="fasilitas" type="radio" value="sangat baik"/></td></tr> <tr><td>Kenyamanan</td> <td align="center"><input name="nyaman" type="radio" value="sangat kurang"/></td> <td align="center"><input name="nyaman" type="radio" value="kurang"/></td> <td align="center"><input name="nyaman" type="radio" value="cukup"/></td> <td align="center"><input name="nyaman" type="radio" value="baik"/></td> <td align="center"><input name="nyaman" type="radio" value="sangat baik"/></td></tr> <tr><td>Keamanan</td> <td align="center"><input name="aman" type="radio" value="sangat kurang"/></td> <td align="center"><input name="aman" type="radio" value="kurang"/></td> <td align="center"><input name="aman" type="radio" value="cukup"/></td> <td align="center"><input name="aman" type="radio" value="baik"/></td> <td align="center"><input name="aman" type="radio" value="sangat baik"/></td></tr> <tr><td><b>Fasilitas Hotel</b></td></tr> <tr><td>Restoran</td> <td align="center"><input name="restoran" type="radio" value="sangat kurang"/></td> <td align="center"><input name="restoran" type="radio" value="kurang"/></td> <td align="center"><input name="restoran" type="radio" value="cukup"/></td> <td align="center"><input name="restoran" type="radio" value="baik"/></td> <td align="center"><input name="restoran" type="radio" value="sangat baik"/></td></tr> <tr><td>Kolam Renang</td> <td align="center"><input name="pool" type="radio" value="sangat kurang"/></td> <td align="center"><input name="pool" type="radio" value="kurang"/></td> <td align="center"><input name="pool" type="radio" value="cukup"/></td> <td align="center"><input name="pool" type="radio" value="baik"/></td> <td align="center"><input name="pool" type="radio" value="sangat baik"/></td></tr> <tr><td>Fitness</td> <td align="center"><input name="fitness" type="radio" value="sangat kurang"/></td> <td align="center"><input name="fitness" type="radio" value="kurang"/></td> <td align="center"><input name="fitness" type="radio" value="cukup"/></td> <td align="center"><input name="fitness" type="radio" value="baik"/></td> <td align="center"><input name="fitness" type="radio" value="sangat baik"/></td></tr> <tr><td>Ballroom/Meetingroom</td> <td align="center"><input name="hall" type="radio" value="sangat kurang"/></td> <td align="center"><input name="hall" type="radio" value="kurang"/></td> <td align="center"><input name="hall" type="radio" value="cukup"/></td> <td align="center"><input name="hall" type="radio" value="baik"/></td> <td align="center"><input name="hall" type="radio" value="sangat baik"/></td></tr> <tr><td>Jaringan Internet</td> <td align="center"><input name="wifi" type="radio" value="sangat kurang"/></td> <td align="center"><input name="wifi" type="radio" value="kurang"/></td> <td align="center"><input name="wifi" type="radio" value="cukup"/></td> <td align="center"><input name="wifi" type="radio" value="baik"/></td> <td align="center"><input name="wifi" type="radio" value="sangat baik"/></td></tr> </table> <table width="100%"> <tr><td><b>Secara Keseluruhan Apakah Anda Puas dengan Hotel Kami? </b></td></tr> <tr><td><input name="end" type="radio" value="puas"/>Saya sangat puas dengan hotel ini</td></tr> <tr><td><input name="end" type="radio" value="tidak puas"/>Saya tidak puas dengan hotel ini</td></tr> <tr><td><label for="Message"><b>Komentar lain yang ingin anda sampaikan</b></label><br /> <textarea cols="38" name="Message" rows="5" style="height: 100 px;" wrap="hard">(/textarea)</td></tr> <tr><td><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="DAFTAR" /> </td></tr> </table> </form>

3. Silakan anda ganti tulisan dalam form tersebut sesuai dengan kata-kata anda dan karena kode HTML diatas diletakkan dalam textarea maka tag <textarea> tidak berfungsi jadi jangan lupa mengganti (/textarea) dengan </textarea>

4. Save Theme dan lihat hasilnya

Form Hotel yang telah anda buat bisa anda ganti menjadi form penilaian sesuai keinginan anda dengan mengganti kata-kata yang ada. Form ini membantu pembaca/pengguna dalam menilai bisnis anda. Seperti form-form sebelumnya, form ini juga dilengkapi dengan alert sehingga jika ada bagian yang dikosongi maka akan muncul peringatan. Pada kesempatan yang akan datang saya akan membagikan informasi mengenai cara membuat form penilaian karyawan. Terima Kasih : )