วิธีการสร้างแบบฟอร์มการติดต่อ HTML5 / CSS3 ที่ใช้ Ajax
แบบฟอร์มการติดต่อมีความสำคัญอย่างยิ่งสำหรับเว็บไซต์ใด ๆ เนื่องจากมันทำหน้าที่เป็นผู้ส่งสารซึ่งส่งความคิดเห็นหรือสอบถามข้อมูลของผู้เยี่ยมชมไปยังเว็บมาสเตอร์ มีรูปแบบการติดต่อมากมายบนเว็บ แต่น่าเสียดายที่ส่วนใหญ่ไม่ได้อธิบายถึงคุณในส่วนการทำงานดังนั้นที่นี่มีการสอนโดยละเอียดเพื่อสอนคุณในการสร้างแบบฟอร์มการติดต่อขั้นสูงจากศูนย์เทคโนโลยี HTML5 และ CSS3.
เมื่อพิจารณาถึงลักษณะของแบบฟอร์มการติดต่อทางอีเมลเราจำเป็นต้องดำดิ่งลงในสองแอปพลิเคชันแยกต่างหากซึ่งเป็นโค้ดแบ็กเอนด์ PHP สำหรับส่งอีเมลและฟังก์ชั่น jQuery สำหรับส่วนต่อประสานผู้ใช้ที่หลากหลาย ในตอนท้ายเราจะถูกทิ้งให้อยู่กับแบบฟอร์มการติดต่อที่มีการเปลี่ยนแปลงและเต็มไปด้วยพลังซึ่งเขียนขึ้นโดยคำนึงถึงการปรับแต่งในภายหลัง.
เริ่มต้นทันทีเพื่อสร้างแบบฟอร์มการติดต่อขั้นสูงของคุณเอง!
ทางลัดไปที่:
- การสาธิต - ดูตัวอย่างสิ่งที่คุณกำลังสร้าง
- ดาวน์โหลด - ดาวน์โหลดไฟล์ทั้งหมด (php + css)
โครงสร้างแอพลิเคชัน
ในการเริ่มต้นคุณต้องมีเว็บเซิร์ฟเวอร์บางประเภทเพื่อทำงาน หากคุณใช้เครื่อง Windows WAMP อาจเป็นตัวเลือกที่ดีที่สุดของคุณ ผู้ใช้ Mac มีโปรแกรมที่คล้ายกันชื่อว่า MAMP ซึ่งง่ายต่อการติดตั้ง.
แพ็คเกจเหล่านี้จะตั้งค่าเซิร์ฟเวอร์ภายในเครื่องของคุณด้วยการเข้าถึง PHP อย่างสมบูรณ์ อีกทางเลือกหนึ่งถ้าคุณเป็นเจ้าของพื้นที่เซิร์ฟเวอร์หรือมีการเข้าถึงเซิร์ฟเวอร์แบบเต็มในสถานที่ห่างไกลคุณอาจใช้สิ่งนั้นแทน เราจะไม่ต้องการฐานข้อมูล MySQL ใด ๆ ซึ่งน่าจะง่ายขึ้นเล็กน้อย.
เมื่อเซิร์ฟเวอร์ของคุณตั้งค่าแล้ว สร้างโฟลเดอร์ใหม่เพื่อสร้างแอพพลิเคชั่น. คุณสามารถตั้งชื่อสิ่งนี้ได้ตามที่คุณต้องการเนื่องจากไม่เป็นอันตรายหรือเกี่ยวข้องกับผลิตภัณฑ์ขั้นสุดท้าย โครงสร้างโฟลเดอร์จะใช้เมื่อคุณเข้าถึงไฟล์ของคุณในเว็บเบราว์เซอร์ ตัวอย่างง่ายๆก็คือ http: //localhost/ajaxcontact/contact.php
มาสร้างไฟล์ของเรากันเถอะ!
เราจะทำงานภายใน 2 ไฟล์หลักเท่านั้น ก่อนอื่นเราจะต้องมีแกน .PHP ไฟล์ไปที่บ้านไม่เพียง แต่ตรรกะแอปพลิเคชันของเราเท่านั้น ด้านล่างคือตัวอย่างโค้ดที่นำมาจากไฟล์เริ่มต้นของเรา.
แบบฟอร์มการติดต่อ Ajax HTML5 / CSS ด้วย jQuery
ในการเริ่มต้นเราได้เขียนหัวข้อหัวเรื่องอย่างง่ายไว้ในเอกสารของเรา ซึ่งรวมถึงทั่วไป ประกาศ Doctype สำหรับ HTML5 และองค์ประกอบเอกสาร HTML / XML บางส่วน สิ่งเหล่านี้ไม่ได้ต้องการอย่างแน่นอน แต่จะทำให้กระบวนการแสดงผลง่ายขึ้นในเบราว์เซอร์รุ่นเก่า (และใหม่กว่า) นอกจากนี้ยังไม่เจ็บที่จะให้ข้อมูลเพิ่มเติม.
ลงไปอีกเล็กน้อยเราสามารถเห็น 2 บรรทัดก่อนแท็กหัวเรื่องปิดของเรา ครั้งแรกรวมถึงของเรา สคริปต์ jQuery จาก Google Code Repository ออนไลน์. สิ่งนี้เป็นสิ่งจำเป็นสำหรับข้อผิดพลาดของหน้าแบบไดนามิกในการทำงาน ด้านล่างนี้เรามีการรวมของพื้นฐาน เอกสาร CSS มีรูปแบบหน้าทั้งหมดของเรา.
ภายในตัวเอกสารของเราเรามีบางอย่าง มีแผนก หัก ณ ที่จ่ายแบบฟอร์มการติดต่อหลัก บ้านนี้มี 3 องค์ประกอบอินพุตสำหรับ ชื่อผู้ใช้, ที่อยู่อีเมล, และ ข้อความส่วนตัว. มาร์กอัป HTML นั้นค่อนข้างมาตรฐานและไม่ควรกังวลกับนักพัฒนาระดับกลางใด ๆ.
ส่งอีเมลของคุณแล้ว Huzzah!
ที่นี่เรามีพื้นฐาน โค้ดตามเงื่อนไข PHP ซ้อนกันภายในคอนเทนเนอร์หน้าไม่กี่หน้า สิ่งนี้จะตรวจสอบค่าที่ตั้งไว้ของตัวแปรที่ชื่อ
$ emailSentและถ้าเท่ากับจริงมันจะแสดงข้อความสำเร็จ.ภายใน HTML แบบฟอร์มของเรา
อื่น คำสั่งคือสิ่งที่จะทำงานในการโหลดหน้าแรกเนื่องจากจะไม่มีเนื้อหาใด ๆ ที่จะส่งเริ่มต้น ข้างในที่นี่เราจะรวม คอลเลกชันสั้น ๆ ขององค์ประกอบแบบฟอร์ม และ ปุ่มส่ง.
เกิดข้อผิดพลาดในการส่งแบบฟอร์ม
คุณอาจสังเกตเห็นว่ามีอีก บล็อกตามเงื่อนไข โดยตรงหลังจากแบบฟอร์มเริ่มต้น ตรวจสอบตัวแปรที่ชื่อ $ hasError และจะแสดงข้อความข้อผิดพลาดเมื่อยืนยัน วิธีทางเลือกนี้คือ ใช้เฉพาะเมื่อปิดการใช้งาน JavaScript ในเบราว์เซอร์จึงไม่สามารถสร้างข้อผิดพลาดแบบไดนามิกได้.
ตลอดทางที่เราสามารถหาได้ ตัวแปร PHP แต่ละรายการ กำลังตรวจสอบ ข้อความสั่งจะถูกควบคุมหากแบบฟอร์มได้ถูกส่งไปพร้อมกับข้อมูลบางส่วนเท่านั้นซึ่งเป็นระบบทางเลือกอื่นที่แสดงเนื้อหาของฟิลด์ที่กรอกไว้แล้ว - เป็นเคล็ดลับที่ดีสำหรับประสบการณ์การใช้งานที่เหมาะสม!
โดยตรงหลังจากกรอกแบบฟอร์มของเราไม่กี่ ฟังก์ชั่น jQuery เราได้เขียน เราจะพูดถึงสิ่งเหล่านี้ก่อนเนื่องจากเป็นการใช้งานเริ่มต้นใน pageload อย่างไรก็ตามหากเบราว์เซอร์ไม่ยอมรับ JavaScript ดังนั้นโดยค่าเริ่มต้นเราสามารถพึ่งพาโค้ด PHP ของเราได้.
กำลังเปิดให้ jQuery
วิธีที่ง่ายที่สุดในการเริ่มพูดคุยในหัวข้อนี้คือการไปทางขวาฉันจะแยกย่อยแต่ละบล็อกทีละบรรทัดเพื่อให้คุณสามารถดูสิ่งที่สคริปต์กำลังตรวจสอบจริง ๆ.
อย่างไรก็ตามหากคุณหลงทาง ตรวจสอบไฟล์รหัสโครงการ. บล็อกเต็มทั้งหมดได้รับการเขียนล่วงหน้าและจัดทำเอกสารอย่างดีในเว็บไซต์ jQuery ในการเริ่มต้นเราเปิดรหัสของเราคล้ายกับที่อื่น ๆ :
หากคุณคุ้นเคยกับ เรียกกลับ คุณอาจสังเกตเห็น โพสต์ () ฟังก์ชั่นมีชุดพารามิเตอร์ในตัว การเรียกกลับเป็นฟังก์ชันที่มีขนาดเล็กกว่าซึ่งเรียกว่า ตามการตอบสนองของข้อมูลจากฟังก์ชั่นอื่น.
ตัวอย่างเช่นเมื่อเรา jQuery.post () ฟังก์ชั่นถ่ายภาพอีเมลได้สำเร็จมันจะเรียกฟังก์ชั่นภายในของตัวเองเพื่อแสดงภาพเคลื่อนไหวแบบเลื่อน รหัสทั้งหมดนี้สามารถเขียนในบล็อกของตัวเองและย้ายไปที่อื่น อย่างไรก็ตามสำหรับบทช่วยสอนนี้การเขียนการโทรกลับเป็นฟังก์ชันอินไลน์.
ผ่านพ้น PHP ของเราไป
อุปสรรค์สุดท้ายที่จะพูดถึงคือ ตรรกะ เบื้องหลังโปรเซสเซอร์ PHP ของเรา นี่คือระบบแบ็กเอนด์ซึ่งจะจริง เรียกฟังก์ชั่นจดหมาย และ ส่งข้อความ. รหัสทั้งหมดที่ใช้ในตัวอย่างด้านล่างสามารถดูได้โดยตรงที่ด้านบนของหลักของเรา .PHP ไฟล์ก่อนการส่งออก HTML ใด ๆ.
นอกจากนี้ยังมีสไตล์ภายในบางอย่างที่ทำให้หน้าเว็บสดชื่นขึ้น ไม่มีอะไรใหม่เป็นพิเศษที่นี่ดังนั้นเราจะไม่เข้าไปดูรายละเอียดใด ๆ อย่างไรก็ตาม styles.css เอกสารจะรวมอยู่ในรหัสโครงการและมีเทคนิค CSS3 พื้นฐาน.
เพื่อเริ่มต้นเราเปิดส่วนคำสั่ง PHP และตรวจสอบ ถ้าแบบฟอร์มถูกส่งมา. โพสต์ ตัวแปร “ส่ง” จริง ๆ แล้วเป็นฟิลด์อินพุตที่ซ่อนอยู่ซึ่งถูกเพิ่มที่ส่วนท้ายสุดของฟอร์มของเรา มันเป็นวิธีที่มีประโยชน์ ตรวจสอบว่าผู้ใช้ส่งอะไรหรือไม่ แต่เราก็ไม่ต้องเสียทรัพยากรเซิร์ฟเวอร์.
หลังจากนี้เรามี 3 แยก หาก / อื่น ตรวจสอบคำสั่งเพื่อดู หากช่องป้อนข้อมูลแต่ละช่องเต็มแล้ว. ฉันจะไม่รวมตรรกะแต่ละบิตที่นี่เนื่องจากมันซ้ำซ้อนกันมากในธรรมชาติ อย่างไรก็ตามเพื่อให้ตัวอย่างสั้น ๆ แก่คุณฉันได้รวมข้อตรวจสอบอีเมลไว้ด้านล่าง:
// ต้องการอีเมลที่ถูกต้องหาก (ตัด ($ _ POST ['อีเมล']) === ") $ emailError = 'ลืมใส่อีเมลของคุณ'; $ hasError = true; ถ้า (! preg_match ("/^^^:alnum: เหมือนกันที่อื่น ๆ - a-z0-9_.- เหมือนกัน@@a-z0-9.-เหมือนกัน+\.هaznazazazi, ตัดแต่ง ($ _POST ['email']))) $ emailError = 'คุณป้อนที่อยู่อีเมลที่ไม่ถูกต้อง'; $ hasError = true; อื่น $ email = ตัด ($ _ POST ['อีเมล']);PHP จะตัดช่องว่างทั้งหมดจากค่าและตรวจสอบเพื่อดูว่ามีอะไรเหลืออยู่หรือไม่ ถ้าอย่างนั้นเรามีรายละเอียด นิพจน์ทั่วไป (Regex) เพื่อดูว่าสตริงอินพุตของผู้ใช้ของเราตรงกับรูปแบบอีเมลหรือไม่.
แน่นอนคุณไม่จำเป็นต้องเข้าใจวิธีการ
preg_match ()ทำงานเพื่อสร้างสคริปต์นี้ มันเป็นฟังก์ชั่นที่มีประโยชน์ กำหนดกฎและข้อกำหนดสำหรับประเภทข้อมูลที่สำเร็จ, แต่สั่งการความรู้การเขียนโปรแกรมขั้นสูงให้เข้าใจจริงๆ ในสถานการณ์นี้เรามั่นใจว่าผู้ใช้ป้อนอักขระเพียงไม่กี่ตัวเท่านั้นซึ่งรวมถึง แอท สัญลักษณ์ตามด้วย 2-4 ตัวอักษร เป็นตัวแทนของ โดเมนระดับบนสุด.หลังจากตรรกะทั้งหมดของเราผ่านไปและเรากลับไม่มีข้อผิดพลาดถึงเวลาส่งข้อความของเราแล้ว! รหัสบิตนี้จะตั้งค่าตัวแปรแต่ละตัวเพื่อปรับแต่งข้อความอีเมลของเราและตั้งค่าบางอย่าง ส่วนหัวของจดหมาย สำหรับกระบวนการ.
// โดยไม่มีข้อผิดพลาดล้มเหลวลองส่งอีเมล์ทันที! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'ข้อความที่ส่งจาก'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "ชื่อ: $ name \ n \ n อีเมล: $ อีเมล \ n \ n ความคิดเห็น: $ ความคิดเห็น"; $ headers = 'จาก:'. ' <'.$emailTo.'>' "\ r \ n" 'ตอบกลับ: ' . $ อีเมล; เมล ($ emailTo, $ subject, $ body, $ header); // กำหนดค่าความสมบูรณ์แบบบูลของเราเป็น TRUE $ emailSent = true;หากคุณสงสัยว่ารหัสจะหาที่อยู่อีเมลของคุณได้อย่างไรส่วนนี้เป็นส่วนที่ต้องกรอกตัวแปรแรกในชุดของเรามีชื่อว่า
$ emailToและควรมีสิ่งใด ที่อยู่อีเมลซึ่งจะได้รับข้อความ.ภายในของเรา
ร่างกาย $ตัวแปรที่เราใช้ประโยชน์จาก\ nตัวคั่นเพื่อเพิ่มบรรทัดใหม่ลงในข้อความ นี่เป็นการเพิ่มตำแหน่งเล็ก ๆ สำหรับ ชื่อผู้ส่ง, ที่อยู่อีเมล, ตามด้วยตัวแบ่งสำหรับพวกเขา เนื้อหาข้อความ. แน่นอนว่าคุณสามารถใช้เวลาในการทำให้จอแสดงผลสวยขึ้น แต่โครงสร้างนี้ใช้งานได้ดี.ข้อสรุป
นี่เป็นการปิดบทช่วยสอนของเราสำหรับแบบฟอร์มการติดต่อขั้นสูง หากคุณต้องการสไตล์องค์ประกอบของคุณที่เกี่ยวข้องกับฉันคุณสามารถตรวจสอบตัวอย่างของฉัน styles.css ภายในรหัสโครงการ อย่างไรก็ตามหน้านั้นมีโครงสร้างที่ดีพอที่คุณสามารถออกแบบรูปลักษณ์และความรู้สึกของคุณเองได้อย่างง่ายดาย.
อย่าลังเลที่จะดาวน์โหลดซอร์สโค้ดและตรวจสอบสิ่งที่ฉันทำไปแล้ว เป็นการดีที่จะติดตามการสอน แต่การเข้าถึงโดยตรงไปยังแหล่งโครงการนั้นมีค่า ฉันได้รวมสไตล์ชีทสั้น ๆ เพื่อให้การปรับแต่งเป็นเรื่องง่ายขอบคุณสำหรับมุมมองของคุณ!
