วิธีปรับแต่งแบบฟอร์ม WordPress ใน Elementor [+ เทมเพลต]

คุณต้องการสร้างและปรับแต่งแบบฟอร์ม WordPress ของคุณเองใน Elementor หรือไม่?

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

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

สร้างแบบฟอร์ม WordPress ของคุณตอนนี้

ฉันต้องการ Elementor สำหรับ WordPress หรือไม่?

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

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

ดังนั้นความต้องการมันสำหรับเว็บไซต์ WordPress ของคุณจึงขึ้นอยู่กับความต้องการและความชอบเฉพาะของคุณ หากคุณคุ้นเคยกับ HTML, CSS และมีทักษะการออกแบบที่แข็งแกร่ง คุณอาจไม่จำเป็นต้องใช้ Elementor

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

วิธีปรับแต่งแบบฟอร์ม WordPress ใน Elementor

ติดตั้งและเปิดใช้งานปลั๊กอิน

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

แต่เราจะพูดต่อไป: อย่าลืมติดตั้งและเปิดใช้งานปลั๊กอิน WPForms และ Elementor ในแดชบอร์ด WordPress ของคุณ

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

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

ต้องการแรงบันดาลใจเพิ่มเติมหรือไม่? ลองดูวิธีการต่างๆ ในการเพิ่มและปรับแต่งแบบฟอร์ม WordPress ใน Elementor

แบบฟอร์มการติดต่อ

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

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

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

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

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

คลิกที่ + แบบฟอร์มใหม่ เพื่อนำแบบฟอร์มของเราไปไว้ในบล็อก

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

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

จากนั้น เลือกเทมเพลต จากแกลเลอรีเพื่อสร้างแบบฟอร์มของคุณ

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

สำหรับแบบฟอร์มการติดต่อของเรา เราจะใช้เทมเพลต

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

เราจะใช้เทมเพลตแบบฟอร์มการติดต่ออย่างง่ายเพื่อสร้างแบบฟอร์มของเรา

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

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

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

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

ที่นี่ คุณสามารถแก้ไขข้อความที่ปรากฏบนหน้าจอหลังจากที่ผู้ใช้แบบฟอร์มของคุณคลิก "ส่ง"

ในเทมเพลตแบบฟอร์มติดต่อแบบธรรมดาของเรา ข้อความยืนยันระบุว่า “ขอขอบคุณที่ติดต่อเรา! เราจะติดต่อคุณโดยเร็วที่สุด”

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

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

ตอนนี้เราจะกลับไปที่เครื่องมือสร้างเพจ Elementor

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

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

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

คุณจะมีสไตล์แบบไหน?

อย่าลืมเผยแพร่หน้าแบบฟอร์มของคุณเมื่อคุณปรับแต่งสไตล์แบบฟอร์มเสร็จแล้ว

เพียงคลิกที่ปุ่ม เผยแพร่ ที่แถบเครื่องมือด้านล่าง

ตอนนี้ เราจะต่อยอดตามขั้นตอนเหล่านี้เพื่อปรับแต่งหน้าแบบฟอร์มเพิ่มเติมด้วย Elementor

แบบฟอร์มสมัครรับจดหมายข่าว

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

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

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

ดังนั้น เราจะใช้เทมเพลตแบบฟอร์มลงทะเบียนจดหมายข่าว

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

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

เช่นเคย เราขอแนะนำให้คุณเขียนข้อความใดๆ ก็ตามที่คุณต้องการให้สมาชิกใหม่ได้รับ ในระหว่างนี้ มีข้อความว่า “ขอบคุณสำหรับการสมัครรับจดหมายข่าว! เราจะติดต่อกลับเร็วๆ นี้”

อย่าลืมบันทึกแบบฟอร์มสมัครรับจดหมายข่าวของคุณทุกครั้งที่ทำเสร็จแล้วก่อนที่จะออก

จากนั้นเมื่อกลับมาใน Elementor เราสามารถปรับแต่งสไตล์ของแบบฟอร์มได้อีกครั้ง คราวนี้ เรามาเปลี่ยน Field Styles , Label Styles และ Button Styles กัน

เราจะปรับแต่ง สไตล์ฟิลด์ ที่นี่เหมือนกับที่เราทำในแบบฟอร์มติดต่อด้านบน: เพิ่มรัศมีเส้นขอบเป็น 10 พิกเซลและเปลี่ยนสีเป็นสีดำ

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

จากนั้น หันความสนใจของคุณไปที่ปุ่มส่ง

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

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

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

แบบฟอร์มลงทะเบียนเข้าค่าย

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

เราจะดูขั้นตอนส่วนใหญ่ที่เราได้กล่าวถึงไปแล้วที่นี่ และข้ามไปที่การเลือกเทมเพลตฟอร์มจาก WPForms

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

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

จากนั้นภายในเครื่องมือสร้างเพจ Elementor เราจะทำงานใน การตั้งค่าขั้นสูง

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

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

จากนั้นคุณสามารถอัปโหลดรูปภาพเพื่อเป็นพื้นหลังที่แสดงในบล็อก WPForms

แม้ว่าจะต้องใช้เวลาในการกำหนดค่าขนาดรูปภาพ ตำแหน่ง และองค์ประกอบอื่น ๆ ของพื้นหลัง แต่ฟีเจอร์การปรับแต่งนี้คุ้มค่ากับความพยายาม

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

แบบฟอร์มการสั่งซื้อของลูกค้า

เราไม่สามารถเขียนบทความที่มีเทมเพลตฟอร์มและไม่กล่าวถึงเทมเพลตฟอร์มคำสั่งซื้อของเรา

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

ตอนนี้เราจะกลับไปที่ WPForms บล็อกการตั้งค่า ขั้นสูง เรากำลังกลับมาที่แท็บ พื้นหลัง อีกครั้ง แต่คราวนี้ ประเภทพื้นหลัง คือ การไล่ระดับสี

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

ผลลัพธ์ที่ได้นั้นน่าทึ่งมากและตัวเลือกการปรับแต่งก็ไม่มีที่สิ้นสุด

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

สร้างแบบฟอร์ม WordPress ของคุณตอนนี้

จากนั้น เชื่อมต่อแบบฟอร์ม Elementor กับ Google ชีต

ยินดีด้วย! คุณกำลังจะสร้างรูปแบบที่ยอดเยี่ยมใน Elementor ได้ดี

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

ลองดูบทช่วยสอนของเราเพื่อเรียนรู้วิธีการ!

พร้อมที่จะสร้างแบบฟอร์มของคุณแล้วหรือยัง? เริ่มต้นวันนี้ด้วยปลั๊กอินตัวสร้างแบบฟอร์ม WordPress ที่ง่ายที่สุด WPForms Pro มีเทมเพลตฟรีมากมายและมีการรับประกันคืนเงินภายใน 14 วัน

หากบทความนี้ช่วยคุณได้ โปรดติดตามเราบน Facebook และ Twitter เพื่อรับบทช่วยสอนและคำแนะนำ WordPress ฟรีเพิ่มเติม