เสียงและดนตรี 

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

สวัสดีผู้อ่านที่รัก! ในบทช่วยสอนนี้ ฉันจะแสดงวิธีที่เราสามารถสร้างแบบฟอร์มสมัครสมาชิกอีเมล HTML5 พร้อมการตรวจสอบอีเมลโดยใช้ JQuery เราจะใช้นิพจน์ทั่วไปในการตรวจสอบ และเราจะบันทึกที่อยู่ที่ป้อนไว้ในฐานข้อมูล MySql ดังนั้น เมื่อทำการบันทึก จะใช้ AJAX (เช่น เราจะเรียกสคริปต์ PHP โดยไม่ต้องโหลดหน้าซ้ำ) สามารถดูผลลัพธ์ได้ในหน้าสาธิต และคุณยังสามารถดาวน์โหลดซอร์สโค้ดได้อีกด้วย มาเริ่มกันเลย!

มาร์กอัปพื้นฐาน

เริ่มต้นด้วยการสร้างไฟล์ index.html ใหม่ และเราจะสร้างโครงสร้างเอกสารอย่างง่ายที่ยึดตาม HTML5 เราจะเชื่อมต่อสไตล์ CSS และไลบรารีทันที เราจะต้องใช้เมื่อตรวจสอบอีเมลที่ป้อน:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15





แบบฟอร์มสมัครสมาชิกอีเมลพร้อมเครื่องมือตรวจสอบ jQuery





ตอนนี้คุณพร้อมที่จะสร้างแบบฟอร์มแล้ว!

แบบฟอร์มสมัครสมาชิกทางอีเมล

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

1
2
3
4
5
6
7
8
9



สมัครสมาชิก

มาล้อมแบบฟอร์มใน #completeform div block เพื่อที่ว่าหลังจากบันทึกที่อยู่แล้ว แบบฟอร์มก็จะยุบได้

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

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

เครื่องมือตรวจสอบ jQuery และคำขอ AJAX

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

มาดูฟังก์ชัน completeInviteForm() กัน เพื่อป้องกันไม่ให้แบบฟอร์มการป้อนที่อยู่เกิดความสับสน เราจะใช้เอฟเฟกต์ fadeOut เป็นเวลา 400 มิลลิวินาที และเพื่อเป็นการโทรกลับ ให้เรียกใช้ฟังก์ชัน $.ajax() ใช้เพื่อเรียกไฟล์ save.php และบันทึกที่อยู่ที่ป้อนลงในฐานข้อมูล ฉันจะให้ซอร์สโค้ดของไฟล์ save.php ด้านล่างนี้ แต่ตอนนี้เรามาดูฟังก์ชัน $.ajax() กันดีกว่า

$.ajax - โหลดเพจระยะไกลโดยใช้คำขอ HTTP ฟังก์ชัน $.ajax() ถูกส่งผ่านวัตถุที่ประกอบด้วยคู่คีย์/ค่าที่ใช้ในการเริ่มต้นและจัดการคำขอ ในกรณีของเรา เราจะใช้วัตถุต่อไปนี้:

  • type:'POST' - เลือกประเภทของคำขอไปยังไฟล์ โดยค่าเริ่มต้น GET ความแตกต่างระหว่าง POST และ GET นั้นไม่ได้ใหญ่มาก เพียงแต่ด้วยคำขอ GET ข้อมูลจะถูกส่งไปที่ส่วนหัวและด้วย POST ในส่วนเนื้อหา ของคำขอ ดังนั้นการใช้ POST คุณสามารถส่งข้อมูลจำนวนมากขึ้นได้
  • url:’save.php’ — เส้นทางไปยังไฟล์ปฏิบัติการ
  • data:’email=’+$(“#email”).val() - ข้อมูลที่ถูกส่งไปยังเซิร์ฟเวอร์ การใช้ตัวเลือก CSS #email เราเข้าถึงองค์ประกอบด้วย id="email" และรับเนื้อหาของแอตทริบิวต์ value นั่นคืออีเมลที่ผู้ใช้ป้อน และเราจะกำหนดเนื้อหานี้ให้กับตัวแปรอีเมล ซึ่งเราจะใช้ในไฟล์ save.php
  • ความสำเร็จ: function())( $('#completeform').before('Everything is ready! You have been added to the mailing list.');) - ฟังก์ชัน Success จะถูกเรียกเมื่อคำขอ ajax เสร็จสมบูรณ์ ฟังก์ชันดำเนินการดังต่อไปนี้ ก่อน #completeform div เราจะแทรกเนื้อหาเพื่อแจ้งให้ผู้ใช้ทราบว่าอีเมลของเขาถูกเพิ่มลงในรายชื่ออีเมลแล้ว

