สร้างฟอร์มรับข้อมูลในเวิร์ดเพรสด้วย WordPress Form Manager

ปลั๊กอิน WordPress Form Manager (เวลาติดตั้งแล้ว ชื่อมันจะเหลือแค่ Form Manager) เป็นปลั๊กอินที่ใช้สำหรับสร้างฟอร์มรับข้อมูลต่างๆจากคนที่เข้าเว็บเราครับ สามารถสร้างฟอร์มได้ไม่จำกัด และมีระบบการสร้างฟอร์มที่ง่ายมาก แค่เพิ่มฟิลด์แล้วก็แก้ค่านิดหน่อย แล้วเอา shortcode ไปใส่ในโพสต์หรือเพจที่ต้องการ แค่นี้ก็เรียบร้อยครับ

ฟีเจอร์หลักของ WordPress Form Manager

ฟีเจอร์ของ WordPress Form Manager เป็นอะไรที่น่าจะตอบโจทย์ของคนทำเว็บครับ ซึ่งมีประมาณนี้

  • สร้างฟอร์มได้ไม่จำกัด
  • ตั้งเงื่อนไขการแสดงแต่ละฟิลด์ในฟอร์มได้
  • มี Form Validation มาให้ในตัว
  • กำหนดได้ว่าผู้ใช้รดับไหนสามารถเห็นหรือส่งข้อมูลได้บ้าง
  • ส่งข้อมูลที่ผู้ชมกรอกเข้าอีเมล
  • เก็บข้อมูลที่ผู้ชมกรอกเอาไว้หลังบ้าน
  • แยกดูข้อมูลของแต่ละฟอร์มได้
  • ค้นหาข้อมูลที่ผู้ชมกรอกเข้ามาได้
  • ส่งออกข้อมูลที่ผู้ชมกรอกเข้ามาได้
  • แก้ไขข้อมูลที่ผู้ชมส่งเช้ามาได้
  • เอาข้อมูลที่ผู้ชมกรอก อัพขึ้นไปเป็นโพสต์ได้
  • หลังส่งข้อมูล สามารถกำหนดได้ว่าจะ redirect ไปหน้าไหน

สำหรับการติดตั้งก็แค่เข้าไปในส่วน install plugin แล้วค้นหาปลั๊กอินที่ชื่อว่า WordPress Form Manager แล้วก็ติดตั้งได้เลยครับ จากนั้นก็ Activate เท่านี้ก็พร้อมใช้งานครับ

การใช้งานเบื้องต้น

เมื่อเราเปิดใช้งานปลั๊กอินแล้ว จะมีเมนู Forms เพิ่มเข้ามาที่ Sidebar ให้เข้าไปที่เมนูย่อย Forms แล้วก็กด Add new เพิ่อสร้างฟอร์ม และเมื่อกดแล้ว มันจะขึ้น New Form มาให้อันนึง เอาเมาส์ชี้แล้วกด Edit ได้เลยครับ (คำสั่ง Advanced คือเข้าไปที่ตั้งค่าขั้นสูงของฟอร์ม, คำสั่ง Data คือดูข้อมูลที่ผู้ชมส่งเข้ามาของฟอร์มนี้, และ Delete ก็คือลบทิ้งครับ)

WordPress Form Manager: All form

ประเภทของฟิลด์ต่างๆที่ปลั๊กอินมีมาให้เราใช้งาน มีดังนี้ครับ

  • Text (ข้อความบรรทัดเดียว) สามารถตั้งได้ว่าจะเป็นข้อความแบบไหน เช่น ตัวเลขเท่านั้น เป็นอีเมล เป็นวันที่ ฯลฯ
  • Textarea (ข้อความหลายบรรทัด)
  • Checkbox (เช็คบ็อกซ์ช่องเดียว) เอาไว้ทำเหมือนพวกรับ agreement แบบนั้น)
  • List สามารถเลือกได้ว่าจะเป็นรายการแบบไหน มีอยู่ 4 แบบคือ drop down, list box, radio buttons, checkboxes (เช็คบอกซ์หลายช่อง แบบเหมือนเลือกรับประเภทข่าวสาร แบบนั้นครับ)
  • Separator หรือตัวคั่นธรรมดานี่แหละ
  • Note ไว้แสดง Notice ต่างๆ เช่นกรแสดงข้อความ Agreement อะไรแบบนั้นครับ
  • reCAPTCHA
  • File เผื่อให้ผู้ชมอัพไฟล์แนบ (เช่นสกรีนช็อต) สามารถกำหนดได้ว่าขนาดไฟล์สูงสุดเท่าไหร่ รองรับไฟล์นามสกุลอะไรบ้าง

