ການສ້າງພາກສ່ວນແບບຟອມດ້ວຍ HTML Blocks

ແບບຟອມຍາວໆເຮັດໃຫ້ຜູ້ໃຊ້ຮູ້ສຶກລຳຄານ. ກຳແພງຂອງ 20 ພາກສະໜາມຮູ້ສຶກວ່າບໍ່ມີທີ່ສິ້ນສຸດ. ແຕ່ແບ່ງແບບຟອມດຽວກັນນັ້ນອອກເປັນສ່ວນທີ່ມີເຫດຜົນ - ຂໍ້ມູນສ່ວນຕົວ, ລາຍລະອຽດການຕິດຕໍ່, ຄວາມມັກ - ແລະທັນທີທັນໃດມັນກໍ່ສາມາດຈັດການໄດ້. ບລັອກ HTML ຊ່ວຍໃຫ້ທ່ານສາມາດເພີ່ມຫົວຂໍ້, ຕົວແບ່ງ, ແລະຕົວແບ່ງຮູບພາບທີ່ປ່ຽນແບບຟອມທີ່ໜ້າຢ້ານກົວໃຫ້ກາຍເປັນປະສົບການທີ່ມີການແນະນຳ.

ເປັນຫຍັງຕ້ອງແບ່ງແບບຟອມຂອງທ່ານ?

ຜົນປະໂຫຍດຂອງຜູ້ໃຊ້

• ຫຼຸດຜ່ອນການຊຶມເສົ້າ: ຊິ້ນນ້ອຍໆຮູ້ສຶກວ່າງ່າຍກວ່າ
• ຄວາມຄືບໜ້າທີ່ຊັດເຈນ: ຜູ້ໃຊ້ຮູ້ວ່າພວກເຂົາຢູ່ໃສ
• ການຈັດກຸ່ມຕາມເຫດຜົນ: ຂົງເຂດທີ່ກ່ຽວຂ້ອງຮ່ວມກັນ
• ຄວາມ​ເຂົ້າ​ໃຈ​ທີ່​ດີກ​ວ່າ​: ສະພາບການສຳລັບແຕ່ລະພາກສ່ວນ
• ການພັກຜ່ອນທາງຈິດໃຈ: ການຢຸດຊົ່ວຄາວທາງສາຍຕາລະຫວ່າງກຸ່ມຕ່າງໆ

ຜົນປະໂຫຍດທາງທຸລະກິດ

• ອັດຕາການສຳເລັດທີ່ສູງຂຶ້ນ: ການປະຖິ້ມໜ້ອຍລົງ
• ຂໍ້ມູນທີ່ດີກວ່າ: ຜູ້ໃຊ້ເອົາໃຈໃສ່ກັບຊ່ອງຂໍ້ມູນທີ່ຈັດກຸ່ມໄວ້
• ຮູບ​ລັກ​ສະ​ນະ​ເປັນ​ມື​ອາ​ຊີບ​: ມີລະບຽບ, ບໍ່ວຸ້ນວາຍ
• ການບຳລຸງຮັກສາທີ່ງ່າຍຂຶ້ນ: ພາກສ່ວນຕ່າງໆງ່າຍຕໍ່ການແກ້ໄຂ

ເວລາທີ່ຈະໃຊ້ພາກສ່ວນຕ່າງໆ

• ແບບຟອມທີ່ມີຫຼາຍກວ່າ 8 ຊ່ອງຂໍ້ມູນ
• ປະເພດພາກສະໜາມປະສົມ (ສ່ວນຕົວ, ທຸລະກິດ, ຄວາມມັກ)
• ຮູບແບບຫຼາຍຫົວຂໍ້
• ແບບຟອມລົງທະບຽນ ແລະ ແບບຟອມສະໝັກ
• ການສຳຫຼວດທີ່ມີຫຼາຍໝວດໝູ່

ອົງປະກອບຂອງພາກສ່ວນທີ່ທ່ານສາມາດສ້າງໄດ້

1. ຫົວຂໍ້ພາກ

