8 ตัวอย่างแบบฟอร์มการติดต่อที่สวยงาม + วิธีเพิ่มลงในเว็บไซต์ของคุณ
เผยแพร่แล้ว: 2019-12-10แบบฟอร์มการติดต่อที่อ่อนน้อมถ่อมตน - ในรูปแบบใดรูปแบบหนึ่งหรืออีกรูปแบบหนึ่งคือการทำงานของเว็บไซต์เกือบทุกแห่งบนอินเทอร์เน็ต แต่ในขณะที่ทุกเว็บไซต์มีแบบฟอร์มการติดต่อ การออกแบบแบบฟอร์มการติดต่อนั้นไม่ได้ถูกสร้างขึ้นมาเท่ากันทั้งหมด
เพื่อช่วยคุณสร้างแบบฟอร์มการติดต่อที่จะบรรลุเป้าหมายทางธุรกิจ เราได้รวบรวมตัวอย่างแบบฟอร์มการติดต่อแปดแบบจากเว็บไซต์จริง สำหรับแต่ละตัวอย่าง เราจะบอกคุณอย่างชัดเจนว่าอะไรดี เพื่อให้คุณรู้ว่าจะรวมอะไรไว้ในแบบฟอร์มของคุณ
จากนั้น เพื่อทำให้โพสต์นี้ดูดีและนำไปใช้ได้จริง เราจะแสดงวิธีสร้างแบบฟอร์มติดต่อที่ยืดหยุ่นของคุณเองโดยไม่ต้องมีความรู้พิเศษใดๆ
ห้าเคล็ดลับในการออกแบบแบบฟอร์มการติดต่อของคุณ
ก่อนที่เราจะพูดถึงตัวอย่างแบบฟอร์มการติดต่อจริง เรามาทำความรู้จักกับรูปแบบการติดต่อกันก่อนดีกว่า ทางเบี่ยงนี้จะกำหนดขั้นตอนเมื่อเราพูดถึงสิ่งที่ตัวอย่างแบบฟอร์มการติดต่อแต่ละรายการทำได้ดีในหัวข้อถัดไป
คุณมักจะมีแบบฟอร์มการติดต่อเพราะคุณต้องการให้คนอื่นกรอก แล้วคุณจะให้คนใช้มากขึ้นได้อย่างไร? ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดบางส่วน…
1. สื่อสารให้ชัดเจนว่าแบบฟอร์มของคุณมีไว้เพื่ออะไร
หากคุณมีธุรกิจหรือเว็บไซต์ที่วุ่นวาย คุณอาจมีแบบฟอร์มติดต่อหลายแบบสำหรับการใช้งานที่แตกต่างกัน ตัวอย่างเช่น อาจเป็น:
แบบฟอร์มสอบถามข้อมูลการขาย
แบบฟอร์มการสนับสนุนลูกค้า
แบบฟอร์มสั่งซื้อออนไลน์
แบบคำร้องขอโทรกลับ
เป็นต้น
มีวิธีพื้นฐานสองวิธีในการจัดการเรื่องนี้ และคุณจะเห็นทั้งสองอย่างในตัวอย่างแบบฟอร์มการติดต่อในชีวิตจริงด้านล่าง:
แบบฟอร์มแยก. สร้างแบบฟอร์มแยกกันสำหรับแต่ละกรณีการใช้งาน และเพิ่มข้อความที่ทำให้ชัดเจนว่าแต่ละแบบฟอร์มทำอะไร
ช่องแบบเลื่อนลง เพิ่มฟิลด์ดรอปดาวน์ที่ด้านบนสุดของแบบฟอร์มของคุณซึ่งแสดงรายการกรณีการใช้งานต่างๆ และกำหนดเส้นทางแบบฟอร์มการติดต่อของคุณไปยังจุดที่ถูกต้องโดยอัตโนมัติ
ไม่ว่าจะด้วยวิธีใด ใช้ป้ายกำกับแบบฟอร์มและข้อความรอบข้างเพื่อให้วัตถุประสงค์ของแบบฟอร์มการติดต่อแต่ละรายการชัดเจนต่อผู้เยี่ยมชมของคุณ
2. จำกัดความยาวของแบบฟอร์มสำหรับการแปลงที่มากขึ้น (แต่อย่าลืมเรื่องคุณภาพ)
ทุกสิ่งเท่าเทียมกัน ข้อมูลดูเหมือนจะแนะนำว่าแบบฟอร์มการติดต่อที่ยาวขึ้นหมายถึงการส่งน้อยลง
ตัวอย่างเช่น HubSpot วิเคราะห์หน้า Landing Page กว่า 40,000 หน้า และสังเกตเห็นความสัมพันธ์ที่ชัดเจนระหว่างอัตราการแปลงและจำนวนฟิลด์ในแบบฟอร์ม
อัตราการแปลงสูงสุดอยู่ที่ประมาณสามฟิลด์ อัตราการแปลงจะลดลงเรื่อยๆ จนถึงช่องฟอร์มแปดช่อง ก่อนที่จะแบน:
แหล่งที่มา
ในบันทึกย่อเพิ่มเติม Marketo ทดสอบสามรูปแบบที่มีผลลัพธ์คล้ายกับ HubSpot:
5 ช่อง — อัตราการแปลง 13.4%
7 ช่อง — อัตราการแปลง 12.0%
9 ช่อง — อัตราการแปลง 10.0%
แน่นอน การได้รับแบบฟอร์มการติดต่อเพิ่มเติมอาจไม่ใช่เป้าหมายที่แท้จริงของคุณ ดังนั้นจึงไม่ง่ายเหมือนการลดจำนวนฟิลด์ในแบบฟอร์มของคุณให้เหลือน้อยที่สุด
ตัวอย่างเช่น แม้ว่าคุณอาจได้รับการส่งมากขึ้นโดยการลดฟิลด์ การส่งเหล่านั้นอาจไม่มีคุณภาพสูงเนื่องจากอุปสรรคในการส่งเข้าต่ำมาก
โดยรวม กฎทั่วไปที่ดีคือการกำจัด ฟิลด์ที่ไม่จำเป็น ทั้งหมด แต่อย่าลบฟิลด์ที่รวบรวมข้อมูลที่สำคัญเพียงเพื่อทำให้แบบฟอร์มของคุณสั้นลง โดยเฉพาะอย่างยิ่งหากข้อมูลนั้นใช้เพื่อรับรองโอกาสในการขายของคุณ
3. ใช้ไมโครสำเนาอัจฉริยะเพื่ออธิบายสาขาต่างๆ
หากแบบฟอร์มติดต่อของคุณมีมากกว่าช่อง "ชื่อ อีเมล ข้อความ" มาตรฐาน คุณอาจเสี่ยงต่อการสับสนของผู้เยี่ยมชม
ตัวอย่างเช่น หากคุณมีฟิลด์ "งบประมาณ" อาจไม่ชัดเจนว่างบประมาณนั้นมีไว้เพื่ออะไร สำหรับโครงการทั้งหมดหรือไม่ มันเป็นเพียงส่วนที่เฉพาะเจาะจงหรือไม่?
เพื่อหลีกเลี่ยงความสับสน คุณสามารถเพิ่ม “ไมโครสำเนา” ลงในแบบฟอร์มการติดต่อของคุณ
โดยทั่วไปแล้ว Microcopy จะเป็นข้อความอธิบายขนาดเล็กที่มาพร้อมกับช่องแบบฟอร์มเพื่อให้ชัดเจนยิ่งขึ้น ตัวอย่างเช่น ดูช่องปริมาณการชำระเงินด้านล่าง (คุณจะเห็นตัวอย่างนี้ในภายหลังด้วย):
4. ทดลองกับรูปแบบต่างๆ
เมื่อคนส่วนใหญ่นึกถึงแบบฟอร์มติดต่อ พวกเขาจะนึกภาพแบบฟอร์มฝังตัวพื้นฐานแบบเดียวกับที่คุณเห็นในเว็บไซต์ส่วนใหญ่ แต่ถ้าคุณต้องการให้ผู้คนติดต่อกับคุณได้ง่าย บางครั้งการทดสอบด้วยวิธีการแสดงผลต่างๆ เช่น ป๊อปอัปหรือแถบการแจ้งเตือนอาจต้องเสียค่าใช้จ่าย
ตัวอย่างเช่น การมีปุ่มผู้ติดต่อแบบลอยอยู่ที่ด้านข้างของไซต์ของคุณอาจเหมาะสำหรับแบบฟอร์มติดต่อฝ่ายสนับสนุน ช่วยให้ผู้ใช้ติดต่อคุณได้ง่ายมากทันทีที่พบปัญหา โดยไม่ต้องให้ผู้ใช้ค้นหาหน้าติดต่อของคุณ:
5. บอกขั้นตอนต่อไปและตั้งความคาดหวัง
การออกแบบแบบฟอร์มติดต่อของคุณยังไม่เสร็จสิ้นเมื่อมีคนกดส่ง!
เพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้น คุณต้องการบอกผู้คนอย่างชัดเจนว่าจะเกิดอะไรขึ้นต่อไปและต้องใช้เวลานานแค่ไหน ตัวอย่างเช่น…
คุณตอบคำถามทั้งหมดหรือเพียงบางส่วน?
นานแค่ไหนที่คุณจะตอบสนอง?
คุณจะตอบกลับทางอีเมลหรือวิธีอื่นหรือไม่?
หากคุณกำหนดความคาดหวังไว้อย่างชัดเจน ผู้เข้าชมจะไม่สงสัยว่าเกิดอะไรขึ้นและแบบฟอร์มของคุณยังใช้ได้อยู่หรือไม่
ตัวอย่างแบบฟอร์มการติดต่อที่ยอดเยี่ยมจากเว็บไซต์จริง
เมื่อคุณได้ทราบแนวทางปฏิบัติที่ดีที่สุดแล้ว มาดูการออกแบบแบบฟอร์มการติดต่อในโลกแห่งความเป็นจริงเพื่อสร้างแรงบันดาลใจให้กับตัวคุณเองและแสดงแนวทางปฏิบัติที่ดีที่สุดเหล่านี้แก่คุณ
1. ลาย
แบบฟอร์มติดต่อฝ่ายขายของ Stripe เป็นตัวอย่างที่ดีในการที่บางครั้งการรวบรวมข้อมูลเพิ่มเติมเล็กน้อยสามารถทำให้แบบฟอร์มการติดต่อของคุณสร้างลีดที่มีคุณสมบัติเหมาะสมมากขึ้น (แม้ว่าจะอาจลดอัตราการแปลงพื้นฐานลงเล็กน้อยก็ตาม)
นอกเหนือจากฟิลด์ข้อมูลมาตรฐานแล้ว Stripe ยังเพิ่มฟิลด์ปริมาณการชำระเงินเพื่อให้เข้าใจถึงคุณภาพที่เป็นไปได้ของลีดแต่ละรายได้ดีขึ้น
นอกจากนั้น ยังมีตัวเลือกการออกแบบที่ดีอื่นๆ อีก ได้แก่:
หลักฐานทางสังคม — โลโก้เหล่านั้นที่ด้านข้างเพิ่มหลักฐานทางสังคมด้วยการแสดงธุรกิจที่ประสบความสำเร็จทั้งหมดที่ใช้ Stripe
Microcopy — คำว่า “ปริมาณการชำระเงิน” อาจทำให้สับสนเล็กน้อย ดังนั้น Stripe จึงเพิ่มไมโครสำเนาที่เป็นประโยชน์ซึ่งอธิบายวิธีการกรอกข้อมูลในฟิลด์
วัตถุประสงค์ — Stripe ทำให้ชัดเจนว่าแบบฟอร์มนี้ใช้สำหรับสอบถามข้อมูลการขายเท่านั้น การทำเช่นนี้ทำให้แน่ใจว่าพวกเขาจะไม่ได้รับคนที่พยายามใช้มันเพื่อการสนับสนุนหรือการใช้งานอื่นๆ ที่ไม่ใช่เพื่อการขาย
2. Getsitecontrol
ที่ Getsitecontrol เราจัดการการออกแบบแบบฟอร์มการติดต่อแตกต่างกันเล็กน้อย
แทนที่จะสร้างหน้า "ติดต่อเรา" โดยเฉพาะที่ผู้เข้าชมต้องเข้าไป เราเพียงแค่ใส่ลิงก์ ติดต่อเรา ซึ่งจะเปิดป๊อปอัปที่นั่นแล้ว ไม่จำเป็นต้องโหลดหน้าซ้ำ
นี้สะดวกจริงๆสำหรับผู้คนเพราะพวกเขาสามารถ...
เข้าถึงแบบฟอร์มการติดต่อของเราจากหน้าใดก็ได้บนเว็บไซต์
ส่งข้อความโดยไม่ขัดจังหวะสิ่งที่พวกเขากำลังทำอยู่ (เช่น การอ่านโพสต์ในบล็อกนี้!)
แบบฟอร์มการติดต่อ Getsitecontrol นั้นง่ายและง่ายต่อการกรอก นอกจากนี้ ยังแจ้งขั้นตอนถัดไปอย่างชัดเจนหลังจากที่มีคนส่งแบบฟอร์ม พร้อมด้วย CTA เพื่อดูบล็อก Getsitecontrol
3. Kinsta
Kinsta มีหน้า "ติดต่อเรา" เพียงหน้าเดียวที่จะแนะนำผู้ใช้ไปยังแบบฟอร์มการติดต่อที่เหมาะสมโดยอัตโนมัติโดยไม่ต้องโหลดหน้าซ้ำ
Kinsta แสดงรายการคำขอติดต่อยอดนิยมห้ารายการ:
ราคาหรือแผน
คุณสมบัติหรือข้อมูลทางเทคนิค
ขอย้ายหรือคำถามที่เกี่ยวข้อง
โพสต์ของแขก โพสต์ที่ได้รับการสนับสนุน หรือคำขอลิงก์ย้อนกลับ
อะไรก็ได้
เมื่อผู้ใช้เลือกเป้าหมาย Kinsta จะแสดงแบบฟอร์มการติดต่อส่วนบุคคลหรือข้อความ
สิ่งนี้ทำให้ Kinsta สามารถรวบรวมข้อมูลที่ต้องการได้อย่างแม่นยำ โดยไม่ต้องเป็นภาระแก่ผู้เยี่ยมชมด้วยฟิลด์ที่ไม่เกี่ยวข้อง
ตัวอย่างเช่น ในแบบฟอร์มการติดต่อ ราคาหรือแผน Kinsta ได้เพิ่มฟิลด์พิเศษเพื่อทำความเข้าใจจำนวนเว็บไซต์และผู้เยี่ยมชมที่บุคคลนั้นต้องการโฮสต์ แต่ฟิลด์เหล่านั้นจะไม่ปรากฏในแบบฟอร์ม "อย่างอื่น"
Kinsta ยังกำหนดความคาดหวังที่ชัดเจนไว้ที่ด้านบน - "เราจะติดต่อกลับภายในหนึ่งวันทำการ"
4. การคัดกรองทางเลือก
Choice Screening มีแบบฟอร์มการติดต่อ ยาว เมื่อมองแวบแรก คุณอาจคิดว่าจะทำลายอัตราการแปลงของแบบฟอร์ม และนั่นเป็น เรื่อง จริง — การคัดกรองทางเลือกจะได้รับการส่งแบบฟอร์มน้อยกว่าอย่างไม่ต้องสงสัยด้วยแบบฟอร์มที่สั้นกว่า
แต่มาพูดถึงสาเหตุที่บางครั้งก็โอเค และทำไมนี่ถึงเป็นตัวอย่างแบบฟอร์มการติดต่อที่ดี
Choice Screening ดำเนินการในพื้นที่เฉพาะทางธุรกิจกับธุรกิจ พวกเขากำลังพยายามหาลีดที่ผ่านการรับรองซึ่งจะกลายเป็นลูกค้าระยะยาว ไม่ใช่แค่การส่งแบบฟอร์มติดต่อ
ด้วยรายการบริการโดยละเอียดและช่องทำเครื่องหมายมากมาย แบบฟอร์มนี้จะช่วยคัดแยกผู้ที่ยังไม่แน่ใจว่าพวกเขาต้องการอะไร และจะยอมให้ผ่านเฉพาะลีดที่ผ่านการรับรองซึ่งมีโอกาสสูงที่จะเปลี่ยนเป็นลูกค้า
คุณสามารถพูดได้ว่า Choice Screening กำลัง คัดกรอง ผู้มีโอกาสเป็นลูกค้าด้วยแบบฟอร์มการติดต่อนี้!
5. Joel Klettke / การเขียนข้อความโฆษณาแบบสบาย ๆ ทางธุรกิจ
Joel เป็นนักเขียนคำโฆษณามืออาชีพ ดังนั้นคุณสามารถเดิมพันได้ว่าการออกแบบแบบฟอร์มการติดต่อของเขาและการคัดลอกจะต้องตรงประเด็น
แบบฟอร์มของ Joel นั้นเรียบง่าย โดยมีฟิลด์มาตรฐานและฟิลด์ที่มีคุณสมบัติพิเศษบางอย่างสำหรับงบประมาณของบุคคล มันคือทุกสิ่งทุกอย่างที่เกิดขึ้น ถัด จากแบบฟอร์มที่ทำให้เป็นตัวอย่างแบบฟอร์มการติดต่อที่ดี
ในข้อความนั้น Joel ทำงานได้อย่างยอดเยี่ยมในการกำหนดความคาดหวังและคัดเลือกผู้มุ่งหวังของเขา นอกจากนี้ เขายังตั้งใจขับไล่ลูกค้าที่มีงบประมาณต่ำด้วยการพูดคุยเกี่ยวกับอัตราขั้นต่ำของเขา แม้ว่า Joel สามารถลบการกล่าวถึงเหล่านี้ออกเพื่อให้ได้อัตราการแปลงล่วงหน้าที่สูงขึ้น การทำเช่นนี้จะนำไปสู่เปอร์เซ็นต์ที่ต่ำกว่าของลีดที่เข้าเงื่อนไข และจบลงด้วยการเสียเวลาของ Joel
6. นีล พาเทล
Neil Patel เป็นเจ้าของเว็บไซต์การตลาดดิจิทัลที่ได้รับความนิยมมากที่สุดในโลก คุณจึงมั่นใจได้ว่าเขาได้รับการส่งแบบฟอร์มการติดต่อจำนวนมาก
เพื่อช่วยกำหนดเส้นทางการส่งไปยังจุดที่ถูกต้อง Neil ได้รวมเมนูแบบเลื่อนลง "ฉันต้องการพูดคุยเกี่ยวกับ" ซึ่งผู้คนสามารถเลือกจากตัวเลือกที่ตั้งไว้ล่วงหน้าได้ นอกจากนี้ เขายังใช้ไมโครสำเนาในกล่องตัวยึดตำแหน่งเพื่อขอร้องให้ผู้คนใช้ข้อความที่สั้นและตรงประเด็น
สิ่งนี้เรียบง่าย - แต่บางครั้งก็เรียบง่าย สิ่งที่คุณต้องการในการออกแบบแบบฟอร์มการติดต่อของคุณ
7. โฟกัสแล็บ
ตกลง อันนี้สนุก แปลก และไม่สามารถใช้ได้กับทุกธุรกิจอย่างแน่นอน แต่ถ้าคุณอยู่ในพื้นที่สร้างสรรค์ (ซึ่งก็คือ Focus Lab) การสร้างรูปแบบการติดต่อที่แปลกใหม่เช่นนี้สามารถแสดงให้เห็นว่าคุณสามารถคิดนอกกรอบได้
แทนที่จะสร้างรูปแบบดั้งเดิม Focus Lab ใช้แนวทางสไตล์ Mad Libs มากกว่าที่ผู้เยี่ยมชมจะป้อนข้อมูลในย่อหน้าที่มีอยู่ ด้วยการใช้แนวทางนี้ Focus Lab ยังสามารถรวบรวมข้อมูลเพิ่มเติม (เช่น เป้าหมายและงบประมาณ) โดยไม่ต้องดูโอ่อ่าอย่างที่การออกแบบแบบฟอร์มการติดต่อแบบดั้งเดิมอาจมี
8. CAMICB
CAMICB ย่อมาจาก Community Association Managers International Certification Board เสนอการรับรองสำหรับสมาคมชุมชนในสหรัฐอเมริกา
สิ่งที่น่าสังเกตเกี่ยวกับแบบฟอร์มการติดต่อ CAMICB คือใช้ป๊อปอัปแบบผสม/แนวทางหน้า "ติดต่อเรา" เมื่อผู้ใช้เข้าสู่หน้า ติดต่อเรา เว็บไซต์ CAMICB จะเปิดแบบฟอร์มการติดต่อแบบป๊อปอัปอย่างง่ายซึ่งผู้เยี่ยมชมสามารถส่งข้อความได้
มีเพียงสามฟิลด์ CAMICB รักษารูปแบบให้สั้นและตรงประเด็น จากนั้น วิธีป๊อปอัปจะสร้างอินเทอร์เฟซที่ปราศจากสิ่งรบกวน โดยที่โฟกัสจะอยู่ที่แบบฟอร์มทั้งหมด
สิ่งนี้ทำให้การส่งคำถามเกี่ยวกับเรื่องนี้เป็นไปอย่างราบรื่นที่สุด
และเพื่อให้ ง่ายขึ้น CAMICB ยังแสดงแบบฟอร์มการติดต่อแบบเลื่อนขึ้นที่ผู้ใช้สามารถเข้าถึงได้ในส่วนท้าย:
วิธีสร้างการออกแบบแบบฟอร์มการติดต่อที่ปรับแต่งได้ของคุณเอง
หลังจากเรียกดูตัวอย่างแบบฟอร์มการติดต่อทั้งแปดตัวอย่างแล้ว คุณอาจมีแนวคิดมากมายเกี่ยวกับวิธีนำหลักการเหล่านี้ไปใช้กับการออกแบบแบบฟอร์มการติดต่อของคุณเอง
หากคุณต้องการเริ่มต้น [Getsitecontrol](/feedback-popup/ สามารถให้คุณพร้อมใช้งานได้ทันที
แตกต่างจากโซลูชันแบบฟอร์มการติดต่อส่วนใหญ่ Getsitecontrol ให้คุณเลือกตำแหน่งที่ยืดหยุ่นได้สี่ตำแหน่งและเทมเพลตหลายสิบแบบสำหรับแบบฟอร์มของคุณ คุณสามารถสร้างป๊อปอัปแบบดั้งเดิมเช่นเดียวกับที่คุณเห็นด้วย CAMICB และเว็บไซต์ Getsitecontrol หรือคุณสามารถเขย่าสิ่งต่างๆ ด้วยสไลด์อิน แถบการแจ้งเตือน ปุ่ม และอื่นๆ
คุณจะสามารถเพิ่มฟิลด์ได้มาก (หรือน้อย) ตามที่คุณต้องการเพื่อรับการส่งที่ผ่านการรับรอง และคุณยังสามารถแทรกไมโครสำเนาเพื่อช่วยให้ผู้เยี่ยมชมกรอกแบบฟอร์มของคุณได้
ลงทะเบียนกับ Getsitecontrol วันนี้ และคุณสามารถมีแบบฟอร์มติดต่อที่ใช้งานได้ในเวลาเพียงไม่กี่นาที
Colin Newcomer เป็นนักเขียนอิสระที่มีพื้นฐานด้าน SEO และการตลาดแบบพันธมิตร เขาช่วยให้ลูกค้าเพิ่มการมองเห็นเว็บโดยการเขียนเกี่ยวกับ WordPress และการตลาดดิจิทัลเป็นหลัก
คุณกำลังอ่านบล็อก Getsitecontrol ที่ซึ่งผู้เชี่ยวชาญด้านการตลาดจะแบ่งปันกลวิธีที่ได้รับการพิสูจน์แล้วว่าช่วยให้ธุรกิจออนไลน์ของคุณเติบโต บทความนี้เป็นส่วนหนึ่งของส่วนการมีส่วนร่วมกับลูกค้า
สมัครรับจดหมายข่าวของเรา → ภาพประกอบหลักโดย Icons8