เหตุการณ์ DOM

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

รายการเหตุการณ์แบบฟอร์ม

Wpcf7invalid เริ่มทำงานเมื่อส่งแบบฟอร์มไปยังเซิร์ฟเวอร์สำเร็จ แต่ไม่ได้ส่งอีเมลเนื่องจากมีฟิลด์ที่มีการป้อนข้อมูลที่ไม่ถูกต้อง

wpcf7spam เริ่มทำงานเมื่อส่งแบบฟอร์มไปยังเซิร์ฟเวอร์สำเร็จ แต่ไม่มีการส่งอีเมลเนื่องจากตรวจพบกิจกรรมสแปมที่เป็นไปได้ wpcf7mailsent เริ่มทำงานเมื่อส่งแบบฟอร์มไปยังเซิร์ฟเวอร์สำเร็จและส่งอีเมลไปยังผู้รับแล้ว wpcf7mailfailed เริ่มทำงานเมื่อส่งแบบฟอร์มไปยังเซิร์ฟเวอร์สำเร็จ แต่ไม่สามารถส่งเมลได้ อาจเกิดจากการที่เซิร์ฟเวอร์เมลโฮสต์ไม่ทำงาน

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

โค้ดด้านล่างเป็นตัวอย่างง่ายๆ ของการลงทะเบียนตัวจัดการเหตุการณ์ ในตัวอย่างนี้ ฟังก์ชันฟังเหตุการณ์ wpcf7submit ของคอนเทนเนอร์ที่มีคลาส wpcf7 และเพียงส่งคำเตือนเมื่อมันเกิดขึ้น นั่นคือ เมื่อคุณคลิกที่ปุ่ม “ส่ง” มันจะทำให้เกิดข้อความ “อุ๊ปส์ พวกเขา” ทันที กำลังพยายามส่งฉัน...ไปยังมากาดาน!” โปรดทราบว่าองค์ประกอบที่มีคลาส wpcf7 คือ DIV ที่มีแบบฟอร์มอยู่ภายใน ปลั๊กอินจะสร้างทั้งหมดนี้โดยอิสระ หากคุณมีแบบฟอร์มหลายรูปแบบในหน้านี้ รหัสจะใช้ได้เฉพาะกับแบบฟอร์มแรกที่พบเท่านั้น- แน่นอน คุณจะแทนที่ alert() ที่ไม่จำเป็นด้วยการดำเนินการที่มีประโยชน์มากขึ้น เช่น แอนิเมชั่นที่สวยงามกำลังส่งแบบฟอร์ม

// เรากำลังมองหาบล็อกที่มีแบบฟอร์มซึ่งมีคลาส wpcf7 (div ทั้งหมดที่มีแบบฟอร์มจะมีอยู่) var wpcf7Elm = document.querySelector(".wpcf7"); // ตรวจสอบเหตุการณ์ wpcf7submit สำหรับบล็อกที่เลือก wpcf7Elm.addEventListener("wpcf7submit", function(event) ( alert("พวกพวกเขากำลังพยายามส่งฉัน... ไปยังมากาดาน!"); // หรือบางสิ่งที่มีประโยชน์มากกว่า ), เท็จ) ;

หากคุณต้องการตรวจสอบแบบฟอร์มเฉพาะ (จะมีทางเลือกอื่นและวิธีแก้ปัญหาที่มีเหตุผลมากกว่านี้ด้านล่างในบทความ) ให้ระบุ ID คอนเทนเนอร์:

// เรามองหาบล็อกที่ไม่ซ้ำใครซึ่งมีแบบฟอร์มตาม ID ของมัน var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // ที่นี่เราตรวจสอบเหตุการณ์ wpcf7submit ดังตัวอย่างก่อนหน้านี้

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