WordPress Form Manager: Form editing

ฟิลด์ทั้งหมดนี้ยังสามารถกำหนดเงื่อนไขได้ด้วยครับ ว่าจะแสดงขึ้นมาเมื่อไหร่ (เช่นติ๊กว่าเป็นชาวต่างชาติ ก็ขึ้นฟิลด์ใส่เลขพาสปอร์ตมาแทนช่องใส่เลขประชาชน) สามารถทำได้ผ่านเมนู Condition ที่อยู่ในอีกแท็บนึง

ฟิลด์ทั้งหมดก็จะมีให้ตามนี้ครับ สามารถเพิ่มแต่ละอันไปได้ไม่จำกัด ซึ่งดูแล้วก็น่าจะเรียกได้ว่าตอบโจทย์ได้ค่อนข้างครบเลย สำหรับการทำฟอร์มแบบต่างๆ เช่น Contact, Bug Report, News Letter, หรือจะพลิกแพลงอย่างไรก็ตามสะดวกเลยครับ

จริงๆในหน้า Form Extra ยังมีเรื่องของ Private Field (หรือ Hidden Field) อยู่อีก ซึ่งตรงนี้ผมยังงงๆกับการใช้งานของมันอยู่เหมือนกันครับ (ไว้เข้าใจแล้วจะมาอัพเดทให้)

ในเรื่องของการแจ้งเตือนทางอีเมลว่ามีข้อมูลใหม่เข้ามา ปลั๊กอินนี้สามารถแจ้งเตือนได้ 2 ทางครับ คือ

  1. ส่งไปหาแอดมิน
  2. ส่งไปหาคนที่เกี่ยวข้อง

สำหรับการส่งไปหาแอดมิน คงพอจะนึกภาพออก (ติ๊กเปิดหรือปิดส่งเตือนหาแอดมินได้ในเมนู Settings ครับ) ส่วนการส่งไปหาบุคคลที่เกี่ยวข้องนั้น ลักษณะประมาณว่า มีคนกรอกฟอร์ม bug report แล้วตั้งใจให้ส่งไปหาโปรแกรมเมอร์ทั้งสามคน ก็ใส่อีเมลของทั้งสามคนลงในช่อง Also send notification(s) to: ที่กล่อง E-Mail Notifications ทางขวามือได้เลยครับ (คั่นแต่ละคนด้วยคอมม่า) นอกจากนี้ยังส่งเป็นอีเมลกลับไปหาคนที่กรอกฟอร์มเข้ามาได้ด้วย (ตรงช่อง Send to (user entry): ให้เลือกฟิลด์ที่เป็นอีเมลครับ)

จัดการกับข้อมูลที่ผู้ชมส่งเข้ามา

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

การเข้าไปจัดการข้อมูล สามารถกดตรง Data ในเมนู Forms ได้ หรือจะเข้าไปที่ Submission Data ในหน้าแก้ไขฟอร์มก็ได้เช่นกันครับ

ในการส่งออกข้อมูล จะสามารถส่งออกได้แค่แบ CSV เท่านั้น (ซึ่งผมว่ามันเอาไปทำอะไรได้ง่ายกว่าออกมาเป็น Excel เยอะครับ) และจะมีตัวเลือกในการส่งออกอยู่ 4 แบบ คือ

  1. ส่งออกทุกเรคคอร์ด (รวมฟิลด์ที่ซ่อนเอาไว้ด้วย)
  2. ส่งออกทุกเรคคอร์ด (ไม่รวมฟิลด์ที่ซ่อน)
  3. ส่งออกผลการค้นหา
  4. ส่งออกผลการค้นหา เฉพาะหน้าที่กำลังดูอยู่

ส่งท้าย

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

