แบบฟอร์ม Elementor: วิธีสร้างแบบฟอร์มการติดต่อ Elementor

เผยแพร่แล้ว: 2022-06-07

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

Fluent Forms คือเครื่องมือสร้างแบบฟอร์มที่เป็นมิตรกับผู้เริ่มต้นมากที่สุด ดาวน์โหลดตอนนี้และเริ่มสร้างแบบฟอร์มที่สวยงามฟรี !!!

วิธีสร้าง Elementor Form

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

สร้างแบบฟอร์มติดต่อกับ Elementor Pro
วิธีที่ดีที่สุดในการสร้างแบบฟอร์มการติดต่อ Elementor (ฟรี)

สร้างแบบฟอร์มติดต่อกับ Elementor Pro

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

ขั้นตอนการสร้างแบบฟอร์มติดต่อกับ Elementor –

1. การเพิ่มแบบฟอร์ม Elementor ในหน้าของคุณ

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

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

2. การเพิ่มฟิลด์ต่าง ๆ ให้กับแบบฟอร์ม Elementor ของคุณ

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

ข้อความ
อีเมล
พื้นที่ข้อความ
URL
โทร
วิทยุ
เลือก
ช่องทำเครื่องหมาย
การยอมรับ
ตัวเลข
วันที่
เวลา
อัปโหลดไฟล์
รหัสผ่าน
HTML
ที่ซ่อนอยู่
reCAPTCHA
หม้อน้ำผึ้ง

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

3. การตั้งค่าการส่งแบบฟอร์ม

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

ถึง
เรื่อง
ข้อความ
จากอีเมล
จากชื่อ
ตอบกลับ
CC
BCC

ตัวเลือกทั้งหมดในการส่งอีเมล

4. ออกแบบแบบฟอร์มองค์ประกอบของคุณ

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

ไปที่ตัวเลือกสไตล์เพื่อสร้างรูปลักษณ์ที่ไม่ซ้ำใครให้กับแบบฟอร์มของคุณ

ทำไมรูปแบบ Elementor ไม่เพียงพอสำหรับคุณ

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

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

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

วิธีที่ดีที่สุดในการสร้างแบบฟอร์มการติดต่อ Elementor (ฟรี)

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

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

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

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

คุณยังสามารถเข้าถึงคุณสมบัติหลักเหล่านี้ทั้งหมดของ Fluent Forms –

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

เมื่อคุณทราบถึงประโยชน์ของการใช้ Fluent Forms แล้ว มาสร้าง Elementor Contact Forms กันในระยะเวลาอันสั้น

วิธีเพิ่มแบบฟอร์มการติดต่อ Elementor

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

นี่คือขั้นตอนในการสร้าง Elementor Contact Forms ด้วย Fluent Forms

ติดตั้งและเปิดใช้งาน Fluent Forms Pro

การติดตั้ง Fluent Form นั้นคล้ายกับการติดตั้งปลั๊กอิน WordPress อื่นๆ คุณสามารถติดตั้งและเปิดใช้งานได้จากแดชบอร์ด WordPress หรือดาวน์โหลดจาก WordPress.org หากต้องการ

ในการติดตั้งจากแดชบอร์ด WordPress ให้ไปที่ WordPress Admin Panel และคลิกที่ Plugins → Add New ตอนนี้ ค้นหา Fluent Forms คลิก ติดตั้ง จากนั้นเปิดใช้งานปลั๊กอิน

หากต้องการดาวน์โหลดจาก WordPress.org ให้คลิกที่ลิงก์ Fluent Forms นี้แล้วดาวน์โหลด ไปที่แผงการดูแลระบบ WordPress ของคุณแล้วคลิกตัวเลือก เพิ่มใหม่จากปลั๊กอิน อัปโหลดไฟล์ .zip แล้วค้นหา Fluent Forms ในรายการปลั๊กอินที่คุณติดตั้ง คลิกเปิดใช้งาน

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

การอัปเกรดเป็นเวอร์ชัน Pro ทำได้ค่อนข้างตรงไปตรงมา คลิกลิงก์เพื่อเรียนรู้วิธีอัปเกรดเป็น Fluent Forms Pro

สร้างแบบฟอร์มการติดต่อ Elementor

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

หน้าใหม่จะปรากฏขึ้น คลิกที่ New Blank Form และคุณจะถูกเปลี่ยนเส้นทางไปยังส่วนต่อประสานตัวแก้ไขแบบฟอร์ม

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

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

ตอนนี้บันทึกแบบฟอร์มและคัดลอกรหัสย่อ คุณสามารถใช้คุณสมบัติรหัสย่อของ Fluent Forms ที่ทำงานร่วมกับตัวสร้างเพจที่มีอยู่ทั้งหมด รวมถึง Elementor, Oxygen, Divi, Visual Composer และอื่นๆ และคุณสมบัตินี้ช่วยให้คุณสนับสนุนวิดเจ็ต Elementor โดยตรงในแบบฟอร์มของคุณ เพื่อใช้ปลั๊กอินน้อยลง

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

ความคิดสุดท้าย

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

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

รับแบบฟอร์มอย่างคล่องแคล่ว Pro

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