สร้างฟอร์มใน wordpress contact form 7 + addons

contact form 7

สร้างฟอร์มใน wordpress contact form 7 + addons

ในบทความนี้เราจะพูดถึงการสร้างแบบฟอร์มโดยใช้ contact form 7 + addons เมื่อเราติดตั้ง wordpress เรียบร้อยและเข้าใช้งาน ปลั๊กอินหนึ่งที่จะติดมากับ wordpress อยู่แล้วก็คือ contact form 7 จะอยู่ที่แถบเครื่องมือดังภาพด้านล่าง

หรือหากใครที่ยังไม่มี contact form 7 ก็ให้เข้าไปโหลดและติดตั้งกันได้ที่นี่ https://wordpress.org/plugins/contact-form-7/ เมื่อกด Add New จะมีชื่อฟอร์มให้กำหนด และมีตัวเลือกเทมเพลทของแบบฟอร์มให้เลือก และมีตัวอย่างฟอร์มที่ถูกสร้างไว้ให้แล้ว

หน้าตาของฟอร์มตัวอย่างจะออกมาเป็นดังภาพด้านล่าง

แต่จะเห็นได้ว่า contact form 7 ไม่ได้พ่วงตัวตกแต่งฟอร์มเอาไว้ให้เราเลย เพราะฉะนั้นในย่อหน้าถัดจากนี้เราจะมาพูดถึง addons หรือปลั๊กอินเสริมเพื่อใช้ทำให้ฟอร์มนี้สามารถตกแต่งได้ตามต้องการของเรา พร้อมฟังกชั่นเสริมอีกมากมาย เรามาดูกัน

1.  ปลั๊กอินเสริมตัวแรกของ Contact form 7 คือตัว Contact Form 7 Style ใช้สำหรับตกแต่งฟอร์มของเรา เป็นตัวช่วยสำหรับใส่ css ให้กับฟอร์มเรา หน้าตาการใช้งานของมันจะเป็นดังภาพด้านล่าง ใช้งานอย่างง่ายดาย โดยมีตัวอย่างฟอร์มที่เราแต่งให้ดูอยู่ที่ด้านซ้ายของหน้าจอ และสามารถทำให้รูปแบบฟอร์มแต่ละฟอร์มแตกต่างกันได้ด้วย เพราะมีตัวเลือกเพื่อตกแต่งฟอร์มแต่ละฟอร์มโดยเฉพาะ เริ่ดไปเลย

2.ตัวที่สอง Contact Form 7 – Conditional Fields ใช้สำหรับสร้างเงื่อนไขที่ซับซ้อนเชื่อมโยงกันภายในฟอร์ม เช่นต้องการให้เลือกตัวเลือกที่ 1 แล้วถึงจะแสดงเงื่อนไขถัดไป หรือคลิกเลือกตัวเลือกที่ 2 แล้วให้แสดงฟอร์มอีก 2 ช่องเพิ่มมา

2.ตัวที่สอง Contact Form 7 – Conditional Fields ใช้สำหรับสร้างเงื่อนไขที่ซับซ้อนเชื่อมโยงกันภายในฟอร์ม เช่นต้องการให้เลือกตัวเลือกที่ 1 แล้วถึงจะแสดงเงื่อนไขถัดไป หรือคลิกเลือกตัวเลือกที่ 2 แล้วให้แสดงฟอร์มอีก 2 ช่องเพิ่มมา

วิธีใช้คร่าวๆก็คือใส่ short code นี้ครอบไประหว่างฟิลด์ที่ต้องการให้เป็นเงื่อนไข

[group group-1]

[/group]

เช่น

[group group-1]

[textarea your-message]

[/group]

และไปตั้งค่าเงื่อนไขให้กับฟิลด์ต่างๆที่แถบเมนูด้านบน

จะมีปุ่มให้เลือก +Add new conditional rule ให้คลิกและสร้างเงื่อนไขของคุณได้เลย

หากอยากมีฟอร์มสวย ๆ ที่ใช้กับเว็บไซต์สวย ๆ ของคุณ ให้เราช่วยสร้างและดูแลเว็บไซต์ให้ได้ ติดต่อเลย Line : @sits39 (มี@)

Write a Comment

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