ตามกฎหมายของรัฐบาลกลางวันที่ 27 กรกฎาคม 2549 ฉบับที่ 152-FZ "เกี่ยวกับข้อมูลส่วนบุคคล" ฉันซึ่งเป็นเรื่องของข้อมูลส่วนบุคคลซึ่งต่อไปนี้จะเรียกว่าผู้ใช้ส่งข้อมูลผ่านแบบฟอร์มข้อเสนอแนะ (ต่อไปนี้จะเรียกว่าแบบฟอร์ม) ใน เว็บไซต์ (ต่อไปนี้จะเรียกว่าไซต์ ) เช่นเดียวกับที่อยู่อีเมลขององค์กรของสำนักงานกฎหมาย "ธุรกิจแฟร์เวย์" ที่ลงท้ายด้วย (ต่อไปนี้จะเรียกว่าจดหมายองค์กร) ฉันได้อย่างอิสระตามเจตจำนงเสรีของฉันเองและตามความสนใจของฉัน แจ้งถึงสำนักงานกฎหมาย "ธุรกิจแฟร์เวย์" (OGRN 1167700058679; INN 9705068808) ซึ่งตั้งอยู่ที่ที่อยู่: 109240, มอสโก, ถนน Goncharnaya, อาคาร 24 (ต่อไปนี้จะเรียกว่าผู้ดำเนินการ) ยินยอมให้ประมวลผลข้อมูลส่วนบุคคลของฉัน (ต่อไปนี้จะเรียกว่าความยินยอม) ตามเงื่อนไขต่อไปนี้

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

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

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

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

ชื่อเต็ม;

ที่อยู่อีเมล;

เบอร์ติดต่อ;

อายุ;

ข้อมูลส่วนบุคคลอื่น ๆ ที่ระบุโดยผู้ใช้ในแบบฟอร์มหรือไฟล์ที่แนบมากับแบบฟอร์ม

5. วัตถุประสงค์ของการประมวลผลข้อมูลส่วนบุคคล:

การระบุตัวตนผู้ใช้

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

คำตอบสำหรับคำขอของผู้ใช้

ตรวจสอบการทำงานของผู้ใช้กับเว็บไซต์ของผู้ให้บริการ

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

การสรุปสัญญากับผู้ใช้ รวมถึงสัญญาการจ้างงานและสัญญาสำหรับการให้บริการทางกฎหมาย

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

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

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

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

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

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

10. ผู้ใช้อาจเพิกถอนความยินยอมได้โดยส่งคำชี้แจงเป็นลายลักษณ์อักษรไปยังผู้ให้บริการ (109240, Moscow, Goncharnaya Street, 24) หรือโดยส่งคำชี้แจงเป็นลายลักษณ์อักษรไปยังที่อยู่อีเมลองค์กรต่อไปนี้:

11. ความยินยอมนี้มีผลใช้ได้ตลอดเวลาจนกว่าจะยุติการประมวลผลข้อมูลส่วนบุคคล

12. แนวคิดที่ใช้ในความยินยอมนี้จะต้องตีความตามคำจำกัดความซึ่งกำหนดไว้ในกฎหมายของรัฐบาลกลางวันที่ 27 กรกฎาคม 2549 N 152-FZ "เกี่ยวกับข้อมูลส่วนบุคคล"

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

หลังจากดาวน์โหลดแล้ว ให้แตกไฟล์เก็บถาวรไปยังเว็บไซต์ของคุณ (ระวังอย่าลบสิ่งใดเลย) ตอนนี้เรามาตั้งค่ากัน ในการดำเนินการนี้ ให้เปิดไฟล์ "config.php" และเปลี่ยนค่าของตัวแปรดังต่อไปนี้

"mailto" - ใส่แทน " [ป้องกันอีเมล]“ที่อยู่กล่องจดหมายของคุณ

"charset" - ตั้งค่าการเข้ารหัสแม้ว่าไซต์ของคุณเป็นภาษารัสเซียคุณสามารถออกจาก "windows-1251" ได้

"เนื้อหา" - ฉันแนะนำให้คุณปล่อย "ข้อความ/ธรรมดา" ไว้ เนื่องจากไม่น่าเป็นไปได้ที่ผู้เยี่ยมชมของคุณจะส่งข้อความถึงคุณในรูปแบบ HTML

ตอนนี้คุณสามารถเรียกใช้ไฟล์ index.php ของสคริปต์ได้แล้ว เป็นผลให้แบบฟอร์มปรากฏขึ้นต่อหน้าคุณ คุณสามารถกรอกและส่งจดหมายได้

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

และสุดท้าย หากคุณไม่ชอบรูปลักษณ์ของแบบฟอร์ม คุณสามารถแก้ไขได้ในไฟล์ "styling.css"

หากคุณยังคงมีคำถามใด ๆ หรือมีข้อบกพร่องบางอย่างกับสคริปต์ (ฉันยังไม่ได้ทดสอบ) โปรดเขียนถึงฉันทางอีเมลเพื่อให้ฉันสามารถแก้ไขได้

เพื่อไม่ให้ขึ้นอยู่กับผลงานของคนอื่น โปรดเรียนรู้วิธีสร้างสคริปต์ด้วยตนเอง หลักสูตรวิดีโอของฉัน "PHP และ MySQL จาก Zero ถึง Guru" จะสอนคุณเกี่ยวกับสิ่งนี้:

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

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

1. แบบฟอร์มการติดต่อโดยไม่ต้องรีบูต

PHP ถูกย้ายไปยังไฟล์อื่น

การกด F5 จะไม่ส่งแบบฟอร์มอีกครั้ง

หลังจากส่งแบบฟอร์มแล้ว หน้าจะไม่ถูกโหลดซ้ำ

ไม่รองรับ IE8 และต่ำกว่า (คุณต้องเสริมโค้ดด้วยแอนะล็อกของ addEventListener() , PreventDefault() และ XMLHttpRequest หรือใช้ตัวเลือก 2)

ไฟล์ contacts.html วิธีติดต่อคุณ: อีเมลเพื่อการสื่อสาร: ข้อความของคุณ: document.getElementById("feedback-form").addEventListener("submit", function(evt)( var http = new XMLHttpRequest(), f = this; evt.preventDefault( ); http.open("POST", "contacts.php ", true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value); http.onreadystatechange = function() ( ถ้า (http.readyState == 4 && http.status == 200) ( alert(http.responseText + ", ได้รับข้อความของคุณแล้ว\nผู้เชี่ยวชาญของเราจะตอบคุณภายใน 2 วัน\nขอขอบคุณที่สนใจบริษัทของเรา!"); f.messageFF.removeAttribute("value ") ; // (สองบรรทัด) f.messageFF.value=""; ) ) http.onerror = function() ( alert("ขออภัย ข้อมูลไม่ได้ถูกถ่ายโอน"); ) ), false); ไฟล์ contacts.php 2. แบบฟอร์มการติดต่อที่ไม่มี JavaScript

ในกรณีส่วนใหญ่นามสกุลไฟล์ควรเป็น .php

เมื่อคุณกด F5 แบบฟอร์มจะถูกส่งอีกครั้ง

หลังจากส่งแบบฟอร์มแล้ว หน้าจะถูกโหลดซ้ำ

การตรวจสอบการกรอกข้อมูลในช่องที่ถูกต้องไม่ได้ดำเนินการบนฝั่งเซิร์ฟเวอร์

ไฟล์ contacts.php #feedback-form (ความกว้างสูงสุด: 400px; การขยาย: 2%; รัศมีเส้นขอบ: 3px; พื้นหลัง: #f1f1f1; ) #feedback-form (ความกว้าง: 100%; ขนาดกล่อง: border-box; ระยะขอบ: 2px 0 2% 0; ช่องว่างภายใน: 2%; เส้นขอบ: 1px ทึบ rgba (0,0,0,.1); รัศมีเส้นขอบ: 3px; กล่องเงา: 0 1px 2px -1px rgba (0,0, 0,.2) สิ่งที่ใส่เข้าไป, 0 0 โปร่งใส; ) #feedback-form :hover ( border-color: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) สิ่งที่ใส่เข้าไป, 0 0 โปร่งใส; ) #feedback-form :focus ( โครงร่าง: ไม่มี; สีเส้นขอบ: # 7eb4ea; กล่องเงา: 0 1px 2px -1px rgba (0,0,0,.2) สิ่งที่ใส่เข้าไป, 0 0 4px rgba (35,146,243, .5); การเปลี่ยนแปลง: .2s เชิงเส้น; ) #feedback-form ( ช่องว่างภายใน: 2%; เส้นขอบ: ไม่มี; รัศมีเส้นขอบ: 3px; กล่องเงา: 0 0 0 1px rgba (0,0,0,.2) สิ่งที่ใส่เข้าไป พื้นหลัง: #669acc; สี: #fff; ) #feedback-form :hover ( พื้นหลัง: #5c90c2; ) #feedback-form :focus ( กล่องเงา: 0 1px 1px #fff, สิ่งที่ใส่เข้าไป 0 1px 2px rgba (0 ,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); ) วิธีติดต่อคุณ: อีเมลติดต่อ: ข้อความของคุณ:

คุณต้องแทนที่ [email protected]

คุณต้องแทนที่ contacts.php ด้วยที่อยู่แบบเต็ม เช่น http://site.ru/folder/folder/contacts.php

ในการเพิ่มฟิลด์ใหม่ คุณต้องทำการเปลี่ยนแปลงโค้ด HTML, JavaScript และ PHP กล่าวอีกนัยหนึ่ง ให้เพิ่มส่วนเดียวกันกับ contactFF ตัวอย่างตามที่อธิบายไว้ใน

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

ในการดำเนินการนี้ เราจะสร้างไฟล์สองไฟล์ ได้แก่ forma.php และ mail.php ไฟล์แรกจะมีเฉพาะแบบฟอร์มที่มีช่องให้ผู้ใช้ป้อนข้อมูล ภายในแท็กแบบฟอร์มจะมีปุ่ม "ส่ง"และแอ็ตทริบิวต์ action ซึ่งหมายถึงตัวจัดการ - mail.php ซึ่งเป็นที่เข้าถึงข้อมูลจากแบบฟอร์มเมื่อมีการคลิกปุ่ม "ส่ง". ในตัวอย่างของเรา ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าเว็บชื่อ "/mail.php" หน้านี้มีสคริปต์ PHP ที่ประมวลผลข้อมูลแบบฟอร์ม:

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

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

แบบฟอร์มข้อเสนอแนะใน PHP ส่งทางอีเมล


แบบฟอร์มคำติชมใน PHP





ฝากข้อความ:
ชื่อของคุณ:



อีเมล:

หมายเลขโทรศัพท์:

ข้อความ:

พื้นที่ข้อความสามารถมีอักขระได้ไม่จำกัดจำนวน-->

นี่คือลักษณะของแบบฟอร์มที่มองเห็นได้ในเบราว์เซอร์

ต่อไปเราจะเขียนโค้ดสำหรับไฟล์ mail.php เราตั้งชื่อตัวแปรขึ้นมาเอง ใน PHP ตัวแปรจะเริ่มต้นด้วยเครื่องหมาย $ ตามด้วยชื่อตัวแปร ค่าข้อความของตัวแปรอยู่ในเครื่องหมายคำพูด เมื่อใช้ตัวแปร เนื้อหาของแบบฟอร์มจะถูกส่งไปยังอีเมลของผู้ดูแลระบบโดยเพียงแค่ใส่ชื่อขององค์ประกอบแบบฟอร์มในวงเล็บเหลี่ยม - ค่าของชื่อ

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

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

วันนี้เราจะนำเสนอวิธีแก้ไขปัญหานี้อย่างง่าย ๆ เมื่อใช้ jQuery, PHP และคลาส PHPMailer แบบฟอร์มจะส่งข้อเสนอของผู้ใช้ไปยังกล่องจดหมายของคุณโดยตรง

HTML

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

สาธิต.html

แบบฟอร์มคำติชมโดยใช้ PHP และ jQuery | การสาธิตสำหรับเว็บไซต์ เว็บไซต์ ข้อเสนอแนะ

กรุณาระบุข้อมูลการติดต่อหากคุณต้องการคำตอบ

ส่ง

ข้างใน ร่างกายตั้งอยู่ กอง#ข้อเสนอแนะ. โดยจะวางไว้ที่ด้านล่างขวาของหน้าต่างโดยใช้ตำแหน่งคงที่ ซึ่งจะเห็นได้ในส่วน CSS ของบทช่วยสอน

ข้างในนี้ กองมีองค์ประกอบสีห้าองค์ประกอบวางอยู่ ช่วง. แต่ละอันมีความกว้าง 20% และเยื้องไปทางซ้าย ด้วยวิธีนี้จะวางให้ทั่วความกว้างทั้งหมด กอง#ข้อเสนอแนะ.

ถัดมาเป็นคอนเทนเนอร์ .section ซึ่งประกอบด้วยชื่อเรื่อง พื้นที่ข้อความ และปุ่ม

ซีเอสเอส

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

styles.css - ส่วนที่ 1

#feedback( สีพื้นหลัง:#9db09f; width:310px; ความสูง:330px; ตำแหน่ง:คงที่; ด้านล่าง:0; ขวา:120px; ระยะขอบด้านล่าง:-270px; z-index:10000; ) #feedback .section( พื้นหลัง :url("img/bg.png") ทำซ้ำ-x บนซ้าย; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; ) #feedback .color( float:left; height:4px; ความกว้าง:20%; ล้น:ซ่อน; ) #feedback .color-1( สีพื้นหลัง:#d3b112;) #feedback .color-2( สีพื้นหลัง:#12b6d3;) #feedback .color-3( สีพื้นหลัง :#8fd317;) #feedback .color-4( สีพื้นหลัง:#ca57df;) #feedback .color-5( สีพื้นหลัง:#8ecbe7;) #feedback h6( พื้นหลัง:url("img/feedback.png" ) ไม่ทำซ้ำ ความสูง:38px; ระยะขอบ:5px 0 12px; เยื้องข้อความ:-99999px; เคอร์เซอร์:ตัวชี้; ) #feedback textarea( สีพื้นหลัง:#fff; เส้นขอบ:none; สี:#666666; แบบอักษร:13px "Lucida Sans",Arial,sans-serif; height:100px; padding:10px; width:236px; resize:none; เค้าร่าง:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-เงา:4px 4px 0 #8a9b8c; กล่องเงา:4px 4px 0 #8a9b8c; )

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

ที่ด้านล่างสุดของส่วนที่นำเสนอของไฟล์ CSS จะมีการกำหนดกฎสำหรับการแสดงพื้นที่ข้อความ

styles.css - ส่วนที่ 2

#feedback a.submit( พื้นหลัง:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; ตกแต่งข้อความ:none; เยื้องข้อความ: -99999px; width:91px; ) #feedback a.submit:hover( ตำแหน่งพื้นหลัง:ด้านล่างซ้าย; ) #feedback a.submit.working( ตำแหน่งพื้นหลัง:ด้านบนขวา !important; เคอร์เซอร์:default; ) #feedback .message ( ตระกูลแบบอักษร:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; ) #feedback .arrow( พื้นหลัง:url("img/arrows.png ") ไม่ทำซ้ำ; float:right; width:23px; height:18px; position:relative; top:10px; ) #feedback .arrow.down( background-position:left top;) #feedback h6:hover .down( ตำแหน่งพื้นหลัง: ด้านล่างซ้าย;) #feedback .arrow.up ( ตำแหน่งพื้นหลัง: ด้านบนขวา;) #feedback h6:hover .up( ตำแหน่งพื้นหลัง: ด้านล่างขวา;) #feedback .response ( ขนาดตัวอักษร: 21px; ขอบด้านบน:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; )

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

jQuery

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

script.js - ส่วนที่ 1

$(document).ready(function())( // URL สัมพัทธ์ของสคริปต์ send.php // คุณอาจต้องเปลี่ยน var sendURL = "submit.php"; // แคชอ็อบเจ็กต์คำติชม: var ความคิดเห็น = $( "#feedback"); $("#feedback h6").click(function())( // ค่าคุณสมบัติแอนิเมชันจะถูกเก็บไว้ // ในวัตถุแยกต่างหาก: var anim = ( mb: 0, // ขอบล่าง pt: 25 // ช่องว่างด้านบน); var el = $(this).find(".arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt : 10); ) // แอนิเมชันแรกจะย้ายแบบฟอร์มขึ้นหรือลง และอันที่สองจะย้ายชื่อ // เพื่อให้สอดคล้องกับเวอร์ชันที่ย่อเล็กสุดfeedback.stop().animate((marginBottom: anim.mb)); comment.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("down up"); )); ));

เพื่อให้โค้ดเรียบง่ายและชัดเจน วัตถุภาพเคลื่อนไหวจะถูกสร้างขึ้นที่ด้านบนซึ่งประกอบด้วยค่าสำหรับภาพเคลื่อนไหว และวางโอเปอเรเตอร์ไว้ ถ้า. ขึ้นอยู่กับการมีอยู่ของคลาส ‘ ลง' ที่ลูกศร เราขยายหรือยุบรูปร่าง

ส่วนที่สอง script.jsจัดการ AJAX ทำงานร่วมกับ ส่ง.php.

script.js - ส่วนที่ 2

$("#feedback a.submit").live("click",function())( var button = $(this); var textarea =feedback.find("textarea"); // เราใช้กรรมกรไม่ใช่ สำหรับการตั้งค่าสไตล์สำหรับปุ่มส่งข้อมูลเท่านั้น // แต่ยังเป็นการล็อคชนิดหนึ่งเพื่อป้องกันการสร้างแบบฟอร์มหลายรูปแบบ if(button.hasClass("working") || textarea.val().length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

เราใช้วิธี AJAX $.ajax() ของ jQuery เพื่อโต้ตอบด้วย ส่ง.php. วิธีนี้จะควบคุมการเชื่อมต่อได้มากกว่า $.get() และ $.post() เล็กน้อย

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

ตอนนี้ได้เวลาไปยังส่วนสุดท้ายแล้ว - PHP

PHP

PHP ประมวลผลข้อมูลที่ส่งจาก AJAX ตรวจสอบและส่งข้อความอีเมลไปยังที่อยู่ที่ระบุ

ส่ง.php

// ที่นี่คุณต้องป้อนที่อยู่ของคุณ $emailAddress = " [ป้องกันอีเมล]"; // ใช้เซสชันเพื่อป้องกันน้ำท่วม: session_name("quickFeedback"); session_start(); // หากส่งแบบฟอร์มล่าสุดน้อยกว่า 10 วินาทีที่แล้ว // หรือผู้ใช้ได้ส่งข้อความไปแล้ว 10 ข้อความในชั่วโมงที่แล้ว if($_SESSION[ "lastSubmit"] && (เวลา() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("กรุณารอสักครู่ก่อนที่จะส่งข้อความอีกครั้ง"); ) $_SESSION["lastSubmit"] = time(); $_SESSION["ส่งชั่วโมงสุดท้าย"]++; ต้องการ "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc"))( $_POST["message"] = stripslashes($_POST["message"]); ) if(mb_strlen($_POST["ข้อความ"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // เพิ่มที่อยู่ผู้รับ $mail->AddAddress($emailAddress); $mail->Subject = "อีเมลใหม่จากแบบฟอร์มตอบรับ"; $เมล->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "แบบฟอร์มคำติชมในหน้าสาธิต"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "แบบฟอร์มคำติชมในหน้าสาธิต"); $เมล->ส่ง(); สะท้อน "ขอบคุณ!";

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

อีเมลถูกส่งโดยใช้คลาส PHPMailer ความสนใจ! ใช้งานได้กับ PHP5 เท่านั้น

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

พร้อม!

บทสรุป

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