Cara Mudah Membuat Form Pendaftaran di Blog

loading...

Selamat datang di The Royal Moringa. Pada postingan kali ini, saya akan membahas mengenai bagaimana cara membuat form pendaftaran online di blog/website anda. Form pendaftaran ini dapat digunakan bagi anda yang membuka kesempatan bagi pembaca untuk menjadi member blog atau anda punya acara tertentu yang mengharuskan peserta mendaftar secara online. Form pendaftaran juga dapat digunakan bagi pelamar kerja yang ingin melamar pekerjaan di suatu perusahaan atau murid yang ingin mendaftar di perguruan tinggi. Formnya biasa dikenal dengan application form. Pada pertemuan kali ini, kita akan belajar membuat form yang dilengkapi dengan option/pilihan pada kategori tertentu. Nah, bagi anda yang masih bingung bagaimana cara membuatnya, mari kita simak langkah-langkah berikut ini.

Form Pendaftaran

Data Pribadi

Nama Depan

Nama Belakang

Jenis Kelamin  Pria  Wanita

Tempat Lahir

Tanggal Lahir Pilih 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - Pilih Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember -

Kewarganegaraan

Pendidikan Terakhir   SD/SEDERAJAT SMP/SEDERAJAT SMA/SEDERAJAT DIPLOMA S1 S2 S3

Data Pekerjaan

Pekerjaan

Alamat Perusahaan

Nomor Telepon Perusahaan

Penghasilan Bulanan  < Rp 1.000.000 Rp 1.000.000 - Rp 2.499.999 Rp 2.500.000 - Rp 4.999.999 Rp 5.000.000 - Rp 10.000.000 > Rp 10.000.000

Kontak

Nomor Telepon Rumah

Nomor Ponsel

Alamat Domisili

Alamat Email

Pesan

1. Log in ke akun blog anda > Pada dashboard pilih Posts > New Post

2. Silakan ketik terlebih dahulu kata pengantar atau informasi yang ingin anda sampaikan sebelum pembaca mendaftar atau jika tidak ada, silakan simak langkah nomor 3

