วิธีเพิ่มแบบฟอร์มการติดต่อโดยใช้ปลั๊กอิน – P2: ใช้ WPForms

ในบทความก่อนหน้าของชุด "แบบฟอร์มติดต่อ" เราได้เรียนรู้ว่าแบบฟอร์มการติดต่อคืออะไรและวิธีใช้ปลั๊กอิน Contact Form 7 ตามที่ได้สัญญาไว้ ฉันได้เขียนบทช่วยสอนอื่นด้วย WPForms และจะแสดงให้คุณเห็นในบทความนี้

WPForms เป็นปลั๊กอินแบบฟอร์มติดต่อแบบลากและวางฟรีพร้อมการแสดงตัวอย่างแบบเรียลไทม์ จากประสบการณ์ของผม การทำงานกับปลั๊กอินนี้ทำได้ง่ายและสะดวก

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

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอิน WPForms

ปลั๊กอินนี้มีเวอร์ชันฟรีบน wordpress.org ดังนั้นคุณเพียงแค่ต้องติดตั้งและเปิดใช้งานปลั๊กอินโดยตรงบน Admin Dashboard

แบบฟอร์มติดต่อโดย WPForms – เครื่องมือสร้างแบบฟอร์มลากและวางสำหรับ WordPress

ผู้เขียน: WPForms

เวอร์ชันปัจจุบัน: 1.7.1.2

ปรับปรุงล่าสุด: 18 พฤศจิกายน 2564

wpforms-lite.1.7.1.2.zip

98% คะแนน 5,000,000+ ติดตั้ง WP 4.9+ จำเป็น

ขั้นตอนที่ 2: สร้างแบบฟอร์มการติดต่อใหม่และเลือกเทมเพลต

บน แดชบอร์ดการดูแลระบบ ให้ไปที่ WPForms > Add New

นี่คืออินเทอร์เฟซที่คุณต้องใช้:

ในแถบด้านข้างทางซ้าย คุณจะเห็น 5 ส่วน:

1. การตั้งค่า : ตั้ง ชื่อแบบฟอร์มการติดต่อและเลือกเทมเพลต
2. ฟิลด์ : เพิ่มและปรับแต่งฟิลด์สำหรับแบบฟอร์มการติดต่อ
3. การตั้งค่า : กำหนดค่าการแจ้งเตือน การยืนยัน และการตั้งค่าทั่วไป
4. การตลาด : เชื่อมโยงกับเครื่องมือการตลาดผ่านอีเมล เช่น Constant Contact, Campaign Monitor, Mailchimp, …
5. การชำระเงิน : เพิ่มการชำระเงินจาก PayPal Standard, Stripe และ Authorize.Net

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

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

มีเทมเพลตเริ่มต้นสี่แบบ:

• แบบฟอร์มการติดต่ออย่างง่าย
• แบบฟอร์มลงทะเบียนจดหมายข่าว
• คำแนะนำสำหรับ
• แบบฟอร์มเปล่า

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

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

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

เพิ่มช่อง

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

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

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

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

ในบทความนี้ ฉันต้องเพิ่มฟิลด์ต่อไปนี้:

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

ปรับแต่งตัวเลือกทั่วไปสำหรับแต่ละฟิลด์

โดยทั่วไป มีตัวเลือกสองประเภทในการปรับแต่งแต่ละฟิลด์:

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

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

ในขั้นตอนต่อไป เมื่อฉันพูดถึง "ข้อมูลพื้นฐาน" หมายความว่าคุณต้องจัดการกับตัวเลือกพื้นฐานเหล่านี้

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

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

หมายเหตุ :

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

• คุณสามารถคลิกปุ่มเครื่องหมายคำถามข้างตัวเลือก / ฟิลด์เพื่ออ่านคำแนะนำของ WPForms สำหรับพวกเขา

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

ปรับแต่งฟิลด์ "ชื่อของคุณ"

เลือกช่อง Simple Line Text และกรอกข้อมูลพื้นฐาน:

ในฟิลด์นี้ มีอีก 2 ตัวเลือกใน ส่วนตัวเลือกขั้นสูง :

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

ปรับแต่งฟิลด์ "หมายเลขโทรศัพท์ของคุณ"

ฟิลด์นี้ไม่มีอะไรพิเศษ เพียงเลือกฟิลด์ Numbers และกรอกข้อมูลพื้นฐาน:

ปรับแต่งฟิลด์ "อีเมลของคุณ"

เลือกฟิลด์ อีเมล และกรอกข้อมูลพื้นฐานสำหรับฟิลด์:

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

ปรับแต่ง "สถานที่ศึกษา" และ "สาขาวิชา"

ขั้นแรก เลือกช่องรายการ แบบเลื่อนลง ในส่วนตัวเลือก ให้ป้อนตัวเลือกสำหรับฟิลด์ คุณสามารถคลิก (+) (-) เพื่อเพิ่ม / ลบตัวเลือก

นอกจากนี้ คุณยังสามารถคลิกปุ่ม เพิ่มเป็นกลุ่ม เพื่อเพิ่มตัวเลือกมากมายในคราวเดียว ในกล่อง Add Choices ให้กรอกตัวเลือกตามลำดับที่ต้องการ (แต่ละตัวเลือกคือบรรทัด) จากนั้นคลิก Add New Choices

นอกจากนี้ ในช่องนี้มี 2 ตัวเลือกขั้นสูงที่คุณควรคำนึงถึง:

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

ปรับแต่ง "ลงทะเบียน" ฟิลด์

เลือก ช่องทำเครื่องหมาย และป้อนตัวเลือกเช่นช่องรายการ แบบเลื่อนลง

ในฟิลด์นี้ มี 2 ตัวเลือกขั้นสูงที่คุณควรสนใจ:

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

ขั้นตอนที่ 4: กำหนดค่าแบบฟอร์มการติดต่อ

หลังจากสร้างแบบฟอร์มการติดต่อแล้ว เราต้องกำหนดค่าแบบฟอร์มนั้น ใน WPForms เวอร์ชันฟรี คุณสามารถกำหนดค่าสามส่วนด้านล่าง:

กำหนดการตั้งค่าทั่วไป

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

• ข้อความปุ่มส่ง : ในแบบฟอร์มการติดต่อ 7 คุณต้องสร้างฟิลด์ ส่ง แต่ใน WPForms ปุ่มส่งมีมาให้ในตัว คุณสามารถเปลี่ยนข้อความของปุ่มนี้ในส่วนนี้ได้ตามที่คุณต้องการ เช่น ลงทะเบียน, ส่งอีเมล, ...
• เปิดใช้งานการป้องกันสแปม : บางครั้งนักส่งสแปมอาจรบกวนคุณผ่าน "รูปแบบถังขยะ" มากมาย ในกรณีนั้น คุณควรเปิดคุณลักษณะของการป้องกันสแปมนี้

กำหนดค่าการแจ้งเตือน

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

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

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

นี่คือตัวอย่างการตั้งค่าของฉัน:

กำหนดค่าการยืนยัน

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

เมื่อคุณกำหนดค่าทั้งหมดเสร็จแล้ว ให้คลิก บันทึก

ขั้นตอนที่ 5: แสดงแบบฟอร์มบนหน้า / โพสต์

การแสดงแบบฟอร์มของคุณบนหน้า / โพสต์ มี 2 วิธี

วิธีแรกคือการคลิก ฝัง เพื่อแสดงแบบฟอร์มของคุณบนหน้า:

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

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

ถัดไป วางรหัสย่อนี้ในบทความ/หน้าที่ต้องการ

และนี่คือผลลัพธ์:

มันดูไม่เหมือนตัวอย่างแบบฟอร์มการติดต่อเลย เลยต้องจัดสไตล์สักหน่อย

ขั้นตอนที่ 6: จัดรูปแบบแบบฟอร์ม

ใน Admin Dashboard ให้ไปที่ WPForms > All Forms ค้นหาแบบฟอร์มติดต่อของคุณ จากนั้นคลิก Edit

ตอนนี้ คลิกแต่ละฟิลด์ ไปที่ Advanced Options > CSS Classes และเพิ่มค่าต่อไปนี้:

• ชื่อของคุณ และ ลงทะเบียนที่ : ip-100
• หมายเลขโทรศัพท์ของคุณ , อีเมล , สถานที่ศึกษา , สาขา : ip-50

จากนั้นไปที่ Customizer > Addition CSS เพิ่มโค้ดนี้:

 .wpforms-field-container {
    จอแสดงผล: ดิ้น;
    flex-wrap: ห่อ;
		justify-content: ช่องว่างระหว่าง
}

.ip-50 {
    ความกว้าง: 48%!สำคัญ;
}

.ip-100{
		ความกว้าง: 100%!สำคัญ;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	ความกว้างสูงสุด: 100%;
}

.ip-100 ul {
	จอแสดงผล: ดิ้น;
	justify-content: ช่องว่างระหว่าง;
}

div.wpforms-container-full {
    ระยะขอบล่าง: 24px;
    พื้นหลัง: #eeeeee;
    ช่องว่างภายใน: 20px;
}

สุดท้าย คลิก เผยแพร่

และนี่คือผลลัพธ์สุดท้าย:

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

คำสุดท้าย

จากประสบการณ์ของผม การใช้อินเทอร์เฟซแบบลากแล้ววางเหมือนใน WPForms นั้นง่ายกว่าและเร็วกว่าการใช้ Contact Form 7 นอกจากนี้ยังมีปุ่มส่งที่สร้างไว้ล่วงหน้าและอีก 2 ส่วนที่เป็นประโยชน์เช่น Placeholder Text และ Description การแสดงตัวอย่างสดยังสะดวกมาก ช่วยให้ฉันตรวจจับข้อผิดพลาดได้ง่ายขึ้นเมื่อสร้างและปรับแต่งแบบฟอร์ม

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