สร้างและจัดตำแหน่งฟอร์มแบบสไลด์เข้า

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

Slide-in คือฟอร์มสมัครรับข้อมูลขนาดกะทัดรัดที่ปรากฏบริเวณขอบหรือในตำแหน่งที่เลือกของหน้าต่างเบราว์เซอร์

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

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

การสร้าง Slide-in

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

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

ใช้ชื่อ เช่น “Blog Newsletter Slide-in”, “New Product Reminder” หรือ “Summer Coupon Slide-in” ชื่อภายในช่วยให้คุณจัดการฟอร์ม และจะไม่แสดงต่อผู้เยี่ยมชมโดยอัตโนมัติ

การเลือกเทมเพลต Slide-in

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

• การเตือนแบบเรียบง่าย
• ข้อเสนอสีเข้ม
• คูปองโทนอบอุ่น
• โน้ตแบบมินิมอล

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

การออกแบบ Slide-in

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

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

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

โดยทั่วไปเลย์เอาต์แบบคอลัมน์เดียวจะชัดเจนที่สุด หากใช้หลายคอลัมน์ ควรตรวจสอบอย่างละเอียดว่าคอลัมน์เหล่านั้นจัดเรียงซ้อนกันอย่างไรบนหน้าจอแคบ

การเลือกตำแหน่งบนหน้าจอ

เลือกบล็อก signup form แล้วเปิด “Widget Settings” ตัวเลือกตำแหน่งมีกริดขนาดสามคูณสาม:

• ซ้ายบน ตรงกลางด้านบน หรือขวาบน
• ซ้ายตรงกลาง ตรงกลาง หรือขวาตรงกลาง
• ซ้ายล่าง ตรงกลางด้านล่าง หรือขวาล่าง

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

บนหน้าจอมือถือที่แคบ Maildroppa จะปรับตำแหน่งให้ง่ายขึ้นเพื่อให้ Slide-in พอดีกับความกว้างที่มีอยู่ ตำแหน่งด้านบนจะยังคงอยู่ด้านบน ส่วนตำแหน่งอื่นจะแสดงจากขอบด้านล่าง ควรทดสอบผลลัพธ์บนหน้าจอขนาดเล็กเสมอ แทนการอาศัยเฉพาะตำแหน่งบนเดสก์ท็อป

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

“Display Delay” กำหนดจำนวนวินาทีที่ Maildroppa จะรอก่อนแสดง Slide-in บนหน้าเว็บไซต์ที่ฝังฟอร์มไว้

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

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

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

“Display Frequency” ควบคุมระยะเวลาหลังจากนั้นที่ Slide-in จะสามารถแสดงต่อผู้เยี่ยมชมคนเดิมได้อีกครั้ง คุณสามารถเลือก:

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

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

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

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

ตรวจสอบ signup flow ที่กำหนดไว้ในส่วนหัวของเครื่องมือสร้าง โดยจะกำหนดการตอบกลับหลังส่งฟอร์ม อีเมล Double Opt-in และสิ่งที่จะเกิดขึ้นหลังการยืนยัน

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

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

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

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

การเปิดใช้งานและการฝัง Slide-in

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

เพิ่มสคริปต์นี้ลงในทุกหน้าเว็บไซต์ที่ต้องการให้ Slide-in พร้อมใช้งาน ต่างจาก Embedded Form ตำแหน่งที่แน่นอนของสคริปต์ภายในหน้าเว็บไม่ได้เป็นตัวกำหนดตำแหน่งที่มองเห็นของ Slide-in ตำแหน่งที่เลือกใน Widget Settings จะเป็นตัวควบคุมตำแหน่งที่แสดง

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

สำหรับคำแนะนำทั่วไปเกี่ยวกับการวางโค้ด โปรดดู การสร้างและฝัง Embedded Form

การทดสอบ Slide-in บนเว็บไซต์ของคุณ

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

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

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

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

เปิด Slide-in เดิมใน Maildroppa ทำการเปลี่ยนแปลง ดูตัวอย่าง แล้วคลิก “Save changes” JavaScript snippet จะยังคงใช้ form ID เดิม และโหลดการตั้งค่าที่บันทึกไว้

เลือก “Deactivate” ในภาพรวม Signup Forms เมื่อควรนำ Slide-in ออกจากการใช้งานโดยไม่ลบออก และควรลบสคริปต์ออกจากเว็บไซต์ด้วย หากคุณไม่ต้องการใช้งาน Slide-in บนเว็บไซต์นั้นอีกต่อไป