1
2
3
4
5
6
7
8
9
10
11
12

ฟังก์ชั่น completeInviteForm() (
setTimeout(ฟังก์ชั่น () ( $("#completeform" ) .fadeOut (400 , ฟังก์ชั่น () (
$.อาแจ็กซ์((
ประเภท: "โพสต์" ,
URL: "save.php" ,
ข้อมูล: "email=" + $("#email" ) .val () ,
ความสำเร็จ: ฟังก์ชั่น () (
$("#completeform" ) .before ( "เสร็จแล้ว! คุณถูกเพิ่มเข้าในรายชื่อผู้รับจดหมายแล้ว" ) ; -
} ) ;
} ) ;
} , 1100 ) ;
}

และการใช้วิธีการ setTimeout การซ่อนแบบฟอร์มและการดำเนินการคำขอ ajax จะเกิดขึ้นแบบอะซิงโครนัสโดยมีความล่าช้า 1100 มิลลิวินาที

การประมวลผลแบบฟอร์ม

เพื่อให้เข้าถึงองค์ประกอบของหน้าได้ง่ายขึ้น มาสร้างตัวแปรสองสามตัวด้วยตัวเลือก #error และ #btnwrap

var erdiv = $("#ข้อผิดพลาด" ) ;
var btnwrap = $("#btnwrap" ) ;

เมื่อใช้ตัวจัดการเหตุการณ์สด เราจะติดตามการคลิกปุ่ม “สมัครสมาชิก” ด้วย id=”sendbtn” วิธีการ e.preventDefault();

ยกเลิกพฤติกรรมมาตรฐานของเบราว์เซอร์ในการดำเนินการ (คลิกปุ่ม) กล่าวคือ ยกเลิกการรีเฟรชหน้าและเปลี่ยน URL เรากำหนดอีเมลที่ป้อนให้กับตัวแปร emailval และเราสามารถเริ่มประมวลผลตัวแปรนี้ได้

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

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

1
2
3
4
5
6
7
8
9
10
11
12

เพื่อให้กระบวนการชัดเจน ให้แทรกข้อความที่เหมาะสมลงในบล็อกข้อผิดพลาด และวางภาพ GIF ลงในบล็อกที่มีปุ่ม "สมัครสมาชิก" และเราเรียกฟังก์ชัน completeInviteForm() ซึ่งเราได้กล่าวถึงข้างต้น
ถ้า (! isEmail(อีเมล) ) (
erdiv.html ("คุณป้อนที่อยู่อีเมลของคุณไม่ถูกต้อง" );
}
erdiv.css ("แสดง" , "บล็อก" ) ;
ถ้า (isEmail (อีเมล) ) (
erdiv.css ("สี" , #719dc8" ) ;
erdiv.html("กำลังประมวลผล...");
}
} ) ;
} ) ;

(กรอกแบบฟอร์มเชิญ(), 900);

ฐานข้อมูล

เนื่องจากฉันเลือกวิธีการบันทึกที่อยู่ที่ป้อนลงในฐานข้อมูล ฉันจะพูดสั้น ๆ เกี่ยวกับการสร้างฐานข้อมูลและตารางเอง รวมถึงโค้ดของไฟล์ save.php ซึ่งทำงานร่วมกับฐานข้อมูล MySql ตามที่สัญญาไว้

