วิธีสร้างฟอร์มลอจิกแบบมีเงื่อนไขของ Elementor ใน 5 ขั้นตอน

เผยแพร่แล้ว: 2022-03-29

การเพิ่ม ตรรกะแบบมีเงื่อนไขให้กับแบบฟอร์ม Elementor สามารถเพิ่มอัตราการส่งแบบฟอร์มได้

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

คุณรู้หรือไม่ว่าส่วนที่ดีที่สุดเกี่ยวกับฟอร์มตรรกะแบบมีเงื่อนไขของ Elementor คืออะไร?

ส่วนที่ดีที่สุดคือการสร้างฟอร์มตรรกะแบบมีเงื่อนไขของ Elementor นั้นง่ายมาก โดยเฉพาะถ้าคุณติดตามบทความนี้ เพราะในบล็อกนี้ คุณจะได้เรียนรู้วิธีสร้าง ฟอร์มตรรกะแบบมีเงื่อนไขของ Elementor ในเวลาเพียง 5 ขั้นตอน

นอกจากนี้ คุณจะได้เรียนรู้เกี่ยวกับข้อดีของการใช้ฟอร์มลอจิกแบบมีเงื่อนไขของ Elementor และเมื่อใดควรใช้

ดังนั้นอ่านต่อ….

เนื้อหา ซ่อน
ลอจิกแบบมีเงื่อนไขในฟอร์มคืออะไร?
ทำไมและเมื่อใดจึงควรใช้ลอจิกแบบมีเงื่อนไขในแบบฟอร์ม Elementor
วิธีสร้างฟอร์มองค์ประกอบลอจิกแบบมีเงื่อนไข: คำแนะนำทีละขั้นตอน
ขั้นตอนที่ 1: ติดตั้งปลั๊กอินที่จำเป็น
ขั้นตอนที่ 2: ลากและวางวิดเจ็ต MeForm ไปที่ Elementor Page
ขั้นตอนที่ 3: สร้าง/เพิ่มแบบฟอร์มในหน้าของคุณ
ขั้นตอนที่ 4: เพิ่มตรรกะแบบมีเงื่อนไขให้กับฟิลด์ฟอร์ม Elementor
ขั้นตอนที่ 5: ปรับแต่งการตั้งค่าแบบฟอร์มที่เกี่ยวข้องกับการยืนยัน การแจ้งเตือนให้เสร็จสมบูรณ์
วิธีใช้เทมเพลตที่สร้างไว้ล่วงหน้าของ MetForm เพื่อเพิ่มแบบฟอร์มตามเงื่อนไขใน Elementor
คำพูดสุดท้าย

ลอจิกแบบมีเงื่อนไขในฟอร์มคืออะไร?

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

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

ทำไมและเมื่อใดจึงควรใช้ลอจิกแบบมีเงื่อนไขในแบบฟอร์ม Elementor

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

สงสัยว่าอย่างไร?

ลูกค้าไม่ชอบกรอกแบบฟอร์มเป็นพิเศษ เอาเป็นว่ามันไม่ใช่งานอดิเรกของใครเลยจริงๆ!

ยิ่งไปกว่านั้น หากคุณขอให้พวกเขาให้ข้อมูลที่ไม่เป็นประโยชน์/เกี่ยวข้องกับพวกเขาโดยเฉพาะ ผู้ใช้ของคุณจะรู้สึกรำคาญอย่างเห็นได้ชัด

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

โดยทั่วไป รูปแบบเงื่อนไขใน Elementor จะเป็นไปตามตรรกะ "ถ้าเงื่อนไข" ตัวอย่างเช่น หากเงื่อนไข A เป็นจริง การดำเนินการ X จะเกิดขึ้นไม่เช่นนั้นจะไม่เกิดขึ้น คุณยังสามารถตั้งค่าเงื่อนไขได้มากมายสำหรับการดำเนินการครั้งเดียว ตัวอย่างเช่น การดำเนินการ X จะเกิดขึ้นก็ต่อเมื่อเงื่อนไข A และเงื่อนไข B ทั้งคู่เป็นจริง หรือเงื่อนไขใดข้อหนึ่งเป็นจริง

มาพูดถึงตัวอย่างในชีวิตจริงกันดีกว่า สมมติว่าในรูปแบบที่คุณต้องการทราบว่าจะนำเด็กมาร่วมกิจกรรมได้กี่คน

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

