วิธีการสไตล์ติดต่อฟอร์ม 7 แบบฟอร์มใน WordPress

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


บันทึก: เราไม่แนะนำปลั๊กอินแบบฟอร์มการติดต่อ 7 อีกต่อไป แต่เราขอแนะนำ WPForms ซึ่งเป็นปลั๊กอินแบบฟอร์มการติดต่อที่เป็นมิตรที่สุดสำหรับผู้เริ่มต้น คุณสามารถดาวน์โหลด WPForms Lite ได้ฟรี.

เรามีคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างแบบฟอร์มการติดต่อใน WordPress.

วิดีโอสอน

สมัครสมาชิก WPBeginner

หากคุณไม่ชอบวิดีโอหรือต้องการคำแนะนำเพิ่มเติมให้อ่านต่อ.

เริ่มต้นใช้งาน

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

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

แบบฟอร์มการติดต่อเริ่มต้น 7 แบบฟอร์มบนเว็บไซต์ WordPress ใช้ธีม WordPress เริ่มต้น

คุณจะเห็นได้ว่าแบบฟอร์มการติดต่อนั้นสืบทอดรูปแบบบางอย่างจากธีม WordPress ของคุณ นอกจากนั้นมันก็ธรรมดามาก.

เราจะจัดแต่งทรงผมแบบฟอร์มการติดต่อ 7 โดยใช้ CSS CSS ทั้งหมดจะเข้าสู่สไตล์ชีทของคุณหรือสไตล์ชีต.

แบบฟอร์มติดต่อสไตล์ 7 รูปแบบใน WordPress

แบบฟอร์มการติดต่อ 7 สร้างรหัสที่มีประโยชน์และเป็นมาตรฐานมากสำหรับแบบฟอร์ม แต่ละองค์ประกอบในแบบฟอร์มมี ID และ CSS ที่เหมาะสมที่เกี่ยวข้อง.

แต่ละแบบฟอร์มการติดต่อใช้คลาส CSS. wpcf7 ซึ่งคุณสามารถใช้เพื่อจัดรูปแบบของคุณ.

ในตัวอย่างนี้เรากำลังใช้แบบอักษร Google Lora ในช่องใส่ของเรา ดูวิธีเพิ่ม Google Fonts ใน WordPress.

div.wpcf7 {
พื้นหลังสี: #fbefde;
เส้นขอบ: 1px solid # f28f27;
padding: 20px;
}
.อินพุต wpcf7 [type ="ข้อความ"],
.อินพุต wpcf7 [type ="อีเมล"],
.wpcf7 textarea {
พื้นหลัง: # 725f4c;
สี: # fff;
ฟอนต์ตระกูล: lora, sans-serif;
ตัวอักษรสไตล์: italic;
}
.อินพุต wpcf7 [type ="เสนอ"],
.อินพุต wpcf7 [type ="ปุ่ม"] {
สีพื้นหลัง: # 725f4c;
ความกว้าง: 100%;
text-align: ศูนย์;
ข้อความเปลี่ยน: พิมพ์ใหญ่;
}

นี่คือลักษณะที่แบบฟอร์มการติดต่อของเราดูแลหลังจากใช้ CSS นี้.

ใส่สไตล์การติดต่อ 7 รูปแบบด้วย CSS ใน WordPress

จัดแต่งทรงผมหลายรูปแบบการติดต่อ 7 แบบฟอร์ม

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

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

การค้นหา ID องค์ประกอบสำหรับแบบฟอร์มการติดต่อของคุณ

ดังที่คุณเห็นในภาพหน้าจอด้านบนรหัสฟอร์มการติดต่อของเราเริ่มต้นด้วยบรรทัด:

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

เราจะใช้ ID นี้ใน CSS เพื่อจัดทำแบบฟอร์มการติดต่อของเรา เราจะแทนที่. wpcf7 ในตัวอย่าง CSS แรกของเราด้วย # wpcf7-f201-p203-o1.

div # wpcf7-F201-p203-o1 {
พื้นหลังสี: #fbefde;
เส้นขอบ: 1px solid # f28f27;
padding: 20px;
}
# wpcf7-f201-p203-o1 อินพุต [type ="ข้อความ"],
# wpcf7-f201-p203-o1 อินพุต [type ="อีเมล"],
# wpcf7-f201-p203-o1 textarea {
พื้นหลัง: # 725f4c;
สี: # fff;
font-family: Lora, "เปิด Sans", Sans-serif;
ตัวอักษรสไตล์: italic;
}
# wpcf7-f201-p203-o1 อินพุต [type ="เสนอ"],
# wpcf7-f201-p203-o1 อินพุต [type ="ปุ่ม"] {
สีพื้นหลัง: # 725f4c;
ความกว้าง: 100%;
text-align: ศูนย์;
ข้อความเปลี่ยน: พิมพ์ใหญ่;
}

แบบฟอร์มการติดต่อ 7 สไตล์กับ CSS Hero

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

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

แบบฟอร์มติดต่อสไตล์ 7 แบบโดยใช้ CSS Hero

ดูบทวิจารณ์ที่สมบูรณ์เกี่ยวกับ CSS Hero และวิธีการใช้สไตล์ในทุกสิ่งบนเว็บไซต์ WordPress ของคุณ คุณสามารถใช้รหัสคูปอง CSS Hero WPBeginner เพื่อรับส่วนลดพิเศษ 34%.

นั่นคือทั้งหมดที่เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีจัดรูปแบบฟอร์มการติดต่อ 7 ใน WordPress คุณอาจต้องการดูคำแนะนำของเราเกี่ยวกับวิธีเพิ่มป๊อปอัพฟอร์มผู้ติดต่อใน WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map