สำหรับสิ่งนี้ เราจะต้องมีเซิร์ฟเวอร์ภายในเครื่อง ฉันใช้ Denwer แน่นอนว่ามีคนใช้มันเยอะมาก ดังนั้นฉันจะไม่ลงรายละเอียด ไปที่ phpMyAdmin และสร้างฐานข้อมูลอีเมล:

ในการจัดเก็บที่อยู่ของสมาชิก เราจำเป็นต้องมีหนึ่งตารางที่มีสองฟิลด์ เรียกว่าที่อยู่ :

  • ฟิลด์จะเป็นดังนี้:
  • id — ตัวระบุที่อยู่อีเมล (หรือที่เรียกว่าคีย์หลัก)

ที่อยู่ — ที่อยู่อีเมลนั่นเอง

ไฟล์ save.php

1
2
3
4
5
6

ขั้นแรก เราจะตรวจสอบว่ามีตัวแปรอีเมลอยู่ในอาร์เรย์ POST ส่วนกลางหรือไม่ หากเป็นเช่นนั้น เราจะกำหนดค่าให้กับตัวแปรในเครื่อง $email ต่อไป เราจะสร้างการเชื่อมต่อกับเซิร์ฟเวอร์ mysql_connect() รูทผู้ใช้ โดยไม่มีรหัสผ่าน เราเลือกฐานข้อมูลอีเมลและดำเนินการค้นหาในฐานข้อมูล แทรกบันทึกใหม่ลงในตารางที่อยู่ โดยที่ค่าของตัวแปร $email จะถูกแทรกลงในช่องที่อยู่ แค่นั้นแหละ!

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

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

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

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

บันทึก! ฉันจะไม่อธิบายแต่ละการกระทำโดยละเอียด แต่เสนอเวอร์ชันสำเร็จรูปให้คุณในซอร์สโค้ด หากคุณมีคำถามใด ๆ เขียนในความคิดเห็น เราจะคิดออก :)

วันนี้เราจะไม่เริ่มต้นด้วย jQuery แต่ด้วยเค้าโครงของปุ่มและแบบฟอร์ม เราจะรวมสคริปต์ทั้งหมดไว้ท้ายหน้า

ปุ่มที่เมื่อคลิกแล้วจะเปิดหน้าต่างโมดอล:

ฝากคำขอไว้

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

ตอนนี้ฉันจะให้รหัสสำหรับแบบฟอร์มและบล็อกที่จะวางแบบฟอร์ม:

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

หลังจากเพิ่มสไตล์แล้ว หน้าตาจะเป็นดังนี้:


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

เราเพิ่มสไตล์ระหว่างแท็ก head:

และก่อนแท็กปิดเนื้อหา ให้เพิ่มสคริปต์:

Script.js เป็นสคริปต์สำหรับประมวลผลแบบฟอร์ม Ajax เดียวกับที่ช่วยให้เราดำเนินการตามขั้นตอนทั้งหมดโดยไม่ต้องโหลดหน้าซ้ำ:

