ในบทความนี้คุณจะพบวิธีสร้างแบบฟอร์มด้วย Elementor ฟรี

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

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

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

สร้างแบบฟอร์มด้วย Elementor เวอร์ชันฟรีโดยใช้วิดเจ็ต HTML

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

ในการเริ่มต้น ให้สร้างหน้าใหม่และแก้ไขด้วย Elementor (หน้า – > เพิ่ม). แน่นอน คุณยังสามารถแก้ไขหน้าที่มีอยู่ หากคุณต้องการสร้างแบบฟอร์มในหน้าใหม่ อย่าลืมตั้งค่าเค้าโครงแบบฟอร์มโดยคลิกที่ไอคอนรูปเฟืองในแผงด้านซ้ายล่าง

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

สร้างแบบฟอร์มด้วย Elementor ฟรี

เผยแพร่/อัปเดตเพจเมื่อคุณแก้ไขเสร็จแล้ว

ดูเพิ่มเติม: วิธีใช้วิดเจ็ต / เทมเพลต Elementor เป็น Gutenberg Blocks

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

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

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

ก่อนอื่นให้ติดตั้งปลั๊กอิน รูปแบบการติดต่อ 7. โดยไปที่ ส่วนขยาย -> เพิ่ม. พิมพ์ “แบบฟอร์มการติดต่อ 7” ในช่องค้นหาแล้วคลิกปุ่ม ติดตั้งในขณะนี้ เมื่อคุณพบมันแล้ว

เปิดใช้งานปลั๊กอินทันทีที่ติดตั้ง

สร้างแบบฟอร์มด้วย Elementor ฟรี

แบบฟอร์มการติดต่อ 7 มาพร้อมกับแบบฟอร์มเริ่มต้น (a แบบฟอร์มติดต่อ ). คุณสามารถใช้งานได้หากต้องการ หากต้องการสร้างแบบฟอร์มใหม่แทน ให้ไปที่ ติดต่อ – > เพิ่ม. ตั้งชื่อแบบฟอร์มของคุณเพื่อให้คุณสามารถระบุได้ง่ายในอนาคต

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

สร้างแบบฟอร์มด้วย Elementor ฟรี

หากคุณต้องการเพิ่มฟิลด์ใหม่ ให้วางตัวชี้ของคุณในบริเวณที่คุณต้องการเพิ่มฟิลด์ใหม่ (คุณสามารถวางไว้ด้านล่างหรือเหนือฟิลด์ที่มีอยู่) เพิ่มป้ายกำกับสำหรับฟิลด์แบบฟอร์มใหม่ในรูปแบบ <label> votre label préféré </label>.

สร้างแบบฟอร์มด้วย Elementor ฟรี

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

กรอกข้อมูลในช่องและคลิกที่ ใส่แท็ก (คุณสามารถปล่อยให้ทุกอย่างเป็นค่าเริ่มต้นได้)

สร้างแบบฟอร์มด้วย Elementor ฟรี

แบบฟอร์มการติดต่อ 7 จะส่งการส่งที่ส่งผ่านแบบฟอร์มของคุณไปยังอีเมล คุณสามารถตั้งค่าอีเมลได้จากแท็บ E-mail.

สร้างแบบฟอร์มด้วย Elementor ฟรี

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

สร้างแบบฟอร์มด้วย Elementor ฟรี

คลิกที่ปุ่ม Enregistrer เมื่อคุณแก้ไขแบบฟอร์มและคัดลอกรหัสย่อเสร็จแล้ว

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

อ่าน: วิธีปิดการใช้งาน Elementor Popup บนสมาร์ทโฟน

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

เผยแพร่/อัปเดตเพจของคุณเมื่อคุณแก้ไขเสร็จแล้ว

แบบฟอร์มการติดต่อ 7 ใช้รูปแบบสไตล์ของ ธีม WordPress ที่คุณใช้ คุณสามารถจัดรูปแบบแบบฟอร์มการติดต่อ 7 ได้ แต่จำเป็นต้องใช้ทักษะ CSS คุณยังสามารถดูบทความนี้ได้ที่ วิธีปรับแต่งแบบฟอร์มติดต่อ 7 ด้วย Essential Addons และ Elementor

รับ Elementor Pro ทันที!!!

สรุป

ดังนั้น ! สำหรับบทความนี้จะแสดงวิธีสร้างแบบฟอร์มด้วย Elementor ฟรี หากคุณมีข้อสงสัยเกี่ยวกับวิธีการเดินทาง โปรดแจ้งให้พวกเขาทราบใน ความเห็น.

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...