วิธีปรับแต่งฟอร์มใน Contact Form 7 ด้วย CSS ใน WordPress

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

ทำไมต้องปรับแต่งสไตล์ฟอร์ม Contact Form 7?

Contact Form 7 เป็นหนึ่งในปลั๊กอิน WordPress ที่ได้รับความนิยมสูงสุดสำหรับสร้างฟอร์ม—แต่รูปลักษณ์เริ่มต้นค่อนข้างธรรมดา การปรับแต่งสไตล์ในธีม WordPress แบบคลาสสิกช่วยให้คุณ:

• ให้ตรงกับแบรนด์ของเว็บไซต์คุณ

• ปรับปรุงการใช้งานและการเข้าถึง

• ทำให้ฟอร์มน่าใช้งานและดูเป็นมืออาชีพมากขึ้น

ขั้นตอนที่ 1: ระบุ CSS selector ของฟอร์มคุณ

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

• แต่ละฟอร์ม Contact Form 7 จะถูกล้อมด้วยคลาสเฉพาะ: .wpcf7

• องค์ประกอบแต่ละอย่าง เช่น input, textarea และปุ่ม submit ใช้แท็ก HTML มาตรฐาน

ขั้นตอนที่ 2: เพิ่ม CSS ที่คุณกำหนดเองลงในเว็บไซต์ WordPress ของคุณ

คุณสามารถเพิ่ม CSS ได้สองวิธีหลัก ๆ :

• ผ่านตัวปรับแต่ง:
  ไปที่ รูปลักษณ์ > ปรับแต่ง > CSS เพิ่มเติม แล้ววางสไตล์ของคุณ

หมายเหตุ: เพิ่ม CSS ของคุณลงในไฟล์ style.css ของธีมลูกของคุณสำหรับการปรับแต่งขั้นสูง

ขั้นตอนที่ 3: เขียน CSS ที่คุณกำหนดเอง

นี่คือตัวอย่างทั่วไปบางส่วนเพื่อเริ่มต้น โดยใช้ส่วนประกอบฟอร์ม “text” และ “submit” เป็นตัวอย่าง:

ปรับแต่งสไตล์ฟอร์ม Contact Form 7 ทั้งหมด

.wpcf7 input[type="text"],
.wpcf7 textarea {
  border: 2px solid #0073e6;
  padding: 10px;
  width: 100%;
  font-size: 1em;
}

.wpcf7 input[type="submit"] {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background: #005bb5;
}

Pseudo-class ใน CSS เช่น :hover ช่วยให้คุณปรับแต่งสไตล์องค์ประกอบตามสถานะหรือการโต้ตอบของผู้ใช้ ตัวอย่างเช่น :hover จะใช้สไตล์เมื่อผู้ใช้เลื่อนเมาส์ไปที่ปุ่มหรือฟิลด์ มักใช้เพื่อเน้นปุ่มหรือเปลี่ยนสีเมื่อชี้ ทำให้ฟอร์มของคุณดูโต้ตอบและน่าสนใจยิ่งขึ้น Pseudo-class อื่น ๆ ที่มีประโยชน์ เช่น :focus (เมื่อเลือกอินพุต) และ :active (เมื่อคลิกองค์ประกอบ) การใช้ pseudo-class ช่วยปรับปรุงประสบการณ์ผู้ใช้โดยให้ข้อเสนอแนะแบบทันทีเมื่อผู้เยี่ยมชมโต้ตอบกับฟอร์มของคุณ

กำหนดเป้าหมายฟอร์มเฉพาะ

แต่ละฟอร์มจะมี ID เฉพาะ เช่น #wpcf7-f123-o1 ใช้สิ่งนี้เพื่อปรับแต่งสไตล์เฉพาะฟอร์มนั้น:

#wpcf7-f123-o1 input[type="text"] {
  background: #f9f9f9;
}
แทนที่ f123-o1 ด้วย ID ของฟอร์มคุณจริง ๆ คุณสามารถค้นหา ID เฉพาะของฟอร์มได้โดยดูหน้าที่ฝัง Contact Form 7 คลิกขวาที่ฟอร์มแล้วเลือก “Inspect” (หรือ “Inspect Element”) ในเบราว์เซอร์ของคุณ มองหา <div> ที่มีคลาส .wpcf7—ID จะปรากฏเป็น id="wpcf7-f123-o1" ในโค้ด HTML ใช้ ID นี้ในตัวเลือก CSS เพื่อกำหนดเป้าหมายเฉพาะฟอร์มนั้น

ขั้นตอนที่ 4: ใช้คลาสที่มีในตัวของ Contact Form 7

Contact Form 7 จะเพิ่มคลาสให้องค์ประกอบโดยอัตโนมัติ ทำให้การกำหนดเป้าหมายง่ายขึ้น ตัวอย่างเช่น:

• .wpcf7-form-control – ฟอร์มคอนโทรลทั้งหมด

• .wpcf7-submit – ปุ่มส่งฟอร์ม

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

ตัวอย่าง

.wpcf7-form-control.wpcf7-text {
  border-radius: 5px;
}

.wpcf7-submit {
  font-weight: bold;
  letter-spacing: 1px;
}

ขั้นตอนที่ 5: ดูตัวอย่างและปรับแต่ง

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

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

เคล็ดลับด่วนสำหรับการปรับแต่งฟอร์มให้ดูดีขึ้น

• ให้เข้าถึงได้ง่าย: ตรวจสอบให้แน่ใจว่าคอนทราสต์สีดีและขนาดตัวอักษรอ่านง่าย

• ใช้ระยะห่าง: เพิ่ม padding และ margin เพื่อให้ดูสะอาดตา ไม่รก

• เน้นข้อผิดพลาด: ปรับแต่งข้อความข้อผิดพลาดด้วยสีที่ชัดเจน (เช่น สีแดง) เพื่อช่วยให้ผู้ใช้แก้ไขข้อผิดพลาดได้

• ทดสอบบนมือถือ: ตรวจสอบให้แน่ใจว่าฟอร์มของคุณดูดีบนทุกอุปกรณ์

การแก้ไขปัญหา

หากสไตล์ของคุณไม่แสดงผล ลองทำตามขั้นตอนเหล่านี้:

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

• ตรวจสอบปัญหา CSS specificity – หากสไตล์ของคุณไม่ถูกนำไปใช้ ลองทำให้ selector เฉพาะเจาะจงมากขึ้นเพื่อแทนที่สไตล์ที่มีอยู่

• ตรวจสอบให้แน่ใจว่าคุณแก้ไขไฟล์หรือส่วน CSS ที่ถูกต้อง – ตรวจสอบอีกครั้งว่าคุณเพิ่มโค้ดในตำแหน่งที่ถูกต้อง เช่น แผง CSS เพิ่มเติม style.css ของธีมลูก หรือปลั๊กอิน CSS ที่กำหนดเอง

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

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

• ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดทั่วไป – ใช้ชื่อคลาสที่ชัดเจนและสม่ำเสมอ ลงท้ายแต่ละกฎ CSS ด้วยเครื่องหมายอัฒภาค และปิดบล็อกโค้ดด้วยวงเล็บปีกกา (}) เสมอ

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

ตัวอย่าง: CSS ที่กำหนดเองแบบสมบูรณ์สำหรับฟอร์ม Contact Form 7

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #218838;
}

นี่คือตัวอย่างของฟอร์มที่ปรับแต่งด้วยโค้ด CSS ข้างต้น โค้ด CSS นี้จะปรับแต่งรูปลักษณ์ขององค์ประกอบสำคัญหลายอย่างในฟอร์ม Contact Form 7 ของคุณ โดยจะกำหนดเป้าหมายฟิลด์ข้อความ ฟิลด์อีเมล และ textarea ทั้งหมด ให้มีเส้นขอบสีเทาอ่อน มุมโค้งมน padding ที่สบายตา และความกว้างที่สม่ำเสมอเพื่อให้ดูสะอาด ทันสมัย 

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

การเพิ่ม CSS: ธีมคลาสสิกกับธีมบล็อก

ขั้นตอนในคู่มือนี้สำหรับการปรับแต่งฟอร์ม Contact Form 7 ด้วย CSS ได้รับการออกแบบมาสำหรับธีมคลาสสิกใน WordPress ธีมคลาสสิก เช่น Astra ที่ได้รับความนิยม ใช้ตัวปรับแต่ง ซึ่งคุณสามารถเพิ่ม CSS ที่กำหนดเองได้ง่าย ๆ ในส่วน “CSS เพิ่มเติม” ทำให้ปรับแต่งฟอร์มและดูการเปลี่ยนแปลงแบบสดได้ง่าย

อย่างไรก็ตาม หากเว็บไซต์ของคุณใช้ธีมบล็อก (หรือที่เรียกว่าธีม Full Site Editing หรือ FSE) ขั้นตอนจะต่างออกไป ธีมบล็อกมักไม่มีตัวปรับแต่งหรือฟิลด์ “CSS เพิ่มเติม” โดยค่าเริ่มต้น คุณจะต้องใช้ Site Editor ในการปรับแต่งดีไซน์ แม้ว่าคุณจะสามารถปรับแต่งสไตล์โดยรวม เช่น สี ตัวอักษร และเลย์เอาต์ได้ แต่การเพิ่ม CSS ที่กำหนดเองอาจไม่สามารถทำได้ใน UI เสมอไป

ควรทำอย่างไรหากคุณใช้ธีมบล็อก

• เปิดแดชบอร์ด WordPress ของคุณแล้วไปที่ รูปลักษณ์ > ตัวแก้ไข (Site Editor)

• ใน Site Editor ให้มองหาแผง Styles (ไอคอนวงกลมครึ่งทึบ)

• ธีมบล็อกบางธีมมีตัวเลือก “CSS เพิ่มเติม” ในแผง Styles แต่ขึ้นอยู่กับธีมและเวอร์ชัน WordPress ของคุณ

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

แหล่งข้อมูลเพิ่มเติม

• คู่มือการปรับแต่งสไตล์อย่างเป็นทางการของ Contact Form 7

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