วิธีนี้คนไม่พาลูกไม่ต้องกรอกจำนวนลูกทุ่ง อันที่จริง พวกเขาจะมีแบบฟอร์มที่สั้นกว่าซึ่งจะกระตุ้นให้พวกเขากรอกแบบฟอร์มให้เสร็จแทนที่จะละทิ้งกลางคัน

โดยสรุป นี่คือข้อดีของการใช้ตรรกะแบบมีเงื่อนไขในรูปแบบ Elementor:

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

เมื่อคุณทราบแล้วว่าตรรกะแบบมีเงื่อนไขมีประโยชน์เพียงใด ไปที่ส่วนถัดไปที่คุณจะได้เรียนรู้วิธีเพิ่มตรรกะแบบมีเงื่อนไขลงในแบบฟอร์ม Elementor

วิธีสร้างฟอร์มองค์ประกอบลอจิกแบบมีเงื่อนไข: คำแนะนำทีละขั้นตอน

ทำตามขั้นตอนทั้งหมดอย่างถูกต้องเพื่อสร้างฟอร์ม Elementor ลอจิกแบบมีเงื่อนไขของคุณในอีกสักครู่

ขั้นตอนที่ 1: ติดตั้งปลั๊กอินที่จำเป็น

ในการเพิ่ม Conditional Logic ให้กับ Elementor Form พร้อมกับ Elementor เวอร์ชันฟรี คุณต้องติดตั้งตัวสร้างฟอร์ม Elementor MetForm คุณจะต้องทั้งสอง

  1. เม็ทฟอร์ม (ฟรี)
  2. MetForm Pro

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

หมายเหตุ : คุณไม่จำเป็นต้องมีเวอร์ชัน Elementor Pro เพื่อทำตามขั้นตอนนี้

รับ MetForm ตอนนี้

ขั้นตอนที่ 2: ลากและวางวิดเจ็ต MeForm ไปที่ Elementor Page

ไปที่หน้าที่คุณต้องการเพิ่มฟอร์มตรรกะแบบมีเงื่อนไขของ Elementor คุณสามารถเพิ่มแบบฟอร์มตามเงื่อนไขในหน้าที่มีอยู่หรือสร้างหน้าใหม่ อย่างไรก็ตาม ตรวจสอบให้แน่ใจว่าคุณอยู่ในโหมด แก้ไขด้วย Elementor

ลอจิกแบบมีเงื่อนไข

ตอนนี้ให้ค้นหา MetForm เมื่อคุณพบวิดเจ็ตแล้ว ให้ ลากและวางลง ในเพจ

ฟอร์มตรรกะเงื่อนไขขององค์ประกอบ

ขั้นตอนที่ 3: สร้าง/เพิ่มแบบฟอร์มในหน้าของคุณ

ตอนนี้ คุณสามารถเลือกแบบฟอร์มที่มีอยู่หรือสร้างแบบฟอร์มใหม่ได้ หากต้องการสร้างแบบฟอร์มใหม่หรือเพิ่มแบบฟอร์มที่มีอยู่แล้ว ให้ คลิกที่ปุ่มแก้ไขแบบฟอร์ม

ลอจิกแบบมีเงื่อนไข

ฉันได้สร้างแบบฟอร์มการจองเดโมแล้ว ฉันกำลังจะไป

  • เลือก “เลือกแบบฟอร์ม”
  • เลือกแบบฟอร์มที่มีอยู่ของฉันที่ ชื่อ "แบบฟอร์มองค์ประกอบตรรกะตามเงื่อนไข" จาก ดรอปดาวน์
  • แล้วคลิก แก้ไขแบบฟอร์ม
ลอจิกแบบมีเงื่อนไข

หากคุณต้องการ สร้างแบบฟอร์มตั้งแต่เริ่มต้นโดยใช้ MetForm ให้ชำระเงินที่บล็อกของเราที่
วิธีสร้างแบบฟอร์มการติดต่อหลายขั้นตอนตั้งแต่เริ่มต้นโดยใช้ MetForm

ขั้นตอนที่ 4: เพิ่มตรรกะแบบมีเงื่อนไขให้กับฟิลด์ฟอร์ม Elementor

การใช้คุณสมบัติตามเงื่อนไขของ MetForm จะทำให้คุณสามารถ ซ่อน/แสดงฟิลด์ของฟอร์มโดยยึดตามเงื่อนไขหลายประการ เช่น หากฟิลด์ที่ขึ้นต่อกัน ว่างเปล่า ไม่ว่างเปล่า เท่ากับ (ตรงกับค่าบางค่า) ไม่เท่ากับ มากกว่า มากกว่าเท่ากัน เล็กกว่า , เป็นต้น นอกจากนี้ คุณสามารถปรับแต่งได้ว่าเงื่อนไขทั้งหมดจำเป็นต้องเป็นจริงหรือเงื่อนไขใดๆ จำเป็นต้องเป็นจริงสำหรับการดำเนินการที่จะเกิดขึ้น