Document.addEventListener("wpcf7submit", function(event) ( alert("มีคนส่งแบบฟอร์ม! อันไหนฉันยังไม่รู้"); false);

วิธีติดตามข้อมูลที่ป้อนลงในฟิลด์

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

Document.addEventListener("wpcf7submit", function(event) ( var inputs = event.detail.inputs; console.log(inputs); ), false);

เมื่อคุณคลิกปุ่ม "ส่ง" ในคอนโซลของเบราว์เซอร์ โครงสร้างข้อมูลจะปรากฏขึ้น:

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

คุณสามารถผ่านแต่ละฟิลด์และตอบสนองต่อฟิลด์ใดฟิลด์หนึ่งได้ดังนี้:

Document.addEventListener("wpcf7submit", function(event) ( var inputs = event.detail.inputs; // ค้นหาฟิลด์ที่ชื่อชื่อของคุณ และใช้การแจ้งเตือนในทางที่ผิดเมื่อค้นหาฟิลด์สำหรับ (var i = 0; i< inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

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

Detail.contactFormId ID ของแบบฟอร์มการติดต่อ ID นี้สามารถเห็นได้ในแผงผู้ดูแลระบบใน แถบที่อยู่เมื่อแก้ไขแบบฟอร์มหรือในรหัสย่อของแบบฟอร์มนั้นเอง

detail.pluginVersion เวอร์ชันปลั๊กอินของแบบฟอร์มติดต่อ 7 detail.contactFormLocale รหัสภาษาของแบบฟอร์ม ตัวอย่างเช่น ru_RU

detail.unitTag แท็กหน่วยของแบบฟอร์มการติดต่อ แต่ละแบบฟอร์มจะมีรูปแบบของตัวเอง เช่น wpcf7-f92-p95-o1

detail.containerPostId ID ของโพสต์ที่มีเนื้อหาอยู่ในแบบฟอร์ม

คุณสามารถดูข้อมูลทั้งหมดได้ดังนี้:

Document.addEventListener("wpcf7submit", function(event) ( console.log(event.detail); ), false);

ตัวอย่างเช่น หากคุณต้องการทำอะไรกับแบบฟอร์มการติดต่อเฉพาะ (ID=123) ให้ใช้คุณสมบัติ detail.contactFormId ดังที่แสดงด้านล่าง:

Document.addEventListener("wpcf7submit", function(event) ( if ("123" == event.detail.contactFormId) ( alert("Contact form with ID = 123."); // Do else ) ), false) ; ต่อสู้กับสแปมด้วย Akismetจะต่อสู้กับสแปมในปลั๊กอิน Contact Form 7 ได้อย่างไร มีกลไกหลายอย่างที่ใช้ได้ แต่มีเพียงไม่กี่กลไกเท่านั้นที่ได้รับความนิยม: reCAPTCHA และ Akismet

จะติดตั้งและกำหนดค่า Akismet ได้อย่างไร? เมื่อติดตั้ง

ปลั๊กอินเวิร์ดเพรส

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

• หลังจากเปิดใช้งานปลั๊กอินแล้ว ข้อความจะปรากฏขึ้นเพื่อขอให้คุณเปิดใช้งานบัญชีของคุณ:
• เมื่อคุณคลิกปุ่ม คุณจะถูกนำไปยังหน้าการตั้งค่าปลั๊กอิน: เพื่อให้ Akismet ทำงานได้ คุณต้องระบุคีย์ API ในการตั้งค่าปลั๊กอิน หากไม่มี ให้คลิกปุ่ม "รับคีย์ API" แล้วทำตามคำแนะนำ:ลงทะเบียนปิด. เว็บไซต์ปลั๊กอินโดยใช้บัญชี wordpress.com
• ทางเลือก

แผนภาษี

(มีฟรีหนึ่ง)

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

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

แบบฟอร์มติดต่อ 7 มีการแจ้งเตือนหลายประเภท:

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

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

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

พารามิเตอร์การเข้าถึงถูกเปลี่ยนโดยใช้ค่าคงที่ที่เขียนไว้ในรูทของกลไกในไฟล์ wp-config.php ตัวอย่างเช่น:

กำหนด("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); กำหนด("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");

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

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

เพื่อให้เข้าใจวิธีการทำงานได้ดีขึ้น โปรดดูโค้ด (ไฟล์ CF7 v4.9.1, ability.php) โดยใช้ค่าคงที่เหล่านี้:

Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); ฟังก์ชัน wpcf7_map_meta_cap($caps, $cap, $user_id, $args) ( $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_edit_contact_forms" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wp cf7_read_contact_forms" => WPC F7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, " wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "read",); $meta_caps = Apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_keys($meta_caps)); isset ($meta_caps[$cap])) ( $caps = $meta_caps[$cap]; ) ส่งคืน $caps;

จากโค้ด คุณจะเห็นว่าอาร์เรย์ความสามารถผ่านตัวกรอง wpcf7_map_meta_cap และมีข้อมูลต่อไปนี้:

ตามค่าเริ่มต้น Array ( => publish_pages => publish_pages => edit_posts => publish_pages => Manage_options => read) หลังจากเปลี่ยนแปลง เช่น การใช้ค่าคงที่ Array ( => Manage_options => Manage_options => Manage_options => Manage_options => Manage_options = > อ่าน)

ขอบคุณตัวกรอง wpcf7_map_meta_cap เราสามารถเปลี่ยนอาร์เรย์นี้ได้ วิธีนี้จะช่วยให้เราแก้ไขไฟล์ wp-config.php ได้ แต่เราจะต้องเขียนโค้ด เช่น ในไฟล์ function.php:

Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); ฟังก์ชั่น change_wpcf7_map_meta_cap($meta_caps) ( // ค่าโอกาสใหม่ $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_contact_forms" => "manage_options", "wpcf7_ Delete_contact_form" => " Manage_options",); กลับ array_replace($meta_caps, $replace_caps);

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

นี่คือลักษณะของช่องทำเครื่องหมายเริ่มต้น:

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

หากต้องการจัดเรียงช่องทำเครื่องหมายในคอลัมน์ ให้เพิ่มเส้นสไตล์ ไฟล์ซีเอสเอสหัวข้อ:

Span.wpcf7-รายการรายการ ( จอแสดงผล: บล็อก; )

หากต้องการจัดเรียงช่องทำเครื่องหมายเป็นตาราง ให้เพิ่มเส้นสไตล์ให้กับไฟล์ CSS ของธีม (นอกจากนี้ มีการใช้พารามิเตอร์ label_first):

Span.wpcf7-list-item ( จอแสดงผล: ตารางแถว; ) span.wpcf7-list-item * ( จอแสดงผล: ตารางเซลล์; )

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

มี WPCF7_LOAD_JS คงที่โดยมีค่าเริ่มต้นเป็น true ซึ่งกำหนดไว้ในโค้ดปลั๊กอินและรับผิดชอบในการโหลด JavaScript ในทุกหน้าของไซต์ สามารถเขียนทับได้โดยการใส่โค้ดต่อไปนี้ลงในไฟล์ wp-config.php:

กำหนด ("WPCF7_LOAD_JS", false);

รหัสนี้จะยกเลิกการโหลดสคริปต์ปลั๊กอิน

และมีค่าคงที่เหมือนกันสำหรับสไตล์ WPCF7_LOAD_CSS ซึ่งทำงานบนหลักการเดียวกัน - มันจะยกเลิกการโหลดสไตล์ปลั๊กอิน:

กำหนด ("WPCF7_LOAD_CSS", false);

จากปลั๊กอินเวอร์ชัน 3.9 ขึ้นไป คุณสามารถปิดการโหลด JavaScript และ CSS ผ่าน hooks ใน Functions.php ได้:

Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

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

เช่น เรามีหน้าติดต่อพร้อมแบบฟอร์ม ไฟล์ contact.php มีหน้าที่ในการแสดงเพจ จากนั้นลองใช้โค้ด:

ถ้า (function_exists("wpcf7_enqueue_scripts")) ( wpcf7_enqueue_scripts(); ) ถ้า (function_exists("wpcf7_enqueue_styles")) ( wpcf7_enqueue_styles(); )

โครงสร้างนี้ต้องอยู่ในไฟล์ contact.php ก่อนที่จะเรียกใช้ฟังก์ชัน wp_head() นี่คือคำแนะนำของผู้พัฒนาปลั๊กอิน

มีวิธีการที่ยืดหยุ่นกว่าซึ่งช่วยให้คุณระบุหน้าเว็บที่จะรวมสคริปต์ได้ รหัสนี้จำเป็นต้องแทรกลงในfunctions.php:

ขั้นแรก เรายกเลิกการเชื่อมต่อ JS และ CSS จากนั้นเราจะเชื่อมต่อกลับเมื่อมีการเรียกใช้รหัสย่อของแบบฟอร์มเท่านั้น ดังนั้นไฟล์จะเชื่อมต่อเฉพาะในหน้าที่มีรหัสย่อของแบบฟอร์มเท่านั้น

ฟังก์ชัน wpcf7_remove_assets() ( add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); ) add_action("wpcf7_init", "wpcf7_remove_assets"); ฟังก์ชั่น wpcf7_add_assets($atts) ( wpcf7_enqueue_styles(); return $atts; ) add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

โค้ดสามารถออกแบบเป็นปลั๊กอินหรือแทรกลงใน Functions.php ของธีมได้

มีวิธีง่ายๆ ในการติดตามเหตุการณ์แบบฟอร์มผ่าน Google Analytics

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณมีโค้ด Google Analytics ซึ่งมีลักษณะดังนี้:

(function(i,s,o,g,r,a,m)(i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function())( (i[r].q = i[r].q||).push(อาร์กิวเมนต์)),i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o);a . async=1;a.src=g;m.parentNode.insertBefore(a,m) ))(window,document,"script","//www.google-analytics.com/analytics.js","ga " ); ga("สร้าง", "UA-XXXXX-Y", "อัตโนมัติ"); ga("ส่ง", "การดูหน้าเว็บ");

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

Ga("ส่ง", "กิจกรรม", "แบบฟอร์มติดต่อ", "ส่ง");

ขั้นตอนสุดท้ายคือการแทรกข้อมูลโค้ด JavaScript นี้ลงในส่วนหัว HTML ( ) ของแต่ละหน้า คุณสามารถแก้ไขเทมเพลต header.php ของธีมของคุณได้ หรือคุณสามารถใช้ wp_head function.php บน hook ก็ได้

document.addEventListener("wpcf7mailsent", function(event) ( ga("send", "event", "Contact Form", "submit"); ), false);

และด้วยวิธีนี้ คุณสามารถติดตามการส่งแบบฟอร์มแต่ละแบบได้สำเร็จ:

Document.addEventListener("wpcf7mailsent", function(event) ( if ("123" == event.detail.contactFormId) ( ga("send", "event", "Contact Form 123", "submit"); ) ถ้า ("253" == event.detail.contactFormId) ( ga("send", "event", "แบบฟอร์มติดต่อ 253", "submit"); ) ), false);

ตอนนี้ เมื่อส่งแบบฟอร์มเรียบร้อยแล้ว คุณจะเห็นเหตุการณ์นี้ในแผงผู้ดูแลระบบ Google Analytics (พฤติกรรม -> เหตุการณ์ -> ภาพรวม) เป็นไปได้ว่าข้อมูลจะไม่ปรากฏทันทีหลังเหตุการณ์ แต่หลังจาก 24-48 ชั่วโมง

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

ขั้นที่ 1 - การเพิ่มแท็กลงในเทมเพลตฟอร์ม:

ขั้นตอนที่ 2 - การแทรกแท็กลงในช่อง "ถึง" ซึ่งเมื่อส่งจดหมาย จะนำอีเมลที่ผู้ใช้เลือกจากรายการแบบเลื่อนลงของเราและแทรกลงในช่อง

วิธีนี้มีข้อเสียเปรียบอย่างร้ายแรง ดูโค้ดที่เราได้รับหลังจากเปลี่ยนแท็กดรอปดาวน์ของเรา:

[ป้องกันอีเมล] [ป้องกันอีเมล] [ป้องกันอีเมล]

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

ที่นี่เราส่งพารามิเตอร์ผ่านไปป์ที่เรียกว่า (เครื่องหมายสแลช) ตามกฎชื่อ|ค่า เป็นผลให้เราได้รับโครงสร้าง html ต่อไปนี้เป็นเอาต์พุต:

ผู้เชี่ยวชาญด้าน SEO ฝ่ายขายด้านเทคนิค

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

มาทำให้งานซับซ้อนยิ่งขึ้น...

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

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

ดังนั้น สำเนาแรกมาที่ SEO และเขาเข้าใจว่าข้อความนี้เกี่ยวกับอะไร แต่ผู้จัดการไม่เข้าใจว่าจดหมายนั้นส่งถึงผู้เชี่ยวชาญคนไหนเพราะเขาอาจไม่เข้าใจหัวข้อทั้งหมดหรืออาจจำทุกอย่างไม่ได้ ที่อยู่ทางไปรษณีย์ผู้เชี่ยวชาญ เทมเพลตจดหมายจำเป็นต้องใช้ไม่เพียงแต่ค่าฟิลด์ (ในกรณีของเราคือที่อยู่อีเมล) แต่ยังรวมถึงชื่อรายการด้วย (ชื่อของผู้เชี่ยวชาญ) ด้วย ในการดำเนินการนี้ ปลั๊กอินจะให้แท็ก [_raw_(ชื่อฟิลด์)] แก่เรา โดยที่ (ชื่อฟิลด์) คือชื่อของฟิลด์ของเรา สรุปการใช้แท็ก:

ค่าของฟิลด์ซึ่งในเทมเพลตจดหมายจะถูกแปลงเป็นค่าของรายการที่เลือก (ที่อยู่อีเมลในตัวอย่างของเรานั่นคือ [ป้องกันอีเมล]) [_raw_your-recipient] ชื่อของฟิลด์ซึ่งในเทมเพลตจดหมายจะถูกแปลงเป็นชื่อ (ส่วนหัว) ของรายการที่เลือก (ชื่อของผู้เชี่ยวชาญในตัวอย่างของเรานั่นคือผู้เชี่ยวชาญ SEO)

หากไม่จำเป็นต้องใช้ฟังก์ชันนี้ คุณสามารถปิดใช้งานได้โดยการป้อนโค้ดต่อไปนี้ลงในไฟล์ wp-config.php:

กำหนด("WPCF7_USE_PIPE", false);

แบบฟอร์มการติดต่อ 7 ในแท็บการตั้งค่าเทมเพลตจดหมายมีช่องสำหรับส่งส่วนหัวเพิ่มเติม (ส่วนหัวเพิ่มเติม) ตามกฎ title-header: value แต่ละส่วนหัวจะต้องมาพร้อมกับ บรรทัดใหม่.

พิจารณาสิ่งที่ได้รับความนิยมมากที่สุด - Reply-To, Cc และ Bcc อ่านเกี่ยวกับส่วนที่เหลือใน Wikipedia

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

สำเนาลับถึง (จากสำเนาลับภาษาอังกฤษ) ประกอบด้วยชื่อและที่อยู่ของผู้รับจดหมายซึ่งไม่ควรแสดงที่อยู่แก่ผู้รับรายอื่น

ติดต่อแบบฟอร์ม 7 ในภาษาของคุณ

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

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

[_post_id] จะถูกแทนที่ด้วย ID ของโพสต์ที่มีเนื้อหาในแบบฟอร์มแสดงอยู่

[_post_title] จะถูกแทนที่ด้วยชื่อ (หัวข้อ) ของโพสต์ที่ส่งแบบฟอร์ม

[_post_author] จะถูกแทนที่ด้วยชื่อผู้เขียนโพสต์ที่ใช้ส่งแบบฟอร์ม

[_post_author_email] จะถูกแทนที่ด้วยอีเมลของผู้เขียนโพสต์ที่ใช้ส่งแบบฟอร์ม แท็กไซต์[_site_title] จะถูกแทนที่ด้วยชื่อไซต์ (ระบุไว้ในการตั้งค่าทั่วไป) [_site_description] จะถูกแทนที่ด้วยคำอธิบายไซต์ (ระบุไว้ในการตั้งค่าทั่วไป)[_site_url] จะถูกแทนที่ด้วยที่อยู่เว็บไซต์ (ระบุไว้ในการตั้งค่าทั่วไป)

[_site_admin_email] จะถูกแทนที่ด้วยที่อยู่อีเมลของเว็บไซต์ (ระบุไว้ในการตั้งค่าทั่วไป)

แท็กผู้ใช้

WPCF7_ADMIN_READ_CAPABILITY บทบาทขั้นต่ำหรือความสามารถในการเข้าถึงแผงผู้ดูแลระบบ

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

WPCF7_CAPTCHA_TMP_URL การกำหนดค่าคงที่นี้จะแทนที่ลิงก์โฟลเดอร์สำหรับไฟล์ CAPTCHA ชั่วคราว

WPCF7_UPLOADS_TMP_DIR การกำหนดค่าคงที่นี้จะแทนที่เส้นทางโฟลเดอร์ชั่วคราวสำหรับไฟล์ที่อัพโหลด

WPCF7_VERIFY_NONCE

Add_filter("wpcf7_verify_nonce", "__return_true");

เปลี่ยนเส้นทางไปยังที่อยู่อื่นหลังจากส่งแบบฟอร์ม

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

ฉันจะทราบที่อยู่ IP ที่เป็นสแปมที่มาผ่านแบบฟอร์มติดต่อ 7 ได้อย่างไร วิธีที่ง่ายที่สุดคือการใช้แท็กพิเศษ [_remote_ip] แท็กนี้ถูกแทรกลงในเทมเพลตจดหมาย และจะแทนที่ด้วยที่อยู่ IP ของผู้ส่งเมื่อส่งจดหมาย

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

ฉันควรแก้ไข CSS ใดเพื่อเปลี่ยนรูปลักษณ์ของแบบฟอร์ม

สไตล์ทั้งหมดที่รับผิดชอบฟีดแบบฟอร์มภายนอกจะถูกจัดเก็บไว้ในไฟล์ปลั๊กอิน contact-form-7/includes/css/styles.css การเปลี่ยนไฟล์นี้เป็นความคิดที่ไม่ดี เพราะเมื่อคุณอัปเดตปลั๊กอิน ไฟล์จะถูกแทนที่และคุณจะสูญเสียการเปลี่ยนแปลงทั้งหมด เช่นเดียวกับธีมสาธารณะซึ่งได้รับการอัปเดตเช่นเดียวกับปลั๊กอิน

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

หากคุณมีธีมของคุณเอง คุณสามารถเปลี่ยน (แทนที่) สไตล์ Contact Form 7 ในรูปแบบธีมได้

รูปแบบฟิลด์ในแบบฟอร์มการติดต่อ 7

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

อินพุต Wpcf7 ( สีพื้นหลัง: #fff; สี: #000; ความกว้าง: 50%; )

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

อินพุต Wpcf7, อินพุต .wpcf7, .wpcf7 textarea (สีพื้นหลัง: #fff; สี: #000; ความกว้าง: 50%; )

สไตล์ข้างต้นจะถูกนำไปใช้กับทุกฟิลด์และรูปแบบของปลั๊กอินแบบฟอร์มการติดต่อ 7 ตามที่ระบุโดย selector.wpcf7 เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก

สไตล์สำหรับฟิลด์เฉพาะ

เมื่อสร้างฟิลด์ใดๆ คุณสามารถระบุตัวระบุหรือคลาสได้:

ขณะนี้ใน CSS ต้องขอบคุณ ID เราจึงเข้าถึงได้เฉพาะช่องนี้เท่านั้น:

#ฟิลด์พิเศษมาก ( สี: #f00; ขอบ: 1px solid #f00; )

สไตล์ฟอร์ม

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

Wpcf7( สีพื้นหลัง: #f7f7f7; เส้นขอบ: 2px solid #0f0; )

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

การเปลี่ยนข้อความ

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

ข้อความคงที่หรือลอยตัว?

อย่างที่เขาว่ากัน เห็นครั้งเดียว ดีกว่าได้ยินร้อยรอบ เพราะฉะนั้นจงดู:

รูปแบบข้อความแบบคงที่

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

สไตล์ข้อความลอยตัว

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

แบบลอยตัวสำหรับสนามที่ต้องการ

หากต้องการกำหนดสไตล์แบบลอยตัวให้กับฟิลด์ใดฟิลด์หนึ่ง คุณจะต้องล้อมมันไว้ในบล็อกด้วยคลาส use-floating-validation-tip:

สไตล์ลอยตัวทุกสนาม

เพื่อหลีกเลี่ยงการล้อมแต่ละฟิลด์ในบล็อกด้วยคลาส use-floating-validation-tip เราสามารถ "ถาม" ปลั๊กอินให้ทำสิ่งนี้ให้เราโดยระบุแอตทริบิวต์ html_class ด้วยค่า use-floating-validation-tip ในรูปแบบรหัสย่อของแบบฟอร์ม : :

หากใช้การส่งแบบไม่ใช่ Ajax (พร้อมการโหลดหน้าซ้ำ) ไม่ว่าจะตั้งค่าไว้อย่างไร ระบบจะใช้รูปแบบการแสดงข้อผิดพลาดแบบคงที่

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

ตัวอย่างเช่น:

การจัดการ “ไส้กรอก” ดังกล่าวเป็นเรื่องยากและมีโอกาสทำผิดพลาดสูง

เพื่อแก้ปัญหาไร้สาระนี้มีปลั๊กอิน Listo ซึ่งมีรายการต่อไปนี้:

• ประเทศ - data:countries , ข้อมูล:countries.olympic
• แผนกโครงสร้างของสหรัฐอเมริกา - data:us_subdivisions.states, data:us_subdivisions.districts
• สกุลเงิน - ข้อมูล:สกุลเงิน
• โซนเวลา

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

วิธีจัดการตัวเลือกรายการยาว

ตัวอย่างเช่น เราตัดสินใจที่จะแสดงรายการประเทศ เพื่อสิ่งนี้ เราจำเป็นต้องมีแท็กรายการแบบเลื่อนลง:

รายการยังคงว่างเปล่า เรายังไม่ได้ผ่านพารามิเตอร์ใดๆ มาเพิ่มกัน:

เพียงพารามิเตอร์เดียว เราก็กลายเป็นวีแกน - ไม่มีประเทศในรายชื่อ "ไส้กรอก" - Listo ทำเพื่อเรา

แต่ละแบบฟอร์มสามารถระบุเพิ่มเติมได้ พารามิเตอร์ในแท็บ "การตั้งค่าขั้นสูง" ลองดูการตั้งค่าทั้งหมดเหล่านี้:

โหมด "สมาชิกเท่านั้น"

Subscribers_only: จริง

โหมดนี้ (พร้อมใช้งานจาก CF7 v7 4.9) ช่วยให้คุณสามารถแสดงแบบฟอร์มสำหรับผู้ใช้ที่ลงทะเบียนเท่านั้น ผู้ใช้ที่ไม่ได้ลงทะเบียนจะเห็นข้อความ "แบบฟอร์มนี้ใช้ได้เฉพาะผู้ใช้ที่ลงทะเบียนเท่านั้น" และด้วยเหตุนี้จึงไม่สามารถกรอกและส่งแบบฟอร์มได้ วิธีที่ยอดเยี่ยมในการกำจัดสแปมหากคุณต้องการยอมรับอีเมลจากผู้ใช้ที่ได้รับอนุญาตเท่านั้น

โหมดสาธิต

Demo_mode: เปิด

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

ข้ามอีเมล

Skip_mail: เปิด

ตัวเลือก skik_mail ทำงานเหมือนกับ demo_mode มาก แต่ skik_mail จะข้ามเฉพาะการส่งข้อความเท่านั้น ต่างจาก demo_mode ตรงที่ข้ามอีเมลไม่ส่งผลต่อการดำเนินการอื่นๆ เช่น การบันทึกข้อความด้วย Flamingo

การตรวจสอบสนามพลัง

Acceptance_as_validation: เปิด

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

ป้องกันไม่ให้ข้อความถูกบันทึก

Do_not_store: จริง

การตั้งค่านี้จะบอกโมดูลจัดเก็บข้อความ เช่น Flamingo ไม่ให้จัดเก็บข้อความผ่านแบบฟอร์มการติดต่อนี้

การดำเนินการโค้ด JavaScript

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

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

ทำได้ง่ายๆ: เพื่อจุดประสงค์นี้ใน การตั้งค่าเพิ่มเติมปลั๊กอินเพิ่มบรรทัดนี้:

Document.addEventListener("wpcf7mailsent", function(event) ( jQuery("#contactform").hide(); ), false);

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

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

พบวิธีนี้ใน codepen.io และได้รับการแก้ไขใหม่เล็กน้อย สาระสำคัญของวิธีการนี้คือ JavaScript "อ่านโครงสร้างของแท็กที่เลือกและแปลงเป็น รูปแบบที่ต้องการ- ตัวอย่างจะดูที่ฟิลด์สำหรับเลือกเครื่องยนต์:

เทมเพลตฟอร์ม:

ชื่อฟิลด์ถูกเลือกเป็น engine ดังนั้นเราจึงใช้แท็กในเทมเพลตอีเมลเพื่อให้ค่าที่ผู้ใช้เลือกถูกส่งไปยังอีเมล

การเพิ่มจาวาสคริปต์

JQuery(document).ready(function($)( var selectEngines = $("select"); var foundin = $("option:contains("optgroup-")", selectEngines); $.each(foundin, function( ค่า)( var ปรับปรุง = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll("") ; )); $("option:contains("optgroup-"), option:contains("endoptgroup")", selectEngines).remove());

รหัสนี้ถูกนำไปใช้ใน jQuery คุณควรแทรกลงในไฟล์ js ของธีมหรือสร้าง js ใหม่และรวม . เนื่องจากชื่อแท็กคือ engine ในโค้ดนี้เราจึงระบุอย่างชัดเจนว่า นั่นคือ select

รหัส html ดั้งเดิมของฟิลด์ที่เลือก

เอ็นจิ้น WordPress Joomla ฟรีของ optgroup!

Drupal Grav endoptgroup เอ็นจิ้น optgroup- จ่าย 1C-Bitrix DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup

ประมวลผลโค้ด html ของฟิลด์ที่เลือกแล้ว

เวิร์ดเพรส จูมล่า!

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

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

อย่างไรก็ตาม มีความอยากรู้อยากเห็นและมีการตัดสินใจว่าจะทดสอบปลั๊กอินโดยละเอียดมากขึ้น ฉันเคยลองใช้มาก่อนแล้ว แต่มันดูน่าเบื่อและไม่สะดวกอย่างยิ่ง ปลั๊กอินไม่ได้รับการอัปเดตเป็นเวลา 11 เดือนแล้ว ซึ่งน่าเศร้า เว็บมาสเตอร์มากกว่า 6K เล็กน้อยเสี่ยงที่จะมอบแบบฟอร์มของพวกเขาให้กับเขา ซึ่งก็ไม่ใช่จำนวนมากเช่นกัน (ซึ่งฉันดาวน์โหลดเขาสี่หรือห้าครั้ง)

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

“การตั้งค่าทั่วไป” - คุณสามารถกำหนดสีพื้นหลัง ความกว้างของรูปร่าง (ตั้งค่าเป็น px, % ยังไม่ได้ลอง) ความหนาของเส้นขอบ รูปร่าง (จุด ทึบ ฯลฯ) สี การปัดเศษ

“ การตั้งค่าอินพุตและป้ายกำกับ” - พื้นหลังของฟิลด์อินพุต, สีของฟอนต์อินพุต, ฟอนต์ (รายการมีขนาดไม่ใหญ่และแทบจะไม่มีอะไรเลยในซีริลลิก) และขนาดของมัน สีเส้นขอบของฟิลด์ ลักษณะ (เส้นประทึบ ฯลฯ) ความหนา การปัดเศษ แบบอักษรอินพุตและขนาดของมัน พารามิเตอร์ระยะขอบในหน่วย px - ความสูง/ความกว้าง, การเติม แบบอักษรของฉลาก สไตล์ ขนาด สี

“การตั้งค่าปุ่มส่ง” – การตั้งค่าสำหรับปุ่มส่งแบบฟอร์ม การตั้งค่าที่ใช้ได้ ได้แก่ ขนาดปุ่ม การปัดเศษ สี ประเภทเส้นขอบ และสีของเส้นขอบ

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

จนถึงตอนนี้ นอกเหนือจากการเปลี่ยนสไตล์ด้วยตนเองแล้ว มันยังทำงานได้ไม่ดีไม่มากก็น้อย... ปาฏิหาริย์ยังไม่เกิดขึ้น

หมายเหตุสำคัญ!

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

ฉันเคยพูดถึงเรื่องนี้มาก่อนแล้ว แต่อย่าพูดถึงมันตอนนี้ แต่มาดูการเปลี่ยนแปลงการออกแบบที่จำเป็นกันดีกว่า

ก่อนอื่น เราต้องการไฟล์ style.css ซึ่งสามารถพบได้ในแท็บ "ลักษณะที่ปรากฏ" / "ตัวแก้ไข" โดยค่าเริ่มต้นอย่างแน่นอน ไฟล์ที่ต้องการมันจะถูกเปิดเผยแก่คุณ ฉันแนะนำให้เปิดหลายแท็บในเบราว์เซอร์ของคุณ:

แท็บเปิดอยู่ มาเริ่มทำการเปลี่ยนแปลงกัน ก่อนอื่นเราจะปรับแต่งแบบฟอร์มเล็กน้อย

เมื่อเราเปิดแบบฟอร์มเพื่อแก้ไขเราจะเห็นดังรูปนี้:

แบบฟอร์มคำติชมนี้จะมีลักษณะดังนี้:

มันน่าเบื่อ เกินสัดส่วน และบอกตามตรงว่าไม่สวยงาม

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

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

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

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

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

ในโค้ดที่เปิดขึ้น เรามองหาจุดเริ่มต้นของแบบฟอร์ม ซึ่งจะมีลักษณะดังนี้:

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

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

ขั้นตอนต่อไปได้ดำเนินการไปแล้ว เราได้กำหนด id แล้ว ลงทะเบียนคลาสของเรา ตอนนี้เรามาดำเนินการเปลี่ยนรูปลักษณ์โดยตรงกันดีกว่า

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

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

ก่อนอื่น มาดูไฟล์ style.css เพิ่มกฎแรกสำหรับ ID แบบฟอร์ม (คุณต้องเพิ่มที่ด้านล่างสุดของไฟล์) ในกรณีของฉันคือ wpcf7-f172-p34-o1 แต่คุณต้องการ เพื่อทดแทน ID ของคุณ:

#wpcf7-f172-p34-o1 (
ระยะขอบ: 5px;
ช่องว่างภายใน: 10px;
พื้นหลัง: #B3AFAF;
ตระกูลฟอนต์: จอร์เจีย " ไทม์ส ใหม่โรมัน", ไทม์ส, เซอริฟ;
สี: #000;
}

ตอนนี้เรามาดูรายละเอียดทุกอย่างกันดีกว่า:

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

ไปที่สาขาของเราเพิ่มการเยื้อง:

#wpcf7-f172-p34-o1 หน้า(
ระยะขอบ:5px;
}

สิ่งเหล่านี้เป็นการเยื้องตามขอบของช่อง เพื่อไม่ให้ข้อความและบล็อกรวมเป็นหนึ่งเดียว

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

#wpcf7-f172-p34-o1 อินพุต พื้นที่ข้อความ (
เส้นขอบ: 3px สองเท่า #000;
}

เพิ่มเติมเล็กน้อยเกี่ยวกับกรอบงาน ค่า 3px คือความกว้างของเฟรม ใช้ double สองครั้ง (หากไม่จำเป็น คุณสามารถลบคำนี้ออกได้) #000 สีของเฟรม คุณสามารถเลือกเองได้

ชื่อ-cf (
ลอย:ซ้าย;
ช่องว่างภายใน: 2px;
}
อินพุต .name-cf (
ความกว้าง: 270px;
}
อินพุต .thems-cf (
ความกว้าง: 100%;
}
.clear-cf (
ชัดเจน: ทั้งสอง;
}
.text-cf พื้นที่ข้อความ (
ความกว้าง: 100%;
}

ตอนนี้เรามาดูรายละเอียดทุกอย่างกันดีกว่า:

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

ไปที่ปุ่มของเรา จัดตำแหน่งให้อยู่ตรงกลางและเพิ่มพื้นหลัง:

ส่ง-cf (
ความกว้าง: 200px; /*ความกว้างของบล็อก*/
ความสูง: 25px; /*ความสูง*/
ระยะขอบ: 0 อัตโนมัติ; /* ช่องว่างซ้ายและขวา */
}
.submit-cf อินพุต (
ความกว้าง: 200px;
พื้นหลัง:#96B195;
}

ตามเนื้อผ้า ฉันอธิบายว่าอะไรคืออะไร:

เราบันทึกการตั้งค่าของเราและดูว่าเราได้อะไรบ้าง:

ฉันยอมรับว่ามันห่างไกลจากความเก๋ไก๋ แต่ภาพรวมก็ดูเพียงพอ ด้านล่างเป็นรูปร่างเริ่มต้น ฉันคิดว่าเอฟเฟกต์นั้นชัดเจน ไม่ว่าในกรณีใด เราได้เรียนรู้วิธีเปลี่ยนรูปลักษณ์ของแบบฟอร์มติดต่อ 7

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

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

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

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

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

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

หลังจากติดตั้งปลั๊กอิน Contact Form 7 และแสดงแบบฟอร์มบนเพจแล้ว จะมีลักษณะดังนี้

เห็นด้วย ไม่ค่อยแสดงออก แต่รูปลักษณ์ภายนอกสามารถแก้ไขได้ง่าย

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

อินพุต Wpcf7, อินพุต .wpcf7, .wpcf7 textarea ( /* ลักษณะที่นี่: สี, พื้นหลัง, แบบอักษร, ขนาด, เส้นขอบ, ฯลฯ */ )

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

Wpcf7 ( /* ลักษณะที่นี่: สี, พื้นหลัง, แบบอักษร, ขนาด, เส้นขอบ ฯลฯ */ )

จะกำหนดสไตล์เฉพาะฟิลด์เฉพาะได้อย่างไร? สมมติว่าคุณต้องการเปลี่ยนสไตล์สำหรับฟิลด์ตัวเลือก ' เรื่อง' ซึ่งมีอยู่ในแบบฟอร์มตามค่าเริ่มต้นหลังจากเปิดใช้งานปลั๊กอิน

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

หัวเรื่อง [ ส่งข้อความถึงหัวเรื่องของคุณ id:fb-subject ]

จากนั้นคุณสามารถเพิ่มสไตล์ CSS ของคุณเองได้

#fb-subject ( /* รูปแบบที่นี่: สี, พื้นหลัง, แบบอักษร, ขนาด, เส้นขอบ ฯลฯ */ )

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

นี่คือปลั๊กอินรูปแบบอื่นสำหรับแบบฟอร์มการติดต่อ 7 ที่มีรูปแบบที่ตั้งไว้ล่วงหน้าที่เรียบง่ายแต่สวยงาม

แบบฟอร์มการติดต่อที่สะอาดและเรียบง่าย - พร้อมมาร์กอัป Bootstrap, Google captcha และตัวกรองสแปม โปรดทราบว่านี่เป็นปลั๊กอินยอดนิยม

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

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