ເປັນຫຍັງແບບຟອມ WordPress ຂອງທ່ານຈຶ່ງຕ້ອງຕອບສະໜອງຕໍ່ມືຖື

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

ໃນຄູ່ມືນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວ່າເປັນຫຍັງແບບຟອມທີ່ຕອບສະໜອງຜ່ານມືຖືຈຶ່ງມີຄວາມສຳຄັນ ແລະ ສິ່ງທີ່ເຮັດໃຫ້ແບບຟອມເປັນມິດກັບມືຖືຢ່າງແທ້ຈິງ.

ຄວາມເປັນຈິງຂອງມືຖື

ສະຖິຕິການຈະລາຈອນມືຖື

• 59% + ຂອງການເຂົ້າຊົມເວັບທົ່ວໂລກແມ່ນມືຖື
• 92% ຂອງຜູ້ໃຊ້ອິນເຕີເນັດທີ່ເຂົ້າເຖິງຜ່ານມືຖື
• 70% ຂອງການເຂົ້າຊົມເວັບໃນບາງອຸດສາຫະກຳແມ່ນເຄື່ອນທີ່
• ການນຳໃຊ້ໂທລະສັບມືຖືຍັງສືບຕໍ່ເຕີບໂຕຂຶ້ນໃນແຕ່ລະປີ

ນີ້ໝາຍຄວາມວ່າແນວໃດສຳລັບແບບຟອມຕ່າງໆ

ຖ້າເວັບໄຊທ໌ຂອງທ່ານມີຜູ້ເຂົ້າຊົມ 1,000 ຄົນຕໍ່ມື້:

• ~600 ຢູ່ໃນອຸປະກອນມືຖື
• ແບບຟອມທີ່ບໍ່ຕອບສະໜອງເຮັດໃຫ້ຜູ້ມາຢ້ຽມຢາມເຫຼົ່ານີ້ຮູ້ສຶກອຸກໃຈ
• ຜູ້ມາຢ້ຽມຢາມທີ່ອຸກອັ່ງປະຖິ້ມແບບຟອມ
• ແບບຟອມທີ່ຖືກປະຖິ້ມ = ສູນເສຍລູກຄ້າທີ່ມີທ່າແຮງ, ຍອດຂາຍ, ແລະ ຄຳຕິຊົມ

ສິ່ງທີ່ເກີດຂຶ້ນກັບແບບຟອມທີ່ບໍ່ຕອບສະໜອງ

ປະສົບການຂອງຜູ້ໃຊ້

ໃນແບບຟອມທີ່ບໍ່ຕອບສະໜອງ, ຜູ້ໃຊ້ມືຖືຈະປະເຊີນກັບ:

TinyText

• ປ້າຍຊື່ນ້ອຍເກີນໄປທີ່ຈະອ່ານ
• ຫລຽວເບິ່ງຄຳແນະນຳ
• ຂາດຂໍ້ມູນສຳຄັນ

ຊ່ອງປ້ອນຂໍ້ມູນທີ່ເປັນໄປບໍ່ໄດ້

• ກ່ອງຂໍ້ຄວາມ ນ້ອຍເກີນໄປທີ່ຈະແຕະໄດ້ຢ່າງຖືກຕ້ອງ
• ພິມຜິດຢູ່ ທົ່ງນາ
• ຊູມເຂົ້າ/ຊູມອອກຢ່າງຕໍ່ເນື່ອງ

ຮູບແບບທີ່ເສຍຫາຍ

• ທົ່ງນາຕັດຂອບໜ້າຈໍ
• ຕ້ອງມີການເລື່ອນແນວນອນ
• ປຸ່ມສົ່ງຖືກເຊື່ອງໄວ້ ຫຼື ເຂົ້າເຖິງບໍ່ໄດ້

ການໂຕ້ຕອບທີ່ໜ້າອຸກໃຈ

• ເລື່ອນລົງ ຍາກທີ່ຈະເລືອກ
• ກ່ອງກາເຄື່ອງ ໝາຍ ນ້ອຍເກີນໄປທີ່ຈະແຕະ
• ຕົວເລືອກວັນທີ ໃຊ້ບໍ່ໄດ້

ຜົນ

ຜູ້ໃຊ້ຍອມແພ້. ພວກເຂົາ:

• ຍົກເລີກແບບຟອມທັງໝົດ
• ເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານອຸກໃຈ
• ໄປຫາຄູ່ແຂ່ງທີ່ມີຟອມດີກວ່າ
• ບໍ່ເຄີຍກັບຄືນມາ

ຄ່າໃຊ້ຈ່າຍຂອງແບບຟອມທີ່ບໍ່ຕອບສະໜອງ

ການປ່ຽນໃຈເຫລື້ອມໃສທີ່ສູນເສຍ

ທຸກໆຮູບແບບທີ່ຖືກປະຖິ້ມແມ່ນໂອກາດທີ່ສູນເສຍໄປ:

• ແບບຟອມຕິດຕໍ່ → ລູກຄ້າທີ່ສູນເສຍໂອກາດ
• ຂໍໃບສະເໜີລາຄາ → ການຂາຍທີ່ສູນເສຍ
• ການລົງທະບຽນ → ລູກຄ້າທີ່ສູນເສຍ
• ແບບຟອມຄຳຕິຊົມ → ຄວາມເຂົ້າໃຈທີ່ສູນເສຍໄປ

ຊື່ສຽງເສຍຫາຍ

ປະສົບການການໃຊ້ມືຖືທີ່ບໍ່ດີສະທ້ອນໃຫ້ເຫັນເຖິງຍີ່ຫໍ້ຂອງທ່ານ:

• “ບໍລິສັດນີ້ເບິ່ງຄືວ່າລ້າສະໄໝ”
• "ພວກເຂົາບໍ່ສົນໃຈປະສົບການຂອງຜູ້ໃຊ້"
• "ຖ້າຮູບແບບຂອງເຂົາເຈົ້າບໍ່ດີ, ແລ້ວຜະລິດຕະພັນຂອງເຂົາເຈົ້າລ่ะ?"

ຜົນກະທົບ SEO

Google ໃຫ້ຄວາມສຳຄັນກັບເວັບໄຊທ໌ທີ່ເປັນມິດກັບມືຖື:

• ການຈັດດັດສະນີມືຖືກ່ອນແມ່ນມາດຕະຖານ
• ປະສົບການມືຖືທີ່ບໍ່ດີສົ່ງຜົນກະທົບຕໍ່ການຈັດອັນດັບ
• ອັນດັບຕ່ຳກວ່າ = ການຈະລາຈອນໜ້ອຍລົງ

ຂໍ້ເສຍປຽບດ້ານການແຂ່ງຂັນ

ໃນຂະນະທີ່ທ່ານເຮັດໃຫ້ຜູ້ໃຊ້ມືຖືຮູ້ສຶກອຸກໃຈ, ຄູ່ແຂ່ງທີ່ມີຮູບແບບທີ່ດີ:

• ບັນທຶກລູກຄ້າທີ່ທ່ານກຳລັງສູນເສຍ
• ສ້າງສາຍພົວພັນກັບລູກຄ້າທີ່ມີທ່າແຮງຂອງທ່ານ
• ເຕີບໂຕໃນຂະນະທີ່ທ່ານສົງໄສວ່າເປັນຫຍັງການປ່ຽນໃຈເຫລື້ອມໃສຈຶ່ງຕໍ່າ

ສິ່ງທີ່ເຮັດໃຫ້ແບບຟອມຕອບສະໜອງຕໍ່ມືຖື

1. ຄວາມກວ້າງຂອງນໍ້າ

ແບບຟອມຄວນປັບໃຫ້ເຂົ້າກັບຂະໜາດໜ້າຈໍ:

• ຄວາມກວ້າງເຕັມຈໍຂະໜາດນ້ອຍ
• ຄວາມກວ້າງທີ່ເໝາະສົມໃນໜ້າຈໍຂະໜາດໃຫຍ່
• ບໍ່ມີການເລື່ອນອອກຕາມແນວນອນເລີຍ

2. ຂໍ້ຄວາມທີ່ອ່ານໄດ້

ຂໍ້ຄວາມທັງໝົດສາມາດອ່ານໄດ້ໂດຍບໍ່ຕ້ອງຊູມ:

