วิธีปรับแต่งแบบฟอร์มการติดต่อของคุณ 7 สไตล์ง่ายๆ

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

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

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

คอยติดตามเรียนรู้เพิ่มเติมเกี่ยวกับ:

• การใช้ Qi Addons สำหรับ Elementor เพื่อปรับแต่งแบบฟอร์มการติดต่อของคุณ
• การตั้งค่ารูปแบบการติดต่อ

การใช้ Qi Addons สำหรับ Elementor เพื่อปรับแต่งแบบฟอร์มการติดต่อของคุณ

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

Qi Addons สำหรับ Elementor นั้นง่ายต่อการติดตั้ง และกำหนดค่า และขั้นตอนก็ค่อนข้างเหมือนกับปลั๊กอินอื่นๆ

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

จากนั้น พิมพ์ Contact Form 7 ในช่องค้นหา ในเมนูด้านซ้ายมือเพื่อค้นหาวิดเจ็ต Contact Form 7

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

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

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

การตั้งค่ารูปแบบการติดต่อ

ในการเปิดตัวเลือกสำหรับการจัดรูปแบบแบบฟอร์ม ให้คลิกที่ แท็บ ลักษณะ

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

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

ตัวเลือกถัดไปหมายถึง สีฉลาก

คุณสามารถสร้างเฉดสีของคุณเองได้ขึ้นอยู่กับความต้องการของคุณ เราเลือกสีน้ำเงินเข้มสำหรับป้ายกำกับของเรา เนื่องจากเหมาะสมกับสีพื้นหลังของหน้า

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

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

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

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

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

การตั้งค่าถัดไปที่สำคัญที่ต้องทราบคือ การ ตั้งค่าลักษณะปุ่ม

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

หากคุณต้องการเปลี่ยนรูปแบบของปุ่มเมื่อวางเมาส์เหนือ ให้คลิกแท็บ ใช้งานอยู่ และปรับการตั้งค่า – คุณสามารถปรับสีโฮเวอร์ของปุ่ม สีพื้นหลังของปุ่มโฮเวอร์ สีเส้นขอบของโฮเวอร์ของปุ่ม ฯลฯ

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

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

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

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

นี่คือลักษณะของแบบฟอร์มของเราหลังจากที่มีคนส่งข้อความ:

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

ห่อมันทั้งหมดขึ้น

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

เราหวังว่าบทความนี้จะเป็นประโยชน์ หากคุณชอบ โปรดอ่านบทความเหล่านี้ด้วย!

• ปลั๊กอิน WordPress Like Button ที่ดีที่สุดที่ควรค่าแก่การมี
• 4 วิธีง่ายๆ ในการสร้างปุ่ม WordPress
• เคล็ดลับการออกแบบปุ่ม: วิธีรับการคลิกจากผู้เยี่ยมชมของคุณ