ออกแบบฟอร์มบนเว็บไซต์: วิธีสร้างฟอร์มติดต่อที่คนกรอกจนจบ

ฟอร์มติดต่อคือขั้นสุดท้าย ระหว่างความสนใจกับบทสนทนา และมักเป็นจุดที่คนที่สนใจยอมแพ้ การออกแบบฟอร์มบนเว็บไซต์ที่ดี แทบไม่เกี่ยวกับหน้าตาของช่องกรอก แต่เกี่ยวกับว่าคุณถามกี่คำถาม ถามชัดเจนแค่ไหน กันสแปมอย่างไรโดยไม่กันคนจริง และทุกการส่งไปถึงใครสักคนจริงหรือไม่

ข้อสุดท้ายนั้นพลาดได้ง่าย ฟอร์มอาจผ่านทุกการทดสอบในวันเปิดตัว แล้วหยุดส่งแบบเงียบ ๆ หลังอัปเดตปลั๊กอิน ขณะที่ยังแสดงข้อความ “ขอบคุณ” อย่างเป็นมิตรอยู่

ฟอร์มเป็นคันโยกหนึ่งของ การเพิ่มอัตรา conversion คู่มือนี้เรียงการตัดสินใจตามลำดับที่คุณจะต้องทำ ส่วนกฎด้านการเข้าถึงโดยละเอียด อยู่ใน วิธีออกแบบฟอร์มที่ทุกคนเข้าถึงได้

ออกแบบฟอร์ม: คำตอบสั้น ๆ

แนวทางทำฟอร์มติดต่อส่วนใหญ่ สรุปได้เป็นเจ็ดกฎ

1. ถามเฉพาะสิ่งที่การตอบกลับครั้งแรกต้องใช้ แยกช่องออกเป็น ต้องมี มีประโยชน์ และถามทีหลัง
2. ใช้คอลัมน์เดียว พร้อมป้ายกำกับที่มองเห็นได้ และระบุช่องที่ไม่บังคับให้ชัดเจน
3. ใช้ประเภทช่องกรอกและ autocomplete ให้ถูกต้อง เพื่อให้มือถือแสดงคีย์บอร์ดที่ใช่
4. แบ่งฟอร์มคัดกรองที่ยาว เป็นหลายขั้นตอน พร้อมตัวบอกความคืบหน้า
5. สร้างความมั่นใจข้างปุ่ม ว่าคุณจะตอบกลับเมื่อไร และจะทำอะไรกับข้อมูลของเขา
6. หยุดสแปมแบบเงียบ ๆ ด้วย honeypot และการตรวจฝั่งเซิร์ฟเวอร์ ก่อนจะหันไปใช้ปริศนาให้คนแก้
7. ยืนยันและส่งถึงมือ บอกให้รู้ว่าจะเกิดอะไรขึ้นหลังส่ง และเก็บสำรองทุกรายการที่ส่งเข้ามา

เลือกช่องในฟอร์มจากสิ่งที่คำตอบแรกต้องใช้

ทุกช่องทำให้ผู้เข้าชมต้องตัดสินใจ ต้องพิมพ์ และบางครั้งก็สงสัยว่า ทำไมคุณถึงอยากรู้ ฟอร์มยาวที่เรียกร้องมาก เป็นสาเหตุที่พบบ่อยของการกรอกฟอร์มไม่จบ

แยกทุกช่อง: ต้องมี มีประโยชน์ ถามทีหลัง

บททดสอบของทุกช่อง ถ้าไม่มีคำตอบนี้ การตอบกลับครั้งแรกของคุณจะต่างไปไหม? ถ้าไม่ ช่องนั้นควรอยู่ในบทสนทนา ไม่ใช่ในฟอร์ม

เมื่อคำถามเพิ่ม คุ้มค่าที่จะมี

ช่องน้อยลงไม่ได้ดีกว่าเสมอไป ถ้าทีมของคุณใช้เวลาหลายชั่วโมง กับการติดต่อสอบถามที่ไม่เคยเหมาะสมเลย คำถามคัดกรองสักหนึ่งหรือสองข้อ จะประหยัดเวลาทุกคน รวมถึงผู้เข้าชมด้วย

ทำให้มันตอบง่าย “งบประมาณคร่าว ๆ (ไม่บังคับ)” ที่มีสี่ช่วงให้เลือก ตอบง่ายกว่าช่องว่างที่ขอตัวเลขมาก จากนั้นตัดสินการเปลี่ยนแปลง จากจำนวนการติดต่อสอบถาม ที่ผ่านการคัดกรอง ไม่ใช่แค่อัตราการกรอกฟอร์ม บทความ การหาลูกค้าผ่านเว็บไซต์ อธิบายว่าการคัดกรอง ทำงานร่วมกับข้อเสนอ ช่องทางติดต่อ และการติดตามผลอย่างไร

เลย์เอาต์: คอลัมน์เดียว ป้ายกำกับชัด จบชัดเจน

ใช้คอลัมน์เดียว

คอลัมน์เดียวให้สายตามีเส้นทางเดียว จากบนลงล่าง ช่องที่วางเคียงกัน ชวนให้คนมองซิกแซก และพลาดไปหนึ่งช่อง นี่คือเหตุผลที่ ข้อแนะนำด้านการใช้งานฟอร์ม ของ Nielsen Norman Group สนับสนุนคอลัมน์เดียว ข้อยกเว้นที่สมเหตุสมผล คือคู่ช่องสั้น ๆ ที่เกี่ยวข้องกันมาก เช่น รหัสไปรษณีย์คู่กับชื่อเมือง

วางป้ายกำกับเหนือช่อง ให้มองเห็นตลอด

ข้อความ placeholder หายไปทันทีที่คนเริ่มพิมพ์ ทำให้เขาต้องจำคำถามเอง และมักจางเกินกว่าจะอ่านออก ให้ทุกช่องมีป้ายกำกับสั้น ๆ ที่มองเห็นได้อยู่ด้านบน และใช้ placeholder ถ้าจะใช้ เป็นตัวอย่างรูปแบบเท่านั้น

เมื่อช่องส่วนใหญ่เป็นช่องบังคับ การเติม “(ไม่บังคับ)” ให้ไม่กี่ช่องที่ไม่บังคับ ชัดเจนกว่าแถวดอกจันที่คนต้องมาถอดรหัส Design System ของ GOV.UK แนะนำแบบนี้เลย และไม่แนะนำให้ใช้ดอกจัน ไม่ว่าคุณจะเลือกแบบไหน ให้ใช้แบบเดียวกันในทุกฟอร์ม

เขียนข้อความบนปุ่มให้บอกว่าจะเกิดอะไรขึ้น

“Submit” หรือ “ส่ง” อธิบายกลไก ส่วน “ส่งคำถาม” “ขอใบเสนอราคา” หรือ “นัดโทรคุย” อธิบายผลลัพธ์ ทำให้ปุ่มกว้างเต็มจอบนมือถือ และอย่าปิดการใช้งานปุ่ม จนกว่าฟอร์มจะกรอกถูกต้อง ปุ่มสีเทาทำให้คนต้องเดา ให้เขากดได้ แล้วแสดงข้อผิดพลาดที่ชัดเจนแทน บทความ แนวทางการทำ CTA ที่ดี ลงรายละเอียดเรื่องถ้อยคำมากกว่านี้

ประเภทช่องกรอก และ autocomplete: รายละเอียดที่มือถือสังเกตเห็น

บนมือถือ ซึ่งเป็นจุดเริ่มต้น ของการติดต่อสอบถามจำนวนมาก การพิมพ์คือส่วนที่ยาก แอตทริบิวต์ HTML สองตัวช่วยได้มาก คือ type ซึ่งกำหนดว่าคีย์บอร์ดแบบไหนจะแสดง และ autocomplete ซึ่งให้เบราว์เซอร์เสนอข้อมูลที่ผู้เข้าชมบันทึกไว้ autocomplete ยังเป็นวิธีปกติที่ใช้ผ่าน WCAG เกณฑ์ความสำเร็จ 1.3.5 Identify Input Purpose ด้วย

กฎสี่ข้อที่ป้องกันความผิดพลาดที่พบบ่อย

