คู่มือแบบฟอร์มการติดต่อ Ultimate Elementor

เผยแพร่แล้ว: 2022-08-28

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

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

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

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

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

คำแนะนำทีละขั้นตอนในการใช้ Elementor เพื่อสร้างแบบฟอร์มการติดต่อ

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

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

องค์ประกอบ

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

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

แบบฟอร์มฟิลด์

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

คุณจะพบตัวเลือกฟิลด์มากมายที่คุณสามารถใช้ได้ รวมถึง Text, Email, URL, Checkbox, Textarea, Tel, Select, Radio, Acceptance, Number, HTML, Hidden, Password, Honeypot, reCAPTCHA และ reCAPTCHA V3 เป็นต้น .

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

แก้ไขแบบฟอร์ม

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

แบบฟอร์มขั้นตอนที่3

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

คลิกที่ส่วน "การดำเนินการหลังจากส่ง" ในแบบฟอร์มของคุณและคลิกที่ฟิลด์ "เพิ่มการดำเนินการ" คุณจะเห็นตัวเลือกต่างๆ เช่น Email Webhook, Discord, Popup, ActiveCampaign, GetResponse และ Slack เป็นต้น เลือกตัวเลือกใดก็ได้เพื่อเพิ่มการดำเนินการหลังจากส่ง

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

ควรสังเกตว่า Elementor มีตัวเลือกการดำเนินการมากมายที่คุณสามารถสำรวจได้ อีกครั้ง คุณสามารถพิจารณาบริการอื่นๆ ของบุคคลที่สามเพื่อให้ราบรื่นยิ่งขึ้น บริการของบุคคลที่สามบางส่วนที่คุณสามารถสำรวจได้ ได้แก่ Hubspot, Mailchimp, Drip, Convertkit และ Slack เป็นต้น ทั้งหมดนี้เป็นการผสานรวมในตัวใน Elementor ทำให้เข้าถึงและใช้งานได้ง่าย

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

ข้อความที่กำหนดเอง

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

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

สไตล์

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

อัปเดต

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

บทสรุป

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

ฉันจะตั้งค่าแบบฟอร์มการติดต่อ Elementor ได้อย่างไร

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

Contact Form 7 เข้ากันได้กับ Elementor หรือไม่?

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

ปลั๊กอินแบบฟอร์มการติดต่อใดดีที่สุดสำหรับ Elementor

ปลั๊กอินฟอร์มจำนวนมากทำงานได้อย่างสมบูรณ์กับ Elementor แบบฟอร์มที่ได้รับความนิยม ได้แก่ Gravity Forms, weForms และ Contact Form 7 เป็นต้น

ฉันสามารถใช้ WPForms ใน Elementor ได้หรือไม่

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

ฉันสามารถใช้แบบฟอร์มที่น่าเกรงขามกับ Elementor ได้หรือไม่

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

อุไมร์
อุไมร์ ข่าน