Apr 16, 2010

Borang Online Dalam Pos Blog

Panduan cipta borang online guna freedback.



Nama:
Jantina:
Laki-laki
Perempuan
No. Telefon:
Alamat Email:
Alamat kediaman?
Pekerjaan anda?
Swasta
Bekerja Sendiri
Kerajaan
Lain-lain

Jumlah Deposit (RM):


Model:

Model 1
Model 2
Model 3
Model 4
Model 5

Pilihan corak dan warna:


Cara bayaran:

Cara bayaran 1
Cara bayaran 2
Cara bayaran 3


Bagi bayaran tunai deposit hendaklah dimasukkan ke dalam Bank (nama bank) atas nama fulan binti fulan no akaun 12345678...



This form powered by Freedback


Laman masuk freedback di http://www.freedback.com/.


Daftar buka akaun dulu:


Semak peti masuk email untuk sahkan alamat email dulu:


Selepas pengesahan email, kali pertama log masuk kedalam FreedBack taip masukkan nama dan alamat email kemudian klik Save and Continue to Step 1:


Untuk cipta atau untuk betulkan borang yang ada borang online klik Edit:


Step 1 - Edit Form

Untuk mencipta satu soalan dalam borang dengan Klik Add a Question:


Lepas klik Add a Question tetingkap Choose a Question Type akan dibuka untuk mencipta soalan dalam borang dengan format jawapan yang bersesuaian.  Format jawapan bergantung kepada jenis soalan yang akan ditanya dalam borang.  Ada tujuh format jawapan yang disediakan dalam ruangan Click to Select.  Setiap satu contoh diterangkan di bawah.   Format jawapan:

  • Short Answer
  • Long Answer
  • Radio Buttons
  • Drop Down Box
  • Checkboxes
  • Text Block


Format jawapan Short Answer

Sesuai untuk menjawap soalan  pendek dalam borang misalnya soalan Nama, soalan Alamat Email, soalan No Kad Pengenalan atau lain-lain.  Contoh untuk cipta soalan Nama klik Short Answer, tetingkap Short Answer akan dibuka, taip soalan dalam kotak Enter your question, tanda kotak Required bermaksud jawapan mesti diisi tidak boleh ditinggalkan kosong. Lepas itu klik SAVE:


Contoh yang akan keluar dalam borang:


Nota:

Tools yang di sebelah kiri tetingkap borang - Edit untuk betulkan kesilapan soalan dan jawapan. Delete untuk hapus soalan.  Move Up untuk pindahkan soalan ke bahagian atas. Move Down untuk pindahkan soalan ke bahagian bawah:


Format Jawapan Long Answer

Sesuai untuk jawapan yang panjang melebihi satu baris jawapan.  Contohnya soalan misalnya Alamat Kediaman. Klik Long Answer tetingkap Long Answer akan dibuka. Taip soalan dalam ruangan Enter your Question.  Tandakan kotak Required bermakna ruang jawapan mesti diisi tidak boleh ditinggalakan kosong.  Kemudian klik Save:


Contoh yang keluar dalam borang:


Format Jawapan Radio Buttons

1.6.1  Format untuk menjawab soalan yang jawapanya sudah sudah disedikan.  Pengunjung akan memilih satu daripada beberapa jawapan yang disediakan. Radio Buttons hanya membenarkan pengunjung memilih satu sahaja jawapan. Contoh mudah sediakan jawapan untuk soalan Model. Klik format jawapan Radio buttons tetingkap Radio Buttons akan dibuka.  Taip soalan dalam ruangan Enter your question. Kemudian taip jawapan bagi setiap button dalam ruangan List of radio buttons satu jawapan satu baris, dan klik Save:


Contoh yang akan keluar dalam borang:


Format Jawapan Drop Down Box

Jawapan mesti disediakan untuk dipilih oleh pengisi dalam format drop down.  Klik format Drop Down Box, tetingkap Drop Down Box akan dibukaTaip soalan dalam ruangan yang disediakan.  Jawapannya taip dalam ruangan List of drop down box answers satu baris satu jawapan seperti berikut. Kemudian jangan lupa klik Save:


Contoh yang akan keluar dalam borang:


Format Jawapan Checkboxes

Beberapa jawapan disediakan dulu untuk dipilih oleh pengisi borang.  Klik format Checkboxes tetingkap soalan Checkboxes akan dibuka.  Taip soalan dalam ruangan yang disediakan misalnya soalan Cara Bayaran.  Taip jawapannya dalam ruangan List of checkboxes satu jawapan satu baris seperti berikut.  Jangan lupa klik Save:


Contoh yang akan keluar dalam borang:


Format Text Block

Taip teks kenyataan atau apa-apa penerangan dalam Text Block ini. Klik format Text Block tetingkap Text Block akan dibuka.  Taip apa-apa teks kenyataan yang berkenaan dengan borang. Jangan lupa klik Save:


Tulisan dalam Text Block yang dicipta akan ditunjukkan seperti berikut:


Setelah selesai mencipta borang dalam Step 1- Edit Forms di atas, semak borang yang telah disediakan, Edit untuk betulkan sebarang kesilapan.  Kemudian klik Save and Continue to Step 2:


Step 2 - Form Options

Dalam ruangan What should people see after they submit your form? tandakan kotak Send them back to your website, taip alamat URL blog dalam ruangan Your Website tanpa http:///


Dalam tetingkap email taip masukkan alamat email dan tajuk email dalam ruangan yang disediakan.  Tandakan kotak Receive a copy of each form submission by email:


Kemudian klik Save and Continue to Step 3:


Step 3 - Get HTML

Highlight dan salin kod skrip yang disediakan dan paste masukkan dalam pos blog (lihat contoh borang di atas):


Contoh kod skrip bagi contoh borang di atas. Untuk pengetahuan tiap-tiap satu soalan berserta dengan pilihan jawapan dalam kod skrip bermula dengan <tr> dan diakhirnya ditutup dengan tag </tr>. Setiap satu warna mewakili satu soalan beserta pilihan jawapan dalam borang:

<form accept-charset="UTF-8" action="http://www.freedback.com/mail.php" enctype="multipart/form-data" method="post"><div><input id="acctid" name="acctid" type="hidden" value="0u4bmc11vfccamdd" /><input id="formid" name="formid" type="hidden" value="753161" /><input id="required_vars" name="required_vars" type="hidden" value="field-b3688752eca885a,field-74c210c308bd925,field-5b916dfecf77684" /></div>

<table border="0" cellpadding="5" cellspacing="5"><tbody>

<tr> <td valign="top">
<b>Nama:</b></td> <td valign="top">
<input id="field-cd87a52d150b525" name="field-cd87a52d150b525" size="40" type="text" value="" /></td> </tr>


<tr> <td valign="top">
<b>Jantina:</b></td> <td valign="top">
<input id="field-bcda3b05662ed60_0" name="field-bcda3b05662ed60[]" type="checkbox" value="Laki-laki" /> Laki-laki
<input id="field-bcda3b05662ed60_1" name="field-bcda3b05662ed60[]" type="checkbox" value="Perempuan" /> Perempuan</td> </tr>


<tr> <td valign="top">
<b>No. Telefon:</b></td> <td valign="top">
<input id="field-b3688752eca885a" name="field-b3688752eca885a" size="40" type="text" value="" /></td> </tr>


<tr> <td valign="top">
<b>Alamat Email:</b></td> <td valign="top">
<input id="field-74c210c308bd925" name="field-74c210c308bd925" size="40" type="text" value="" /></td> </tr>


<tr> <td valign="top">
<b>Alamat kediaman?</b></td> <td valign="top">
<textarea cols="40" id="field-4ccbeefa8961a18" name="field-4ccbeefa8961a18" rows="6"></textarea></td> </tr>