• ປ້າຍກຳກັບ: ຢ່າງໜ້ອຍ 14-16px
• ຂໍ້ຄວາມທີ່ປ້ອນເຂົ້າ: ຢ່າງໜ້ອຍ 16px (ປ້ອງກັນການຊູມ iOS)
• ຂໍ້ຄວາມຊ່ວຍເຫຼືອ: ຢ່າງໜ້ອຍ 12-14px
• ຄວາມຄົມຊັດທີ່ພຽງພໍ

3. ເປົ້າໝາຍທີ່ງ່າຍຕໍ່ການສຳຜັດ

ອົງປະກອບທີ່ສາມາດແຕະໄດ້ທີ່ມີຂະໜາດສຳລັບນິ້ວມື:

• ເປົ້າໝາຍແຕະຂັ້ນຕ່ຳ: 44×44 ພິກເຊວ
• ໄລຍະຫ່າງທີ່ພຽງພໍລະຫວ່າງອົງປະກອບຕ່າງໆ
• ກ່ອງກາເຄື່ອງໝາຍ ແລະ ວິທະຍຸທີ່ງ່າຍຕໍ່ການແຕະ

4. ຮູບແບບການຈັດລຽງຊ້ອນກັນ

ໃນມືຖື, ໃຫ້ວາງຊ້ອນກັນອົງປະກອບຕາມແນວຕັ້ງ:

• ໜຶ່ງຊ່ອງຂໍ້ມູນຕໍ່ແຖວ
• ປ້າຍຊື່ຂ້າງເທິງອິນພຸດ (ບໍ່ແມ່ນຂ້າງ)
• ປຸ່ມເຕັມຄວາມກວ້າງ

5. ປະເພດການປ້ອນຂໍ້ມູນແບບພື້ນເມືອງ

ເປີດໃຊ້ແປ້ນພິມມືຖືທີ່ເໝາະສົມ:

• ຊ່ອງອີເມວ → ແປ້ນພິມອີເມວ (@, .com)
• ຊ່ອງໂທລະສັບ → ແປ້ນພິມຕົວເລກ
• ຊ່ອງຂໍ້ມູນ URL → ແປ້ນພິມ URL
• ຊ່ອງຂໍ້ມູນຕົວເລກ → ການປ້ອນຂໍ້ມູນຕົວເລກ

6. ອົງປະກອບທີ່ເປັນມິດກັບມືຖື

ອົງປະກອບທີ່ອອກແບບມາສຳລັບການສຳຜັດ:

• ຕົວເລືອກວັນທີແບບພື້ນເມືອງ (ລໍ້ເລື່ອນ)
• ຕົວກະຕຸ້ນແບບເລື່ອນລົງຂະໜາດໃຫຍ່
• ການອັບໂຫຼດໄຟລ໌ທີ່ງ່າຍຕໍ່ການສຳຜັດ

7. ປຸ່ມສົ່ງທີ່ເບິ່ງເຫັນໄດ້

ຜູ້ໃຊ້ຕ້ອງສາມາດຊອກຫາ ແລະ ແຕະສົ່ງໄດ້:

• ຂະໜາດເຕັມ ຫຼື ຂະໜາດທີ່ໂດດເດັ່ນ
• ສີທີ່ມີຄວາມຄົມຊັດສູງ
• ເຫັນໄດ້ຢ່າງຊັດເຈນໂດຍບໍ່ຕ້ອງເລື່ອນ (ຖ້າເປັນໄປໄດ້)

ວິທີປະຕິບັດທີ່ດີທີ່ສຸດສຳລັບແບບຟອມມືຖື

ຮັກສາແບບຟອມໃຫ້ສັ້ນ

ຜູ້ໃຊ້ມືຖືມີຄວາມອົດທົນໜ້ອຍລົງ:

• ຖາມສະເພາະຄຳຖາມທີ່ສຳຄັນເທົ່ານັ້ນ
• ລຶບຊ່ອງຂໍ້ມູນທີ່ໜ້າສົນໃຈອອກ
• ພິຈາລະນາຫຼາຍຂັ້ນຕອນສຳລັບແບບຟອມທີ່ຍາວກວ່າ

ໃຊ້ຮູບແບບຖັນດຽວ

ຮູບແບບການຈັດລຽງຫຼາຍຖັນແຕກຫັກໃນມືຖື:

• ວາງຊ້ອນກັນທຸກຊ່ອງຂໍ້ມູນໃນແນວຕັ້ງ
• ສະແກນ ແລະ ເຮັດສຳເລັດໄດ້ງ່າຍຂຶ້ນ
• ປະສົບການທີ່ສອດຄ່ອງກັນໃນທົ່ວອຸປະກອນຕ່າງໆ

ເພີ່ມປະສິດທິພາບລຳດັບພາກສະໜາມ

ວາງຊ່ອງຂໍ້ມູນຢ່າງມີເຫດຜົນ:

• ສຳຄັນທີ່ສຸດກ່ອນ
• ຈັດກຸ່ມຊ່ອງຂໍ້ມູນທີ່ກ່ຽວຂ້ອງ
• ງ່າຍຕໍ່ການເຂົ້າເຖິງດ້ວຍນິ້ວໂປ້

ໃຫ້ປ້າຍຊື່ທີ່ຊັດເຈນ

ປ້າຍຊື່ຄວນຈະບໍ່ມີຄວາມກຳຈັດທີ່ຊັດເຈນ:

• ເໜືອສະໜາມ (ບໍ່ລອຍຢູ່ພາຍໃນ)
• ເບິ່ງເຫັນໄດ້ສະເໝີ (ຢ່າອີງໃສ່ຕົວຍຶດຕຳແໜ່ງເທົ່ານັ້ນ)
• ອະທິບາຍແຕ່ກະທັດຮັດ

ເປີດໃຊ້ການຕື່ມຂໍ້ຄວາມອັດຕະໂນມັດ

ໃຫ້ໂປຣແກຣມທ່ອງເວັບຊ່ວຍຜູ້ໃຊ້:

• ຊື່, ອີເມວ, ເບີໂທລະສັບທີ່ຕື່ມຂໍ້ມູນອັດຕະໂນມັດ
• ການຕື່ມຂໍ້ມູນທີ່ຢູ່ໂດຍອັດຕະໂນມັດ
• ຫຼຸດຜ່ອນການພິມໃນແປ້ນພິມຂະໜາດນ້ອຍ

ສະແດງການກວດສອບຄວາມຖືກຕ້ອງໃນແຖວ

ຊ່ວຍຜູ້ໃຊ້ແກ້ໄຂຂໍ້ຜິດພາດໄດ້ທັນທີ:

• ຂໍ້ຄວາມຜິດພາດຖັດຈາກຊ່ອງຂໍ້ມູນ
• ການກວດສອບຄວາມຖືກຕ້ອງຕາມເວລາຈິງເມື່ອເປັນໄປໄດ້
• ຄຳແນະນຳທີ່ຊັດເຈນເພື່ອແກ້ໄຂ

ເຮັດໃຫ້ປຸ່ມເຫັນໄດ້ຊັດເຈນ

ປຸ່ມສົ່ງຄວນຈະໂດດເດັ່ນ:

• ສີທີ່ກົງກັນຂ້າມ
• ເປົ້າໝາຍແຕະຂະໜາດໃຫຍ່
• ລຶບລ້າງຂໍ້ຄວາມການກະທຳ (“ສົ່ງ”, “ສົ່ງ”, “ລົງທະບຽນ”)

ການທົດສອບການຕອບສະໜອງຂອງມືຖື

ເຄື່ອງມືພັດທະນາຕົວທ່ອງເວັບ

ການທົດສອບໄວໃນໂປຣແກຣມທ່ອງເວັບເດັສທັອບ:

1. ເປີດໜ້າແບບຟອມຂອງທ່ານ
2. ກົດ F12 (ເຄື່ອງມືນັກພັດທະນາ)
3. ຄລິກໄອຄອນສະຫຼັບອຸປະກອນ
4. ເລືອກຂະໜາດອຸປະກອນທີ່ແຕກຕ່າງກັນ
5. ການໂຕ້ຕອບແບບຟອມການທົດສອບ

ການທົດສອບອຸປະກອນທີ່ແທ້ຈິງ

ບໍ່ມີຫຍັງດີກ່ວາອຸປະກອນຕົວຈິງ:

• ທົດສອບໃນ iPhone ແລະ Android
• ທົດສອບໃນແທັບເລັດ
• ລອງໃຊ້ຂະໜາດໜ້າຈໍທີ່ແຕກຕ່າງກັນ
• ຕື່ມແບບຟອມໃຫ້ຄົບຖ້ວນ

