สร้างและฝังแบบฟอร์มสมัครสมาชิก

เผยแพร่เมื่อ: 16 กรกฎาคม 2569 · อัปเดตล่าสุด: 12 กันยายน 2569 · เขียนโดย Marcus Biel

แบบฟอร์มฝังจะแสดงอยู่โดยตรงภายในหน้าเว็บไซต์ที่มีอยู่แล้ว โดยยังคงเป็นส่วนหนึ่งของเนื้อหาโดยรอบ แทนที่จะแสดงอยู่ด้านบนเนื้อหา

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

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

การสร้างแบบฟอร์มฝัง

เปิด “Signup Forms” คลิก “Create Form” แล้วเลือก “Embedded Form” ตั้งชื่อภายในที่ชัดเจนและดำเนินการต่อไปยังเครื่องมือสร้าง

คุณยังสามารถแก้ไขแบบฟอร์มที่มีอยู่ได้โดยคลิกชื่อแบบฟอร์มใน ภาพรวม Signup Forms

ชื่อภายในจะไม่แสดงต่อผู้เข้าชมโดยอัตโนมัติ ตั้งชื่อแบบฟอร์มตามตำแหน่งหรือวัตถุประสงค์ เช่น “Homepage Newsletter”, “Blog Footer” หรือ “Product Updates”

การเลือกดีไซน์เริ่มต้น

แบบฟอร์มฝังมีแบบฟอร์มเปล่า แบบฟอร์มมาตรฐาน และเทมเพลตดีไซน์อีกสี่แบบ ได้แก่:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

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

การออกแบบแบบฟอร์มฝัง

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

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

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

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

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

การเชื่อมต่อลำดับขั้นตอนการสมัครสมาชิก

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

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

การดูตัวอย่างและบันทึก

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

คลิก “Save changes” เพื่อบันทึกเวอร์ชันปัจจุบัน กลับไปที่ภาพรวม Signup Forms เมื่อพร้อมฝังแบบฟอร์ม

การเปิดใช้งานแบบฟอร์ม

แบบฟอร์มฝังต้องเปิดใช้งานก่อนจึงจะใช้โค้ดสาธารณะได้

หากแบบฟอร์มไม่ได้เปิดใช้งาน ให้เปิดเมนูการทำงานสามจุดในภาพรวม Signup Forms แล้วเลือก “Activate” แบบฟอร์มที่เปิดใช้งานจะแสดงการทำงาน “Show Code Snippet”

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

การคัดลอกโค้ด JavaScript

คลิก “Show Code Snippet” แล้วเปิดแท็บ “JavaScript” Maildroppa จะจัดเตรียมสคริปต์สั้น ๆ ที่มี ID เฉพาะของแบบฟอร์ม

โค้ดมีโครงสร้างดังนี้:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

คัดลอกโค้ดทั้งหมดโดยไม่เปลี่ยนที่อยู่สคริปต์หรือ ID ของแบบฟอร์ม

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

การเพิ่มแบบฟอร์มลงในเว็บไซต์

วางสคริปต์ลงในตำแหน่งของหน้าที่ต้องการให้แบบฟอร์มฝังแสดง

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

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

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

การใช้แท็บ HTML

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

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

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

การทดสอบแบบฟอร์มฝัง

เผยแพร่หรือดูตัวอย่างหน้าเว็บไซต์ที่มีโค้ด จากนั้นทดสอบแบบฟอร์มเช่นเดียวกับผู้เข้าชม:

1. ตรวจสอบว่าแบบฟอร์มแสดงในตำแหน่งที่ถูกต้อง
2. ดูหน้าเว็บบนหน้าจอทั้งขนาดกว้างและแคบ
3. กรอกข้อมูลในทุกช่องที่จำเป็น
4. ส่งแบบฟอร์มและตรวจสอบการตอบกลับ
5. เปิดอีเมล Double Opt-in
6. ยืนยันที่อยู่และตรวจสอบการตอบกลับขั้นสุดท้าย
7. ตรวจสอบว่าผู้สมัครสมาชิกและแท็กที่ซ่อนอยู่ (ถ้ามี) แสดงใน Maildroppa อย่างถูกต้อง

หากแบบฟอร์มกว้างกว่าคอนเทนเนอร์ของเว็บไซต์ ให้ปรับความกว้างแบบฟอร์ม เลย์เอาต์คอลัมน์ ระยะห่างภายใน หรือการตั้งค่าการเรียงซ้อนบนมือถือในเครื่องมือสร้าง หลีกเลี่ยงการแก้ปัญหาเลย์เอาต์ด้วยการเปลี่ยนโค้ด Maildroppa ที่สร้างขึ้น

การอัปเดตแบบฟอร์มฝัง

เปิดแบบฟอร์มเดิมใน Maildroppa ทำการเปลี่ยนแปลง ดูตัวอย่าง แล้วคลิก “Save changes” ข้อมูลโค้ด JavaScript บนเว็บไซต์จะยังคงใช้ ID เดิมของแบบฟอร์ม และโหลดการตั้งค่าสาธารณะที่บันทึกไว้

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