ในบทความนี้ ฉันจะใช้เงื่อนไขเหล่านี้บางส่วน คุณสามารถทำตามขั้นตอนเดียวกันเพื่อใช้เงื่อนไขทั้งหมดได้ หากต้องการใช้เงื่อนไขใดๆ คุณต้องทำตามขั้นตอนต่อไปนี้:

แก้ไขฟิลด์และเปิดใช้งานตรรกะตามเงื่อนไข

สำหรับสิ่งนี้ ในฟิลด์แบบฟอร์ม ให้ คลิกที่ไอคอนแก้ไข ที่มุมบนขวา จากนั้นบนแผงการตั้งค่าด้านซ้ายและเลื่อนลงมาเล็กน้อย จากนั้น ขยายตัวเลือก Condition Logic และสุดท้าย ให้เปิดปุ่ม Enable

ลอจิกแบบมีเงื่อนไข

  กำหนดหลักเกณฑ์และการดำเนินการ

ตอนนี้ เลือก เงื่อนไขการจับคู่เงื่อนไขเป็น AND /OR และประเภทการดำเนินการเป็น แสดงฟิลด์นี้/ซ่อนฟิลด์นี้ จากดรอปดาวน์

ลอจิกแบบมีเงื่อนไข

ตั้งเงื่อนไข

ถึงเวลาตั้งเงื่อนไข ตั้งเงื่อนไข

  • คลิกที่ + เพิ่มรายการใหม่
  • ใน ฟิลด์ If ให้ เพิ่มชื่อของฟิลด์ที่ คุณต้องการเพิ่มเงื่อนไข
  • จากรายการแบบเลื่อนลงการ แข่งขัน (เปรียบเทียบ) ให้เลือกเงื่อนไข

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

  • คัดลอกชื่อของช่องข้อความชื่อเต็ม
  • กลับมาที่ส่วนตรรกะตามเงื่อนไขของช่องอีเมลแล้ว วางลงในช่อง “ถ้า”
  • สุดท้าย เลือก ไม่ว่าง จากรายการ แบบเลื่อนลงการแข่งขัน (เปรียบเทียบ)
แบบฟอร์มเงื่อนไขใน Elementor Elementor แบบฟอร์มฟิลด์เงื่อนไข

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

หมายเหตุ : หากคุณต้องการ ตั้งค่าเงื่อนไขสำหรับฟิลด์แบบฟอร์ม เช่น Radio หรือ Checkbox ที่คุณมีหลายตัวเลือก คุณต้อง ใส่ชื่อฟิลด์ในฟิลด์ If และตั้งค่าตัวเลือกที่ radio/checkbox ในฟิลด์ Match value

ตัวอย่างเช่น หากต้องการ ให้ช่องสถานะอื่นๆ ปรากฏเฉพาะเมื่อบางคนเลือกสถานะอื่นๆ เป็นสถานะวัสดุ คุณต้อง  

  • เลือก Match (เปรียบเทียบ) เท่ากับ
  • คัดลอกชื่อช่องสถานภาพสมรส
  • วาง ลงใน ตัวเลือก "ถ้า" ของตรรกะแบบมีเงื่อนไขของสถานะอื่น
  • คัดลอกค่าของตัวเลือกอื่น ๆ จาก ฟิลด์อัตราส่วนสถานภาพสมรส
  • จากนั้น วางลง ในตัวเลือก "ค่าที่ตรงกัน" ของตรรกะเงื่อนไขของสถานะอื่น
แบบฟอร์มเงื่อนไขใน Elementor

ฉันได้ทำตามขั้นตอนเดียวกันเพื่อทำให้แบบฟอร์ม ผู้ดูแล Need Pet ปรากฏเฉพาะเมื่อ จำนวนสัตว์เลี้ยงมากกว่า 1

แบบฟอร์มเงื่อนไขใน Elementor

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

ขั้นตอนที่ 5: ปรับแต่งการตั้งค่าแบบฟอร์มที่เกี่ยวข้องกับการยืนยัน การแจ้งเตือนให้เสร็จสมบูรณ์

