วิธีปรับ CSS Contact Form 7

เนื้อหา

• คำสั่ง
• เคล็ดลับ
• การเตือน
• สิ่งที่คุณต้องการ

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

คำสั่ง

ปรับแต่งสไตล์ของฟิลด์ฟอร์มติดต่อ 7 โดยใช้ CSS (รูปภาพ Comstock / Comstock / Getty)

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

   / นี่คือที่ที่รหัส CF7 ที่กำหนดเองของฉันเริ่มทำงาน /

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

   .wpcf7 input [type = "text"], .wpcf7 areadotexto {}

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

   .wpcf7 input [type = "text"] {พื้นหลัง: ไม่มีการเลื่อนซ้ำ 0 0 # F9F9F9; เส้นขอบ: 1px solid # 8E9BA9 การขยาย: 5px; ความกว้าง: 200px; }

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

   .wpcf7 input [type = "select"] {

   
   

   }

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

   .wpcf7 input [type = "selected"] {พื้นหลัง: ไม่มีการเลื่อนซ้ำ 0 0 # F9F9F9; เส้นขอบ: 1px solid # 8E9BA9 การขยาย: 5px; ความกว้าง: 210px; }

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

   .wpcf7 อินพุต [type = "การส่ง"] {

   }

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

   .wpcf7 [ชนิด = "การส่ง"] {พื้นหลังสี: # 990000; เส้นขอบ: 4px solid # B34040; สี: #FFFFFF; }

5. บันทึกการเปลี่ยนแปลงในสไตล์ชีทของคุณและถ่ายโอนข้อมูลไปยังโฟลเดอร์ชุดรูปแบบ

เคล็ดลับ

• ลองสไตล์ที่แตกต่างและสีเส้นขอบที่แตกต่างกัน
• ทำการตรวจสอบแบบฟอร์มใหม่ใน Firefox, Safari และ Internet Explorer เนื่องจากแต่ละเบราว์เซอร์จะมีช่องป้อนข้อมูลที่แตกต่างกันเล็กน้อย

การเตือน

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

สิ่งที่คุณต้องการ

• เข้าถึงสไตล์ชีทของ WordPress