แบบฟอร์มการติดต่อ 7 เป็นปลั๊กอิน WordPress ยอดนิยมอย่างเหลือเชื่อสำหรับการสร้างแบบฟอร์มการติดต่อ ช่วยให้คุณสร้างแบบฟอร์มโดยไม่ต้องใช้รหัส HTML เหล่านี้ รูปแบบ สามารถนำเสนอคุณสมบัติเช่น CAPTCHAดาวน์โหลดไฟล์ ฟิลด์สำรวจ ฯลฯ ...

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

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

หากคุณไม่เคยสร้างเว็บไซต์ WordPress มาก่อนให้หาคำตอบ วิธีการติดตั้งบล็อก WordPress ด้วยไคลเอนต์ FTP

สำหรับรูปแบบมาตรฐานรหัสที่สร้างโดยปลั๊กอินคือ:

[ตอบกลับ] ชื่อของคุณ (จำเป็น) [ข้อความ * รหัสชื่อของคุณ: ชื่อ ของคุณ ] อีเมลของคุณ (จำเป็น) [อีเมล * รหัสอีเมลของคุณ: อีเมล ของคุณ ] หัวเรื่องของคุณ [ส่งข้อความรหัสหัวเรื่องของคุณ: เรื่องของคุณ] ข้อความของคุณ [textarea your-message id: your-message] [ส่ง "ส่ง"]

ปลั๊กอินบางในการปรับแต่งในแบบฟอร์มแบบฟอร์มผู้ติดต่อ 7

1 รูปแบบการติดต่อ 7 สไตล์

ปลั๊กอิน รูปแบบการติดต่อ 7 สไตล์ มีหลายสไตล์ให้เลือก

สำหรับผู้ใช้ธีมที่ยี่สิบห้าก็มีสไตล์ที่เข้ากันได้

หากต้องการใช้สไตล์ให้ไปที่ " ลักษณะการติดต่อ> แก้ไขด่วน ตรวจสอบแบบฟอร์มที่คุณต้องการใช้สไตล์จากนั้นคลิกที่ " ปรับปรุง '

2 รูปแบบการติดต่อ 7 สกิน

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

คุณจะพบโมเดลที่ทุ่มเทให้กับรูปแบบของévénements, การลงทะเบียนและประกาศ.

นี่คือลักษณะของแบบสำรวจที่มีลักษณะเป็น Topaz โดยใช้ชุดรูปแบบ Twenty Fifteen

3 การออกแบบวัสดุสำหรับแบบฟอร์มการติดต่อ

ลักษณะเหล่านี้จะขึ้นอยู่กับรูปแบบ การออกแบบวัสดุ.

ปลั๊กอินนี้แนะนำให้คุณลบฟอร์มเริ่มต้นและใช้รหัสย่อ

นี่คือตัวอย่างที่มีธีม Hestia สังเกตป้ายกำกับแบบลอยเมื่อย้ายตัวชี้ไปยังเขตข้อมูลบนแบบฟอร์ม

ติดต่อแบบฟอร์ม 7 ทดสอบกับ some ธีม WordPress

แบบฟอร์มการติดต่อกับ ThemeMag WordPress

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

แบบฟอร์มการติดต่อด้วยธีม WordPress ColorMag

นี่คือรูปแบบที่ไม่มีสไตล์ที่กำหนดเอง เขาสืบทอดสีของปุ่มสีน้ำเงิน ธีม WordPress ColorMag.

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

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

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

GIF ที่หมุนเมื่อส่งแบบฟอร์มไม่แสดงอย่างถูกต้องฉันพบทางเลือกในการ Loading.io และอ้างอิงด้วย CSS

นี่คือรูปแบบผลลัพธ์:

นี่คือรหัส:

div.wpcf7 {margin: 0; การขยาย: 1.5em; พื้นหลัง: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมีเส้นขอบ: 3px; } .wpcf7 label, .wpcf7- ส่ง {color: white; ข้อความเงา: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7- ควบคุมรูปแบบ {10px 0 20px 0; } .wpcf7 .wpcf7- ส่ง: โฮเวอร์ {พื้นหลัง: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; จัดข้อความ: ศูนย์; ความกว้าง: 92.5%; ขอบ: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมีเส้นขอบ: 3px; } span.wpcf7-not-valid-tip {พื้นหลัง: #F8F8F8; จอแสดงผล: บล็อกแบบอินไลน์; ความกว้าง: อัตโนมัติ การขยาย: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมีเส้นขอบ: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); ความกว้าง: 50px; ความสูง: 50px; }

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

ค้นพบทางเลือกพิเศษ 3 ที่จะช่วยคุณสร้างแบบฟอร์มการติดต่อของคุณ 

1 แบบฟอร์มติดต่อ W8

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 แบบฟอร์มติดต่อเรา

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

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 Slick Popup Pro

Slick Popup Pro เป็น ส่วนขยายของ WordPress ค่อนข้างง่ายและน้ำหนักเบาที่แปลงรูปแบบใด ๆ ที่สร้างโดยปลั๊กอิน ติดต่อ 7 แบบฟอร์ม ในป๊อปอัป เธอใช้แบบฟอร์มและแปลงเป็นป๊อปอัปที่สวยงามและตอบสนองได้อย่างสมบูรณ์

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

• ปลั๊กอิน WordPress 6 สำหรับการตรวจสอบโดย CAPTCHA ในแบบฟอร์มของคุณ
• วิธีการเพิ่มแบบฟอร์มการติดต่อกับ WordPress แบบฟอร์มติดต่อ 7
• วิธีการสร้างฟอร์มที่สอดคล้องกับ GDPR ใน WordPress

สรุป

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

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

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

...