WordPress
สร้างฟอร์ม WordPress สำหรับเก็บข้อมูล ด้วยปลั๊กอิน Contact Form7
ปลั๊กอิน Contact Form7 คือ ปลั๊กอินสร้างฟอร์มแบบง่ายๆ สำหรับเก็บข้อมูลลูกค้า บนเว็บ WordPress เป็นปลั๊กอินฟรี และเป็นปลั๊กอินยอดนิยมบน WordPress ครับ
วิธีการสร้างแบบฟอร์ม WordPress มีดังนี้
1) ดาวน์โหลดและติดตั้งปลั๊กอิน Contact Form7 ลงบนเว็บให้เรียบร้อย
2) ประเภทของ field เก็บข้อมูลประเภทต่างๆ
field คือ ประเภทของข้อมูลที่เราต้องการเก็บ เช่น ตัวอักษร ตัวเลข อีเมล เป็นต้น หมายความว่า ถ้าเราสร้าง field เก็บอีเมล ในช่องของ field นั้น เราจะบังคับให้ผู้ใช้งานกรอกได้เฉพาะข้อมูลที่เป็น email เท่านั้น หากกรอกข้อมูลผิดประเภทระบบจะมีการแจ้งเตือนให้เรากรอกใหม่
ก่อนที่เราจะทำการสร้างแบบฟอร์มเก็บข้อมูล เราต้องมาทำความรู้จักประเภทของ field กันก่อน ว่าในตัวของปลั๊กอิน Contact form7 มี field ให้เราเลือกใช้เก็บข้อมูลแบบไหนได้บ้าง เราจะได้เลือกบาง field มาใช้แสดงบนแบบฟอร์มของเราได้ถูกต้องครับ
ตัวอย่างหน้าตาของ field แต่ละประเภท
3) ขั้นตอนการสร้างฟอร์ม
ไปที่เมนูหลังบ้าน > คลิก Contact > คลิก Add new
ตั้งชื่อฟอร์มที่คุณต้องการลงไป และลบข้อมูลฟอร์มของเก่าทิ้งไปให้หมด
เลือก field ที่คุณต้องการสร้าง ในตัวอย่างนี้สมมุติ ผมจะข้อเก็บข้อมูล 3 อย่าง
- ชื่อ-นามสกุล
- อีเมล
- เบอร์โทร
- ข้อความ
สร้าง field เก็บชื่อ-นามสกุล
เลือก field text เพื่อใช้สำหรับ เก็บข้อมูลที่เป็น ตัวอักษร เช่น ชื่อ-นามสกุล ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag
Field type: Required field
ถ้าคุณเลือกติ๊กถูกช่องนี้ หมายถึง บังคับให้ทุกคนต้องกรอกข้อมูลช่องนี้ หากไม่ได้กรอกข้อมูลช่องนี้ จะไม่สามารถกดส่งได้
Name: ชื่อของของ Field ที่คุณเลือกเก็บข้อมูล ตั้งชื่ออะไรก็ได้ ให้สื่อความหมายสิ่งที่คุณต้องการเก็บข้อมูล
สร้าง field เก็บอีเมล
เลือก field email เพื่อใช้สำหรับ เก็บข้อมูลประเภทอีเมล ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag
สร้าง field เก็บเบอร์โทรศัพท์
เลือก field tel เพื่อใช้สำหรับ เก็บข้อมูลประเภทเบอร์โทรศัพท์ เขาจะบังคับให้กรอกข้อมูลได้เฉพาะที่เป็นตัวเลข หากกรอกข้อมูลเป็นตัวอักษร ระบบจะแจ้งเตือนส่งไม่ได้ จากนั้น ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag
สร้าง field เก็บข้อความ
เลือก field text area เป็นเป็นกล่องเก็บข้อความ เพื่อใช้สำหรับ เก็บข้อมูลที่ลูกค้าต้องการเขียนถึงเรา จากนั้น ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag
สร้างปุ่ม ส่งข้อความ
เลือก field submit ตั้งค่า label (ชื่อของปุ่ม) เช่น เขียนว่า ส่งข้อความ
เมื่อเราเลือก field ต่างลงไปเรียบร้อบแล้ว เราจะได้ข้อมูลเรียงกันแบบนี้ครับ
จากนั้นให้เราตั้งชื่อหัวข้อแต่ละ field ที่เราเลือกมาใช้ให้เรียบร้อยครับ เขียนตามตัวอย่างนี้เลยก็ได้ครับ
4) ตั้งค่าผู้รับเมล
จากนั้นให้เรามาตั้งค่าการรับเมล หากมีคนกรอกข้อมูลลงบนแบบฟอร์มของเรา จะให้เข้าไปเก็บที่ email ของใคร
To: ใส่อีเมลผู้รับ (คือเมลของเราเอง)
From: หัวอีเมล จุดนี้ระบบบังคับว่าต้องใส่เป็น @ชื่อโดเมน ของเว็บนั้นที่เราสร้าง
Additional headers: ให้ใส่ชื่อ field อีเมลที่เราสร้าง
Message body: นำชื่อ field ต่างๆ ที่เราสร้างไว้มาเรียงกัน พร้อมกับเขียนหัวข้อ field นั้นด้วย
เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้วอย่าลืมคลิก save ให้เรียบร้อยครับ
5) การนำแบบฟอร์ม ไปใช้งานบนหน้าเว็บ
กลับไปที่เมนู Contact Form ทุกแบบฟอร์มที่เราสร้าง เขาจะมี shortcode ของฟอร์มนั้นๆ มาด้วย ให้คุณคัดลอก shortcode ของฟอร์มนั้นๆ ไปวางยังหน้า page หรือ post บนเว็บที่ต้องการได้เลยครับ
ตัวอย่างการวาง shortcode ลงบนหน้าเว็บ
ตัวอย่าง Contact form ที่เราสร้างดูจากหน้าบ้านของ page หรือ post นั้น
หากคุณต้องการปรับขนาดกว้างยาวช่องของแบบฟอร์ม เราต้องปรับแต่งผ่าน page builder ที่คุณเลือกใช้อยู่แทนครับ
จากนั้นคุณลองกรอกข้อมูล และกดส่งข้อความดูครับ ถ้ามีขึ้นข้อความว่า thank you แบบรูปด้านล่างๆ ถือการส่งข้อมูลเสร็จเรียบร้อยแล้ว
จากนั้นให้ไปลองเปิดอีเมลของเราดูว่ามีเมลส่งเข้ามามั้ย ถ้าเราตั้งค่าถูกต้องเราจะได้รับอีเมลหน้าตาประมาณนี้ครับ
แต่หากใครทำทุกอย่างแล้ว ไม่มีเมลเข้ามา กับไปเช็คการตั้งค่าอีกทีนึง หากคิดว่าตั้งค่าถูกต้องแล้ว อาจจะเป็นปัญหาจากระบบบางอย่างทำให้อีเมลของเราไม่ทำงาน เราอาจต้องทำ SMTP บนอีเมลของเรา
แนะนำให้อ่านบทความนี้เพิ่มเติม: WordPress ส่งเมล์ไม่ได้ ตกถังขยะ เป็น spam แก้ปัญหาด้วย WP Mail SMTP
เรียนออนไลน์ฟรี คอร์สเรียนสร้างเว็บ WordPress+Woocommerce
คลิกเข้าเรียนที่นี่- การจดโดเมนและเช่าโฮส
- การทำ HTTPS
- การติดตั้ง Wordpress
- การใช้ WordPress พื้นฐาน
- การติดตั้งและตั้งค่าพื้นฐาน Woocommerce
- การลงสินค้าประเภทต่างๆ
- การตั้งค่าจัดส่งประเภทต่างๆ
- การตั้งค่าชำระเงิน 3 แบบ
โอนเงิน paypal และบัตรเครดิต - การสร้างหน้าฟอร์มแจ้งชำระเงิน
- การสร้าง Contact Form
- การย้ายเว็บและการ backup เว็บ
- การติดตั้ง Google Analytic
และ Google Search Console
บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน
ความแตกต่างระหว่าง แค่ทำเว็บได้ กับทำเว็บให้ดี ขึ้นอยู่กับความรู้พื้นฐานนั้นเอง
พื้นฐานต้องแน่นก่อน ถึงจะสามารถต่อยอดทำเว็บให้ดีในอนาคตได้ครับ
สรุป
การสร้างแบบฟอร์มอย่างง่ายๆ เราสามารถสร้างผ่านปลั๊กอิน Contact Form7 ได้เลย ซึ่งเป็นปลั๊กอินฟรี แต่ข้อเสีย คือ เราจะแค่ได้ฟอร์มแบบเรียบๆ เราไม่สามารถปรับหน้าตาการเรียงข้อมูลให้สวยงามได้ เช่น การแบ่งฟอร์มออกเป็น 2 คอลัมน์ ได้ ถ้าเราอย่างสร้างฟอร์มสวยๆ เป็นแบบ drag&drop เราอาจต้องใช้ปลั๊กอินตัวเสียเงินแทนครับ
ประชาสัมพันธ์
สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 - 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้
รายละเอียดคอร์สเรียน
สร้างเว็บร้านค้าออนไลน์ Woocommerce expert
- ค่าเรียน 9,500 บาท 21 - 22 สิงหาคม 2564
- เวลาเรียน 10.00- 16.00 น.
- เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
- เราสอนด้วยธีม Flatsome Theme
(No.1 Best selling Woocommerce Theme 2020) - สถานที่เรียน Seatz Station
- ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
- จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
ทุกคอร์สเรียนรอบสอนสด
ได้คอร์สเรียนออนไลน์แถมฟรีครับ
คอร์สเรียนนี้เหมาะกับใคร ?
- เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
- คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
- หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
- ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
- เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง
คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?
- ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ
- ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
- สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
- ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
แผนที่สถานที่เรียน (รอบสอนกลุ่ม)
สถานที่เรียน Seatz Station
ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
บรรยากาศคลาสเรียน
