วิธีสร้างแบบฟอร์มหลายขั้นตอนใน WordPress

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

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

ทำไมต้องออกแบบแบบฟอร์มหลายขั้นตอน?

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

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

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

วิธีสร้างแบบฟอร์ม WordPress แบบหลายหน้าด้วย WP Fluent Form

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

ก่อนอื่น คุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน WP Fluent Form ใน WordPress สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับ วิธีการติดตั้งปลั๊กอิน WordPress

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

ฉันคิดว่าคุณกำลังจะสร้างแบบฟอร์มหลายขั้นตอนสามขั้นตอนเหมือนที่ฉันทำอยู่ตอนนี้ ขั้นตอนแรกสำหรับข้อมูลส่วนบุคคลของผู้ใช้ หน้าที่สองสำหรับข้อมูลการศึกษาของผู้ใช้ และหน้าที่สามจะครอบคลุมงานอดิเรกของผู้ใช้ ตอนนี้ฉันจะแสดงให้คุณเห็นถึงวิธีการทำให้มันเกิดขึ้นโดยใช้ WP Fluent Form

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

คุณยังสามารถสร้างแบบฟอร์มได้ด้วยตนเองตั้งแต่เริ่มต้น ในการสร้างแบบฟอร์มตั้งแต่เริ่มต้น เพียงไปที่ Fluent Form -> Create a Blank Form จะแสดงกล่องโต้ตอบที่มีรูปแบบเริ่มต้นสามรูปแบบและตัวเลือกที่กำหนดเองสำหรับการสร้างแบบฟอร์มใหม่

สำหรับรายละเอียดเพิ่มเติม โปรดดู วิธีสร้างแบบฟอร์มใหม่ด้วย Fluent Forms

เมื่อคุณคลิกที่ Create a Blank Form เสร็จแล้ว คุณจะพบกับ form builder ที่จะปรากฏขึ้นพร้อมกับตัวเลือกการกำหนดค่า จากแถบด้านข้างขวา คุณจะพบช่องป้อนข้อมูลแบบลากและวางได้เพื่อเพิ่มคุณลักษณะเฉพาะลงในแบบฟอร์มของคุณ

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

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

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

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

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

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

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

เขียนชื่อหัวข้อสำหรับแต่ละขั้นตอน ตัวอย่างเช่น เขียน ข้อมูลส่วนบุคคล ในช่องป้อนข้อมูล ขั้นตอนที่ 1 เขียน Education ในช่องป้อนข้อมูล ขั้นตอนที่ 2 เป็นต้น ตอนนี้ดูที่ส่วนแสดงตัวอย่าง

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

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

มาดูที่ภาพหน้าจอของช่องป้อนข้อมูลแต่ละช่องกัน สำหรับมหาวิทยาลัยและวิทยาลัย คุณต้องปรับแต่งป้ายกำกับก่อน

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

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

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

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

คุณต้องวางมันไว้เหนือปุ่ม ส่งแบบฟอร์ม

ด้วยวิธีนี้ คุณสามารถใช้พื้นที่ ข้อความธรรมดา อีกสองพื้นที่เพื่อให้มุมมองทั้งหมดในส่วนที่สามของแบบฟอร์ม จากนั้นปรับแต่ง 'Element Label' ด้วยข้อความของ Hobby One

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

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

ตอนนี้ลองดูตัวอย่างขั้นสูงสุด

นี่คือวิธีสร้าง แบบฟอร์มหลายขั้นตอน โดยใช้ WP Fluent Form สิ่งนี้ค่อนข้างสะดวกและมีประสิทธิภาพในการทำงานกับ WP Fluent Form เนื่องจากให้คุณสมบัติที่สะดวกที่สุดในการสร้างแบบฟอร์มหลายขั้นตอนเพื่อตอบสนองวัตถุประสงค์เฉพาะของคุณ

เพื่อใช้ฟังก์ชันนี้และสร้างฟอร์มหลายขั้นตอนที่สวยงาม กะทัดรัด และใช้งานง่าย ดาวน์โหลด WP Fluent Form Pro Add-on ทันที!

สมัครรับข้อมูลจากช่อง YouTube ของเราเพื่อรับคำแนะนำและเคล็ดลับเกี่ยวกับ WordPress ติดตามเราบน Twitter และ Facebook