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

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

ในส่วนแรกของซีรีส์ "แบบฟอร์มการติดต่อ" มาดูกัน:

• แบบฟอร์มการติดต่อคืออะไร?
• ประโยชน์ของแบบฟอร์มการติดต่อ
• จะใช้ปลั๊กอิน Contact Form 7 เพื่อสร้างแบบฟอร์มได้อย่างไร?

แบบฟอร์มการติดต่อคืออะไรและมีประโยชน์อย่างไร?

แบบฟอร์มการติดต่อคืออะไร?

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

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

ประโยชน์ของแบบฟอร์มการติดต่อ

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

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

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

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

วิธีสร้างแบบฟอร์มการติดต่อ

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

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

ในบทความทั้งหมดของชุดนี้ ผมจะแสดงวิธีสร้างแบบฟอร์มการลงทะเบียนมหาวิทยาลัยดังนี้:

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

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

ก่อนอื่น ดาวน์โหลดและติดตั้งปลั๊กอินนี้จากที่เก็บปลั๊กอินบน wordpress.org หรือไปที่ Dashboard > Plugin > Add New เพื่อติดตั้งและเปิดใช้งาน

แบบฟอร์มติดต่อ 7

ผู้เขียน : ทาคายูกิ มิโยชิ

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

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

contact-form-7.5.5.3.zip

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

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

อินเตอร์เฟซ

ไปที่ Dashboard > Contact > Add New เพื่อสร้างแบบฟอร์มการติดต่อใหม่ นี่คืออินเทอร์เฟซที่คุณจะใช้งาน:

(1): ใส่ชื่อแบบฟอร์มการติดต่อ
(2): แท็บสำหรับสร้างและตั้งค่าแบบฟอร์มการติดต่อ ได้แก่:

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

สร้างช่องสำหรับแบบฟอร์มการติดต่อ

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

(1) ประกอบด้วยฟิลด์ที่จะเพิ่มลงในแบบฟอร์ม เช่น ชื่อ, อีเมล, หมายเลข, ปุ่มส่ง, ... หากต้องการเพิ่มฟิลด์ใด ๆ เพียงแค่คลิกชื่อฟิลด์ที่เกี่ยวข้อง

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

คำแนะนำทั่วไปสำหรับภาคสนาม

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

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

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

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

โดยปกติ แท็กของแต่ละฟิลด์ในแบบฟอร์มการติดต่อที่สร้างด้วย Contact Form 7 จะมีโครงสร้างดังต่อไปนี้:

 [field* name_attribute id:field_id class:field_class "ค่าเริ่มต้นของฟิลด์"]

คำอธิบาย:

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

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

ด้วยแบบฟอร์มการติดต่อในชุดนี้ ฉันต้องเลือกฟิลด์ต่อไปนี้:

ทุกช่องมีข้อมูลทั่วไปที่ฉันได้กล่าวไว้ข้างต้น ดังนั้นฉันจึงแนะนำส่วนเฉพาะของแต่ละฟิลด์ในตอนนี้

ด้านล่างนี้คือคำแนะนำโดยละเอียดสำหรับแต่ละฟิลด์

สร้างช่องสำหรับใส่ชื่อ

เลือกฟิลด์ ข้อความ และป้อนข้อมูลพื้นฐานสำหรับฟิลด์ลงในกล่อง:

ในส่วน ประเภทฟิลด์ คุณสามารถเลือก ต้องการ เพื่อให้ฟิลด์นี้เป็นฟิลด์บังคับที่ต้องกรอก (ตัวเลือกนี้ไม่บังคับ)

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

ส่วน Akismet เกี่ยวข้องกับปลั๊กอิน Akismet – ปลั๊กอินป้องกันสแปม หากคุณไม่มีปลั๊กอินนี้ ไม่ต้องสนใจส่วนนี้

สร้างช่องสำหรับใส่หมายเลขโทรศัพท์

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

ในส่วน ประเภท ฟิลด์ ให้เลือกประเภทสำหรับฟิลด์นี้ ฟิลด์มีสองประเภท: Spinbox และ Slider

แถบเลื่อน จะแสดงมาตราส่วนการเลือกตัวเลขดังนี้

สไตล์นี้เหมาะสำหรับการให้คะแนนหรือเลือกตัวเลขตามมาตราส่วนเฉพาะ

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

ส่วน ช่วง ช่วยให้คุณเลือกการจำกัดจำนวนได้ ในตัวอย่างนี้ ฉันไม่ต้องการส่วนนี้ ดังนั้นฉันจึงไม่ได้กรอกข้อมูลใดๆ

สร้างสนามสำหรับเลือกวิชาเอกและสถานที่ศึกษา

ในช่องนี้ ให้เลือก เมนูแบบเลื่อนลง

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

หากคุณต้องการอนุญาตให้ผู้ใช้เลือกหลายตัวเลือกพร้อมกัน ให้ คลิก อนุญาตการเลือกหลายรายการ

สร้างฟิลด์สำหรับเลือกวัตถุประสงค์ของการลงทะเบียน

เลือก ช่องทำเครื่องหมาย

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

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

สร้างปุ่มส่ง

สุดท้าย เลือกช่อง ส่ง และกรอกข้อมูลตามข้อกำหนดต่อไปนี้ (โปรดทราบว่า ป้ายกำกับ คือคำที่จะแสดงบนปุ่มนี้ เช่น “ส่ง” “ลงทะเบียน” “ยืนยัน”)

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

เพิ่มป้ายกำกับสำหรับฟิลด์

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

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

 <label> ป้ายช่อง
[แท็กของฟิลด์] </label>

ถัดไป ให้เขียนป้ายกำกับของเขตข้อมูลในส่วน ป้ายชื่อเขตข้อมูล จากนั้นกรอกข้อมูลด้านบนให้ครบถ้วน คลิก บันทึก

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

 <label> ชื่อของคุณ (จำเป็น)
[ข้อความ* ชื่อของคุณ "ป้อนชื่อของคุณ"] </label> 

<label> หมายเลขโทรศัพท์ของคุณ
[ตัวยึดหมายเลขโทรศัพท์ "ป้อนหมายเลขโทรศัพท์ของคุณ"] </label> <label> อีเมลของคุณ (จำเป็น)
[อีเมล* อีเมลของคุณ "ป้อนอีเมลของคุณ"] </label>

<label> วิชาเอก
[เลือก* สาขาวิชา "วิทยาการคอมพิวเตอร์" "ภาษาศาสตร์" "เกษตร" "วิศวกรรม" "อีคอมเมิร์ซ"] </label>
<label> สถานที่เรียน 
[เลือก* สถานที่ศึกษา "นิวยอร์ก" "ชิคาโก" "ลอสแองเจลิส" "วอชิงตัน ดี.ซี." "ฮูสตัน" "ฟิลาเดลเฟีย"] </label>

</label> ลงทะเบียนเพื่อ
[ช่องทำเครื่องหมาย* ลงทะเบียน label_first "ศึกษา" "ทัวร์ชม" "ปรึกษา"] </label>

[ส่ง "ส่ง"]

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

การตั้งค่าแบบฟอร์มการติดต่อ

ตั้งค่าอีเมล

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

คำอธิบาย:

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

การตั้งค่าอื่นๆ

แท็บข้อความ

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

แท็บการตั้งค่าเพิ่มเติม

แท็บนี้ช่วยให้คุณเพิ่มข้อมูลโค้ดเพื่อติดตั้งสิ่งต่อไปนี้:

• โหมดสมาชิกเท่านั้น
• โหมดสาธิต
• ข้ามเมล
• การยอมรับเป็นการตรวจสอบ
• การตั้งค่านกฟลามิงโก
• ระงับการจัดเก็บข้อความ
• รหัส JavaScript

มีบางส่วนที่ค่อนข้างมีประโยชน์ที่คุณควรใช้เช่น:

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

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

แสดงแบบฟอร์มการติดต่อบนเว็บไซต์

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

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

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

อย่างไรก็ตาม แบบฟอร์มการติดต่อของฉันดูไม่ค่อยดี ฉันจึงต้องจัดรูปแบบสักหน่อย

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

 <div class="form__field form__full-width">
<label>ชื่อของคุณ (จำเป็น)
[ข้อความ* ตัวยึดตำแหน่งชื่อของคุณ "ป้อนชื่อของคุณ"]
</label>
</div>
<div class="form__field">
<label>หมายเลขโทรศัพท์ของคุณ
[ตัวยึดหมายเลขโทรศัพท์ "ป้อนหมายเลขโทรศัพท์ของคุณ"]
</label>
</div>
<div class="form__field">
<label>อีเมลของคุณ (จำเป็น)
[อีเมล* ตัวแทนอีเมลของคุณ "ป้อนอีเมลของคุณ"]
</label>
</div>
<div class="form__field">
<label>วิชาเอก
[เลือก* สาขาวิชา "วิทยาการคอมพิวเตอร์" "ภาษาศาสตร์" "เกษตรกรรม" "วิศวกรรมศาสตร์" "อีคอมเมิร์ซ"]
</label>
</div>
<div class="form__field">
<label>สถานที่เรียน
[เลือก* สถานที่ศึกษา "นิวยอร์ก" "ชิคาโก" "ลอสแองเจลิส" "วอชิงตัน ดี.ซี." "ฮูสตัน" "ฟิลาเดลเฟีย"]
</label>
</div>
<div class="form__field form__full-width">
<label>ลงทะเบียนเพื่อ
[ช่องทำเครื่องหมาย* ลงทะเบียน use_label_element "ศึกษา" "ทัวร์ชม" "ปรึกษา"]
</label>
</div>
<div class="form__field form__full-width">
[ส่ง "ส่ง"]</div>

จากนั้นไปที่ Customizer ของธีมของคุณ > CSS เพิ่มเติม แล้ววางโค้ดต่อไปนี้:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

สุดท้าย คลิก เผยแพร่ เพื่อบันทึก

คำสุดท้าย

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

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