ຂໍ້ມູນສ່ວນຕົວ

ລ້າງຫົວຂໍ້ສຳລັບແຕ່ລະພາກສ່ວນ.

2. ລາຍລະອຽດຂອງພາກ

ກະລຸນາໃຫ້ລາຍລະອຽດການຕິດຕໍ່ຂອງທ່ານຂ້າງລຸ່ມນີ້.

ສະພາບການສັ້ນໆ ຫຼື ຄຳແນະນຳ.

3. ຕົວແບ່ງອອກຕາມແນວນອນ

ເສັ້ນທີ່ເບິ່ງເຫັນລະຫວ່າງພາກສ່ວນຕ່າງໆ.

4. ຫົວຂໍ້ພາກສ່ວນທີ່ມີຮູບແບບ

 ຊື່ພາກສ່ວນ

ເຄື່ອງໝາຍພາກສ່ວນທີ່ໜ້າດຶງດູດສາຍຕາ.

5. ຂັ້ນຕອນທີ່ມີຕົວເລກ

1 ຂໍ້ມູນພື້ນຖານ

ຕົວຊີ້ວັດຂັ້ນຕອນສຳລັບແບບຟອມຫຼາຍສ່ວນ.

ການສ້າງຫົວຂໍ້ພາກສ່ວນ

ຫົວຂໍ້ພື້ນຖານ

ຂໍ້ມູນຕິດຕໍ່

ຫົວຂໍ້ພ້ອມຄຳອະທິບາຍ

ຂໍ້ມູນຕິດຕໍ່ ພວກເຮົາຈະຕິດຕໍ່ຫາທ່ານໄດ້ແນວໃດ?

ຫົວຂໍ້ທີ່ມີຮູບແບບ

 ຂໍ້ມູນຕິດຕໍ່

ໄອຄອນ + ຫົວຂໍ້

📧 ຂໍ້ມູນຕິດຕໍ່

ຫຼືດ້ວຍຮູບແບບໄອຄອນທີ່ກຳນົດເອງ.

ການສ້າງຕົວແບ່ງ

ເສັ້ນງ່າຍດາຍ

ກະດານແບ່ງແບບມີຮູບແບບ

ຕົວແບ່ງໜາກວ່າ

ຕົວແບ່ງຈຸດ

ຕົວແຍກ (ບໍ່ມີເສັ້ນ)

ການແຕກຫັກທາງສາຍຕາໂດຍບໍ່ມີເສັ້ນທີ່ເຫັນໄດ້.

ແມ່ແບບພາກສ່ວນທີ່ສົມບູນ

ແມ່ແບບທີ 1: ພາກສ່ວນງ່າຍໆ

ຂໍ້ມູນສ່ວນຕົວ

ຈາກນັ້ນຕື່ມ: ຊື່, ອີເມວ, ເບີໂທລະສັບ

ແມ່ແບບທີ 2: ພາກສ່ວນທີ່ມີຄຳອະທິບາຍ

ທີ່ຢູ່ຈັດສົ່ງ ພວກເຮົາຄວນຈັດສົ່ງສິນຄ້າຂອງທ່ານຢູ່ໃສ?

ຈາກນັ້ນຕື່ມ: ຊ່ອງທີ່ຢູ່

ແມ່ແບບທີ 3: ຫົວຂໍ້ພາກສ່ວນທີ່ມີກ່ອງ

 🏢 ຂໍ້ມູນບໍລິສັດ ບອກພວກເຮົາກ່ຽວກັບທຸລະກິດຂອງທ່ານ

ແມ່ແບບທີ 4: ຕົວຊີ້ບອກຂັ້ນຕອນ

 2 ລາຍລະອຽດໂຄງການ ບອກພວກເຮົາກ່ຽວກັບໂຄງການຂອງທ່ານ

ແມ່ແບບທີ 5: ຕົວແບ່ງທີ່ມີຂໍ້ຄວາມ

 ຂໍ້ມູນເພີ່ມເຕີມ

ຕົວຢ່າງການຈັດລະບຽບແບບຟອມ

