สร้างฟอร์ม WordPress สำหรับเก็บข้อมูล ด้วยปลั๊กอิน Contact Form7

สร้างฟอร์ม WordPress

ปลั๊กอิน Contact Form7 คือ ปลั๊กอินสร้างฟอร์มแบบง่ายๆ สำหรับเก็บข้อมูลลูกค้า บนเว็บ WordPress เป็นปลั๊กอินฟรี และเป็นปลั๊กอินยอดนิยมบน WordPress ครับ

 

วิธีการสร้างแบบฟอร์ม WordPress มีดังนี้

1) ดาวน์โหลดและติดตั้งปลั๊กอิน Contact Form7 ลงบนเว็บให้เรียบร้อย

ปลั๊กอิน contact form7

2) ประเภทของ field เก็บข้อมูลประเภทต่างๆ

ประเภทของ field

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

ก่อนที่เราจะทำการสร้างแบบฟอร์มเก็บข้อมูล เราต้องมาทำความรู้จักประเภทของ field กันก่อน ว่าในตัวของปลั๊กอิน Contact form7 มี field ให้เราเลือกใช้เก็บข้อมูลแบบไหนได้บ้าง เราจะได้เลือกบาง field มาใช้แสดงบนแบบฟอร์มของเราได้ถูกต้องครับ

ตัวอย่างหน้าตาของ field แต่ละประเภท

text field

Email field

tel field

date field

drop-down menu field

checkbox field

choice 1choice 2choice 3

radio button field

choice 1choice 2choice 3

file field

text area field

3) ขั้นตอนการสร้างฟอร์ม

ไปที่เมนูหลังบ้าน > คลิก Contact > คลิก Add new

สร้างฟอร์ม WordPress

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

form name

เลือก field ที่คุณต้องการสร้าง ในตัวอย่างนี้สมมุติ ผมจะข้อเก็บข้อมูล  3 อย่าง

  • ชื่อ-นามสกุล
  • อีเมล
  • เบอร์โทร
  • ข้อความ

สร้าง field เก็บชื่อ-นามสกุล

เลือก field text เพื่อใช้สำหรับ เก็บข้อมูลที่เป็น ตัวอักษร เช่น ชื่อ-นามสกุล ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag

text field

Field type: Required field
ถ้าคุณเลือกติ๊กถูกช่องนี้ หมายถึง บังคับให้ทุกคนต้องกรอกข้อมูลช่องนี้ หากไม่ได้กรอกข้อมูลช่องนี้ จะไม่สามารถกดส่งได้

Name: ชื่อของของ Field ที่คุณเลือกเก็บข้อมูล ตั้งชื่ออะไรก็ได้ ให้สื่อความหมายสิ่งที่คุณต้องการเก็บข้อมูล

สร้าง field เก็บอีเมล

เลือก field email เพื่อใช้สำหรับ เก็บข้อมูลประเภทอีเมล ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag

เก็บข้อมูล email

สร้าง field เก็บเบอร์โทรศัพท์

เลือก field tel เพื่อใช้สำหรับ เก็บข้อมูลประเภทเบอร์โทรศัพท์ เขาจะบังคับให้กรอกข้อมูลได้เฉพาะที่เป็นตัวเลข หากกรอกข้อมูลเป็นตัวอักษร ระบบจะแจ้งเตือนส่งไม่ได้ จากนั้น ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag

phone field

สร้าง field เก็บข้อความ

เลือก field text area เป็นเป็นกล่องเก็บข้อความ เพื่อใช้สำหรับ เก็บข้อมูลที่ลูกค้าต้องการเขียนถึงเรา จากนั้น ตั้งค่าต่างๆ ให้เรียบร้อย แล้วคลิก Insert Tag

text area field

สร้างปุ่ม ส่งข้อความ

เลือก field submit ตั้งค่า label (ชื่อของปุ่ม) เช่น เขียนว่า ส่งข้อความ

ปุ่มส่งข้อความ

เมื่อเราเลือก field ต่างลงไปเรียบร้อบแล้ว เราจะได้ข้อมูลเรียงกันแบบนี้ครับ

ฟอร์ม contact form7

จากนั้นให้เราตั้งชื่อหัวข้อแต่ละ field ที่เราเลือกมาใช้ให้เรียบร้อยครับ เขียนตามตัวอย่างนี้เลยก็ได้ครับ

สร้างแบบฟอร์ม WordPress

4) ตั้งค่าผู้รับเมล

จากนั้นให้เรามาตั้งค่าการรับเมล หากมีคนกรอกข้อมูลลงบนแบบฟอร์มของเรา จะให้เข้าไปเก็บที่ email ของใคร

ตั้งค่าอีเมล cf7

To: ใส่อีเมลผู้รับ (คือเมลของเราเอง)

From: หัวอีเมล จุดนี้ระบบบังคับว่าต้องใส่เป็น @ชื่อโดเมน ของเว็บนั้นที่เราสร้าง

Additional headers: ให้ใส่ชื่อ field อีเมลที่เราสร้าง

Message body: นำชื่อ field ต่างๆ ที่เราสร้างไว้มาเรียงกัน พร้อมกับเขียนหัวข้อ field นั้นด้วย

เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้วอย่าลืมคลิก save ให้เรียบร้อยครับ

5) การนำแบบฟอร์ม ไปใช้งานบนหน้าเว็บ

กลับไปที่เมนู Contact Form ทุกแบบฟอร์มที่เราสร้าง เขาจะมี shortcode ของฟอร์มนั้นๆ มาด้วย ให้คุณคัดลอก shortcode ของฟอร์มนั้นๆ ไปวางยังหน้า page หรือ post บนเว็บที่ต้องการได้เลยครับ

form shortcode

ตัวอย่างการวาง shortcode ลงบนหน้าเว็บ

paste shortcode

ตัวอย่าง Contact form ที่เราสร้างดูจากหน้าบ้านของ page หรือ post นั้น

ตัวอย่างฟอร์ม

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

จากนั้นคุณลองกรอกข้อมูล และกดส่งข้อความดูครับ ถ้ามีขึ้นข้อความว่า thank you แบบรูปด้านล่างๆ ถือการส่งข้อมูลเสร็จเรียบร้อยแล้ว

form submit

จากนั้นให้ไปลองเปิดอีเมลของเราดูว่ามีเมลส่งเข้ามามั้ย ถ้าเราตั้งค่าถูกต้องเราจะได้รับอีเมลหน้าตาประมาณนี้ครับ

email inbox

แต่หากใครทำทุกอย่างแล้ว ไม่มีเมลเข้ามา กับไปเช็คการตั้งค่าอีกทีนึง หากคิดว่าตั้งค่าถูกต้องแล้ว อาจจะเป็นปัญหาจากระบบบางอย่างทำให้อีเมลของเราไม่ทำงาน เราอาจต้องทำ 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 แบบมืออาชีพ ในวันที่ 17 - 18 ตุลาคม 2563 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert  แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

สอน Woocommerce

  • ค่าเรียน 9,500 บาท 17 - 18 ตุลาคม 2563
  • เวลาเรียน 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

seat-station

บรรยากาศคลาสเรียน

ใส่ความเห็น

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