การใช้ Form Plugin โดยการติดตั้ง Popup Plugin

หลังจากติดตั้งจะปรากฎเมนู Popup Maker ใน Dashboard Menu

ให้นักศึกษาเลือก All Popups จะปรากฎหน้าจอดังแสดง

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

ในช่อง Popup Title ให้กรอกข้อความ “Please submit the form for hiring me” (จะพิมพ์เป็นภาษาไทยก็ได้) จากนั้นกดปุ่ม “Publish”

โดยหลังจากกดปุ่ม “Publish” แล้วตรงช่อง Publish จะปรากฎ “Popup Enabled” เช็คถูกเป็นสีเขียว จะแสดงดังต่อไปนี้

จากปฏิบ้ติการที่ 8 เรามีปุ่ม “Hire Me” อยู่สองตำแหน่งและเมื่อเราคลิ๊กปุ่มจะแสดงฟอร์มให้กรอกคำขอต่าง ๆ ที่ต้องการ

ขั้นตอนต่อไปคือการทำ Trigger โดยเมื่อใช้เมาส์คลิ๊กที่ปุ่ม “Hire Me” จะแสดงฟอร์มให้กรอกข้อมูล ซึ่งจะเริ่มจากเลือกรายละเอียดต่าง ๆ ในช่อง Popup Settings ดังแสดง

จากรูปให้เลือก “Extra CSS Selectors” โดยกดปุ่มสีฟ้าด้านขวาโดยจะแสดงรายการต่าง ๆ ให้เลือก “Link Exact Match” จะปรากฎข้อความในช่อง “Extra CSS Selectors” -> “exact_url” ให้แก้ไขเป็น “#hireme” และกดปุ่ม “Add” เป็นการเสร็จการเพิ่มฟอร์ม

ให้คลิ๊กที่ปุ่ม “Add New Trigger” จะปรากฎหน้าต่าง ให้คลิ๊กช่อง “Prevent popup from showing to visitor again using a cookie?” เนื่องจากเราไม่ต้องการให้ผู้ใช้เมื่อกรอกฟอร์มไปแล้วกรอกข้อมูลซ้ำไปเรื่อย ๆ อีก จากนั้นกดปุ่ม “Add” ดังแสดงใน Step 1

Step 1

Step 2

จากรูปใน Step 2 ให้กรอก “.hireme” ลงในช่อง Extra CSS Selectores จากนั้นกดปุ่ม “Update”

อย่าลืมกดปุ่ม “Update” ในส่วน Publish

หลังจากทำขั้นตอนต่าง ๆ แล้วจะปรากฎข้อมูลต่าง ๆ ในช่อง Popup Settings ดังแสดงดังนี้

ขั้นตอนต่อไปคือการกำหนด CSS คลาสให้กับปุ่มให้เป็น “.hireme” โดยกลับไปแก้ไขหน้า About เลือกปุ่มและกำหนดค่าใน Advance -> CSS Classes ให้เป็น “hireme” (ไม่ต้องใส่จุดนำหน้า)

คลิกปุ่ม “Edit Button”

กรอก “hireme” ในช่อง CSSClasses

คลิกปุ่ม “Edit Button”

กรอก “hireme” ในช่อง CSSClasses

บันทึกหน้าเว็บและทดสอบ

ในข้อตอนต่อไปเราจะใช้ Popup Theme ในการแสดงผล ใน Popup Maker ให้เลือก “Popup Themes” จะแสดงหน้าจอดังต่อไปนี้

เราจะใช้ “Enterprise Bule” Theme หรือใช้ Theme อื่นได้โดยการคลิ๊กไปที่ “Edit” เพื่อดูตัวอย่างรูปแบบ Theme ที่ชอบ เช่น Edit ของ Enterprise Bule ดังแสดง

โดยเราสามารถกำหนดค่าต่าง ๆ ของ Overlay, Container, Title, Content หรือ Close โดยสามารถกำหนดค่าต่าง ๆ เช่น font color และอื่น ๆ ได้จากหน้าต่างนี้ ในตอนนี้ใช้ค่า Default ก่อน

กลังไปเลือก Popup Maker -> All Popups ดังแสดง

กดปุ่ม Edit ของ hireme_01 จากนั้นในส่วนของ Popup Setings เลือกแทป Display -> Appearance ใน Popup Theme ให้เลือก “Enterprise Bule” ดังรูป จากนั้นกดปุ่ม “Update”

ทดสอบกดปุ่ม “Hire Me”

ติดตั้ง Contact Form

ในการเก็บข้อมูลผู้จ้างได้แก่ชื่อและข้อมูลการติดต่อเฉพาะ Popup Plugin ไม่สามารถทำจะเป็นต้องติดตั้ง Plugin ที่ทำหน้าที่เก็บข้อมูลต่าง ๆ โดยเราจะติดตั้ง Contact Form 7 Plugin

ดังนั้นทำการติดตั้ง Contact Form 7

หลังจากติดตั้ง Plugin เสร็จแล้วเราจะเพิ่ม Contact Form 7 ไปยัง Popup เริ่มจากเลือก Contact -> Contact Forms

คัดลอก Shortcode

กลับไปในส่วนของ Popup Maker -> All Popups จากนั้นทำการแก้ไข hireme_01 Popup คลิ๊ก Edit

วาง Shortcode ที่คัดลอกมาในส่วนของ Content ดังแสดง จากนั้นทำการบันทึก (กดปุ่ม Update) และทดสอบ

การกำหนดลิ้งให้กับปุ่ม

หากกดปุ่ม “About Me” หน้าเว็บจะเลื่อนไปยังส่วนของ About Me สามารถทำได้โดยเริ่มจากกำหนด CSS ID ให้กับ Container ทำการเปิด About เว็บจากนั้นแก้ไขส่วนของ About Me ดังแสดงในรูป