วิธีเพิ่มแบบฟอร์มหรือป๊อปอัปในบล็อก systeme.io ของคุณ

บทความนี้จะสอนวิธีตั้งค่าแบบฟอร์มในหน้า (Inline form) หรือแบบฟอร์มป๊อปอัปบนบล็อก systeme.io ของคุณ

ขั้นตอนที่ 1: สร้างแบบฟอร์มในหน้า (Inline form)

ก่อนอื่น คุณต้องสร้างแบบฟอร์มติดต่อจากเซลส์ฟันเนลของคุณ

โดยไปที่ Funnelek ของคุณ คลิกที่ สร้างขั้นตอน (Create step) (1) เพื่อสร้างขั้นตอนใหม่ จากนั้นเลือก แบบฟอร์มในหน้า (Inline Form) (2)

เลือกเทมเพลตที่คุณต้องการโดยคลิกที่ เลือก (Select) (3)

ไปที่ตัวแก้ไขหน้าแบบฟอร์มโดยคลิกที่ แก้ไขหน้า (Edit Page) เพื่อปรับแต่งแบบฟอร์มของคุณ (4)

แบบฟอร์มติดต่อต้องมีช่องข้อมูล (Form input) อย่างน้อยหนึ่งช่อง แต่คุณสามารถเพิ่มฟิลด์แบบฟอร์มได้มากเท่าที่ต้องการ

เลือกองค์ประกอบ ช่องข้อมูล (Form input) จากนั้นคลิกที่ ไอคอนการตั้งค่า (รูปเฟือง) เพื่อกำหนดค่าฟิลด์ เลือก ประเภทข้อมูล (Input type) ที่คุณต้องการรวบรวมจากรายการดรอปดาวน์

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

อย่าลืมคลิกที่ บันทึกการเปลี่ยนแปลง (Save changes) ก่อนออกจากตัวแก้ไขแบบฟอร์มในหน้าของคุณ

ขั้นตอนที่ 2: สร้างแบบฟอร์มป๊อปอัป

ไปที่ Funnelek ของคุณ คลิกที่ เพิ่มขั้นตอน (Add step) (5) เพื่อสร้างขั้นตอนใหม่ จากนั้นเลือก แบบฟอร์มป๊อปอัป (Popup Form) (6)

เลือกเทมเพลตที่คุณต้องการโดยคลิกที่ เลือก (Select) (7)

ไปที่ตัวแก้ไขหน้าแบบฟอร์มโดยคลิกที่ แก้ไขหน้า (Edit Page) (8) เพื่อปรับแต่งแบบฟอร์มป๊อปอัปของคุณ

แบบฟอร์มติดต่อต้องมีช่องข้อมูลอย่างน้อยหนึ่งช่อง คุณจึงสามารถใส่ฟิลด์แบบฟอร์มได้มากเท่าที่ต้องการ

จำเป็นต้องตั้งค่าปุ่มที่จะบันทึกการทำงานที่จะทำกับรายการที่รวบรวมได้ด้วย

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

อย่าลืมคลิกที่ บันทึกการเปลี่ยนแปลง (Save changes) ก่อนออกจากตัวแก้ไขแบบฟอร์มป๊อปอัปของคุณ

ขั้นตอนที่ 3: ตั้งค่าแบบฟอร์มในหน้า (Inline form) บนบล็อกของคุณ

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

ขั้นตอนแรกคือกลับไปที่ การกำหนดค่าขั้นตอน (Step configuration) ของ แบบฟอร์มในหน้า (Inline form) ของคุณ จากนั้นคลิกที่ สคริปต์ (Script)

ป๊อปอัปจะแสดงลิงก์ไปยังหน้าแบบฟอร์มในหน้าของคุณ คลิก คัดลอกลิงก์ไปยังคลิปบอร์ด (Copy link to clipboard)

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

ถัดไป ลากและวางองค์ประกอบ Raw HTML ลงบนหน้าบล็อกของคุณ

สุดท้าย คุณต้องไปที่การตั้งค่าขององค์ประกอบ Raw HTML ของคุณ

คลิกที่ แก้ไขโค้ด (Edit code) และวางสคริปต์ของลิงก์ที่ได้รับจากหน้า แบบฟอร์มในหน้า (Inline Form) ลงไป

ตรวจสอบให้แน่ใจว่าได้คลิก บันทึก (Save) เพื่อบันทึกโค้ด HTML คลิก บันทึกการเปลี่ยนแปลง (Save changes) ในตัวแก้ไข และบันทึกก่อนออกจากหน้าบล็อกของคุณ

หากเราดูตัวอย่างหน้าบล็อกหลังจากนั้น เราจะเห็นการแสดงผลของแบบฟอร์มดังที่แสดงด้านล่าง:

ขั้นตอนที่ 4: ตั้งค่าแบบฟอร์มป๊อปอัปบนบล็อกของคุณ:

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

โดยอัตโนมัติ (Automatically): ป๊อปอัปจะปรากฏขึ้นหลังจากผ่านช่วงเวลาที่กำหนด
เมื่อคลิก (On Click): ป๊อปอัปจะปรากฏขึ้นเมื่อผู้ใช้คลิกลิงก์หรือข้อความที่ระบุ

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

หากต้องการแสดงแบบฟอร์มป๊อปอัปหลังจากคลิกที่ข้อความ ก่อนอื่นคุณต้องกลับไปที่ขั้นตอน การกำหนดค่า (Configuration) ของแบบฟอร์มป๊อปอัปของคุณ จากนั้นคุณต้องคลิกที่ สร้างลิงก์ (Create a Link)

ป๊อปอัปจะปรากฏขึ้นเพื่อให้คุณคลิกลิงก์ที่เปิดป๊อปอัปจากข้อความ:

คุณต้องเลือกเนื้อหาของข้อความที่จะสามารถคลิกได้
คุณต้องคลิกที่ คัดลอกลิงก์ไปยังคลิปบอร์ด (Copy link to clipboard)

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

จากนั้น คุณต้องตั้งค่าองค์ประกอบ Raw HTML บนหน้าบล็อกของคุณ

สุดท้าย คุณต้องไปที่การตั้งค่าขององค์ประกอบ Raw HTML ของคุณ

คลิกที่ แก้ไขโค้ด (Edit code) และวาง สคริปต์ ของลิงก์ที่เปิดหน้าแบบฟอร์มป๊อปอัปลงไป จากนั้นคลิกที่ บันทึก (Save)

ตรวจสอบให้แน่ใจว่าได้คลิก บันทึกการเปลี่ยนแปลง (Save changes) ในตัวแก้ไขเพื่อบันทึกหน้าเว็บของคุณก่อนออกจากหน้าบล็อก

หากเราดูตัวอย่างหน้าบล็อกหลังจากนั้น เราจะสังเกตเห็นการแสดงผลของแบบฟอร์มป๊อปอัปเมื่อเราคลิกที่ข้อความ Click here to open the popup ดังที่แสดงด้านล่าง: