สร้าง แบบฟอร์ม ใน WordPress ภาค 2

สร้าง แบบฟอร์ม ใน Wordpress ภาค 2
https://www.youtube.com/embed/7T3cfZM6tI4?feature=oembed&autoplay=1

สวัสดีครับ ในวีดีโอนี้ จะเป็นวีดีโอที่ต่อจากวีดีโอที่แล้วนะครับ โดยเราจะทำการใช้ Advance Feature ของเจ้า Ninja Form ให้ดูกันนะครับ ลองมาดูกันเลยครับ

Recaptcha Settings

ก่อนอื่นเราจะมาเริ่มต้นด้วยการ ตั้งค่า ป้องกันการก่อกวนครับ

ให้เราไปที่ Ninja Forms แล้วไปที่ Settings ครับ เราจะเห็นว่า มี Recaptcha Settings ตรงนี้ที่เราจะต้องตั้งค่าครับ เพื่อเวลาที่มีคนกรอกข้อมูลเข้ามาในแบบฟอร์มเรา จะต้องติ๊กว่าเค้าไม่ใช่หุ่นยนต์ครับ ว่าแล้วมาลองตั้งค่ากันเลยครับ

ให้เราไป get Site Key ก่อนครับ โดยคลิกที่ Link ด้านล่างได้เลย

จากนั้นเราจะอยู่ที่ หน้า Recapcha ของ Google ครับ ถ้าใครเคยมีสร้างไว้ก็จะมี List ของรายการอยู่ครับ แต่ถ้ายังไม่เคยสร้าง ก็สามารถสร้างได้ที่ด้านล่างเลยครับ

เมื่อสร้างเสร็จแล้วก็ให้เรา Copy Site Key และ Secret Key มาได้เลยครับ แล้วเอามาใส่แบบฟอร์ม

แต่ถ้าเราเผลอปิดไปก็ไม่เป็นไรครับ ให้เข้ามาใหม่ แล้วก็คลิกไปที่ชื่อเว็บไซต์ของเราได้เลยครับ ไป Copy มาใหม่

แล้วเอามาใส่ครับ เมื่อ ใส่เสร็จแล้ว กด Save 1 ครั้งครับ เมื่อ Save เสร็จแล้วเราจะไปสร้างแบบฟอร์มกันต่อครับ

สร้างฟอร์มใหม่

เรามาเริ่มจาก การสร้างฟอร์มใหม่กันครับ ให้เราไปที่ Ninja Forms แล้วก็ Add New ได้เลย ในวีดีโอนี้ผมจะสร้างฟิลดิ์พื้นฐานอย่างรวดเร็วหน่อยนะครับ สำหรับ ใครที่ยังไม่มีพื้นฐานก็สามารถดูวีดีโอก่อนหน้านี้ได้เลยครับ

จากนั้นเลือก Blank Form ครับ ใส่ Field Single Text เป็นชื่อ กับ และ Field Email ก่อนครับ ทำการเปลี่ยน Label แล้วเลือก Required จากนั้น เราไปเปลี่ยน Place Holder กันครับ

ใส่ Recaptcha ในฟอร์ม

ง่ายสุดๆครับ ให้เราเพิ่มฟิลด์ลงไปในฟอร์มครับ เลือก Recaptcha เลือกมาเลย แล้วก็ใส่ลงไปครับ กด PUBLISH แล้วดูพรีวิวกันได้เลยครับ

เราก็จะเห็นว่า Recaptcha จาก Google มาแล้วนะครับ ตรงกล่องสี่เหลี่ยมที่ให้เลือกนั้นคือ Recaptcha ครับ

Pricing Field

ต่อมาเราจะมาดู Field ที่น่าสนใจอีกกลุ่มหนึ่งครับ

นั่นก็คือกลุ่ม Pricing Field นั่นเองครับ เอาไว้ใช้ในการสร้างแบบฟอร์มสั่งซื้อสินค้าแบบง่ายๆครับ ให้เราไปเพิ่มฟิลด์ ก่อนครับ เดี๋ยวผมจะลากมาใส่ไว้ก่อนเลยครับ แล้วปรับแต่งทีละตัวครับ