ทิ้งท้ายอีกนิดนึง คือช่วงนี้งานของผมวนๆอยู่กับการทำเว็บด้วย WordPress และได้เข้าไปเกี่ยวข้องกับปลั๊กอินหลายตัวมากครับ ไว้ถ้ามีเวลา ผมจะเอามาเขียนแนะนำกันอีกนะครับ :)

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

40 Replies to “สร้างฟอร์มรับข้อมูลในเวิร์ดเพรสด้วย WordPress Form Manager”

  1. ลืมบอกจุดสำคัญไปนะ คือว่า มันลิงค์ไปที่เมนูยังไงเหรอ

    Reply

    1. @pencil เมนูอะไรหรือครับ?

      ถ้าเมนูของปลั๊กอิน ผมว่าผมบอกแล้วนะครับ ว่ามันจะมีเมนู Forms ขึ้นมาบน sidebar

      Reply

      1. ผมหาไม่เจอเลย แต่อยากให้มันไปอยู่ที่เมนูบาร์ทำยังไงเหรอครับ

        Reply

      2. ไม่ใช่เมนู Forms ที่ sidebar ด้านซ้ายนะครับ คือว่าสร้างฟอร์มเสร็จแล้วจะทำให้มันมี link คลิกที่เมนูบาร์นะครับ

        Reply

        1. หมายถึงเป็นเมนูคลิกเข้าไป form1 form2 ตรงๆเลยใช่มั๊ยครับ ถ้าหมายถึงอย่างนี้ เท่าที่ทราบจะไม่มีครับ ;)

          Reply

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

          2. ใช้เหมือนตัวจัดการฟอร์มตัวอื่นๆครับ คือแทรกผ่าน shortcode

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

  2. เก่งจัง……ทำงานที่ไหนอยู่อะครับ…..สุดยอดอะ….

    Reply

  3. ได้แล้วครับ ขอบคุณมากๆ

    Reply

  4. ทำไมหน้าตามันน่าเกลียดจังเลยครับ (ด้านหน้าเว็บ)
    ไม่ทราบมีธีมฟอร์มสวยๆ หรือมีวิธีลดระยะห่างของข้อมูล/ช่องอินพุต (ในแนวตั้ง) ได้ไหมครับ

    Reply

    1. อันนี้ต้องแก้ที่ CSS เอาเองแล้วแหละครับ :)

      Reply

      1. @Jirayu
        ไม่ทราบว่า ไฟล์ ชื่ออะไรอ่ะคะ ขอบคุณค่ะ

        Reply

        1. @vnoiz

          สามารถเพิ่มใน CSS ของธีมได้เลยครับผม

          หรือถ้าสนใจจะแก้ทั้ง template ของฟอร์มเลย สามารถเข้าไปอ่านได้ใน FAQ ตามนี้ครับ http://www.campbellhoffman.com/question/create-a-form-display-template/

          Reply

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

    Reply

    1. @Archer

      ถ้าค้นหาข้อมูลจาก backend ปลั๊กอินจะมีฟอร์มค้นหาให้อยู่ครับ สามารถดูได้จากหัวข้อ จัดการกับข้อมูลที่ผู้ชมส่งเข้ามา ได้เลย

      แต่ถ้าหมายถึงดึงข้อมูลจากฟอร์มมาแสดงบนหน้าบล็อก จะมีสองทางเลือกคือโยนข้อมูลของฟอร์มเข้าไปเป็นโพสต์แล้วค่อยคิวรี่ออกมาแสดง (แต่จะไม่ค่อยยืดหยุ่นเท่าไหร่) หรืออีกวิธีคือคิวรี่ออกมาจาก Database ตรงๆเลยครับ คือว่าเท่าที่ผมหาดู เหมือนปลั๊กอินจะไม่ได้เตรียมฟังก์ชั่นสำหรับดึงข้อมูลมาแสดงผลเอาไว้ให้ครับผม

      Reply

  6. […]  ยังตามหลัง WordPress Form Manager ที่เคยเขียนแนะนำเอาไว้อยู่หลายขุม […]

    Reply

  7. ทำไมมันไม่เมล์มาแจ้งเมื่อมีข้อมูลใหม่เข้ามาค่ะ รบกวนกูรูตอบให้หน่อยนะค่ะ คือติ๊กให้มีเครื่องหมายถูกแล้วก็ไม่แจ้งเตือนไม่ทราบว่าต้องทำไงค่ะ

    Reply

  8. ทำไมมันกากๆ เกินๆ จังคะ

    Reply

    1. Extra feature ขาดๆเกินๆนี่ปดตินะ แต่ basic feature มาไม่ครบนี่กากนะ ;w;

      Reply

  9. ช่วยอธิบายในส่วนของ Conditions เพิ่มเติมหน่อยได้มั้ยคะ ว่าใช้งานยังไง ?

    Reply

    1. พอกด add เงื่อนไขเข้าไป เราสามารถเลือกได้ครับว่าจะให้ทำอะไรกับฟิลด์นั้น (เลือกในช่อง choose rule type) เช่น ให้แสดงฟิลด์นี้ถ้าหาก.. , ให้ซ่อนฟิลด์นี้ถ้าหาก… , ให้ฟิลด์นี้เป็น required ถ้าหาก…

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

      และที่ช่อง Applies to: นั้นคือให้เลือกว่าจะใช้เงื่อนไขนี้กับฟิลด์ไหนครับ

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

      choose rule type: require element if
      ช่องที่ 1: เลือกฟิลด์ callback
      ช่องที่ 2: เลือก equals
      ช่องที่ 3: ใส่ค่าว่า true (เช็คบ็อกซ์จะเก็บค่าเป็น true กับ false)
      Applies to: เลือกฟิลด์ phone

      แปลได้ก็คือ ให้บังคับให้กรอกฟิลด์ phone (ตั้งให้เป็น required) เมื่อฟิลด์ callback มีค่าเป็น true (ติ๊กถูก) นั่นเองครับ

      Reply

      1. ขอบคุณมากค่ะ :)

        Reply

  10. ยังไงเหรอครับ ผมไม่ค่อยเข้าใจ?

    Reply

  11. ผมติดตรง Validation ที่เป็น Phone number นะครับ 55
    ไม่รู้ว่าต้องกรอกอย่างไร เลยเปลี่ยน Number only ซะเลย
    อย่างอื่นยอดมากๆ

    Reply

    1. คือ อยากสอบถามว่า เวลามีคนมากรอกข้อความแล้ว แต่ไม่เห็นจะได้รับอีเมลล์เลยอ่ะครับ
      ต้องแก้ตรงไหนบ้างอ่ะ รบกวนด้วยครับ

      Reply

      1. ลองเช็คตรง email notification นะครับ กับอีกอย่างคือลองเช็คว่าโฮสต์ส่งเมลออกหรือเปล่าด้วยครับ :)

        Reply

  12. […] WordPress Form Manager – ปลั๊กอินสำหรับทำระบบฟอร์มบนเวิร์ดเพรสครับ  เช่นทำฟอร์ม contact us, ฟอร์มยืนยันการจ่ายเงิน, หรือฟอร์มอื่นๆ  ผมเคยเขียนแนะนำไปแล้วรอบนึง  ลองไปอ่านกันได้ครับ […]

    Reply

  13. สวัสดีครับใช้ปลั๊กอิน wordpress form manager ทำ form แล้วให้ user กรอกข้อมูลในแบบสอบถามเสร็จแล้ว แต่จะนำข้อมูลบางส่วนของ user มาแสดงในหน้าเว็บไซต์แบบ Real Time มีวิธีแนะนำไหมครับ ขอบคุณครับ

    Reply

    1. เอาจริงๆ มันสามารถคิวรี่ข้อมูลจากฐานข้อมูลออกมาแสดงตรงๆ ได้อยู่แล้วครับ หรือไม่ก็ตั้งให้มันเอาข้อมูลไปทำเป็นโพสต์อัตโนมัติก็ได้

      Reply

      1. รบกวนสอนหน่อยคะว่าต้องทำยังไงข้อมูลในฟอร์มที่มีคนกรอก จะขึ้นไปโพสอัตโนมัติทันทีเลยอ่ะคะ

        Reply

      2. และต้องการตั้งให้ เมื่อล็อกอินหน้าเวปปุ๊บ เข้ามาหน้ากรอกแบบฟอร์มเลย ทำได้มั๊ยคะ ทำยังไงคะ

        Reply

      3. ทั้ง 2 อย่างที่ถามไว้ทำได้แล้วคะ แต่ยังติดปัญหาที่ว่า อยากให้ชื่อบทความแสดง ตามชื่อ Text ที่ให้กรอกในแบบฟอร์ม ต้องทำยังไงคะ

        Reply

        1. ตอนตั้งค่าให้ publish ข้อมูลจากฟอร์มขึ้นเป็นโพสต์ มันจะมีช่อง Post title อยู่ใช่มั้ยครับ ให้เราใส่ Shortcode สำหรับแสดงข้อมูลได้เลยครับ

          สามารถดูรายการ Shortcode ที่ใช้ได้จากในลิงค์นี้ครับ http://www.campbellhoffman.com/question/advanced-e-mail-settings/ ลองเลื่อนไปดูตรงแถวๆ Submission Data นะครับ

          Reply

          1. ขอบพระคุณมากๆคะ ที่มาตอบ มาสอน เดี๋ยวขอนำมาไปลองฝึกทำดูก่อนนะคะ

          2. ลองแล้ว ได้ผลดีมากคะ ขอบคุณอีกครั้งนะคะ

            ขอถามเรื่อง feed เพิ่มคะ

            อยากให้เวปเราที่ใช้ wordpress มี feed ต้องทำไงคะ
            ต้องติดตั้งอะไรยังไง หรือ เมื่อเอา wordpress ใส่ในโฮสแล้วมันจะมี feed เลยอัตโนมัติคะ แต่ลองเข้าลิงค์ feed แล้ว มันขึ้นชื่อ บทความ แต่มาพร้อมทั้งโค้ดเลยคะ เช่น

            บทความทดสอบ

          3. ปกติ WordPress จะมี RSS Feed มาให้ในตัวอยู่แล้วครับ (จะเป็น http:///feed เช่น http://jirayu.in.th/feed) ซึ่งจะเป็น feed ของ post ล่าสุด

            จริงๆ มันยังแบ่ง feed ตาม category หรือมี comments feed ได้ด้วยครับ (ถ้าเบราเซอร์สามารถ detect feed ได้ มันจะขึ้นไอคอน feed มาให้)

            เราสามารถไปตั้งค่า feed ได้ด้วยว่าจะให้ปล่อยเป็นเนื้อหาเต็มทั้งหมด หรือตัดมาเฉพาะบางส่วน (และให้เข้ามาอ่านต่อในเว็บ) โดยเข้าไปที่ Settings > Reading ครับ ปรับตรง For each article in a feed, show

          4. ขอถามในคำถาม การใช้โค้ดกับ wp form manager คะ

            โค้ดที่ลองใช้ ได้ผล แต่พอนำไปใช้กับธีม ที่หน้าแรกโชว์แต่ชื่อบทความ ทำให้ไม่แสดงแค่ชื่อบทความ แต่มันแสดงทั้งหมด เช่นในแบบฟอร์ม ได้สร้าง text ในบรรทัดแรก
            บรรทัดสองให้ใส่รูป ก็จะมีขึ้นทั้งหมด
            ต้องใช้โค้ดตัวไหนหรือต้องทำยังไง ถึงจะได้ แต่ชื่อบทความความคะ

          5. ถ้าใช้ เวปบอร์ดจาก nabble.com แล้วนำเวปบอร์ดนี้ไปติดเวป ที่ใช้wordpress จะสามารถดึงข้อมูลจากเวปบอร์ดนี้ ให้โชว์ไปบนเวปได้หรือไม่

            และสามารถดึงบทความจากเวปบอร์ด ให้แสดงเป็นบทความบนเวป แบบใช้ form manager ได้หรือไม่คะ

  14. ถ้าต้องการให้แบบฟอร์มที่กรอกเสร็จแล้ว ขึ้นไปบทความตามหมวดหมู่ทันทีเลย ทำยังไงคะ รบกวนแนะนำหน่อยคะ

    Reply

  15. ขอโทษครับ ปลั๊กอินนี้ สามารถคำนวณเงินเดือนได้ไหมครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *