วิธีสร้างแบบฟอร์มการติดต่อ Elementor [คู่มือสำหรับนักพัฒนา]

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

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

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

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

แบบฟอร์มการติดต่อในเว็บไซต์คืออะไร?

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

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

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

เหตุใดการมีแบบฟอร์มการติดต่อในเว็บไซต์ของคุณจึงมีความสำคัญ

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

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

แบบฟอร์มการติดต่อเพิ่มความเป็นมืออาชีพให้กับไซต์

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

ปกป้องเว็บไซต์จากอีเมลขยะ

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

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

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

ทำให้คุณพร้อมตลอดเวลา

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

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

แบบฟอร์มการติดต่อช่วยให้มีลูกค้าเป้าหมายมากขึ้น

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

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

การใช้งานแบบมัลติฟังก์ชั่น

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

สร้างรายชื่อการตลาดผ่านอีเมล

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

จะสร้างแบบฟอร์มการติดต่อ Elementor ได้อย่างไร?

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

ขั้นตอนที่ 01: เพิ่มวิดเจ็ตผู้ติดต่อจาก Elementor Library

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

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

ขั้นตอนที่ 02: ตั้งค่าฟิลด์ที่จำเป็นของคุณในแบบฟอร์มการติดต่อ

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

• ชื่อผู้ใช้
• อีเมล
• ข้อความ

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

ขั้นตอนที่ 03: เพิ่มหรือลบฟิลด์เพิ่มเติมจากแบบฟอร์มการติดต่อ

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

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

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

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

ขั้นตอนที่ 04: ตั้งค่าปลายทางสำหรับข้อมูลจากแบบฟอร์มการติดต่อ

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

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

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

ขั้นตอนที่ 05: ตั้งค่าข้อความอัตโนมัติของแบบฟอร์มการติดต่อ

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

คลิกที่ "ตัวเลือกเพิ่มเติม" เพื่อเปิดใช้งานตัวเลือกการส่งข้อความที่กำหนดเอง จากนั้นแตะตัวเลือก "ข้อความที่กำหนดเอง" เป็น "ใช่" ซึ่งอนุญาตให้ใช้ข้อความสี่ประเภท ข้อความรวมถึง;

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

ขั้นตอนที่ 06: จัดรูปแบบแบบฟอร์มการติดต่อของคุณโดยใช้ Elementor

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

การตั้งค่า 07: เผยแพร่แบบฟอร์มการติดต่อของคุณ

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

6 องค์ประกอบเสริมที่ดีที่สุดสำหรับการสร้างแบบฟอร์มการติดต่อที่น่าดึงดูด

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

1. Droit Contact Form Addon สำหรับ Elementor - ให้บริการ Elementor ฟรีตลอดอายุการใช้งาน
2. HubSpot – เป็นปลั๊กอินการตลาดออนไลน์ฟรีที่คุณสามารถใช้เพื่อเพิ่มแบบฟอร์ม แชทสด ป๊อปอัป ฯลฯ
3. ปลั๊กอิน WPForms – เป็นเวอร์ชันพื้นฐานที่มีคุณสมบัติมากมาย คุณสามารถสร้างแบบฟอร์มการติดต่อพื้นฐานและรวมเข้ากับ Elementor ได้อย่างง่ายดาย
4. แบบฟอร์มการติดต่อ 7 – เป็นตัวเลือกที่คุ้มค่าและตรงไปตรงมาที่มาพร้อมกับรหัสย่อในตัว
5. Forminator – มาพร้อมกับอินเทอร์เฟซที่ใช้งานง่าย ปลั๊กอินมีการติดตั้งมากกว่า 2 ล้านครั้ง
6. แบบฟอร์ม Caldera – ประกอบด้วยคุณลักษณะที่มีประสิทธิภาพมากมายที่มีให้ใช้งานฟรี

คำถามที่พบบ่อย: จะสร้างแบบฟอร์มการติดต่อ Elementor ได้อย่างไร?

ห่อ!

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

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