เริ่มจากการเพิ่ม Product ก่อนครับ  แล้วก็ Quantity จากนั้นก็ Shipping ต่อครับ และ สุดท้ายคือ Total ครับ

เมื่อเราเลือกมากแล้ว เราก็มาปรับแต่งกันครับ

  • Product ในส่วนนี้จะเป็นการแสดง ชื่อและราคาสินค้าครับ ตรง USE INLINE QUANTITY ถ้าเรามี Field Quantity แยกอยู่แล้วเราก็ไม่ต้องเลือกครับ ซึ่งในตัวอย่างเรามีอยู่แล้วครับ อ้อที่สำคัญอย่าลืมตั้งราคาด้วยนะครับ
  • Quantity คือจำนวนของสินค้า ที่คนกรอกแบบฟอร์มต้องการสั่งซื้อครับ เราสามารถตั้งค่า จำนวนต่ำสุดสูงสุดได้ครับ และถ้าเราจะใส่ Help Text สักหน่อยก็สามารถใส่ได้ครับ
  • Shipping คือค่าขนส่งครับ เราสามารถใส่ค่าขนส่งลงไปได้เลยครับ เพื่อเอาไว้ให้ระบบคำนวณครับ
  • Total คือ จำนวนเงินรวม ระบบจะคำนวณให้อัตโนมัติครับ

การแก้ปัญหา Currency

ถ้าอยากให้แสดงค่า สกุลเงิน ให้เราไปที่ Advance ครับ แล้วเลือก  Display Settings แล้วไปที่ Advanced ครับ จากนั้นเลือก Currency แล้วกด Publish ได้เลยครับ เมื่อเราไปดูแบบฟอร์มเราก็จะเห็น Currency แล้วครับ

จากนั้นแก้ไขเป็น Thai Baht ได้เลยครับ เมื่อแก้ไขแล้ว ก็อย่าลืมกด Save นะครับ จากนั้นให้เรากลับไปดูที่ ฟอร์มได้เลยครับ

ใส่ฟอร์มลงในหน้า

เรามาทบทวนการใส่แบบฟอร์มลงในหน้า WordPress ของเรานิดนึงครับ ให้เราไปที่ Page แล้วไปที่ All Page ตรงนี้ผมได้เตรียมหน้าเอาไว้แล้วครับ คือหน้าที่ชื่อว่า Order

จากนั้นเราสามารถเลือกไปที่ Add Form ได้เลยครับ แล้วก็เลือกแบยฟอร์มของเรา แล้วเราก็ไปที่ Update หน้าได้เลยครับ

จากนั้นเราจะกด Preview หรือดูที่หน้าเว็บไซต์ของเราก็ได้ครับ

เราก็จะเห็นว่า แบบฟอร์มของเรา สร้างมาใช้งานเรียบร้อยแล้วครับ ลองใส่ข้อมูลดูได้เลยครับ

สรุป

ในวีดีโอนี้เราก็ได้เรียนรู้เรื่องของการสร้างแบบฟอร์ม Advance กันไปอีก 1 ขั้นด้วยการใช้ Ninja Form นะครับ

รับความรู้ก่อนใคร

รับความรู้ก่อนใครได้เลย เพียงแค่กรอกแบบฟอร์มสมัครสมาชิกรับข่าว ก็สามารถรับความรู้ดีๆ แบบฟรีๆ ได้ก่อนใครเลยครับ




2 thoughts on “สร้าง แบบฟอร์ม ใน WordPress ภาค 2

  1. ธีรศักดิ์ says:

    1 ถ้ามีสินค้ามากกว่า1 รายการทำได้ไม่
    2.ถ้ามีภาษีมูลค่าเพิ่ม คำนวณได้ไม่
    3.สามารถจัดรูปแบบให้สวยงามได้ไม่
    4.สามารถพิมพ์ได้ไม่

    • พลากร สอนสร้างเว็บ says:

      ถ้าสินค้ามากกว่า 1 รายการ ทำเป็น E-Commerce น่าจะดีกว่าครับ ส่วนเรื่องการคำนวณ ทำได้ครับ แต่ถ้าซับซ้อนมากจะต้องซื้อ Plugins ตัว Premium ครับ

ใส่ความเห็น

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