ຕົວຢ່າງທີ 1: ແບບຟອມຕິດຕໍ່

[HTML: ຫົວຂໍ້ "ຂໍ້ມູນຕິດຕໍ່"] - ຊ່ອງຊື່ - ຊ່ອງອີເມວ - ຊ່ອງເບີໂທລະສັບ [HTML: ຕົວແບ່ງ] [HTML: ຫົວຂໍ້ "ຂໍ້ຄວາມຂອງທ່ານ"] - ເມນູເລື່ອນລົງ - ພື້ນທີ່ຂໍ້ຄວາມ [ປຸ່ມສົ່ງ]

ຕົວຢ່າງທີ 2: ໃບສະໝັກວຽກ

[HTML: ຂັ້ນຕອນທີ 1 - "ຂໍ້ມູນສ່ວນຕົວ"] - ຊື່ເຕັມ - ອີເມວ - ເບີໂທລະສັບ [HTML: ຂັ້ນຕອນທີ 2 - "ພື້ນຖານວິຊາຊີບ"] - ຕຳແໜ່ງປັດຈຸບັນ - ປະສົບການຫຼາຍປີ - URL LinkedIn [HTML: ຂັ້ນຕອນທີ 3 - "ໃບສະໝັກ"] - ຕຳແໜ່ງທີ່ສະໝັກ - ອັບໂຫຼດຊີວະປະຫວັດ - ຈົດໝາຍສະໝັກງານ [ປຸ່ມສົ່ງ]

ຕົວຢ່າງທີ 3: ການລົງທະບຽນກິດຈະກຳ

[HTML: ຫົວຂໍ້ກ່ອງ "ຂໍ້ມູນຜູ້ເຂົ້າຮ່ວມ"] - ຊື່ - ອີເມວ - ບໍລິສັດ [HTML: Divider] [HTML: ຫົວຂໍ້ກ່ອງ "ຄວາມມັກຂອງກິດຈະກຳ"] - ກອງປະຊຸມ (ກ່ອງໝາຍຕິກ) - ຂໍ້ກຳນົດດ້ານອາຫານ - ຂະໜາດເສື້ອຍືດ [HTML: Divider] [HTML: ຫົວຂໍ້ກ່ອງ "ການຈ່າຍເງິນ"] - ປະເພດປີ້ - ລະຫັດໂປຣໂມຊັນ [ປຸ່ມສົ່ງ]

ຕົວຢ່າງທີ 4: ແບບຟອມສຳຫຼວດ

[HTML: ພາກ "ກ່ຽວກັບທ່ານ"] - ຊ່ວງອາຍຸ - ອຸດສາຫະກຳ - ບົດບາດ [HTML: ຕົວແບ່ງທີ່ມີຂໍ້ຄວາມ "ປະສົບການຂອງທ່ານ"] - ທ່ານພໍໃຈສໍ່າໃດ? - ມີຫຍັງທີ່ຄວນປັບປຸງ? - ທ່ານຢາກແນະນຳບໍ? [HTML: ຕົວແບ່ງທີ່ມີຂໍ້ຄວາມ "ຄຳຕິຊົມເພີ່ມເຕີມ"] - ມີຄຳເຫັນອື່ນໆບໍ? - ອີເມວ (ຕິດຕາມເພີ່ມເຕີມ) [ປຸ່ມສົ່ງ]

ຕົວຢ່າງທີ 5: ຄວາມຮູ້ສຶກຫຼາຍໜ້າ (ໜ້າດຽວ)

[HTML: ຕົວຊີ້ບອກຄວາມຄືບໜ້າ 1-2-3] [HTML: "ຂັ້ນຕອນທີ 1: ຂໍ້ມູນພື້ນຖານ" ພ້ອມປ້າຍຕົວເລກ] - ຊື່ - ອີເມວ [HTML: "ຂັ້ນຕອນທີ 2: ລາຍລະອຽດ" ພ້ອມປ້າຍຕົວເລກ] - ບໍລິສັດ - ງົບປະມານ - ເສັ້ນເວລາ [HTML: "ຂັ້ນຕອນທີ 3: ຂໍ້ຄວາມ" ພ້ອມປ້າຍຕົວເລກ] - ຄວາມຕ້ອງການຂອງທ່ານ [ປຸ່ມສົ່ງ]

ຄຳ ແນະ ນຳ ແບບສະໄຕ

ຊ່ອງຫວ່າງທີ່ສອດຄ່ອງ

ໃຊ້ຂອບທີ່ສອດຄ່ອງກັນສຳລັບທຸກພາກສ່ວນ:

ຂອບ: 25px 0 15px 0; /* ກ່ອນ ແລະ ຫຼັງພາກສ່ວນ */

ລະບົບສີ

ຈັບຄູ່ສີຍີ່ຫໍ້ຂອງທ່ານ:

ຫຼັກ: #0073aa (ສີຟ້າ WordPress) ຂໍ້ຄວາມ: #333 ປິດສຽງ: #666 ພື້ນຫຼັງ: #f8f9fa ຂອບ: #ddd

ຂະໜາດຕົວອັກສອນ

ຫົວຂໍ້ພາກສ່ວນ: 18-20px ລາຍລະອຽດ: 14px ຂໍ້ຄວາມຊ່ວຍເຫຼືອ: 13px

Visual Hierarchy

• ຫົວຂໍ້ຫຼັກ: ໜາ, ໃຫຍ່ກວ່າ
• ລາຍລະອຽດ: ນ້ຳໜັກປົກກະຕິ, ສີອ່ອນໆ
• ຕົວແບ່ງ: ລະອຽດອ່ອນ, ບໍ່ດຶງດູດຄວາມສົນໃຈ

ການ​ປະ​ຕິ​ບັດ​ທີ່​ດີ​ທີ່​ສຸດ

1. ຮັກສາພາກສ່ວນໃຫ້ສົມດຸນ

• ເໝາະສົມທີ່ສຸດ 3-5 ພາກສະໜາມຕໍ່ພາກສ່ວນ
• ຢ່າສ້າງພາກສ່ວນສຳລັບ 1-2 ຊ່ອງຂໍ້ມູນ
• ຂະໜາດພາກສ່ວນທີ່ສົມດຸນ

2. ໃຊ້ຫົວຂໍ້ທີ່ມີລາຍລະອຽດ

ດີ: "ທີ່ຢູ່ຈັດສົ່ງ" ດີກວ່າ: "ພວກເຮົາຄວນສົ່ງສິນຄ້າຂອງທ່ານໄປໃສ?"

3. ເພີ່ມບໍລິບົດເມື່ອເປັນປະໂຫຍດ

[ຫົວຂໍ້] ຂໍ້ມູນການຊຳລະເງິນ [ລາຍລະອຽດ] ບັດຂອງທ່ານຈະຖືກຮຽກເກັບເງິນຫຼັງຈາກການຢືນຢັນການສັ່ງຊື້.

4. ຢ່າຕັດຫຼາຍເກີນໄປ

ມີຫຼາຍພາກສ່ວນເກີນໄປ = ປະສົບການທີ່ສັບສົນ.

ຫຼາຍເກີນໄປ: ພາກທີ 1: ຊື່ (1 ຊ່ອງ) ພາກທີ 2: ອີເມວ (1 ຊ່ອງ) ພາກທີ 3: ເບີໂທລະສັບ (1 ຊ່ອງ) ດີກວ່າ: ພາກທີ 1: ຂໍ້ມູນຕິດຕໍ່ (ຊື່, ອີເມວ, ເບີໂທລະສັບ)

5. ພິຈາລະນາມືຖື

• ທົດສອບໃນໜ້າຈໍຂະໜາດນ້ອຍ
• ຮັບປະກັນວ່າຜ້າປູພື້ນເບິ່ງດີ
• ຫົວຂໍ້ຄວນຈະຖືກຫໍ່ຢ່າງລະອຽດ

6. ຮັກສາຄວາມສອດຄ່ອງ

