สร้างและแสดงฟอร์มป๊อปอัป

Published: 16 กรกฎาคม 2569 · Last updated: 21 กรกฎาคม 2569 · By Marcus Biel

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

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

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

การสร้างป๊อปอัป

เปิด “ฟอร์มสมัครสมาชิก” คลิก “สร้างฟอร์ม” แล้วเลือก “ป๊อปอัป” ป้อนชื่อภายในที่ชัดเจน แล้วไปต่อยังเครื่องมือสร้าง

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

ใช้ชื่อที่อธิบายข้อเสนอหรือตำแหน่งการแสดง เช่น “ป๊อปอัปส่วนลดหน้าแรก”, “ป๊อปอัปลงทะเบียนสัมมนาออนไลน์” หรือ “ป๊อปอัปดาวน์โหลดคู่มือ” ชื่อภายในจะไม่แสดงแก่ผู้เข้าชมโดยอัตโนมัติ

การเลือกเทมเพลตป๊อปอัป

ป๊อปอัปมีฟอร์มเปล่า ฟอร์มมาตรฐาน และเทมเพลตที่ออกแบบไว้ 4 แบบ:

• ส่วนลดแบบเรียบง่าย
• คู่มือโทนอุ่น
• สัมมนาออนไลน์โทนเข้ม
• ชุมชนโทนนุ่มนวล

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

การออกแบบป๊อปอัป

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

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

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

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

การกำหนดค่าการทำงานของป๊อปอัป

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

ความล่าช้าในการแสดงผล

“ความล่าช้าในการแสดงผล” กำหนดจำนวนวินาทีที่ Maildroppa รอก่อนแสดงป๊อปอัปบนหน้าเว็บไซต์ที่ฝังป๊อปอัปไว้

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

เลือกความล่าช้าตามลักษณะของหน้าเว็บ ความล่าช้าสั้น ๆ อาจเหมาะกับหน้าแคมเปญที่มีเป้าหมายเฉพาะ ขณะที่ความล่าช้าที่นานกว่าสามารถทำให้บทความรู้สึกถูกรบกวนน้อยลง

ความถี่ในการแสดงผล

“ความถี่ในการแสดงผล” ควบคุมระยะเวลาที่ต้องผ่านไปก่อนที่ป๊อปอัปจะแสดงต่อผู้เข้าชมคนเดิมได้อีกครั้ง ตัวเลือกที่มี ได้แก่:

• ทุกครั้ง
• ชั่วโมงละครั้ง
• วันละครั้ง
• สัปดาห์ละครั้ง
• เดือนละครั้ง

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

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

การใช้เจตนาออกจากหน้า

เปิดใช้ “ป๊อปอัปเมื่อมีเจตนาออกจากหน้า” เมื่อคุณต้องการให้ป๊อปอัปเปิดหลังจากผู้เข้าชมเลื่อนตัวชี้ออกนอกพื้นที่หน้าเว็บ ซึ่งบ่งชี้ว่าพวกเขาอาจกำลังจะออกจากหน้า

เมื่อเปิดใช้เจตนาออกจากหน้า ป๊อปอัปจะรอพฤติกรรมนี้แทนการแสดงตามความล่าช้าปกติ ความถี่ในการแสดงผลที่เลือกไว้ยังคงป้องกันไม่ให้ป๊อปอัปแสดงซ้ำเร็วเกินไป

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

การเปิดป๊อปอัปด้วยตนเองจากองค์ประกอบบนหน้า

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

กำหนดค่าและติดตั้งทริกเกอร์การคลิกด้วยตนเองดังนี้:

1. เปิดป๊อปอัปในเครื่องมือสร้างฟอร์มสมัครสมาชิก
2. คลิกบล็อกฟอร์มสมัครสมาชิกบนพื้นที่ทำงาน แล้วเปิด “การตั้งค่า” ทางด้านขวา
3. ขยาย “การตั้งค่าวิดเจ็ต” แล้วเปิดใช้ “เปิดป๊อปอัปเมื่อลูกค้าคลิกองค์ประกอบบนหน้าเว็บ”
4. คลิก “บันทึกการเปลี่ยนแปลง”
5. กลับไปที่ภาพรวมฟอร์มสมัครสมาชิก แล้วเปิดใช้งานป๊อปอัปหากยังไม่ได้เปิดใช้งาน
6. คลิก “แสดงข้อมูลโค้ด” ในแถวของป๊อปอัปนั้น

กล่องโต้ตอบจะมีค่าที่จำเป็น 2 ค่าเพื่อใช้บนเว็บไซต์ของคุณ:

1. คัดลอกโค้ดทั้งหมดจากแท็บ “JavaScript” แล้วเพิ่มลงในหน้าเว็บไซต์ที่ต้องการให้ป๊อปอัปพร้อมใช้งาน
2. ใต้โค้ด ให้คัดลอก ID ที่แสดงอยู่ใต้ข้อความ “เพิ่ม ID นี้ลงในองค์ประกอบที่ต้องการใช้เพื่อเรียกป๊อปอัปด้วยตนเอง”
3. เพิ่มค่าดังกล่าวโดยตรงลงในแอตทริบิวต์ id ของปุ่ม รูปภาพ หรือลิงก์ที่ต้องการให้เปิดป๊อปอัป

ID จะอยู่ในรูปแบบนี้:

maildroppa-popup-btn-[form-id]

ตัวอย่างเช่น:

<button id="maildroppa-popup-btn-[form-id]">รับคู่มือ</button>

JavaScript จะโหลดป๊อปอัป ส่วน ID จะเชื่อมต่อป๊อปอัปกับองค์ประกอบบนหน้าที่เลือกไว้ ทั้งสองอย่างต้องอยู่บนหน้าเดียวกันที่เผยแพร่แล้ว เมื่อผู้เข้าชมคลิกองค์ประกอบที่มี ID ตรงกันทุกประการ สคริปต์ Maildroppa จะเปิดป๊อปอัป

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

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

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

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

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

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

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

คลิก “บันทึกการเปลี่ยนแปลง” เมื่อป๊อปอัปพร้อมใช้งาน จากนั้นกลับไปที่ภาพรวมฟอร์มสมัครสมาชิก

การเปิดใช้งานและฝังป๊อปอัปโดยอัตโนมัติ

เปิดใช้งานป๊อปอัปจากเมนูการดำเนินการสามจุด หากยังไม่ได้เปิดใช้งาน จากนั้นคลิก “แสดงข้อมูลโค้ด” แล้วคัดลอกโค้ดทั้งหมดจากแท็บ “JavaScript”

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

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

ส่วนนี้ใช้เมื่อป๊อปอัปควรเปิดโดยอัตโนมัติตามความล่าช้าในการแสดงผลหรือพฤติกรรมเจตนาออกจากหน้า สำหรับปุ่ม รูปภาพ หรือลิงก์ที่เปิดป๊อปอัปเมื่อคลิก ให้ทำตาม

สำหรับคำแนะนำทั่วไปเกี่ยวกับการฝัง ดูที่ การสร้างและฝังฟอร์มแบบฝัง

การทดสอบป๊อปอัปบนเว็บไซต์ของคุณ

ทดสอบป๊อปอัปบนหน้าเว็บไซต์จริงหลังจากเพิ่มโค้ดแล้ว:

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

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

การอัปเดตหรือปิดใช้งานป๊อปอัป

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

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