วิธีสร้างแบบฟอร์มการลงทะเบียนและเข้าสู่ระบบ WordPress แบบกำหนดเอง

วิธีสร้างแบบฟอร์ม WordPress แบบกำหนดเอง

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

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

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

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

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

ลองใช้ปลั๊กอินเพื่อสร้างแบบฟอร์ม WordPress แบบกำหนดเอง

การสร้างการลงทะเบียนแบบกำหนดเอง

ติดตั้งและเปิดใช้งาน ProfilePress บนเว็บไซต์ WordPress ของคุณ

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

ขั้นตอนที่ 2: ตอนนี้ไปที่ ProfilePress > แบบฟอร์มและโปรไฟล์ > เพิ่มใหม่ > การลงทะเบียน

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

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

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

ขั้นตอนที่ 5: สร้างแบบฟอร์มโดยใช้ฟิลด์กำหนดเองต่อไปนี้:

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

ขั้นตอนที่ 6: คลิกที่ปุ่ม Live Preview เพื่อดูตัวอย่างแบบฟอร์มก่อนบันทึกการเปลี่ยนแปลง

ขั้นตอนที่ 7: ถัดไป เลื่อนลงไปที่การ ตั้งค่าแบบฟอร์ม คุณสามารถเปลี่ยนป้ายกำกับปุ่ม สี บรรทัดแรก และการตั้งค่าการลงทะเบียนได้ที่นี่

ขั้นตอนที่ 8: เมื่อคุณพร้อมแล้ว ให้กดปุ่ม บันทึกการเปลี่ยนแปลง แค่นั้นแหละ. แบบฟอร์มลงทะเบียนใหม่ของคุณพร้อมแล้ว

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

ต่อไป มีสองสิ่งที่คุณต้องทำ:

1. คุณจะต้องเผยแพร่แบบฟอร์มในหน้าหรือโพสต์ใหม่
2. จากนั้นสร้างแบบฟอร์มใหม่ แบบฟอร์มการลงทะเบียน WordPress เริ่มต้นของคุณ

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

การสร้างแบบฟอร์มการเข้าสู่ระบบแบบกำหนดเอง

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

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

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

นี่คือรายการของฟิลด์แบบกำหนดเองที่คุณสามารถใช้ในแบบฟอร์มการเข้าสู่ระบบของคุณ:

• เข้าสู่ระบบผู้ใช้ (ชื่อผู้ใช้หรืออีเมล)
• รหัสผ่าน
• จำการเข้าสู่ระบบ
• HTML ที่กำหนดเอง
• reCAPTCHA

อย่างอื่นเหมือนกันทุกประการกับแบบฟอร์มการลงทะเบียน

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

วิธีเผยแพร่แบบฟอร์มใหม่บนเว็บไซต์ของคุณ

นี้เป็นเรื่องง่าย

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

ถัดไป สร้างหน้าใหม่โดยไปที่ Pages > Add New แล้ววางรหัสย่อ ตั้งชื่อเพจแล้วกด เผยแพร่

แบบฟอร์มของคุณเผยแพร่บนเว็บไซต์ของคุณแล้ว

นี่คือลักษณะของแบบฟอร์มการลงทะเบียนบนเว็บไซต์สาธิตของเรา:

และนี่คือลักษณะของแบบฟอร์มการเข้าสู่ระบบ:

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

วิธีตั้งค่าฟอร์มใหม่เป็นฟอร์ม WordPress เริ่มต้นของคุณ

ไปที่ ProfilePress > การตั้งค่า > Global

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

และในตัวเลือกหน้าการ ลงทะเบียน ให้ เลือกหน้าใหม่ ที่คุณได้เผยแพร่แบบฟอร์มการลงทะเบียน

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

วิธีสร้างแบบฟอร์มที่กำหนดเองสำหรับ WooCommerce

หลายท่านที่อ่านบทความนี้สงสัยว่าคุณสามารถเปลี่ยนรูปแบบเว็บไซต์ WooCommerce ได้หรือไม่? แน่นอนว่าคุณสามารถ โดยใช้วิธีดังนี้:

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

ถัดไป คุณต้องเปิดใช้งานการรวม WooCommerce โดยไปที่ ProfilePress > Addon > WooCommerce และ สลับปุ่มบน

การสร้างแบบฟอร์มการลงทะเบียนและเข้าสู่ระบบแบบกำหนดเองสำหรับ WooCommerce

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

เมื่อแบบฟอร์มพร้อมแล้ว ให้เผยแพร่ในสองหน้าแยกกัน เราได้กล่าวถึงในส่วน "วิธีการเผยแพร่แบบฟอร์มใหม่บนไซต์ของคุณ"

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

การเพิ่มฟิลด์ที่กำหนดเองลงในแบบฟอร์มการชำระเงินของ WooCommerce

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

แบบฟอร์มการเข้าสู่ระบบการชำระเงินแบบกำหนดเอง

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

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

เสร็จแล้ว? ตอนนี้ไปที่ ProfilePress > การตั้งค่า > ทั่วไป > WooCommerce

คุณควรเห็นตัวเลือกที่เรียกว่า Checkout Login Form มันมาพร้อมกับเมนูแบบเลื่อนลง เลือกแบบฟอร์มใหม่ จากเมนูแบบเลื่อนลงและบันทึกการตั้งค่าของคุณ

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

แบบฟอร์มลงทะเบียนชำระเงิน

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

หากต้องการเพิ่มฟิลด์ที่กำหนดเองลงในแบบฟอร์มการลงทะเบียนการชำระเงิน คุณต้องสร้างฟิลด์ที่กำหนดเองก่อน

ไปที่ WooCommerce > การตั้งค่า > บัญชีและความเป็นส่วนตัว และเปิดใช้งานตัวเลือก “ อนุญาตให้ลูกค้าสร้างบัญชีระหว่างการชำระเงิน ”

จากนั้นไปที่ ProfilePress > Settings > Custom Fields > Add New ในหน้าถัดไป ให้ป้อนป้ายกำกับ คีย์ คำอธิบาย และประเภทฟิลด์ บันทึกการตั้งค่าของคุณ

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

ไปที่ ProfilePress > Settings > General > WooCommerce > Checkout Registration Fields และช่องที่คุณเพิ่งสร้างขึ้นควรปรากฏเป็นเมนูแบบเลื่อนลง เลือกพวกเขา

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

กำหนดการลงทะเบียนบัญชีของฉัน & แบบฟอร์มการเข้าสู่ระบบ

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

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

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

ด้านล่างนี้คือตัวอย่างลักษณะที่ปรากฏในหน้าบัญชีของฉันของ WooCommerce

แค่นั้นแหละ ด้วยเหตุนี้ เราจึงได้มาถึงจุดสิ้นสุดของบทช่วยสอนนี้

ความคิดสุดท้าย

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

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