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

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

ตัวอย่างแบบฟอร์มการติดต่อแบบมีเงื่อนไข

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

เดสก์ทอป

มือถือ

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

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

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

โดยที่ในใจ มาเจาะลึกการสร้างแบบฟอร์มการติดต่อเป้าหมาย

วิธีสร้างแบบฟอร์มการติดต่อโดยใช้ลอจิกแบบมีเงื่อนไข

โหลดตัวสร้าง Divi

เนื่องจากเราใช้โมดูล Divi Contact Form เราจึงต้องเข้าสู่ Divi Builder เราจะใช้ชุดเค้าโครง Landscape Maintenance เป็นตัวอย่างในบทช่วยสอนนี้ คุณสามารถใช้เค้าโครงหรือการออกแบบใดก็ได้ที่คุณต้องการ แต่คุณจะต้องสามารถใช้และจัดรูปแบบ Divi Contact Form Module ได้

เริ่มต้นด้วยการเข้าสู่ Divi Builder จากส่วนหลังของเว็บไซต์ WordPress ของคุณ ภายใน Page Editor คุณจะเห็นปุ่มสีม่วงที่ระบุว่า Use Divi Builder (หรือ แก้ไขด้วย Divi Builder หากคุณได้สร้างเพจแล้ว)

เพิ่มหรือค้นหาโมดูลแบบฟอร์มการติดต่อ

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

ป้อนการตั้งค่าแบบฟอร์มการติดต่อ

โมดูล Divi Contact Form มี 3 ฟิลด์ตามค่าเริ่มต้น: Name , Email และ Message สิ่งที่เราจะทำคือสร้างแบบฟอร์มการติดต่อซึ่งตัวเลือกเหล่านั้นจะไม่ปรากฏจนกว่าผู้เยี่ยมชมจะให้ข้อมูลเพียงพอแก่เราที่จะสามารถตอบคำถามของพวกเขาได้

เพิ่มคำถามแบบมีเงื่อนไขแรก

ใต้แท็บ เนื้อหา และใต้ฟิลด์ใดๆ ที่อยู่ในแบบฟอร์มแล้ว คุณจะเห็นปุ่ม เพิ่มฟิลด์ใหม่ คลิกที่มัน

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

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

เพิ่มตัวเลือกฟิลด์

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

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

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

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

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

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

ตั้งชื่อการตอบสนองตามเงื่อนไขในฟิลด์ใหม่

โปรดทราบว่าเราได้ใช้หลักการตั้งชื่อแบบมี เงื่อนไข 1 (เพื่อระบุทริกเกอร์แบบมีเงื่อนไขแรก) และจากนั้น 1a , 1b และ 1c สำหรับการตอบกลับที่ตามมา เรายังติดป้ายกำกับไว้อย่างเหมาะสมเพื่อให้เราสามารถติดตามว่ามันคืออะไร

เช่นเดียวกับคำถามแรก เราจะใส่ Title เป็นคำถามที่ผู้เข้าชมจะเห็น

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

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

หากคุณเพียงแค่ใช้กฎทริกเกอร์เดียวเหมือนเรา กฎข้อ ใดข้อ หนึ่งหรือ ทั้งหมด ก็จะได้ผล

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

ทำซ้ำสำหรับการตอบสนองตามเงื่อนไขทั้งหมด

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

ตั้งค่ารูปแบบการติดต่อ 'ชื่อ/อีเมล/ข้อความ' ให้ปรากฏ

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

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

สำหรับแต่ละกฎ เลือกคำถามติดตามเป็นตัวกระตุ้น ตั้งค่า qualifer เป็น is not empty หมายความว่าตราบใดที่ผู้เข้าชมตอบคำถาม เงื่อนไขจะเป็นไปตามเงื่อนไข นั่นจะทำให้กล่องสุดท้ายเป็นสีเทา แสดงว่าคำตอบใดๆ ก็เพียงพอแล้ว

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

ผลลัพธ์สุดท้าย

คุณสามารถดูด้านล่างว่าตรรกะตามเงื่อนไขทำงานอย่างไรในทางปฏิบัติ

เดสก์ทอป

มือถือ

ห่อ

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

คุณสร้างแบบฟอร์มประเภทใดบ้างโดยใช้ฟีเจอร์ Divi Conditional Logic

บทความ ภาพโดย Kubko / shutterstock.com