• อย่าใช้ type="number" กับเบอร์โทรหรือรหัสไปรษณีย์ มันออกแบบมาสำหรับจำนวน อาจเพิ่มลูกศรเพิ่มลด และถือว่าเบอร์โทรที่มีช่องว่าง หรือเครื่องหมายบวกไม่ถูกต้อง ใช้ type="tel" สำหรับเบอร์โทร และ inputmode="numeric" บนช่องข้อความ สำหรับรหัสที่เป็นตัวเลข
• รองรับรูปแบบสากล อย่าบังคับรูปแบบเบอร์โทรแบบเดียว หรือบังคับรหัสไปรษณีย์ที่ลูกค้าบางคนไม่มี ช่อง “ชื่อ-นามสกุล” ช่องเดียว รองรับชื่อที่แยกเป็นชื่อต้น และนามสกุลได้ไม่ลงตัว ตามที่แนวทางของ W3C เรื่อง ชื่อบุคคลทั่วโลก อธิบายไว้
• แปลทุกอย่างในแต่ละเวอร์ชันภาษา ทั้งป้ายกำกับ ข้อความช่วยเหลือ ข้อผิดพลาด ปุ่ม และหน้ายืนยัน
• ตรวจข้อมูลอย่างเป็นประโยชน์ ตรวจช่องเมื่อผู้เข้าชมออกจากช่อง หรือกดปุ่ม ไม่ใช่ทุกครั้งที่กดแป้น วางข้อความแจ้งข้อผิดพลาดไว้ข้างช่อง บอกวิธีแก้ และอย่าลบสิ่งที่เขาพิมพ์ไว้

ฟอร์มหลายขั้นตอน: เมื่อไรฟอร์มยาวจึงคุ้ม

ฟอร์มหลายขั้นตอน แบ่งคำถามออกเป็นหน้าจอสั้น ๆ ไม่กี่หน้า เหมาะกับคำขอใบเสนอราคา และฟอร์มคัดกรองที่ต้องมีคำถามมากกว่าไม่กี่ข้อ โดยเฉพาะเมื่อคำตอบแตกแขนง เช่น การติดต่อเรื่องรีดีไซน์ ต้องการคำถามต่อเนื่อง ที่ต่างจากเรื่องแลนดิ้งเพจ สำหรับฟอร์มติดต่อสามช่อง การแบ่งขั้นตอนมีแต่จะเพิ่มจำนวนคลิก

ทำฟอร์มหลายขั้นตอนให้ได้ผล

1. เปิดด้วยคำถามที่ง่ายและเกี่ยวข้องที่สุด ซึ่งมักเป็นสิ่งที่เขาต้องการ ในรูปแบบตัวเลือกที่แตะได้ ข้อมูลติดต่อมาเป็นลำดับสุดท้าย เมื่อคนได้ลงแรงไปบ้างแล้ว
2. แสดงความคืบหน้าด้วยชื่อขั้นตอน เช่น “ขั้นที่ 2 จาก 3: โปรเจกต์ของคุณ”
3. ให้แต่ละขั้นพอดีหนึ่งหน้าจอมือถือ และตรวจข้อมูลก่อนไปขั้นต่อไป
4. ให้ปุ่มย้อนกลับใช้งานได้ โดยคำตอบไม่หาย
5. แตกแขนง แทนการกองเพิ่ม แสดงเฉพาะคำถามที่เกี่ยวข้อง และทดสอบทุกแขนงในทุกภาษา

ข้อควรระวังหนึ่งข้อ เครื่องมือฟอร์มบางตัวบันทึกสิ่งที่คนพิมพ์ ในขั้นตอนที่เขาไม่เคยกดส่ง การติดตามผลจากข้อมูลเหล่านั้น อาจขัดกับกฎคุ้มครองข้อมูล และประกาศความเป็นส่วนตัวของคุณ ถ้าจะใช้ข้อมูลที่กรอกไม่ครบ ให้ใช้แค่ดูว่าขั้นไหนที่ทำให้คนหลุดไป

ข้อความประกอบฟอร์มที่ลบความลังเล

ข้อความประกอบฟอร์ม (microcopy) คือข้อความเล็ก ๆ รอบช่องกรอก ทั้งข้อความช่วยเหลือ บรรทัดใต้ปุ่ม และข้อความแจ้งข้อผิดพลาด หน้าที่ของมันคือตอบคำถาม ที่ทำให้คนลังเล

สัญญาเฉพาะสิ่งที่ทีมของคุณทำได้จริง ระยะเวลาตอบกลับที่คุณพลาดเป็นประจำ สร้างความเสียหายมากกว่าไม่สัญญาเลย

ถ้าต้องการเพิ่มคนเข้ารายชื่อรับอีเมล ให้ถามด้วยช่องติ๊กแยกต่างหาก ที่ยังไม่ได้ติ๊กไว้ เช่น ภายใต้ GDPR การเงียบหรือช่องที่ติ๊กไว้ล่วงหน้า ไม่นับเป็นความยินยอม ตรวจสอบกฎในที่ที่ลูกค้าของคุณอยู่ นี่เป็นแนวทางทั่วไป ไม่ใช่คำแนะนำทางกฎหมาย

ข้างฟอร์ม ให้มีเบอร์โทรหรือลิงก์แอปแชต สำหรับคนที่อยากคุยมากกว่า

ป้องกันสแปมโดยไม่ลงโทษคนจริง

ทุกฟอร์มสาธารณะดึงดูดสแปม แต่วิธีแก้ที่หนักที่สุด ทำให้ผู้เข้าชมตัวจริงทุกคนต้องจ่ายราคา CAPTCHA แบบรูปภาพและเสียง เป็นอุปสรรคที่รู้กันดีสำหรับผู้ใช้ที่มีความพิการ ตามที่เอกสาร ปัญหาการเข้าถึงของ CAPTCHA ของ W3C อธิบายไว้ ให้ไล่ใช้ชั้นป้องกันที่เบากว่าก่อน

ซ้อนชั้นป้องกันแบบเงียบ ๆ

1. ช่อง honeypot ที่คนจริงไม่เคยเห็น แต่บอตจำนวนมากกรอก ซ่อนมันจากสายตา คีย์บอร์ด และโปรแกรมอ่านหน้าจอ และปิด autofill สำหรับช่องนี้ เพื่อไม่ให้เบราว์เซอร์กรอกโดยบังเอิญ แล้วทำให้การติดต่อจริงถูกตีเป็นสแปม
2. การตรวจฝั่งเซิร์ฟเวอร์ บอตส่งข้อมูลตรงเข้าฟอร์มได้ โดยข้ามทุกอย่างในเบราว์เซอร์ จึงต้องตรวจบนเซิร์ฟเวอร์ด้วย ทั้งช่องบังคับ อีเมลที่ดูสมเหตุสมผล เวลาขั้นต่ำระหว่างโหลดหน้าจนถึงการส่ง และการจำกัดการส่งซ้ำ
3. บริการกรองสแปม เช่น Akismet ซึ่งตรวจข้อมูลที่ส่งเข้ามา เทียบกับรูปแบบที่พบในเว็บไซต์อื่นจำนวนมาก
4. การทดสอบแบบมองไม่เห็นหรือแบบให้คะแนน เช่น Cloudflare Turnstile หรือ Google reCAPTCHA v3 ซึ่งมักไม่ต้องให้ใครแก้อะไรเลย เครื่องมือเหล่านี้โหลดสคริปต์ของบุคคลที่สาม จึงต้องชั่งน้ำหนัก เรื่องความเร็วและความเป็นส่วนตัวด้วย
5. ปริศนาที่มองเห็นได้ เป็นทางเลือกสุดท้าย และใช้เฉพาะกับฟอร์มที่ถูกโจมตี

ตัวกรองทุกตัวผิดพลาดได้บ้าง จึงควรเก็บรายการที่ถูกบล็อก ไว้ในที่ที่คุณตรวจทานได้ ตัวกรองที่ทิ้งคำขอใบเสนอราคาของจริง ไปเงียบ ๆ เดือนละรายการ คือตัวกรองที่มีราคาแพง

หน้ายืนยันที่บอกว่าจะเกิดอะไรต่อ

หลังคนกดส่ง เขาต้องรู้ว่ามันสำเร็จ และจะเกิดอะไรต่อไป หน้ายืนยันเฉพาะที่กันไว้ไม่ให้ขึ้นในผลการค้นหา ทำหน้าที่นี้ได้ดีกว่าข้อความบรรทัดเดียว ใช้มันเพื่อ

• ยืนยันด้วยภาษาง่าย ๆ ว่าการติดต่อสอบถามมาถึงแล้ว
• บอกว่าจะได้คำตอบเมื่อไร จากใคร และทางไหน
• แนะนำว่าควรเตรียมอะไรไว้ เช่น ลิงก์หรือบรีฟ
• เสนอสิ่งที่มีประโยชน์ระหว่างรอ และช่องทางติดต่อตรง สำหรับเรื่องด่วน

อีเมลตอบกลับอัตโนมัติ ช่วยย้ำเรื่องนี้ได้ แต่ควรเขียนแบบทั่วไป ไม่ใช่ทวนสิ่งที่ผู้เข้าชมพิมพ์มา ไม่อย่างนั้น ผู้ส่งสแปมจะใส่ที่อยู่อีเมลของคนอื่น ใส่เนื้อหาของตัวเอง ลงในช่องข้อความหรือช่องชื่อ แล้วใช้ฟอร์มของคุณส่งสแปม

สถานะสำเร็จ ยังเป็นสิ่งที่ analytics ควรนับด้วย ให้บันทึกการติดต่อสอบถาม เมื่อฟอร์มไปถึงสถานะนั้น ไม่ใช่เมื่อมีการคลิกปุ่ม คู่มือ ติดตามการติดต่อสอบถามจากเว็บไซต์ใน GA4 ของเรา แสดงวิธีทำ

ทำให้ทุกการส่งไปถึงคน

ไม่มีใครร้องเรียน เมื่อฟอร์มพังแบบเงียบ ๆ ลูกค้าที่สนใจก็แค่ไปที่อื่น

การติดต่อสอบถามหายไปที่ไหน

• อีเมลจากเว็บไซต์ที่ไม่ได้ยืนยันตัวตน โดยค่าเริ่มต้น WordPress ส่งอีเมลผ่านฟังก์ชันอีเมล ของเซิร์ฟเวอร์โฮสติ้งเอง ซึ่งมักไม่ได้ยืนยันตัวตนสำหรับโดเมนของคุณ บริการที่รับอีเมลจึงอาจจัดมันเป็นสแปม หรือปฏิเสธ ให้ส่งการแจ้งเตือนผ่าน SMTP ที่ยืนยันตัวตน หรือบริการส่งอีเมลแบบ transactional โดยตั้งค่า SPF, DKIM และ DMARC ให้โดเมนของคุณ
• กล่องอีเมลของคนคนเดียว วันหยุดและการลาออก กลืนลีดหายไป ให้ส่งการติดต่อสอบถาม เข้ากล่องอีเมลที่ใช้ร่วมกัน หรือเข้า CRM
• การเชื่อมต่อที่พังแบบเงียบ ๆ การเชื่อมต่อกับ CRM อาจพังเมื่อ API key หมดอายุ หรือช่องข้อมูลถูกเปลี่ยนชื่อ ตัดสินใจไว้ว่าจะเกิดอะไรขึ้น เมื่อระบบอีกฝั่งล่ม บทความ อธิบายการเชื่อมต่อระบบกับเว็บไซต์ อธิบายทางเลือกต่าง ๆ
• ไม่มีสำเนาสำรอง เก็บทุกรายการไว้บนเว็บไซต์ด้วย เพื่อให้การติดต่อสอบถามยังอยู่ แม้อีเมลหรือการเชื่อมต่อจะล้มเหลว

ทดสอบแบบที่ลูกค้าใช้จริง

• ส่งการติดต่อสอบถามทดสอบจากทุกฟอร์ม บนมือถือ ในทุกภาษา ทุกเดือน
• ทำซ้ำหลังเปลี่ยนปลั๊กอิน ธีม โฮสติ้ง หรืออีเมลทุกครั้ง
• ยืนยันว่ามันเข้ากล่องอีเมลหรือ CRM ไม่ใช่กล่องสแปม และทุกช่องข้อมูลครบถ้วน
• เทียบรายการที่เก็บไว้ key event ใน analytics และสิ่งที่ทีมได้รับ
• ตรวจรายการที่ถูกบล็อก และกล่องสแปม เพื่อหาข้อความของจริง
• ตรวจว่าระยะเวลาตอบกลับที่สัญญาไว้บนฟอร์ม ทำได้จริง

เช็กลิสต์ดูแลเว็บไซต์ ของเรา วางการตรวจเหล่านี้ไว้ คู่กับการอัปเดตและการสำรองข้อมูล

ขั้นต่อไป

ลองกรอกฟอร์มติดต่อของคุณเองบนมือถือ แบบที่ลูกค้าทำ นับช่องที่ตัดออกได้ จดช่องที่ขัดกับคีย์บอร์ด อ่านข้อความรอบปุ่ม แล้วตรวจว่าการทดสอบ ไปถึงกล่องอีเมลของคุณหรือไม่ และเร็วแค่ไหน

ฟอร์มอยู่ตรงจุดที่กลยุทธ์ UX ข้อความ การพัฒนา และการติดตาม มาบรรจบกัน การแก้ฟอร์มอย่างถูกต้องจึงแตะทั้งห้าเรื่อง เมื่อเรา ออกแบบและสร้างเว็บไซต์ ฟอร์มติดต่อจะถูกวางแผน ตามสิ่งที่การตอบกลับครั้งแรกต้องใช้ ถ้าอยากได้มุมมองจากภายนอกก่อน ขอ ตรวจสอบเว็บไซต์ฟรี ซึ่งรวมการดูว่าผู้เข้าชมติดต่อคุณได้ง่ายแค่ไหน