ສິ່ງທີ່ຕ້ອງທົດສອບ

• ✓ ເຈົ້າສາມາດອ່ານປ້າຍທັງໝົດໂດຍບໍ່ຕ້ອງຊູມໄດ້ບໍ?
• ✓ ຊ່ອງປ້ອນຂໍ້ມູນງ່າຍຕໍ່ການແຕະບໍ?
• ✓ ແປ້ນພິມທີ່ຖືກຕ້ອງປາກົດຢູ່ບໍ?
• ✓ ທ່ານສາມາດເລືອກຕົວເລືອກແບບເລື່ອນລົງໄດ້ງ່າຍບໍ?
• ✓ ສາມາດແຕະກ່ອງກາເຄື່ອງໝາຍ/ວິທະຍຸໄດ້ບໍ?
• ✓ ປຸ່ມສົ່ງສາມາດເບິ່ງເຫັນ ແລະ ເຂົ້າເຖິງໄດ້ບໍ?
• ✓ ແບບຟອມຖືກສົ່ງສຳເລັດແລ້ວບໍ?
• ✓ ຂໍ້ຄວາມຜິດພາດສາມາດເບິ່ງເຫັນໄດ້ ແລະ ຈະແຈ້ງບໍ?

ການທົດສອບທີ່ເປັນມິດກັບມືຖືຂອງ Google

ກວດສອບຄວາມເປັນມິດກັບມືຖືຂອງໜ້າເວັບໂດຍລວມ:

1. ໄປທີ່ເຄື່ອງມືທົດສອບຄວາມເປັນມິດກັບມືຖືຂອງ Google
2. ໃສ່ URL ໜ້າແບບຟອມຂອງທ່ານ
3. ກວດສອບຜົນໄດ້ຮັບ ແລະ ຄຳແນະນຳ

ບັນຫາທົ່ວໄປກ່ຽວກັບແບບຟອມມືຖື

ບັນຫາ: ຂໍ້ຄວາມນ້ອຍເກີນໄປ

ສາເຫດ: ຂະໜາດພິກເຊວຄົງທີ່ບໍ່ໄດ້ຖືກປັບຂະໜາດ

ການແກ້ໄຂ: ໃຊ້ຫົວໜ່ວຍທີ່ກ່ຽວຂ້ອງ (em, rem) ຫຼື ຢ່າງໜ້ອຍ 16px

ບັນຫາ: ພື້ນທີ່ແຄບເກີນໄປ

ສາເຫດ: ຕູ້ຄອນເທນເນີທີ່ມີຄວາມກວ້າງຄົງທີ່

ການແກ້ໄຂ: ໃຊ້ຄວາມກວ້າງເປັນເປີເຊັນ (100% ໃນມືຖື)

ບັນຫາ: ຮູບແບບຝາປິດແປ້ນພິມ

ສາເຫດ: ບໍ່ມີການປັບເລື່ອນເມື່ອແປ້ນພິມປາກົດຂຶ້ນ

ການແກ້ໄຂ: ໃຫ້ແນ່ໃຈວ່າຊ່ອງທີ່ໂຟກັສເລື່ອນເຂົ້າມາໃນມຸມມອງ

ບັນຫາ: ຊູມໃສ່ໂຟກັສອິນພຸດ (iOS)

ສາເຫດ: ຂະໜາດຕົວອັກສອນຕ່ຳກວ່າ 16px ໃນອິນພຸດ

ການແກ້ໄຂ: ຕັ້ງຄ່າຂະໜາດຕົວອັກສອນທີ່ປ້ອນເຂົ້າໃຫ້ມີຢ່າງໜ້ອຍ 16px

ບັນຫາ: ເມນູເລື່ອນລົງໃຊ້ຍາກ

ສາເຫດ: ເມນູເລື່ອນລົງແບບກຳນົດເອງບໍ່ໄດ້ຖືກປັບແຕ່ງໃຫ້ເໝາະສົມກັບການສຳຜັດ

ການແກ້ໄຂ: ໃຊ້ອົງປະກອບເລືອກແບບພື້ນເມືອງ ຫຼື ທາງເລືອກທີ່ງ່າຍຕໍ່ການສຳຜັດ