เมื่อคุณเพิ่มตรรกะตามเงื่อนไขทั้งหมดลงในฟอร์ม Elementor ของคุณเสร็จแล้ว ให้คลิก การ ตั้งค่าแบบฟอร์ม เพื่อปรับแต่งการตั้งค่าต่างๆ คุณสามารถ

  • ปรับแต่งชื่อเรื่อง ข้อความสำเร็จ การเข้าสู่ระบบที่จำเป็น การนับจำนวนการดู ฯลฯ ภายใต้การตั้งค่าทั่วไป
  • คุณสามารถปรับแต่งตัวเลือกต่างๆ เช่น เปิดการยืนยัน ตั้งค่าหัวเรื่องอีเมล อีเมลจาก จากอีเมล และข้อความขอบคุณ ฯลฯ ภายใต้การตั้งค่าการยืนยัน
  • ภายใต้การตั้งค่าการแจ้งเตือน คุณจะได้รับตัวเลือกการแจ้งเตือนทางอีเมล เช่น เปิดใช้งานเมลการแจ้งเตือนถึงผู้ดูแลระบบ, หัวเรื่องอีเมล, อีเมลถึง, อีเมลจาก, บันทึกย่อของผู้ดูแลระบบ ฯลฯ

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

แบบฟอร์มลอจิกเงื่อนไขขององค์ประกอบ

คลิกที่ UPDATE & CLOSE เพื่อบันทึกแบบฟอร์มเงื่อนไขที่คุณเพิ่งสร้างขึ้น

แบบฟอร์มลอจิกเงื่อนไขขององค์ประกอบ

ตอนนี้ ถ้าคุณคลิกที่ปุ่มแสดงตัวอย่าง คุณจะเห็นแบบฟอร์มเงื่อนไข Elementor ของคุณดังที่แสดงด้านล่าง:

แบบฟอร์มลอจิกเงื่อนไขขององค์ประกอบ
รับ MetForm ตอนนี้

วิธีใช้เทมเพลตที่สร้างไว้ล่วงหน้าของ MetForm เพื่อเพิ่มแบบฟอร์มตามเงื่อนไขใน Elementor

ตอนนี้ หากคุณกำลังมองหาเทมเพลตที่สร้างไว้ล่วงหน้าของฟอร์มตรรกะตามเงื่อนไขของ Elementor คุณจะไม่พบตัวเลือกที่ดีกว่า MetForm เนื่องจากตัวสร้างแบบฟอร์ม WordPress นี้มีเทมเพลตฟอร์มตรรกะตามเงื่อนไข Elementor ที่สร้างไว้ล่วงหน้า 6+ รายการ

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

ตรรกะแบบมีเงื่อนไขในรูปแบบองค์ประกอบ

เมื่อโหลดแบบฟอร์ม ให้คลิกที่ UPDATE & CLOSE และสุดท้ายบันทึกหน้าของคุณ นี่คือตัวอย่างแบบฟอร์มตรรกะตามเงื่อนไขของ Elementor ที่สร้างไว้ล่วงหน้าโดย MetForm:

ฟอร์มลอจิกแบบมีเงื่อนไขขององค์ประกอบ ฟอร์มลอจิกแบบมีเงื่อนไข

บทความที่เกี่ยวข้อง:
MetForm กับ Contact Form 7 กับ Gravity Forms: ตัวสร้างแบบฟอร์มไหนดีที่สุด?
วิธีสร้างแบบฟอร์มใบสมัครงานว่าง

คำพูดสุดท้าย

ยินดีด้วย! ตอนนี้คุณรู้วิธีเพิ่มตรรกะแบบมีเงื่อนไขให้กับฟอร์ม Elementor แล้ว ฉันหวังว่าตอนนี้คุณจะใช้กระบวนการนี้เพื่อสร้างฟอร์มตรรกะตามเงื่อนไข Elementor ที่ใช้งานง่ายในเว็บไซต์ WordPress ของคุณ

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

อย่าลืมเกี่ยวกับเทมเพลตฟอร์มตรรกะตามเงื่อนไขของ Elementor ที่สร้างไว้ล่วงหน้า นอกจากนี้ เราขอแนะนำให้คุณตรวจสอบคุณสมบัติที่น่าทึ่งทั้งหมดของ MetForm คุณสมบัติขั้นสูงของปลั๊กอิน WordPress นี้จะช่วยให้คุณสร้างรูปแบบ Elementor ที่ปรับให้เหมาะสมยิ่งขึ้น

ดาวน์โหลด MetForm