วิธีเปลี่ยนสไตล์แบบฟอร์มติดต่อ WordPress

ต้องการเปลี่ยนรูปแบบการติดต่อ WordPress ของคุณหรือไม่? คู่มือนี้เหมาะสำหรับคุณ! คุณจะได้เรียนรู้ว่าการออกแบบฟอร์ม WordPress นั้นง่ายสุด ๆ ได้อย่างไร! หาข้อมูลเพิ่มเติม.

เวลาอ่านโดยประมาณ : 6 นาที

คุณมีโอกาสเพียงครั้งเดียวในการสร้างความประทับใจครั้งแรก

และการดึงดูดความสนใจของผู้เยี่ยมชมด้วยรูปแบบที่สวยงามเป็นวิธีสร้างความประทับใจ ที่ดีเยี่ยม

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

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

เราจะแสดงให้คุณเห็นสองวิธีในการเปลี่ยนรูปแบบการติดต่อ WordPress ของคุณอย่างง่ายดาย!

เข้าเรื่องกันเลย

วิธีเปลี่ยนรูปแบบการติดต่อ WordPress ของคุณ

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

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

วิธีที่ 1: แก้ไขรหัสแบบฟอร์มของคุณใน WordPress

ดังนั้นคุณต้องการที่จะดำดิ่งลงไปในน่านน้ำเข้ารหัสใช่มั้ย

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

ขั้นตอนที่ 1: รับ ID หรือคลาสของแบบฟอร์มของคุณ

ในการเริ่มต้น คุณต้องได้รับ ID หรือ คลาส ของแบบฟอร์มของคุณ

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

แถบด้านข้างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google จะเลื่อนออก และคุณสามารถดูส่วนรหัสต่างๆ สำหรับแบบฟอร์มของคุณได้

สิ่งที่สำคัญที่สุดคือการหาพื้นที่ที่คุณต้องการปรับแต่งและติดตาม ID หรือชื่อ คลาส คุณจะใช้สิ่งนี้เพื่อทำการเปลี่ยนแปลง

ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลังของเทมเพลตฟอร์มติดต่อเรา เราจะค้นหาส่วนนอกสุดของรหัส ในกรณีนี้คือ div ที่มี คลาส api-form-box

เราสามารถทดสอบได้ว่าหน้าตาจะเป็นอย่างไรจากคอนโซลนี้

ถ้าเราคลิกขวาที่ div แล้วคลิก Add Attribute เราจะสามารถเพิ่มสไตล์สีพื้นหลังได้

กด Enter และการเปลี่ยนแปลงจะแสดงในหน้าต่างทันที

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

จากนั้น ไปที่ผู้ดูแลระบบ WordPress ของคุณเพื่อทำการเปลี่ยนแปลงโค้ด CSS ที่จำเป็น

ขั้นตอนที่ 2: เปลี่ยน CSS ในแผงผู้ดูแลระบบ WordPress ของคุณ

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

ถัดไป ในแถบด้านข้าง WordPress ของคุณ เลือก ลักษณะ → ปรับแต่ง → CSS เพิ่มเติม เพื่อจัดรูปแบบฟอร์ม

นี่คือที่ที่คุณสามารถป้อนคลาส CSS สำหรับแบบฟอร์มของคุณ

ตัวอย่างเช่น เราตัดสินใจที่จะเปลี่ยนแปลงบางอย่างในแบบฟอร์มของเรา ดังนั้นนี่คือรหัสที่เราป้อน:

ในการแท็ก คลาส คุณต้องใส่ . ก่อนชื่อชั้น สำหรับ ID ให้คุณใส่ #

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

สำหรับตัวอย่างของเรา มันจะแยกย่อยดังนี้:

• .api-form-box กำลังเปลี่ยนสีพื้นหลังเป็นสีฟ้าอ่อน
• .frm-button-submit กำลังเปลี่ยนพื้นหลังของปุ่มส่งเป็นสีเหลืองและข้อความเป็นสีดำ
• .frm-submit อยู่กึ่งกลางปุ่มในแบบฟอร์ม

ด้วยการเปลี่ยนแปลงเหล่านี้ แบบฟอร์มของเราจะมีลักษณะดังนี้:

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

แม้ว่าวิธีนี้จะมีข้อเสียอยู่บ้าง

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

แต่ถ้าคุณต้องการอะไรที่ตรงไปตรงมา และ ไม่แตก เราขอแนะนำให้ลองดูวิธีต่อไปนี้

วิธีที่ 2: ใช้ตัวสร้างฟอร์มด้วย Visual Styler

การเขียนโค้ดเป็นทักษะที่ต้องใช้เวลาในการเรียนรู้

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

และสิ่งที่เราแนะนำคือ แบบฟอร์มที่น่าเกรงขาม

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

ไม่ว่ารูปแบบบนเว็บไซต์ของคุณจะเป็นรูปแบบใด Formidable สามารถจัดการได้อย่างรวดเร็ว

ไม่ต้องเขียนโค้ด ไม่ยุ่งยาก สร้างแบบฟอร์มได้ง่ายๆ

มีเครื่องมือสร้างฟอร์มอื่นๆ ให้เลือก (แบบฟอร์ม WPForms, Gravity Forms และอื่นๆ) แต่เครื่องมือเหล่านี้ไม่มีความสามารถในการจัดรูปแบบที่มาพร้อมกับ Formidable และนั่นหมายความว่าคุณจะได้รับอำนาจมากขึ้นในรูปลักษณ์ของคุณ

เราขอแนะนำให้ตรวจสอบแผนพรีเมียมของ Formidable ด้วย

แม้ว่าพวกเขาจะไม่ต้องจัดรูปแบบแบบฟอร์มของคุณ แต่คุณจะได้รับคุณสมบัติที่ยอดเยี่ยมมากมาย:

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

ดังนั้น เมื่อคุณติดตั้งและเปิดใช้งาน Formidable แล้ว คุณก็พร้อมที่จะเริ่มต้น

รับแบบฟอร์มที่น่าเกรงขามทันที!

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

1. สร้างแบบฟอร์ม
2. จัดรูปแบบ
3. แสดงแบบฟอร์ม

ขั้นตอนที่ 1: สร้างแบบฟอร์ม

ในการจัดรูปแบบ คุณต้องมีรูปแบบเพื่อจัดรูปแบบใช่ไหม

ดังนั้น ไปที่ผู้ดูแลระบบ WordPress ของคุณแล้วไปที่ Formidable → Forms → Add New

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

จากนั้น ตั้งชื่อฟอร์มของคุณ แล้วคลิก สร้าง

ปลั๊กอินจะนำคุณไปยังตัวสร้างแบบลากและวาง ซึ่งคุณสามารถแก้ไขแบบฟอร์มของคุณได้อย่างง่ายดาย

เพิ่มฟิลด์ฟอร์มที่คุณต้องการ ปรับแต่งป้ายกำกับฟิลด์ เปลี่ยนประเภทอินพุต และอื่นๆ จากเมนูแถบด้านข้าง

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

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

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

จากนั้นเราจะไปที่แท็บ สไตล์

ขั้นตอนที่ 2: จัดรูปแบบแบบฟอร์ม

ใต้แท็บ สไตล์ คุณจะเห็นตัวเลือกสองสามตัวเลือก

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

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

สิ่งนี้จะนำคุณไปสู่นักออกแบบสไตล์ที่น่าเกรงขามของเรา ซึ่งคุณสามารถปรับแต่งแบบฟอร์มของคุณได้

คุณสามารถเปลี่ยนขนาดและสีของป้ายกำกับ ช่องใส่ข้อมูล ขนาดตัวอักษร และสีพื้นหลัง และแม้แต่อัพโหลดรูปภาพพื้นหลัง!

ตัวอย่างเช่น สำหรับเว็บไซต์ทดสอบชื่อ Cheap n' Cheesy เราได้ออกแบบแบบฟอร์มที่สะท้อนถึงธุรกิจ:

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

คลิก อัปเดต เพื่อบันทึกการเปลี่ยนแปลงของคุณเมื่อคุณปรับแต่งแบบฟอร์ม

ตอนนี้เราต้องทำให้มันปรากฏ!

ขั้นตอนที่ 3: แสดงแบบฟอร์ม

การแสดงแบบฟอร์มของคุณง่ายกว่าการสร้าง

ก่อนอื่น ให้ไปที่โพสต์หรือหน้าที่คุณต้องการแสดงแบบฟอร์มและเพิ่มบล็อก WordPress ใหม่

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

สุดท้าย อัปเดตโพสต์หรือเพจของคุณ แล้วแบบฟอร์มของคุณจะเผยแพร่บนเพจของคุณ!

เราบอกคุณว่ามันง่ายเช่นเดียวกับทุกอย่างด้วย Formidable

รับแบบฟอร์มที่น่าเกรงขามทันที!

พร้อมที่จะจัดรูปแบบการติดต่อ WordPress บนไซต์ของคุณแล้วหรือยัง

การมีความสามารถในการจัดรูปแบบการติดต่อเป็นสิ่งที่คุณ ต้องการ ไม่ใช่ต้องการ

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

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

ดังนั้นอย่ารอช้าอีกต่อไป หยิบแบบฟอร์มที่น่าเกรงขามและเริ่มออกแบบแบบฟอร์มของคุณ!

และติดตามเราบน Facebook, Twitter และ YouTube สำหรับเคล็ดลับและคำแนะนำเกี่ยวกับแบบฟอร์มที่ยอดเยี่ยมเพิ่มเติม!

อ่านเพิ่มเติมจากบล็อกที่น่าเกรงขาม

• แบบฟอร์มที่น่ากลัว 6.0! เทมเพลตสไตล์ การดำเนินการในแบบฟอร์มยืนยัน และอื่นๆ
  อ่านเพิ่มเติม

  Jotform vs Typeform vs Formidable Forms [เปรียบเทียบ]
  อ่านเพิ่มเติม

  วิธีใช้แบบฟอร์มติดต่อ WordPress เพื่อเปลี่ยนเส้นทางหลังจากส่ง
  อ่านเพิ่มเติม

คุณรู้หรือไม่ว่า Formidable Forms เป็นหนึ่งในปลั๊กอินตัวสร้างฟอร์ม WordPress ที่เร็วที่สุดที่มีอยู่ในปัจจุบัน หากคุณยังไม่ได้ใช้งาน ให้เริ่มต้นด้วยปลั๊กอินฟรีของเราหรือรุ่นโปรที่มีคุณสมบัติครบถ้วน!