ບັນຫາ: ປຸ່ມສົ່ງຢູ່ນອກໜ້າຈໍ

ສາເຫດ: ແບບຟອມຍາວໆທີ່ບໍ່ມີຄວາມຄືບໜ້າເຫັນໄດ້ຊັດເຈນ

ການແກ້ໄຂ: ປຸ່ມສົ່ງແບບໜຽວ ຫຼື ຕົວຊີ້ບອກການເລື່ອນທີ່ຈະແຈ້ງ

ຄຸນສົມບັດສະເພາະມືຖື

ລິ້ງໂທລະສັບແບບຄລິກເພື່ອໂທ

ເບີໂທລະສັບໃນການຢືນຢັນຄວນຈະສາມາດແຕະໄດ້:

• ການເຊື່ອມຕໍ່ກັບໂທລະສັບ: ໂປໂຕຄອນ
• ແຕະຄັ້ງດຽວເພື່ອໂທອອກ

ການກວດຫາສະຖານທີ່

ສຳລັບຊ່ອງທີ່ຢູ່:

• ຕົວເລືອກທີ່ຈະໃຊ້ສະຖານທີ່ປັດຈຸບັນ
• ຕື່ມຂໍ້ມູນໃສ່ເມືອງ/ພາກພື້ນໂດຍອັດຕະໂນມັດ

ການປະສົມປະສານຂອງກ້ອງຖ່າຍຮູບ

ສຳລັບການອັບໂຫຼດໄຟລ໌:

• ຕົວເລືອກການເຂົ້າເຖິງກ້ອງຖ່າຍຮູບໂດຍກົງ
• ການເຂົ້າເຖິງຫ້ອງສະໝຸດຮູບພາບ
• ການສະແກນເອກະສານ

ແຕະທ່າທາງ

ການໂຕ້ຕອບມືຖືແບບພື້ນເມືອງ:

• ປັດລະຫວ່າງຂັ້ນຕອນແບບຟອມ
• ດຶງເພື່ອໂຫຼດຫນ້າຈໍຄືນ
• ບີບເພື່ອຊູມ (ຖ້າຈຳເປັນ)

ປະສິດທິພາບໃນມືຖື

ເປັນຫຍັງຄວາມໄວຈຶ່ງມີຄວາມສຳຄັນ ເພີ່ມເຕີມໃນມືຖື

• ການເຊື່ອມຕໍ່ມືຖືມັກຈະຊ້າລົງ
• ຂໍ້ຈຳກັດຂໍ້ມູນສຳລັບຜູ້ໃຊ້ບາງຄົນ
• ຄວາມອົດທົນໜ້ອຍລົງໃນມືຖື
• ການພິຈາລະນາເຖິງການໃຊ້ແບັດເຕີຣີ

ຄຳແນະນຳກ່ຽວກັບປະສິດທິພາບຂອງແບບຟອມ

ຫຼຸດຜ່ອນນ້ຳໜັກແບບຟອມ

• ປລັກອິນແບບຟອມນ້ຳໜັກເບົາ
• CSS/JavaScript ໜ້ອຍທີ່ສຸດ
• ຊັບສິນທີ່ໄດ້ຮັບການປັບປຸງໃຫ້ດີທີ່ສຸດ

ການໂຫຼດແບບ Lazy ເມື່ອເປັນໄປໄດ້

• ໂຫຼດອົງປະກອບແບບຟອມຕາມຄວາມຕ້ອງການ
• ຢ່າໂຫຼດຊ່ອງຂໍ້ມູນທີ່ມີເງື່ອນໄຂທີ່ເຊື່ອງໄວ້ລ່ວງໜ້າ

ເພີ່ມປະສິດທິພາບຮູບພາບ

• ບີບອັດຮູບພາບໃດໆໃນແບບຟອມຕ່າງໆ
• ໃຊ້ຮູບແບບທີ່ເໝາະສົມ (WebP)
• ຂະໜາດຮູບພາບທີ່ຕອບສະໜອງໄດ້

ວິທີການມືຖືຂອງຕົວສ້າງແບບຟອມອັດຕະໂນມັດ

