ฟอร์มเป็นสิ่งจำเป็นสำหรับเว็บไซต์ใดๆ ตั้งแต่ฟอร์มติดต่อที่เรียบง่ายไปจนถึงกระบวนการลงทะเบียนที่ซับซ้อนหลายขั้นตอน Elementor Pro มีฟอร์มวิดเจ็ตในตัวที่ช่วยขจัดความจำเป็นในการใช้ปลั๊กอินฟอร์มแยกต่างหากในหลายกรณี ในคู่มือนี้ เราจะพูดถึงวิธีการสร้างฟอร์มติดต่อ ฟอร์มลงทะเบียน และฟอร์มหลายขั้นตอนโดยใช้ Elementor Pro พร้อมกับตัวเลือกการรวมสำหรับการตลาดผ่านอีเมลและบริการ CRM
บทแนะนำนี้ต้องการ Elementor Pro เวอร์ชันฟรีของ Elementor ไม่มีฟอร์มวิดเจ็ต
ภาพรวมของฟอร์มวิดเจ็ต Elementor
ฟอร์มวิดเจ็ต Elementor รองรับประเภทฟิลด์เหล่านี้:
| ประเภทฟิลด์ | กรณีการใช้งาน | หมายเหตุ |
|---|---|---|
| ข้อความ | ชื่อ, บริษัท, หัวข้อ | การป้อนข้อความแบบบรรทัดเดียว |
| อีเมล | การรวบรวมที่อยู่อีเมล | รวมการตรวจสอบรูปแบบอีเมล |
| กล่องข้อความ | เนื้อความ, ความคิดเห็น, คำอธิบาย | ข้อความหลายบรรทัดที่สามารถกำหนดแถวได้ |
| โทรศัพท์ | หมายเลขโทรศัพท์ | เรียกแป้นพิมพ์ตัวเลขบนมือถือ |
| หมายเลข | จำนวน, งบประมาณ, คะแนน | การตรวจสอบขั้นต่ำ/สูงสุด/ขั้นตอน |
| URL | ที่อยู่เว็บไซต์ | การตรวจสอบรูปแบบ URL |
| เลือก | การเลือกจากแบบหล่นลง (ประเทศ, หมวดหมู่) | เลือกแบบเดียวหรือหลายตัวเลือก |
| วิทยุ | การเลือกเพียงหนึ่งจากตัวเลือก (ประเภทบริการ) | ตัวเลือกที่มองเห็นได้โดยไม่ต้องใช้แบบหล่นลง |
| ช่องทำเครื่องหมาย | การเลือกหลายรายการ (ความสนใจ, บริการ) | อนุญาตให้เลือกหลายรายการ |
| วันที่ | วันที่นัดหมาย, วันที่กิจกรรม | ตัวเลือกวันที่ในตัว |
| เวลา | การกำหนดเวลานัดหมาย | การควบคุมการเลือกเวลา |
| อัปโหลดไฟล์ | การส่งเรซูเม่, เอกสาร, รูปภาพ | ประเภทไฟล์และขนาดที่กำหนดได้ |
| การยอมรับ | ข้อกำหนดและเงื่อนไข, การยินยอม GDPR | ช่องทำเครื่องหมายที่จำเป็นพร้อมลิงก์ |
| ซ่อน | ข้อมูลติดตาม (URL หน้า, ผู้ส่งอ้างอิง) | ไม่มองเห็นสำหรับผู้ใช้ |
| reCAPTCHA | การป้องกันสแปม | v2 ช่องทำเครื่องหมายหรือ v3 มองไม่เห็น |
| Honeypot | ป้องกันสแปม (มองไม่เห็นสำหรับมนุษย์) | ฟิลด์ที่ซ่อนซึ่งจับบอท |
การสร้างฟอร์มติดต่อ
ขั้นตอนที่ 1: เพิ่มฟอร์มวิดเจ็ต
- เปิดหน้าใดๆ ในตัวแก้ไข Elementor
- ค้นหา "ฟอร์ม" ในแผงวิดเจ็ต
- ลากฟอร์มวิดเจ็ตไปยังเลย์เอาต์ของคุณ
- ฟอร์มเริ่มต้นประกอบด้วยฟิลด์ชื่อ, อีเมล และข้อความ
ขั้นตอนที่ 2: กำหนดค่าฟิลด์ฟอร์ม
สำหรับฟอร์มติดต่อมาตรฐาน การกำหนดค่าฟิลด์นี้ทำงานได้ดี:
- ชื่อ (ฟิลด์ข้อความ, จำเป็น) – ตัวอย่าง: "ชื่อของคุณ"
- อีเมล (ฟิลด์อีเมล, จำเป็น) – ตัวอย่าง: "[email protected]"
- หัวข้อ (ฟิลด์ข้อความ, ไม่จำเป็น) – ตัวอย่าง: "เราจะช่วยคุณได้อย่างไร?"
- ข้อความ (ฟิลด์กล่องข้อความ, จำเป็น) – ตัวอย่าง: "บอกเราเกี่ยวกับโครงการของคุณ...", แถว: 5
- reCAPTCHA หรือ Honeypot สำหรับการป้องกันสแปม
ขั้นตอนที่ 3: กำหนดค่าการกระทำหลังจากส่ง
ภายใต้ส่วน "การกระทำหลังจากส่ง" กำหนดสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้ส่งฟอร์ม: For related information, see our guide on Elementor complete guide.
- อีเมล: ส่งข้อมูลฟอร์มไปยังที่อยู่อีเมลของคุณ (หรือหลายที่อยู่)
- เปลี่ยนเส้นทาง: ส่งผู้ใช้ไปยังหน้าขอบคุณหลังจากส่ง
- ป๊อปอัป: แสดงป๊อปอัปยืนยัน
- Webhook: ส่งข้อมูลฟอร์มไปยัง URL ภายนอก (Zapier, Make, API ที่กำหนดเอง)
- Mailchimp / ConvertKit / Drip: เพิ่มผู้ติดตามในรายการการตลาดผ่านอีเมล
- Slack: ส่งการแจ้งเตือนไปยังช่อง Slack
- Discord: ส่งการแจ้งเตือนไปยัง Discord webhook
ขั้นตอนที่ 4: ปรับแต่งฟอร์ม
ในแท็บ สไตล์ ปรับแต่งรูปลักษณ์: For related information, see our guide on Elementor templates and kits.
- รูปแบบฟอร์ม
- ฟิลด์: ฟิลด์ที่ซ้อนกัน (เต็มความกว้าง) หรือแบบเรียงข้าง (ข้างกัน)
- สไตล์ฟิลด์: ขอบ, สีพื้นหลัง, การเว้นระยะ, รัศมีขอบ, สีสถานะโฟกัส
- สไตล์ป้ายชื่อ: ตระกูลฟอนต์, ขนาด, สี, การเว้นระยะ
- สไตล์ปุ่ม: สีพื้นหลัง, สีข้อความ, ขอบ, เอฟเฟกต์เมื่อชี้, ตัวเลือกเต็มความกว้าง
- ข้อความ: สีและรูปแบบข้อความสำหรับข้อความสำเร็จและข้อความผิดพลาด
การสร้างฟอร์มหลายขั้นตอน
ฟอร์มหลายขั้นตอนมีประโยชน์สำหรับฟอร์มยาว (การลงทะเบียน, การสมัคร, การสำรวจ) ซึ่งการแสดงฟิลด์ทั้งหมดในครั้งเดียวอาจทำให้ผู้ใช้รู้สึกท่วมท้น Elementor Pro รองรับฟอร์มหลายขั้นตอนโดยตรง For related information, see our guide on creating landing pages with Elementor.
วิธีการตั้งค่าขั้นตอน
- เพิ่มวิดเจ็ตฟอร์มลงในหน้า
- ในรายการฟิลด์ฟอร์ม ให้เพิ่มประเภทฟิลด์ "ขั้นตอน" ระหว่างกลุ่มฟิลด์
- แต่ละฟิลด์ขั้นตอนจะสร้างขั้นตอนใหม่พร้อมปุ่ม "ถัดไป" และ "ก่อนหน้า"
- โครงสร้างตัวอย่าง:
- ขั้นตอนที่ 1: ชื่อ, อีเมล, โทรศัพท์ (ข้อมูลส่วนตัว)
- ขั้นตอนที่ 2: บริษัท, งบประมาณ, ระยะเวลา (รายละเอียดโครงการ)
- ขั้นตอนที่ 3: ข้อความ, อัปโหลดไฟล์ (ข้อมูลเพิ่มเติม)
ฟอร์มหลายขั้นตอนจะแสดงตัวบ่งชี้ความก้าวหน้าที่แสดงว่าผู้ใช้อยู่ในขั้นตอนใด ซึ่งช่วยลดความซับซ้อนที่รับรู้และปรับปรุงอัตราการกรอกข้อมูลเมื่อเปรียบเทียบกับการแสดงฟิลด์ทั้งหมดในครั้งเดียว
การสร้างฟอร์มการลงทะเบียนผู้ใช้
Elementor Pro สามารถสร้างฟอร์มการลงทะเบียนผู้ใช้ WordPress โดยไม่ต้องใช้ปลั๊กอินแยก:
- เพิ่มวิดเจ็ตฟอร์มและกำหนดฟิลด์ (ชื่อผู้ใช้, อีเมล, รหัสผ่าน)
- ภายใต้ "การกระทำหลังจากส่ง" ให้เพิ่มการกระทำ "ลงทะเบียน"
- แมพฟิลด์ฟอร์มแต่ละฟิลด์ไปยังฟิลด์ผู้ใช้ WordPress ที่เกี่ยวข้อง
- ตั้งค่าบทบาทผู้ใช้เริ่มต้นสำหรับการลงทะเบียนใหม่
- สามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าบัญชีของพวกเขาหลังจากการลงทะเบียนได้
หมายเหตุ: WordPress ต้องการให้ผู้ดูแลระบบอนุมัติผู้ใช้ใหม่โดยค่าเริ่มต้น คุณสามารถเปลี่ยนแปลงนี้ได้ที่ การตั้งค่า → ทั่วไป → สมาชิกหากคุณต้องการให้ผู้ใช้ลงทะเบียนได้อย่างอิสระ
การรวมเข้ากับบริการการตลาดผ่านอีเมล
Elementor Pro รวมเข้ากับแพลตฟอร์มการตลาดผ่านอีเมลที่นิยมโดยตรง:
บริการ ประเภทการรวม ขั้นตอนการตั้งค่า Mailchimp แบบเนทีฟ (ในตัว) เพิ่ม API key → เลือกรายการ → แมพฟิลด์ ConvertKit แบบเนทีฟ (ในตัว) เพิ่ม API key → เลือกฟอร์ม → แมพฟิลด์ ActiveCampaign แบบเนทีฟ (ในตัว) เพิ่มข้อมูลรับรอง API → เลือกรายการ → แมพฟิลด์ Drip แบบเนทีฟ (ในตัว) เพิ่ม API token → เลือกบัญชี → แมพฟิลด์ GetResponse แบบเนทีฟ (ในตัว) เพิ่ม API key → เลือกแคมเปญ → แมพฟิลด์ MailerLite แบบเนทีฟ (ในตัว) เพิ่ม API key → เลือกกลุ่ม → แมพฟิลด์ HubSpot ผ่าน Webhook สร้างการเชื่อมต่อ Zapier/Make กับการกระทำ webhook สำหรับการรวมแต่ละรายการ ขั้นตอนคือ: ป้อน API key ของบริการของคุณในการตั้งค่าการรวมของ Elementor จากนั้นเลือกบริการเป็น "การกระทำหลังจากส่ง" ในฟอร์มของคุณ แมพฟิลด์ฟอร์มของคุณไปยังฟิลด์ของบริการ และผู้สมัครจะถูกเพิ่มโดยอัตโนมัติเมื่อฟอร์มถูกส่ง
กลยุทธ์ป้องกันสแปม
ฟอร์มติดต่อดึงดูดบอทสแปม Elementor Pro มีตัวเลือกการป้องกันสแปมหลายอย่าง:
- Google reCAPTCHA v3: การตรวจจับสแปมที่มองไม่เห็นที่ให้คะแนนการส่งโดยไม่ต้องมีปฏิสัมพันธ์จากผู้ใช้ แนะนำสำหรับฟอร์มส่วนใหญ่
- reCAPTCHA v2: ช่องทำเครื่องหมาย "ฉันไม่ใช่หุ่นยนต์" มองเห็นได้มากขึ้นแต่สามารถลดการกรอกฟอร์ม
- ฟิลด์ Honeypot: ฟิลด์ที่มองไม่เห็นที่บอทกรอกข้อมูล หากฟิลด์มีข้อมูล การส่งจะถูกปฏิเสธ ไม่ต้องการการโต้ตอบจากผู้ใช้
- ฟิลด์การยอมรับ: ช่องทำเครื่องหมายที่จำเป็น (การยินยอม GDPR, การยอมรับข้อกำหนด) ที่ยังทำหน้าที่เป็นการป้องกันบอท
เราขอแนะนำให้ใช้ reCAPTCHA v3 ร่วมกับฟิลด์ Honeypot ซึ่งให้การป้องกันสแปมสองชั้นโดยไม่มีผลกระทบที่มองเห็นได้
ในประสบการณ์ของผู้ใช้。
Elementor Forms กับปลั๊กอินฟอร์มเฉพาะ
ฟีเจอร์ Elementor Forms Gravity Forms WPForms ตัวสร้างภาพ ภายในตัวแก้ไข Elementor แยกการลากและวาง แยกการลากและวาง ตรรกะเงื่อนไข พื้นฐาน (แสดง/ซ่อนฟิลด์) ขั้นสูง ขั้นสูง การรวมการชำระเงิน ปุ่ม PayPal Stripe, PayPal, Square Stripe, PayPal, Square การคำนวณ ไม่ ใช่ ใช่ (Pro) หลายขั้นตอน ใช่ ใช่ ใช่ การอัปโหลดไฟล์ ใช่ ใช่ ใช่ การจัดการการเข้าถึง ผ่านการส่งของ Elementor จัดการการเข้าถึงเต็มรูปแบบ จัดการการเข้าถึงเต็มรูปแบบ ต้องการตัวสร้างหน้า ใช่ (Elementor Pro) ไม่ ไม่ Elementor Forms เพียงพอสำหรับฟอร์มติดต่อ การลงทะเบียนรับข่าวสาร และฟอร์มลงทะเบียนที่ง่าย สำหรับฟอร์มที่ซับซ้อนซึ่งต้องการการประมวลผลการชำระเงิน ตรรกะเงื่อนไขขั้นสูง หรือการจัดการการเข้าถึงที่ซับซ้อน ปลั๊กอินฟอร์มเฉพาะเช่น Gravity Forms หรือ WPForms จะเหมาะสมกว่า。
คำถามที่พบบ่อย
ฉันสามารถใช้ฟอร์ม Elementor โดยไม่ต้องใช้ Elementor Pro ได้ไหม?
ไม่สามารถ ฟีเจอร์ Form เป็นสิทธิพิเศษสำหรับ Elementor Pro หากคุณต้องการฟอร์มด้วยเวอร์ชันฟรีของ Elementor ให้ใช้ปลั๊กอินฟอร์มแยกเช่น Contact Form 7 (ฟรี), WPForms Lite (ฟรี) หรือ Gravity Forms (พรีเมียม).
การส่งฟอร์ม Elementor ถูกเก็บไว้ที่ไหน?
การส่งฟอร์มจะถูกเก็บไว้ในฐานข้อมูลของ WordPress และสามารถเข้าถึงได้ที่ Elementor → Submissions ในแผงผู้ดูแลระบบ คุณสามารถดู ส่งออก (CSV) และลบการส่งได้ การส่งยังถูกส่งไปยังที่อยู่อีเมลที่คุณกำหนดในอีเมลแอคชั่น。
ฟอร์ม Elementor สามารถรับการอัปโหลดไฟล์ได้หรือไม่?
ใช่ เพิ่มประเภทฟิลด์การอัปโหลดไฟล์ลงในฟอร์มของคุณ คุณสามารถกำหนดประเภทไฟล์ที่ยอมรับ (PDF, JPG, PNG, DOCX, ฯลฯ) และขนาดไฟล์สูงสุด ไฟล์ที่อัปโหลดจะถูกเก็บไว้ในห้องสมุดสื่อของ WordPress และเชื่อมโยงกับการส่งฟอร์ม。
ฉันจะเพิ่มตรรกะเงื่อนไขในฟอร์ม Elementor ได้อย่างไร?
Elementor Pro รองรับตรรกะเงื่อนไขพื้นฐาน: แสดงหรือซ่อนฟิลด์ตามค่าของฟิลด์อื่น ในการตั้งค่าฟิลด์ เปิดใช้งาน "Conditional" และตั้งค่าข้อกำหนด (เช่น แสดงฟิลด์ "บริษัท" เฉพาะเมื่อเลือกปุ่มวิทยุ "ฉันเป็นธุรกิจ") สำหรับตรรกะเงื่อนไขขั้นสูง (การคำนวณ, เงื่อนไขหลายระดับ) ปลั๊กอินฟอร์มเฉพาะอาจเหมาะสมกว่า。
ฉันสามารถสร้างฟอร์มป๊อปอัพด้วย Elementor ได้ไหม?
ใช่ สร้างแม่แบบป๊อปอัพใน Elementor เพิ่มฟีเจอร์ Form ลงไป และตั้งค่าข้อกำหนดในการกระตุ้น (คลิก, เปอร์เซ็นต์การเลื่อน, เจตนาที่จะออก, การหน่วงเวลา) นี่มีประโยชน์สำหรับการลงทะเบียนรับข่าวสาร แม่เหล็กนำลูกค้า และข้อเสนอส่งเสริมการขายโดยไม่ต้องเพิ่มฟอร์มในเลย์เอาต์หน้าหลัก。
ฉันจะป้องกันสแปมในฟอร์ม Elementor ได้อย่างไร?
ใช้ Google reCAPTCHA v3 (ไม่มองเห็น) ร่วมกับฟิลด์ Honeypot เพื่อการป้องกันสองชั้น สิ่งนี้จะบล็อกบอทอัตโนมัติโดยไม่เพิ่มความยุ่งยากให้กับผู้ใช้จริง สำหรับฟอร์มที่มีสแปมจำนวนมาก ให้พิจารณาเพิ่มฟิลด์การยอมรับ (ช่องทำเครื่องหมายที่จำเป็น) เป็นชั้นที่สาม。
รับ Elementor Pro พร้อมตัวสร้างฟอร์ม
เข้าถึงฟีเจอร์ Form, Theme Builder, WooCommerce Builder และวิดเจ็ต Pro กว่า 100 รายการ สร้างฟอร์มได้อย่างมีวิสัยทัศน์โดยไม่ต้องใช้ปลั๊กอินเพิ่มเติม。
เรียกดู Elementor Pro →