$(document).ready(function () ( $("form").submit(function () ( // Get the form ID var formID = $(this).attr("id"); // เพิ่มแฮช ไปที่ชื่อ ID var formNm = $("#" + formID); $.ajax(( ประเภท: "POST", url: "mail.php", ข้อมูล: formNm.serialize(), ความสำเร็จ: ฟังก์ชั่น (data) ( // ข้อความเอาต์พุตของผลลัพธ์การส่ง $(formNm).html(data); error: function (jqXHR, text, error) ( // การแสดงข้อความของข้อผิดพลาดในการส่ง $(formNm).html(error); ) ) ); ));

ฉันจะไม่ระบุซอร์สโค้ดของ css และ js จากไฟล์ที่รับผิดชอบหน้าต่างและฟอร์มโมดอล เนื่องจากมีขนาดค่อนข้างใหญ่ ถ้าเป็นเช่นนั้นให้ดูที่แหล่งที่มา แต่ตัวจัดการ PHP นั้นเป็นมาตรฐานส่วนใหญ่ (ถ้าฉันพูดอย่างนั้น):

โปรดอย่าลืมเปลี่ยนที่อยู่อีเมลของคุณเป็นของคุณเอง

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

เพื่อนๆ ฉันขอแนะนำให้คุณทดสอบแบบฟอร์มบนเซิร์ฟเวอร์จริงหรือเสมือน (โฮสติ้ง) โปรดตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณรองรับ PHP คุณมีแผนแบบชำระเงินและไม่ใช่ช่วงทดลองใช้งาน มิฉะนั้น 90% ของกรณีแบบฟอร์มจะไม่ทำงาน

อย่าคาดหวังจดหมายในกล่องจดหมายของคุณหากคุณเพิ่งเปิดไฟล์ดัชนีในเบราว์เซอร์แล้วคลิกปุ่ม "ส่ง" PHP เป็นภาษาฝั่งเซิร์ฟเวอร์!

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

มีบทความเวอร์ชันอัปเดตอยู่

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

ในความคิดของฉัน นี่เป็นตัวอย่างที่ยอดเยี่ยมของเครื่องมือโต้ตอบกับผู้ใช้

เราดูตัวอย่าง ตอนนี้ เรามาแบ่งแบบฟอร์มนี้ออกเป็นส่วนประกอบต่างๆ ตั้งแต่การสร้างโครงสร้างโดยรวมใน Html ไปจนถึงการสร้างรูปลักษณ์ของเลย์เอาต์โดยใช้ CSS

รหัส HTML ของแบบฟอร์ม

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

ปิดส่งข้อความถึงเรา

ปิดส่งข้อความถึงเรา กรุณากรอกข้อความของคุณที่นี่..

นอกจากนี้เรายังต้องสร้างเลเยอร์ที่เข้มขึ้นสำหรับพื้นหลังทั่วไปเมื่อเปิดใช้งานแบบฟอร์มป๊อปอัป งานนี้สามารถทำได้หลายวิธี แต่เราจะไม่ฉลาดเกินไป และจะเพิ่ม div อื่น โดยกำหนดตัวระบุ: id="fade" และ class: class="black-overlay" คุณสามารถวางไว้ข้างแบบฟอร์มเพื่อจะได้ไม่ต้องค้นหาเป็นเวลานานหากจำเป็น

ข้อเสนอแนะ

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

เพียงเท่านี้ มาดูโค้ด HTML แบบเต็มของหน้าเว็บที่มีแบบฟอร์มแสดงความคิดเห็นแบบป๊อปอัป:

แบบฟอร์มการติดต่อแบบป๊อปอัปปิดส่งข้อความถึงเรา กรุณากรอกข้อความของคุณที่นี่..

แบบฟอร์มการติดต่อแบบป๊อปอัปปิดส่งข้อความถึงเรา กรุณากรอกข้อความของคุณที่นี่..

ก่อนที่เราจะไปยังส่วนที่สนุกสนานในการกำหนดรูปแบบการติดต่อของเราโดยใช้ CSS ฉันจะย้อนอดีตเล็กน้อย คนที่เอาใจใส่มากที่สุดอาจสังเกตเห็นว่าปุ่มสำหรับเปิดและปิดแบบฟอร์มนั้นถูกนำมาใช้ในรูปแบบของลิงก์ที่มี “jammer” href="javascript:void(0)" . ไม่ว่าจะดีหรือไม่ดี ฉันไม่เคยพบคำตอบที่แน่นอนสำหรับตัวเองเลย ฉันใช้วิธีนี้จนเป็นนิสัย แม้ว่าสำหรับองค์ประกอบที่สคริปต์ประมวลผลเหตุการณ์ onclick ฉันคิดว่าการใช้ หรือ มีเหตุผลและถูกต้องมากกว่า หากต้องการ คุณสามารถทำได้โดยใช้ปุ่มจากตัวอย่างนี้

ความมหัศจรรย์ของ CSS

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

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

/* ตั้งค่าเลเยอร์การทำให้มืดลงของพื้นหลัง ** กำหนดตำแหน่ง สี และความเข้มของการทำให้มืดลง */ .black-overlay( display : none ; Position : Absolute ; top : 0% ; left : 0% ; width : 100% ; ความสูง : 100% ; สีพื้นหลัง : สีดำ ; z-index : 1001 ; -moz-opacity : .70; filter : alpha(opacity= 70 ) ; ความสูง : 340px ; พื้นหลัง : url (images/envelope.png ) ตรงกลาง ไม่ซ้ำ ; z-index : 1002 ; ตำแหน่ง : ญาติ ; 10% อัตโนมัติ ; form */ .close-btn ( width : 31px ; height : 31px ; display : block ; cursor : pointer ; /* สำหรับกรณีอื่นที่ไม่ใช่ แท็ก */ พื้นหลัง : url (images/close.png ) ; Glow(Color=#bfa8b2bc,Strength=5) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)" ; ตัวกรอง : progid: DXImageTransform.Microsoft .Glow(Color= #bfa8b2bc , Strength= 5 ) progid: DXImageTransform.Microsoft .dropshadow(OffX = 0 , OffY = 1 , Color = #80ffffff , Positive = true) ) .your-message ( font-family : "Trebuchet MS" , Tahoma, Arial , sans-serif; สีพื้นหลัง: rgb (255, 255, 255); สี: 10px 0 10px; moz-box-shadow: 0px 1px 0px 0px rgba (255, 255, 255, 0.5) , สิ่งที่ใส่เข้าไป 0px 1px 2px 0px rgba (0 , 0 , 0 , 0.2 ) -webkit-box-shadow: 0px 1px 0px 0px rgba ( 255, 255, 255, 0.5), Inset 0PX 1PX 2PX 0PX RGBA (0, 0, 0, 0.2); , 0, 0.2); 5) ใส่ 0px 1px 3px rgb (97, 108, 122); Microsoft .dropshadow(OffX = 0 , OffY = 1 , Color = #80ffffff , Positive = true) ;

/* ตั้งค่าเลเยอร์การทำให้พื้นหลังมืดลง ** กำหนดตำแหน่ง สี และความเข้มของการทำให้มืดลง */ .black-overlay( display: none; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0%; ซ้าย: 0%; ความกว้าง: 100%; ความสูง: 100% ; สีพื้นหลัง: สีดำ; z-index: 1001; -moz-opacity: .70; ตัวกรอง: alpha(opacity=70); ความสูง: 340px; พื้นหลัง: url(images/envelope.png) ไม่ซ้ำกัน; z-index:1002; ตำแหน่ง: สัมพันธ์กัน; ระยะขอบ: 10% อัตโนมัติ ) /* สร้างปุ่มปิด, ** ขนาด, ตำแหน่งบน form */ .close-btn ( width: 31px; height: 31px; display: block; cursor: pointer;/* สำหรับกรณีใช้งานนอกเหนือจากนี้ แท็ก */ พื้นหลัง: url (images/close.png); 5) ,แทรก 0px 1px 2px 0px rgba(0,0,0,0.2); 5) ,แทรก 0px 1px 3px rgb(97,108,122);

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

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

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

อัปเดตตั้งแต่วันที่ 21/05/2017
ฉันเพิ่มโฟลเดอร์ "mail" ลงในไฟล์เก็บถาวรต้นทาง ซึ่งคุณจะพบตัวจัดการ PHP อย่างง่ายสำหรับแบบฟอร์มและไฟล์การกำหนดค่าสำหรับการกำหนดค่า ตัวจัดการเชื่อมโยงกับแบบฟอร์มนี้ ฉันหวังว่าคำสั่งเล็ก ๆ และความคิดเห็นที่เขียนโดยตรงในโค้ดของไฟล์ตัวจัดการจะช่วยให้คุณทราบว่าอะไร ที่ไหน และทำไม

ขอแสดงความนับถืออันเดรย์

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

โครงสร้างบทความ

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

รปภ. 08/02/2018
บทความนี้ได้รับการเขียนใหม่โดยคำนึงถึงการโพสต์แบบฟอร์มบน GitHub

เอาล่ะ มาเริ่มกันเลย ก่อนอื่น ดาวน์โหลดแหล่งที่มาของฟอร์มจากที่เก็บ GitHub ของฉัน

ฉันประกอบแอสเซมบลีนี้โดยใช้ตัวจัดการงาน Gulp ฉันเขียนเกี่ยวกับวิธีการทำงานร่วมกับเขาอย่าลืมอ่าน

การเชื่อมต่อแบบฟอร์มกับไซต์

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

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

กำลังเริ่มต้นแบบฟอร์ม

ฉันขอทราบทันทีว่าการตรวจสอบความถูกต้องของฟิลด์นั้นจัดระเบียบโดยใช้ HTML5

แบบฟอร์มนี้ถูกเรียกโดยเมธอด .simpleSendForm() ตัวอย่างเช่น:

$("#idForm").simpleSendForm();

แทนที่จะเป็น #idForm เราระบุตัวระบุแบบฟอร์ม โดยทั่วไป คุณจะพบโค้ดการเริ่มต้นฟอร์มได้ในไฟล์ scripts.js รหัสการเรียกปลั๊กอินสามารถตัดออกจากที่นั่นและเขียนไว้หน้าไฟล์ . อย่าลืมเกี่ยวกับ jQuery.(document).ready()

แบบฟอร์มสามารถยอมรับตัวเลือกบางอย่างได้

ตัวเลือก
  • SuccessTitle (สตริง) — ชื่อเรื่องของข้อความขอบคุณเมื่อส่งแบบฟอร์ม ค่าเริ่มต้นคือ "ขอบคุณที่เลือกเรา!"
  • SuccessText (สตริง) - ข้อความใต้ชื่อข้อความขอบคุณ ค่าเริ่มต้นคือ “เราจะติดต่อคุณเร็วๆ นี้”
  • errorTitle (สตริง) — ชื่อของข้อความแสดงข้อผิดพลาดในการส่งแบบฟอร์ม ค่าเริ่มต้นคือ “ไม่ได้ส่งข้อความ!”
  • errorSubmit (สตริง) — ข้อความของข้อความแสดงข้อผิดพลาดในการส่งแบบฟอร์ม ค่าเริ่มต้นคือ “เกิดข้อผิดพลาดในการส่งแบบฟอร์ม!”
  • errorNocaptcha (สตริง) — ข้อความแสดงข้อผิดพลาดหากไม่ได้กรอก captcha
  • errorCaptcha (สตริง) — ข้อความแสดงข้อผิดพลาดหากการตรวจสอบล้มเหลว
  • mailUrl (สตริง) — เส้นทางไปยังไฟล์ตัวจัดการ ค่าเริ่มต้นคือ "../form-submit/submit.php" คุณควรเปลี่ยนและระบุเส้นทางแบบเต็มหากโฟลเดอร์ "ส่งแบบฟอร์ม" ของคุณไม่ได้อยู่ในรากของไซต์
  • autoClose (บูลีน) - ปิดหน้าต่างโดยอัตโนมัติหลังจากส่งแบบฟอร์มสำเร็จ (สำหรับแบบฟอร์มในหน้าต่างโมดอล) หน้าต่างแบบฟอร์มจะปิดลง โดยแสดงข้อความขอบคุณหลังจากผ่านไป 5 วินาที เวลานี้สามารถแทนที่ได้
  • autoCloseDelay (ตัวเลข) - ระยะเวลา (เป็นมิลลิวินาที) ของการแสดงข้อความขอบคุณหลังจากนั้นจะปิดลง ค่าเริ่มต้นคือ 5,000 (5 วินาที)
  • debug (บูลีน) - เท็จตามค่าเริ่มต้น เปิดใช้งานการแก้ไขข้อบกพร่องหากมีปัญหากับแบบฟอร์ม ดูข้อความแสดงข้อผิดพลาดในคอนโซล
  • captcha (บูลีน) - เท็จตามค่าเริ่มต้น เปิดหรือปิดใช้งาน Recaptcha 2.0
  • captchaPublicKey (สตริง) - คีย์สาธารณะ recaptcha
แบบฟอร์มในหน้าต่างโมดอล

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

รหัส HTML

รหัสปุ่ม

ขอโทร

รหัสแบบฟอร์ม

เริ่มต้นหน้าต่างโมดอลและแบบฟอร์ม มาทำให้หน้าต่างปิดโดยอัตโนมัติหลังจากผ่านไป 3 วินาที หลังจากส่งแบบฟอร์มเรียบร้อยแล้ว คุณยังสามารถค้นหารหัสการโทร Magnific Popup ได้ในไฟล์ scripts.js

การเรียกแบบฟอร์มด้วยหน้าต่างโมดอล // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline",fixedContentPos: false,fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: "mfp-top-up" )); // ===== Init modal form ==== $("#idForm").simpleSendForm (( SuccessTitle: "Your application has been suitableed!", SuccessText: "พนักงานของเราจะติดต่อคุณโดยเร็วที่สุด" , autoClose : จริง, autoCloseDelay: 3000 )); จะเปิดใช้งาน Recaptcha ได้อย่างไร?

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

// ===== เริ่ม captcha ในรูปแบบ ==== $("#idForm").simpleSendForm(( SuccessTitle: "Your application has been suitableed!", SuccessText: "พนักงานของเราจะติดต่อคุณโดยเร็วที่สุด " , autoClose: จริง, autoCloseDelay: 3000, captcha: จริง, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

ถัดไป เปิดไฟล์ตัวจัดการแบบฟอร์ม send.php จากไดเร็กทอรีส่งแบบฟอร์ม เรามองหาตัวแปร recaptchaOn (ประมาณบรรทัดที่ 7) และตั้งค่าเป็น true ถัดไป ค้นหาตัวแปร $secret (ประมาณบรรทัดที่ 89) และเปลี่ยนคีย์ส่วนตัวเป็นของคุณเอง

โดยพื้นฐานแล้วทุกอย่าง หลังจากการยักย้ายเหล่านี้ คุณควรเห็นแคปช่า

โปรดทราบว่าบนไซต์สาธิต captcha ทำงานในโหมดทดสอบ ตามที่ระบุคีย์ทดสอบจาก Google

ตอนนี้เรามาดูไฟล์ตัวจัดการแบบฟอร์ม (submit.php) และอธิบายส่วนหลักของโค้ดกัน ตัวจัดการทำงานใน PHP ดังนั้นหากคุณต้องการทดสอบแบบฟอร์ม คุณจะต้องใช้ .

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

ดูว่าเส้นทางไปยังไฟล์ตัวจัดการระบุไว้อย่างถูกต้องในการเริ่มต้นแบบฟอร์มหรือไม่:

mailUrl: - เส้นทางไปยังไฟล์ตัวจัดการ

ตรวจสอบด้วยว่าเปิดใช้งาน recaptcha อย่างถูกต้อง นั่นคือหากปิดใช้งาน ตัวเลือก recaptcha ในโค้ดเริ่มต้นและ $recptchaOn ในไฟล์ตัวจัดการควรตั้งค่าเป็น false หรือ true หากเปิดใช้งาน recaptcha

Google Recaptcha ไม่แสดงในแบบฟอร์ม

ตรวจสอบว่ามีการส่งค่า recaptcha (การเรียก recaptcha) และ $recaptchaOn (ไฟล์ตัวจัดการ) หรือไม่ - จริง- ตรวจสอบด้วยว่าคุณระบุคีย์อย่างถูกต้องหรือไม่ - สาธารณะและส่วนตัว

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

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

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

นั่นคือทั้งหมดที่ ขอบคุณสำหรับความสนใจของคุณ พบกันในโพสต์ถัดไป!



มีคำถามอะไรไหม?

แจ้งการพิมพ์ผิด

ข้อความที่จะส่งถึงบรรณาธิการของเรา:

ส่ง