ຕົວສ້າງແບບຟອມອັດຕະໂນມັດ ຖືກສ້າງຂຶ້ນເພື່ອມືຖືກ່ອນ:

ຕອບສະໜອງຕາມຄ່າເລີ່ມຕົ້ນ

• ແບບຟອມທັງໝົດຕອບສະໜອງໂດຍອັດຕະໂນມັດ
• ບໍ່ຈຳເປັນຕ້ອງມີການຕັ້ງຄ່າພິເສດ
• ເໝາະສົມກັບທຸກຂະໜາດໜ້າຈໍ

ພາກສະໜາມທີ່ເພີ່ມປະສິດທິພາບການສຳຜັດ

• ເປົ້າໝາຍການແຕະທີ່ມີຂະໜາດທີ່ເໝາະສົມ
• ການປ້ອນຂໍ້ມູນມືຖືແບບພື້ນເມືອງ
• ຕົວເລືອກວັນທີ/ເວລາທີ່ໃຊ້ງ່າຍໃນການສຳຜັດ

ການຈັດຮູບແບບມືຖືກ່ອນ

• ຮູບແບບການຈັດລຽງຊ້ອນກັນໃນໜ້າຈໍຂະໜາດນ້ອຍ
• ຊ່ອງຂໍ້ມູນເຕັມຄວາມກວ້າງໃນມືຖື
• ຂະໜາດຕົວອັກສອນທີ່ອ່ານໄດ້

ການປະຕິບັດນ້ໍາຫນັກເບົາ

• ຮອຍຕີນ JavaScript ໜ້ອຍທີ່ສຸດ
• ແບບຟອມໂຫຼດໄວ
• ປັບແຕ່ງໃຫ້ເໝາະສົມກັບເຄືອຂ່າຍມືຖື

ລາຍການກວດສອບ: ແບບຟອມຂອງທ່ານພ້ອມໃຊ້ງານໃນມືຖືແລ້ວບໍ?

Layout

• ☐ ຖັນດຽວໃນມືຖື
• ☐ ບໍ່ມີການເລື່ອນຕາມແນວນອນ
• ☐ ຊ່ອງຂໍ້ມູນເຕັມຄວາມກວ້າງ
• ☐ ໄລຍະຫ່າງທີ່ພຽງພໍລະຫວ່າງອົງປະກອບຕ່າງໆ

Typography

• ☐ ປ້າຍກຳກັບສາມາດອ່ານໄດ້ໂດຍບໍ່ຕ້ອງຊູມ (14px+)
• ☐ ປ້ອນຂໍ້ຄວາມຢ່າງໜ້ອຍ 16px
• ☐ ອັດຕາສ່ວນຄວາມຄົມຊັດທີ່ດີ

Interactions

• ☐ ເປົ້າໝາຍການສຳຜັດຢ່າງໜ້ອຍ 44px
• ☐ ປະເພດແປ້ນພິມທີ່ຖືກຕ້ອງ
• ☐ ການເລືອກແບບເລື່ອນລົງງ່າຍໆ
• ☐ ກ່ອງກາເຄື່ອງໝາຍ/ວິທະຍຸທີ່ສາມາດແຕະໄດ້

ການເຮັດວຽກ

• ☐ ສົ່ງແບບຟອມສຳເລັດແລ້ວ
• ☐ ຂໍ້ຄວາມຜິດພາດສາມາດເບິ່ງເຫັນໄດ້
• ☐ ຂໍ້ຄວາມສະແດງຜົນສຳເລັດ
• ☐ ການອັບໂຫຼດໄຟລ໌ເຮັດວຽກ

ການປະຕິບັດ

• ☐ ໂຫຼດໄດ້ໄວໃນ 3G
• ☐ ບໍ່ມີສະຄຣິບບລັອກ
• ☐ ການໃຊ້ຂໍ້ມູນໜ້ອຍທີ່ສຸດ

ຄໍາ​ຖາມ​ທີ່​ຖືກ​ຖາມ​ເລື້ອຍໆ

ເປັນຫຍັງແບບຟອມຂອງຂ້ອຍຈຶ່ງຊູມເຂົ້າໃນ iOS ເມື່ອຂ້ອຍແຕະໃສ່ຊ່ອງຂໍ້ມູນ?

