วิธีปรับแต่งรูปแบบการติดต่อ 7 เพื่อให้เข้ากับเว็บไซต์ของคุณ

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

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

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

มักจะทำให้เกิดบางสิ่งที่ค่อนข้างพื้นฐาน เช่นนี้

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

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

วิธีปรับแต่งรูปแบบการติดต่อ 7 เพื่อให้เข้ากับเว็บไซต์ของคุณ

สมัครสมาชิกช่อง Youtube ของเรา

จะแก้ไขแบบฟอร์มติดต่อ 7 CSS ของคุณได้ที่ไหน (และทำไม)

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

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

เอาล่ะ เมื่อรู้แล้วว่าควรวางสไตล์ไว้ที่ใด เรามาเริ่มกันเลย!

วิธีสร้างสไตล์แบบฟอร์มทั่วทั้งไซต์

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

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

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

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

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

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

บนไซต์ทดสอบของฉัน สิ่งนี้ส่งผลให้:

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

วิธีสร้างสไตล์ฟิลด์แบบฟอร์มทั่วทั้งไซต์

คำขอทั่วไปอย่างหนึ่งที่ผู้คนมีเมื่อพูดถึงการจัดรูปแบบ Contact Form 7 คือวิธีที่พวกเขาสามารถปรับความกว้างของฟิลด์ได้ โดยเฉพาะพื้นที่ข้อความที่ขยายออกไปไม่ไกลนัก

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

.wpcf7-textarea {

width: 85%;

}

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

.wpcf7 input {

width: 50%;

}

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

.wpcf7-text {
width: 50%;
}

หลังจากการเปลี่ยนแปลงทั้งหมดข้างต้น ฉันสามารถจัดรูปแบบแบบฟอร์มที่คุณเห็นด้านล่าง

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

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

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

วิธีการจัดรูปแบบเฉพาะแบบฟอร์ม

การรับ CSS ID เฉพาะที่จำเป็นในการแก้ไขรูปแบบให้กับแบบฟอร์มเฉพาะอาจเป็นเรื่องที่ยุ่งยากเล็กน้อย แต่ก็เป็นไปได้ด้วยการปรับแต่งเล็กน้อย

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

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

ในกรณีของฉัน หมายเลข ID ในรหัสย่อของฉันคือ 4407 รหัสเต็มกลายเป็น wpcf7-f4407-p4405-o1 ซึ่งหมายความว่าฉันสามารถแก้ไขเพิ่มเติมในแบบฟอร์มเฉพาะนั้นได้ โดยใช้โค้ดด้านล่างกับเกณฑ์ต่างๆ ที่แตกต่างจากการตั้งค่าทั่วทั้งไซต์ของฉัน

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

วิธีจัดรูปแบบฟิลด์เฉพาะ

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

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

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

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

วิธีสร้างเค้าโครงแบบฟอร์มที่กำหนดเองสำหรับช่องทำเครื่องหมายและปุ่มเรเดียล

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

แต่เนื่องจากความชอบส่วนบุคคลหรือกรณีการใช้งานเฉพาะที่อาจต้องการให้แสดงแบบบนลงล่าง คุณสามารถใช้ตัวเลือกใดตัวเลือกหนึ่งจากสองตัวเลือกด้านล่างนี้

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

.wpcf7-list-item {
display: block;
}

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

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

เคล็ดลับโบนัส: วิธีลบชื่อฟิลด์และใช้ข้อความตัวแทนแทน

เคล็ดลับนี้ไม่ต้องใช้ CSS เช่นเดียวกับส่วนอื่นๆ ด้านบน แต่ให้ปรับแต่งมาร์กอัปที่ใช้ในเครื่องมือสร้างแบบฟอร์ม Contact Form 7

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

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

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

ผลลัพธ์ที่ได้คือรูปทรงที่สะอาดตาและเป็นระเบียบน้อยลง

สรุปแล้ว

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

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

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

ภาพขนาดย่อของบทความโดย Dmitry Lemon5ky // shutterstock.com