แบบฟอร์มการติดต่อ 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
แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ
...
ในการสร้างเว็บไซต์อย่างมืออาชีพคุณต้องมีความแม่นยำและรัดกุมเพื่อโน้มน้าวผู้ใช้อย่างรวดเร็ว เราให้โอกาสคุณในการสร้างเว็บไซต์ระดับมืออาชีพไม่ว่าจะเป็นเรื่องของการผลิตเว็บไซต์โชว์เคสหรือผลงาน การผลิตเว็บไซต์ออนไลน์หรือเว็บไซต์มืออาชีพนั้นอยู่ในอุ้งมือของทุกคน นั่นเป็นเหตุผลที่เว็บไซต์ orson ของคุณเพิ่มคุณสมบัติเหล่านี้ตามธรรมชาติ
ไม่มีโฆษณา!