8 ตัวอย่างแบบฟอร์มการติดต่อที่สวยงาม + วิธีเพิ่มลงในเว็บไซต์ของคุณ

ห้าเคล็ดลับในการออกแบบแบบฟอร์มการติดต่อของคุณ

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

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

1. สื่อสารให้ชัดเจนว่าแบบฟอร์มของคุณมีไว้เพื่ออะไร

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

• แบบฟอร์มสอบถามข้อมูลการขาย

• แบบฟอร์มการสนับสนุนลูกค้า

• แบบฟอร์มสั่งซื้อออนไลน์

• แบบคำร้องขอโทรกลับ

• เป็นต้น

มีวิธีพื้นฐานสองวิธีในการจัดการเรื่องนี้ และคุณจะเห็นทั้งสองอย่างในตัวอย่างแบบฟอร์มการติดต่อในชีวิตจริงด้านล่าง:

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

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

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

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 แสดงรายการคำขอติดต่อยอดนิยมห้ารายการ:

1. ราคาหรือแผน

2. คุณสมบัติหรือข้อมูลทางเทคนิค

3. ขอย้ายหรือคำถามที่เกี่ยวข้อง

4. โพสต์ของแขก โพสต์ที่ได้รับการสนับสนุน หรือคำขอลิงก์ย้อนกลับ

5. อะไรก็ได้

เมื่อผู้ใช้เลือกเป้าหมาย 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 วันนี้ และคุณสามารถมีแบบฟอร์มติดต่อที่ใช้งานได้ในเวลาเพียงไม่กี่นาที