<tr> <td valign="top">
<b>Pekerjaan anda?</b></td> <td valign="top"><div style="text-align: left;">
</div>
<input id="field-5b916dfecf77684_0" name="field-5b916dfecf77684[]" type="checkbox" value="Swasta" /> Swasta
<input id="field-5b916dfecf77684_1" name="field-5b916dfecf77684[]" type="checkbox" value="Bekerja Sendiri" /> Bekerja Sendiri
<input id="field-5b916dfecf77684_2" name="field-5b916dfecf77684[]" type="checkbox" value="Kerajaan" /> Kerajaan
<input id="field-5b916dfecf77684_3" name="field-5b916dfecf77684[]" type="checkbox" value="Lain-lain" /> Lain-lain</td> </tr>


<tr> <td valign="top">
<b>Jumlah Deposit (RM):</b></td> <td valign="top">
<input id="field-4515c220dfba8a6" name="field-4515c220dfba8a6" size="40" type="text" value="" /></td> </tr>


<tr> <td valign="top">
<b>Model:</b></td> <td valign="top">
<input id="field-d603c97abc76e78_0" name="field-d603c97abc76e78" type="radio" value="Model 1" /> Model 1
<input id="field-d603c97abc76e78_1" name="field-d603c97abc76e78" type="radio" value="Model 2" /> Model 2
<input id="field-d603c97abc76e78_2" name="field-d603c97abc76e78" type="radio" value="Model 3" /> Model 3
<input id="field-d603c97abc76e78_3" name="field-d603c97abc76e78" type="radio" value="Model 4" /> Model 4
<input id="field-d603c97abc76e78_4" name="field-d603c97abc76e78" type="radio" value="Model 5" /> Model 5</td> </tr>


<tr> <td valign="top">
<b>Pilihan corak dan warna:</b></td> <td valign="top">
<select id="field-2920d2950cfe6b5" name="field-2920d2950cfe6b5"> <option value="corak warna 1">corak warna 1</option>
<option value="corak warna 2">corak warna 2</option>
<option value="corak warna 3">corak warna 3</option> </select></td> </tr>


<tr> <td valign="top">
<b>Cara bayaran:</b></td> <td valign="top">
<input id="field-bd6c7aa348cdfbb_0" name="field-bd6c7aa348cdfbb[]" type="checkbox" value="Cara bayaran 1" /> Cara bayaran 1
<input id="field-bd6c7aa348cdfbb_1" name="field-bd6c7aa348cdfbb[]" type="checkbox" value="Cara bayaran 2" /> Cara bayaran 2
<input id="field-bd6c7aa348cdfbb_2" name="field-bd6c7aa348cdfbb[]" type="checkbox" value="Cara bayaran 3" /> Cara bayaran 3</td> </tr>


<tr> <td colspan="2" valign="top">
<b></b>
<b>Bagi bayaran tunai deposit hendaklah dimasukkan ke dalam Bank (nama bank) atas nama fulan binti fulan no akaun 12345678...</b>
<b></b></td> </tr>


<tr> <td align="center" colspan="2">
<input type="submit" value=" Serah borang " /></td> </tr>


</tbody></table>
</form>

<center><span style="font-family: Arial,Helvetica; font-size: xx-small;"><b>
This form powered by <a href="http://www.freedback.com/">Freedback</a>
</b></span></center>



This form powered by Freedback

Paste masukkan kod skrip kedalam pos blog, pilih mode Edit HTML:


Sekiranya terdapat jarak atau renggang antara satu pilihan jawapan dengan yang lain, pembetulan perlu dibuat dalam kod skrip yang diberi. Contohnya katalah dalam soalan "Model" Jarak atau renggang antara pilihan jawapan yang dimaksudkan adalah seperti pilihan model berikut:



Model:
Model 1

Model 2

Model 3

Model 4

Model 5