3. Copy dan paste kode HTML berikut pada menu HTML yang berada disebelah kanan tulisan 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.Birthplace.value == "") { alert('Mohon isi tempat lahir anda.'); frm.Birthplace.focus(); return false; } if (frm.Birthdate.value == "Pilih") { alert('Mohon isi tanggal lahir anda.'); frm.Birthdate.focus(); return false; } if (frm.Birthdate2.value == "Pilih") { alert('Mohon isi bulan lahir anda.'); frm.Birthdate2.focus(); return false; } if (frm.Birthdate3.value == "") { alert('Mohon isi tahun lahir anda.'); frm.Birthdate3.focus(); return false; } if (frm.Nationality.value == "") { alert('Mohon isi kewarganegaraan anda.'); frm.Nationality.focus(); return false; } if (frm.Job.value == "") { alert('Mohon isi pekerjaan anda.'); frm.Job.focus(); return false; } if (frm.JobAddress.value == "") { alert('Mohon isi alamat perusahaan tempat anda bekerja.'); frm.JobAddress.focus(); return false; } if (frm.JobPhone.value == "") { alert('Mohon isi nomor telepon perusahaan tempat anda bekerja.'); frm.JobPhone.focus(); return false; } if (frm.Salary.value == "") { alert('Mohon isi penghasilan anda.'); frm.Salary.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 rumah anda.'); frm.Phone.focus(); return false; } if (frm.Mobile.value == "") { alert('Mohon isi nomor ponsel anda.'); frm.Mobile.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> <div style="text-align: center;"> <span style="font-size: x-large;">Form Pendaftaran</span></div> <br /> <table width="100%;" align="center"> <tbody> <tr><td><u><span style="font-size: large;">Data Pribadi</span></u></td></tr> <tr><td><label for="Name">Nama Depan</label>       <br /> <input maxlength="50" name="Name" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="LastName">Nama Belakang</label>   <br /> <input maxlength="50" name="LastName" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Gender">Jenis Kelamin</label>  <br /> <input checked="checked" name="Gender" type="radio" value="Pria" /> Pria  <input name="Gender" type="radio" value="Wanita" /> Wanita</td></tr> <tr><td><label for="Birthplace">Tempat Lahir</label>     <br /> <input maxlength="50" name="Birthplace" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Birthdate">Tanggal Lahir</label><br /> <select name="Birthdate"><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="Birthdate2"></label>- <select name="Birthdate2"><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 max="2017" maxlength="50" min="1950" name="Birthdate3" style="width: 90px;" type="number" /></td></tr> <tr><td><label for="Nationality">Kewarganegaraan</label>   <br /> <input maxlength="50" name="Nationality" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Education">Pendidikan Terakhir</label>   <br /> <input checked="checked" name="Salary" type="radio" value="SD/SEDERAJAT" /> SD/SEDERAJAT<br /> <input name="Salary" type="radio" value="SMP/SEDERAJAT" /> SMP/SEDERAJAT<br /> <input name="Salary" type="radio" value="SMA/SEDERAJAT" /> SMA/SEDERAJAT<br /> <input name="Salary" type="radio" value="DIPLOMA" /> DIPLOMA<br /> <input name="Salary" type="radio" value="S1" /> S1<br /> <input name="Salary" type="radio" value="S2" /> S2<br /> <input name="Salary" type="radio" value="S3" /> S3 </td></tr> <tr><td><u><span style="font-size: large;">Data Pekerjaan</span></u></td></tr> <tr><td><label for="Job">Pekerjaan</label>   <br /> <input maxlength="50" name="Job" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="JobAddress">Alamat Perusahaan</label>   <br /> <input maxlength="50" name="JobAddress" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="JobPhone">Nomor Telepon Perusahaan</label>   <br /> <input maxlength="50" name="JobPhone" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Salary">Penghasilan Bulanan</label>  <br /> <input checked="checked" name="Salary" type="radio" value="< Rp 1.000.000" /> < Rp 1.000.000<br /> <input name="Salary" type="radio" value="Rp 1.000.000 - Rp 2.499.999" /> Rp 1.000.000 - Rp 2.499.999<br /> <input name="Salary" type="radio" value="Rp 2.500.000 - Rp 4.999.999" /> Rp 2.500.000 - Rp 4.999.999<br /> <input name="Salary" type="radio" value="Rp 5.000.000 - Rp 9.999.999" /> Rp 5.000.000 - Rp 10.000.000<br /> <input name="Salary" type="radio" value="> Rp 10.000.000" /> > Rp 10.000.000 </td></tr> <tr><td><u><span style="font-size: large;">Kontak</span></u></td></tr> <tr><td><label for="Phone">Nomor Telepon Rumah</label>   <br /> <input maxlength="50" name="Phone" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Mobile">Nomor Ponsel</label>   <br /> <input maxlength="50" name="Mobile" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Address">Alamat Domisili</label>   <br /> <input maxlength="50" name="Address" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="FromEmailAddress">Alamat Email</label>     <br /> <input maxlength="50" name="FromEmailAddress" style="width: 290px;" type="text" /></td></tr> <tr><td><label for="Message">Pesan</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> </tbody></table> </form>

4. Silakan edit form pendaftaran tersebut sesuai dengan kebutuhan anda. Oleh karena kode HTML diatas ditulis menggunakan widget text area, maka silakan anda ganti tulisan (/textarea) dengan </textarea>. Tulisan tersebut dapat anda temukan pada baris ke-9 dari bawah.

5. Jangan lupa mengganti XXXX@XXXX.com dengan alamat email anda

6. Save Template

Nah, mudah sekali kan dalam membuat form pendaftaran. Form Pendaftaran yang anda buat telah dilengkapi dengan alert/peringatan dimana ketika ada area yang dikosongi maka akan keluar peringatan untuk pengisi form tersebut. Form pendaftaran kali ini adalah form pendaftaran secara umum. Untuk form pendaftaran spesifik seperti form melamar pekerjaan atau masuk ke perguruan tinggi akan saya buat artikelnya pada kesempatan yang akan datang. Semoga artikel kali ini dapat bermanfaat bagi anda. Terima kasih.

loading...