iOS ຈະຊູມອັດຕະໂນມັດເມື່ອຂະໜາດຕົວອັກສອນທີ່ປ້ອນເຂົ້າຕໍ່າກວ່າ 16px. ຕັ້ງຂະໜາດຕົວອັກສອນທີ່ປ້ອນເຂົ້າຂອງທ່ານໃຫ້ເປັນຢ່າງໜ້ອຍ 16px ເພື່ອປ້ອງກັນສິ່ງນີ້.

ຂ້ອຍຄວນສ້າງແບບຟອມມືຖື ແລະ ເດັສທັອບແຍກຕ່າງຫາກບໍ?

ການອອກແບບທີ່ຕອບສະໜອງບໍ່ໄດ້ນັ້ນສາມາດຈັດການທັງສອງຢ່າງໄດ້. ແບບຟອມທີ່ຕອບສະໜອງໄດ້ຢ່າງດີອັນດຽວກໍໃຊ້ໄດ້ກັບທຸກອຸປະກອນ. ການຮັກສາແບບຟອມແຍກຕ່າງຫາກຈະເຮັດໃຫ້ວຽກງານຂອງທ່ານເປັນສອງເທົ່າ ແລະ ມີຄວາມສ່ຽງທີ່ຈະເກີດຄວາມບໍ່ສອດຄ່ອງກັນ.

ຂ້ອຍຈະທົດສອບໃນອຸປະກອນທີ່ຂ້ອຍບໍ່ມີໄດ້ແນວໃດ?

ໃຊ້ເຄື່ອງມືນັກພັດທະນາໂປຣແກຣມທ່ອງເວັບສຳລັບການທົດສອບຂັ້ນພື້ນຖານ. ສຳລັບການທົດສອບຢ່າງລະອຽດ, ໃຫ້ໃຊ້ບໍລິການອອນໄລນ໌ເຊັ່ນ BrowserStack, ຫຼືຖາມໝູ່ເພື່ອນ/ເພື່ອນຮ່ວມງານທີ່ມີອຸປະກອນທີ່ແຕກຕ່າງກັນ.

ຜູ້ໃຊ້ມືຖືຕື່ມແບບຟອມແທ້ບໍ?

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

ການປັບປຸງແບບຟອມມືຖືທີ່ສຳຄັນທີ່ສຸດແມ່ນຫຍັງ?

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

Summary

ການເຮັດໃຫ້ແບບຟອມຕອບສະໜອງໄດ້ໄວໃນມືຖື:

1. ເຂົ້າໃຈເຖິງຂໍ້ແມ້ – ການຈະລາຈອນ 60%+ ແມ່ນມືຖື
2. ໃຊ້ການອອກແບບທີ່ຕອບສະຫນອງ - ຄວາມກວ້າງຂອງແຫຼວ, ຮູບແບບການຈັດລຽງຊ້ອນກັນ
3. ຂະໜາດສຳລັບການສຳຜັດ - ເປົ້າໝາຍການແຕະຂັ້ນຕ່ຳ 44px
4. ຮັບປະກັນການອ່ານງ່າຍ - ຂໍ້ຄວາມປ້ອນຂໍ້ມູນຂັ້ນຕ່ຳ 16px
5. ເປີດແປ້ນພິມຂວາ - ໃຊ້ປະເພດການປ້ອນຂໍ້ມູນທີ່ຖືກຕ້ອງ
6. ທົດສອບໃນອຸປະກອນທີ່ແທ້ຈິງ - ຢ່າໃຊ້ພຽງແຕ່ເຄື່ອງຈຳລອງ
7. ເລືອກເຄື່ອງມືທີ່ຕອບສະໜອງໄດ້ - ເລີ່ມຕົ້ນດ້ວຍຜູ້ສ້າງແບບຟອມທີ່ພ້ອມໃຊ້ກັບມືຖື

ສະຫຼຸບ

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

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

ພ້ອມແລ້ວບໍສຳລັບແບບຟອມທີ່ເປັນມິດກັບມືຖື? ດາວໂຫຼດໂປຣແກຣມສ້າງແບບຟອມອັດຕະໂນມັດ ແລະ ໃຫ້ປະສົບການທີ່ຜູ້ເຂົ້າຊົມມືຖືຂອງທ່ານສົມຄວນໄດ້ຮັບ.