Ruang jarak yang berlaku adalah disebabkan baris kosong antara tag <input> di atas dengan tag <input> di bawah dalam kod skrip yang diberi seperti berikut:


<tr><td valign="top"><b>Model:</b></td><td valign="top">

<input id="field-d603c97abc76e78_0" name="field-d603c97abc76e78" type="radio" value="Model 1" /> Model 1

<input id="field-d603c97abc76e78_1" name="field-d603c97abc76e78" type="radio" value="Model 2" /> Model 2

<input id="field-d603c97abc76e78_2" name="field-d603c97abc76e78" type="radio" value="Model 3" /> Model 3

<input id="field-d603c97abc76e78_3" name="field-d603c97abc76e78" type="radio" value="Model 4" /> Model 4

<input id="field-d603c97abc76e78_4" name="field-d603c97abc76e78" type="radio" value="Model 5" /> Model 5

Untuk mengatasinya hanya hapus buang baris kosong antara <input> dengan <input> di bawah untuk dirapatkan (jangan disambung dihujungnya, hanya hapuskan baris yang kosong sahaja) seperti berikut:

Ruang jarak yang berlaku adalah disebabkan baris kosong antara tag <input> di atas dengan tag <input> di bawah dalam kod skrip yang diberi seperti berikut:


<tr><td valign="top"><b>Model:</b></td><td valign="top">
<input id="field-d603c97abc76e78_0" name="field-d603c97abc76e78" type="radio" value="Model 1" /> Model 1
<input id="field-d603c97abc76e78_1" name="field-d603c97abc76e78" type="radio" value="Model 2" /> Model 2
<input id="field-d603c97abc76e78_2" name="field-d603c97abc76e78" type="radio" value="Model 3" /> Model 3
<input id="field-d603c97abc76e78_3" name="field-d603c97abc76e78" type="radio" value="Model 4" /> Model 4
<input id="field-d603c97abc76e78_4" name="field-d603c97abc76e78" type="radio" value="Model 5" /> Model 5



Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

10 comments:

Abang Isaifuddin Abang Noran said... [Balas komen ini]

maklumat yang berguna.. tahniah!

pensel kontot said... [Balas komen ini]

wah sgt2 berguna

Shida said... [Balas komen ini]

TQ, info amat berguna. Untuk letak no. ac bank adakah kena daftar. cth MBB

nur zaqyah said... [Balas komen ini]

tq..sangat berguna.macam mana nak post entry dalam dwibahasa?saya berniaga.jadi saya nak post dalam BM n BI sekaligus.ada cara ke?

Admin said... [Balas komen ini]

dwi bahasa kena buat 2 kali kerja dalam satu pos. Kalau guna google punya translation pun kena copy dulu kemudian paste kat dalam pos.

Deeya said... [Balas komen ini]

salam...boleh bantu saya bagaimana utk mengedit sellect box, yang mempunyai lebih daripada satu line..cthnya: sy nk letak,
tarikh:
bulan:
tahun:

harap dapat respon ye...tq

Syukhairey said... [Balas komen ini]

saya guna AUTO READ MORE pada blog saya. bila saya letak borang pada page baru...borang tu tak keluar. tahu tak cara nak selesaikan masalah ni. TQ

Calipso said... [Balas komen ini]

@Shukairi Harun

agaknya browser tak boleh execute javascript tu kalau sekali dengan read more. Cuba letak kod borang tu sebelum jump break read more ni...

Anonymous said... [Balas komen ini]

Utk create borang di freedback ni free ke ??
Nanti kita akan dicaj apa2 x???

please answer it =)

Calipso said... [Balas komen ini]

@Anonymous

ada versi free ada versi yang berbayar, yg free ada limit guna dia.

Jangan guna freedback ni susah, guna lagi satu kontactr.com yg free punya mudah dan fleksible lagi:

http://calipso-tutorialblogger.blogspot.com/2010/04/borang-contact-me-dari-kontactr.html.

Post a Comment