• ຮູບແບບຫົວຂໍ້ດຽວກັນຕະຫຼອດ
• ຮູບລັກສະນະຂອງຕົວແບ່ງທີ່ສອດຄ່ອງກັນ
• ໄລຍະຫ່າງທີ່ກົງກັນ

ການພິຈາລະນາການເຂົ້າເຖິງ

HTML ຄວາມຫມາຍ

ໃຊ້ລະດັບຫົວຂໍ້ທີ່ເໝາະສົມ: ຊື່ແບບຟອມ ພາກທີ 1 ພາກທີ 2 ພາກທີ 3

ໂປຣແກຣມອ່ານໜ້າຈໍເປັນມິດ

• ຫົວຂໍ້ປະກາດພາກສ່ວນຕ່າງໆ
• ຢ່າຂ້າມລະດັບຫົວຂໍ້
• ຫົວຂໍ້ທີ່ມີຄວາມໝາຍ

ຕົວຊີ້ວັດດ້ານສາຍຕາ

• ຢ່າອີງໃສ່ແຕ່ສີ
• ໃຊ້ຂໍ້ຄວາມ + ອົງປະກອບທີ່ເບິ່ງເຫັນໄດ້
• ລຶບລ້າງຂອບເຂດພາກສ່ວນ

ເຕັກນິກຂັ້ນສູງ

ພາກສ່ວນທີ່ພັບໄດ້

 ຂໍ້ມູນເພີ່ມເຕີມ (ບໍ່ຈຳເປັນ) [ເນື້ອຫາ/ຊ່ອງຂໍ້ມູນຈະປາກົດຂຶ້ນເມື່ອຂະຫຍາຍອອກ]

ໝາຍເຫດ: ຊ່ອງຂໍ້ມູນໃນແບບຟອມອາດຈະຕ້ອງການການຈັດການພິເສດ.

ແຖບຄວາມຄືບ ໜ້າ

 ຄວາມຄືບໜ້າ ຂັ້ນຕອນທີ 2 ຈາກທັງໝົດ 3 ຂັ້ນຕອນທີ 

ຫົວຂໍ້ພາກສ່ວນທີ່ອີງໃສ່ໄອຄອນ

 📋 ຄວາມຕ້ອງການຂອງໂຄງການ ບອກພວກເຮົາວ່າເຈົ້າຕ້ອງການຫຍັງ

ຄວາມຜິດພາດທົ່ວໄປທີ່ຄວນຫລີກລ້ຽງ

1. ຮູບແບບທີ່ບໍ່ສອດຄ່ອງກັນ

ພາກທີ 1: ຫົວຂໍ້ສີຟ້າ, ຕົວໜາ ພາກທີ 2: ຫົວຂໍ້ສີເທົາ, ຕົວອຽງ ພາກທີ 3: ບໍ່ມີຮູບແບບ ແກ້ໄຂ: ໃຊ້ແມ່ແບບດຽວກັນສຳລັບທຸກພາກສ່ວນ

2. ການຕົກແຕ່ງຫຼາຍເກີນໄປ

ພາກສ່ວນຕ່າງໆຄວນມີການຈັດລະບຽບ, ບໍ່ລົບກວນ. ຮັກສາຮູບແບບທີ່ລະອຽດອ່ອນ.

3. ລືມໂທລະສັບມືຖື

ຮູບແບບທີ່ສັບສົນອາດຈະໃຊ້ບໍ່ໄດ້. ທົດສອບພຶດຕິກຳການຕອບສະໜອງ.

4. ພາກສ່ວນຫວ່າງເປົ່າ

ຫົວຂໍ້ຂອງແຕ່ລະພາກສ່ວນຄວນມີຊ່ອງຂໍ້ມູນຢູ່ລຸ່ມມັນ.

5. ລຳດັບຊັ້ນທີ່ສັບສົນ

ຄວາມສັບສົນ: - ພາກ A - ພາກຍ່ອຍ - ພາກຍ່ອຍ ຊັດເຈນກວ່າ: - ພາກ A - ພາກ B - ພາກ C

ການທົດສອບພາກສ່ວນຂອງທ່ານ

ການກວດສອບ

• ☐ ຫົວຂໍ້ສະແດງຜົນຢ່າງຖືກຕ້ອງ
• ☐ ຕົວແບ່ງສະແດງຢ່າງຖືກຕ້ອງ
• ☐ ໄລຍະຫ່າງແມ່ນສອດຄ່ອງກັນ
• ☐ ມຸມມອງມືຖືເບິ່ງດີ
• ☐ ສີທີ່ກົງກັບຍີ່ຫໍ້
• ☐ ງ່າຍຕໍ່ການອ່ານໜ້າຈໍ
• ☐ ແບບຟອມຍັງຖືກສົ່ງຢ່າງຖືກຕ້ອງ

Summary

ການສ້າງພາກສ່ວນແບບຟອມດ້ວຍບລັອກ HTML:

1. ພາກສ່ວນແຜນການ - ສາຂາທີ່ກ່ຽວຂ້ອງກັບກຸ່ມ
2. ເພີ່ມບລັອກ HTML - ລະຫວ່າງກຸ່ມພາກສະໜາມ
3. ສ້າງຫົວຂໍ້ - ລ້າງຫົວຂໍ້ພາກສ່ວນ
4. ເພີ່ມຕົວແບ່ງ - ການແຍກທາງສາຍຕາ
5. ລວມເອົາຄຳອະທິບາຍ - ສະພາບການເມື່ອເປັນປະໂຫຍດ
6. ແບບຢ່າງສະໝໍ່າສະເໝີ - ຮູບລັກສະນະດຽວກັນຕະຫຼອດ
7. ທົດສອບຢ່າງຕອບສະໜອງ - ຄອມພິວເຕີຕັ້ງໂຕະ ແລະ ມືຖື

ສະຫຼຸບ

ພາກສ່ວນຕ່າງໆປ່ຽນຮູບແບບຍາວໆຈາກຮູບແບບທີ່ຫຍຸ້ງຍາກໄປສູ່ຮູບແບບທີ່ເຂົ້າເຖິງໄດ້ງ່າຍ. ບລັອກ HTML ໃຫ້ການຄວບຄຸມຫົວຂໍ້, ຕົວແບ່ງ ແລະ ການຈັດລະບຽບຮູບພາບໄດ້ຢ່າງສົມບູນ. ຜູ້ໃຊ້ເຫັນຄວາມຄືບໜ້າທີ່ຊັດເຈນຜ່ານຄຳຖາມທີ່ຈັດກຸ່ມແທນທີ່ຈະເປັນລາຍຊື່ພາກສະໜາມທີ່ບໍ່ມີທີ່ສິ້ນສຸດ. ການຈັດລະບຽບທີ່ດີກວ່າໝາຍເຖິງອັດຕາການສຳເລັດທີ່ສູງຂຶ້ນ ແລະ ຮູບລັກສະນະທີ່ເປັນມືອາຊີບຫຼາຍຂຶ້ນ.

ຕົວສ້າງແບບຟອມອັດຕະໂນມັດ ປະກອບມີບລັອກ HTML ທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດເພີ່ມຫົວຂໍ້ພາກສ່ວນ, ຕົວແບ່ງ ແລະ ຮູບແບບລະຫວ່າງຊ່ອງຂໍ້ມູນແບບຟອມຂອງທ່ານໄດ້. ສ້າງແບບຟອມທີ່ເປັນລະບຽບ ແລະ ງ່າຍຕໍ່ການໃຊ້ດ້ວຍໂຄງສ້າງທີ່ເບິ່ງເຫັນໄດ້.

ພ້ອມທີ່ຈະຈັດລະບຽບແບບຟອມຂອງທ່ານແລ້ວບໍ? ດາວໂຫຼດໂປຣແກຣມສ້າງແບບຟອມອັດຕະໂນມັດ ແລະ ເລີ່ມຕົ້ນສ້າງແບບຟອມທີ່ແບ່ງສ່ວນກັນໃນມື້ນີ້.