Δημιουργούμε μια φόρμα σχολίων σε PHP. Τμήμα ποιοτικού ελέγχου Κλήση της φόρμας σε παράθυρο modal

Γεια σας φίλοι! Θα ήθελα να παρουσιάσω στην προσοχή σας ένα καθολικό σενάριο για την αποστολή δεδομένων από φόρμες σε email. Το σενάριο είναι ιδανικό για ιστότοπους όπως το Landing Page, τοποθεσίες επαγγελματικών καρτών κ.λπ. Το σενάριο Φόρμες σχολίων ξεχωρίζει ανάμεσα στη μάζα άλλων σεναρίων στο Διαδίκτυο, καθώς έχει τη δυνατότητα να συνδέει απεριόριστο αριθμό φορμών με διαφορετικά πεδία σε μία σελίδα και μπορεί να στέλνει γράμματα σε πολλούς παραλήπτες.

Ετσι. Ας αρχίσουμε. Ας ξεκινήσουμε με τις δυνατότητες του σεναρίου.

Συνδέστε απεριόριστο αριθμό φορμών σε μία σελίδα.

Έλεγχος ότι τα πεδία έχουν συμπληρωθεί σωστά.

Ρύθμιση ειδοποιήσεων.

Δυνατότητα χρήσης γραμμάτων για κάθε φόρμα.

Τύπος γράμματος - (εάν χρησιμοποιούνται ετικέτες html)

Αποστολή σε απεριόριστο αριθμό διευθύνσεων.

Ατομική προσαρμογή κάθε φόρμας.

Το σενάριο εκτελείται στο , χωρίς να επαναφορτωθεί η σελίδα.

Προστασία από spam bots.

Αρχική εγκατάσταση.
Το σενάριο λειτουργεί με βάση τη βιβλιοθήκη, οπότε το πρώτο πράγμα που πρέπει να κάνουμε είναι να το συνδέσουμε. Για να το κάνετε αυτό, προτείνω να χρησιμοποιήσετε τις Φιλοξενούμενες Βιβλιοθήκες Google.

Ας μιλήσουμε για τα υπόλοιπα αρχεία με περισσότερες λεπτομέρειες:

Το feedback.js είναι το κύριο αρχείο σεναρίου, υπεύθυνο για την υποβολή φόρμας AJAX.
jquery.arcticmodal.js,
jquery.arcticmodal. - παρέχει τη δυνατότητα εμφάνισης φορμών σε παράθυρο τρόπου λειτουργίας.
jquery.jgrowl.js,
jquery.jgrowl.css - σας επιτρέπει να εμφανίζετε ειδοποιήσεις στη σελίδα (μπλοκ στην επάνω γωνία της σελίδας).

HTML και απαιτούμενα χαρακτηριστικά.
Ένα απαιτούμενο χαρακτηριστικό για όλα τα στοιχεία φόρμας είναι το χαρακτηριστικό name="" - απαραίτητο για την επόμενη προσαρμογή της φόρμας.
Για ένα κουμπί (type="button") πρέπει να καθορίσετε class="feedback" . Θα ήθελα επίσης να επιστήσω την προσοχή σας στο γεγονός ότι οποιαδήποτε ετικέτα HTML με την κλάση "feedback" μπορεί να λειτουργήσει ως κουμπί. Κλήση μιας φόρμας σε ένα παράθυρο "τροπικό" Για να καλέσετε μια φόρμα σε ένα παράθυρο "τροπικό", πρέπει πρώτα να ορίσετε μια ενέργεια για κλικ σε οποιαδήποτε ετικέτα, για παράδειγμα ένα div με την κλάση modal_btn
Κλήση μιας φόρμας σε ένα modal παράθυρο $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); )); ));
Δεδομένου ότι η φόρμα θα πρέπει να είναι ορατή μόνο στο modal παράθυρο, πρέπει να κρυφτεί τοποθετώντας την σε ένα div με το χαρακτηριστικό style="display: none;" και επίσης τυλιγμένο σε μερικά τυπικά div για να διαμορφωθεί το παράθυρο modal.
Χ

Έτσι έχουμε καταλάβει τις βασικές ρυθμίσεις για τη σύνδεση του σεναρίου μας για την αποστολή φορμών στο E-mail. Ας ρίξουμε τώρα μια ματιά στο εσωτερικό και ας καταλάβουμε πώς να διαμορφώσετε τα πεδία, τις ειδοποιήσεις και οτιδήποτε άλλο υπάρχει εκεί.

Παράδειγμα ρυθμίσεων για μία φόρμα Οι ρυθμίσεις για όλες τις φόρμες αποθηκεύονται στο αρχείο feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35", "messages" => array("preg" => "Το πεδίο [ %1$s ] μπορεί να περιέχει σφάλμα", "minlength " => "Το ελάχιστο μήκος πεδίου [ %1$s ] είναι μικρότερο από το επιτρεπόμενο - %2$s", "maxlength" => "Το μέγιστο μήκος πεδίου [ %1$s ] είναι μεγαλύτερο από το επιτρεπόμενο - %2$s", )), "tell " => array("title" => "Τηλέφωνο", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5", "messages" => πίνακας( "preg" => "Το πεδίο [ %1$s ] μπορεί να περιέχει σφάλμα", "minlength" => "Το ελάχιστο μήκος του πεδίου [ %1$s ] είναι μικρότερο από το επιτρεπόμενο μήκος - %2$s",) ),), "cfg" => πίνακας (" σύνολο χαρακτήρων" => "utf-8", "subject" => "Θέμα του μηνύματος ηλεκτρονικού ταχυδρομείου", "τίτλος" => "Επικεφαλίδα στο σώμα του μηνύματος ηλεκτρονικού ταχυδρομείου", " ajax" => true, "validate" => true, "from_email" = > " [email προστατευμένο]", "from_name" => "noreply", "to_email" => " [email προστατευμένο], [email προστατευμένο]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Το μήνυμα εστάλη - OK", "fuck" => "Το μήνυμα εστάλη - ERROR", "spam" => "Spam robot", "notify" => "color-modal-textbox", "usepresuf" => false)); // Επόμενη μορφή $form["form-2"] = array("fields" => array(.....
Για να προσθέσετε ρυθμίσεις για μια νέα φόρμα, πρέπει να ακολουθήσετε το παράδειγμα του πίνακα $form["form-1"] για να δημιουργήσετε έναν νέο πίνακα $form[""]

Θυμάστε τι είπα για το απαιτούμενο χαρακτηριστικό name="";

Ένα απαιτούμενο χαρακτηριστικό για όλα τα στοιχεία φόρμας είναι το χαρακτηριστικό name="" - απαραίτητο για την επόμενη προσαρμογή της φόρμας.
Ήρθε λοιπόν η ώρα να σας πω γιατί χρειάζεται ακόμα.
name="" είναι το αλφαριθμητικό κλειδί για τον πίνακα, πρέπει να είναι μοναδικό για τον πίνακα $form[""]

Παράδειγμα κώδικα html για σαφήνεια

Τώρα ας καταλάβουμε τους πίνακες και για τι χρειάζονται.

$form["form-1"] = array();
$form["form-2"] = array(); και τα λοιπά.
Αυτοί είναι οι κύριοι πίνακες για κάθε νέα φόρμα, που περιέχουν:

"fields" => array(); - Μια σειρά ρυθμίσεων για στοιχεία φόρμας.

• "name" => array(); - Μια σειρά ρυθμίσεων στοιχείων φόρμας (για παράδειγμα εισαγωγή ονόματος = "όνομα" τύπος "κείμενο") που έχει έναν αριθμό ρυθμίσεων.
  • "title" => "Το όνομά σας" - το όνομα του στοιχείου φόρμας, θα εμφανίζεται σε περίπτωση σφαλμάτων ή στο πρότυπο
  • "validate" => array(); - πίνακας, περιέχει κανόνες επικύρωσης στοιχείων φόρμας
    • "preg" => "%%" - κανονική έκφραση
    • "minlength" => "3" - ελάχιστο μέγεθος πεδίου
    • "maxlength" => "35" - μέγιστο μέγεθος πεδίου
    • "substr" => "35" - κόβεται πάντα σε N χαρακτήρες
  • "messages" => array(); - έναν πίνακα που περιέχει μηνύματα επικύρωσης, και συγκεκριμένα:
    • "preg" => "Το στοιχείο της φόρμας δεν ταιριάζει με την κανονική έκφραση"
    • "minlength" => "Το ελάχιστο μήκος του πεδίου [ %1$s ] είναι μικρότερο από το αποδεκτό - %2$s" - σφάλμα επικύρωσης, το κλειδί (preg) δεν ταιριάζει με το κλειδί επικύρωσης
    • "maxlength" => "Το μέγιστο μήκος του πεδίου [ %1$s ] υπερβαίνει το επιτρεπόμενο όριο - %2$s" - σφάλμα επικύρωσης, το κλειδί (preg) δεν ταιριάζει με το κλειδί επικύρωσης

"cfg" => array(); - Μια σειρά από ρυθμίσεις φόρμας.

• "charset" => "utf-8" - κωδικοποίηση
• "subject" => "Subject of the letter", - Subject of the letter
• "title" => "Title in the body of the letter", - Title in the body of the letter
• "ajax" => true, - αυτή είναι η φόρμα Ajax TODO (αν δεν χρειάζεται, ορίστε την σε false)
• "validate" => true, - (true) αν θέλουμε να επικυρώσουμε τη φόρμα στον διακομιστή, αντικαθιστά την επικύρωση js με "ajax" => true. Όταν είναι απενεργοποιημένο (false), δεν χρειάζεται να ορίσετε τις ρυθμίσεις του πεδίου επικύρωσης. ΝΑ ΚΑΝΩ
• "from_email" => "myemail", - αποστολέας, καθορίστε το όνομα του πεδίου (όνομα = "myemail") και εάν δεν χρειάζεστε ένα email από τον χρήστη, τότε ένα στέλεχος [email προστατευμένο]
• "from_name" => "myname", - αποστολέας, καθορίστε το όνομα του πεδίου (name="myname") και εάν δεν χρειάζεστε όνομα χρήστη, τότε το στέλεχος No-reply
• "to_email" => " [email προστατευμένο]", - email παραλήπτη. Για αποστολή σε πολλές διευθύνσεις, καταχωρίστε τις διαχωρισμένες με κόμμα. Παράδειγμα ("to_email" => " [email προστατευμένο], [email προστατευμένο], [email προστατευμένο]",)
• "to_name" => "noreply1", - Όνομα παραλήπτη. Κατά την αποστολή σε πολλές διευθύνσεις, αναφέρετε τα ονόματα των παραληπτών, διαχωρισμένα με κόμματα. Παράδειγμα ("to_name" => "noreply1, noreply2, noreply3",)
• "geoip" => true, - ανακαλύψτε την τοποθεσία χρησιμοποιώντας τον τύπο TODO
• "referer" => false, - προσθέστε τη διεύθυνση URL της σελίδας από την οποία υποβλήθηκε η φόρμα
• "type" => "plain", - type γράμμα - plain, html (εάν χρησιμοποιούνται ετικέτες html)
• "tpl" => false, - χρησιμοποιήστε ένα πρότυπο γράμματος. Εάν είναι αληθές, τότε το αρχείο προτύπου θα συνδεθεί σύμφωνα με το όνομα της φόρμας (name="form-1") από το φάκελο και το αρχείο (feedback/tpl/form-1.tpl) θα υποβληθεί σε επεξεργασία, διαφορετικά όλα θα γίνουν αποστέλλεται ως έχει, κάθε πεδίο σε μια νέα γραμμή
• "antispam" => "email77", - Anti spam, η μέθοδος βασίζεται σε ένα κρυφό πεδίο (display:none), το οποίο μόνο το ρομπότ συμπληρώνει αυτόματα, δίνοντάς του έτσι τον εαυτό του.
• "antispamjs" => "address77", - Η μέθοδος Anti spam βασίζεται σε ένα κρυφό πεδίο (display:none), αρχικά συμπληρωμένο, το οποίο καθαρίζει αυτόματα το javascript όταν φορτώνεται η σελίδα, ακόμη και ένα έξυπνο ρομπότ δεν μπορεί να το προβλέψει και μετά είναι μπλοκαριστεί.
• "OK" => "Μήνυμα προς τον χρήστη", - Εμφανίζεται ένα μήνυμα προς τον χρήστη εάν η φόρμα υποβληθεί με επιτυχία, μπορείτε να χρησιμοποιήσετε ετικέτες html.
• "fuck" => "Μήνυμα στον χρήστη", - Ένα μήνυμα προς τον χρήστη, που εμφανίζεται όταν παρουσιάζεται σφάλμα κατά την υποβολή της φόρμας, μπορείτε να χρησιμοποιήσετε ετικέτες html.
• "spam" => "Μήνυμα στον χρήστη", - Μήνυμα προς τον χρήστη, που εμφανίζεται εάν υπάρχει υποψία ρομπότ ανεπιθύμητης αλληλογραφίας, μπορείτε να χρησιμοποιήσετε ετικέτες html.
• "notify" => "color-modal", - τι είδους ειδοποιήσεις να εμφανίζονται, πλαίσιο κειμένου - μπλοκ στην επάνω γωνία της σελίδας, χρώμα - χρωματική επισήμανση στη φόρμα, modal - modal παράθυρο στο κέντρο της σελίδας, κανένα - απενεργοποίηση. Μπορείτε να συνδυάσετε, για παράδειγμα: color-modal - σφάλματα στη συμπλήρωση πεδίων με επισήμανση και την κατάσταση αποστολής κειμένου στο παράθυρο TODO modal
• "usepresuf" => false - Είτε χρησιμοποιείται προσαρμοσμένη προσθήκη στο θέμα ή στον τίτλο του γράμματος, σε περίπτωση μικρής αλλαγής μπορείτε να καθορίσετε για παράδειγμα %%cfg.title.κατάληξη%%, για αυτό πρέπει να υπάρχει ένα κρυφό πεδίο στη φόρμα, για περισσότερες λεπτομέρειες, βλέπε f -qiu presuf()

Ρύθμιση προτύπων επιστολών Έτσι. Ας δούμε τώρα το θέμα των μηνυμάτων μας.
Πρώτον, για να σταλεί η φόρμα σε πρότυπο, στις ρυθμίσεις φόρμας πρέπει να ενεργοποιήσετε τη χρήση ενός αρχείου προτύπου - "tpl" => true ,
Δεύτερον, πρέπει να δημιουργήσετε ένα αρχείο προτύπου με επέκταση *.tpl στο φάκελο (feedback/tpl/), σύμφωνα με το όνομα της φόρμας (name="form-1" ).

Παράδειγμα: (feedback/tpl/form-1.tpl)

Επικεφαλίδα στο σώμα της επιστολής
%%name.title%%	%%name.value%%
%%tell.title%%	%%tell.value%%

όνομα, πείτε κ.λπ. - Αυτά είναι τα χαρακτηριστικά (όνομα="") των πεδίων που συμπληρώνει ο χρήστης.
τίτλος - Το όνομα του στοιχείου φόρμας, το οποίο ορίζεται στον πίνακα ρυθμίσεων στοιχείων φόρμας.
τιμή - Η τιμή του στοιχείου φόρμας.

Αυτό είναι όλο για σήμερα, αλλά το σενάριο σίγουρα δεν είναι τέλειο, επομένως τα σχόλια και οι περιγραφές των σφαλμάτων είναι ευπρόσδεκτα και θα διορθωθούν σε μελλοντικές εκδόσεις.

ΥΣΤΕΡΟΓΡΑΦΟ. Το σενάριο αναπτύχθηκε από την ομάδα

Για την ανάπτυξη ενός έργου web, είναι πολύ σημαντικό να λαμβάνετε σχόλια από τους επισκέπτες. Δυστυχώς, σε πολλούς ιστότοπους η δυνατότητα αποστολής μηνύματος στους προγραμματιστές είτε δεν παρέχεται καθόλου είτε συνδέεται με αρκετά σοβαρές δυσκολίες.

Σήμερα θα κάνουμε μια απλή λύση σε αυτό το πρόβλημα. Χρησιμοποιώντας jQuery, PHP και την κλάση PHPMailer, η φόρμα στέλνει την πρόταση του χρήστη απευθείας στα εισερχόμενά σας.

HTML

Ας ξεκινήσουμε με τη σήμανση HTML. Τα στυλ περιλαμβάνονται στο επάνω μέρος του εγγράφου και τα αρχεία JavaScript περιλαμβάνονται στο κάτω μέρος. Αυτό βελτιστοποιεί τη διαδικασία φόρτωσης της σελίδας, έτσι ώστε τα σενάρια να φορτώνονται τελευταία, επιτρέποντας στον χρήστη να δει το περιεχόμενο της σελίδας.

demo.html

Φόρμα σχολίων με χρήση PHP και jQuery | Επίδειξη για τον ιστότοπο Feedback

Συμπεριλάβετε τα στοιχεία επικοινωνίας εάν θέλετε μια απάντηση.

Στείλετε

Μέσα σώμαπου βρίσκεται div#ανατροφοδότηση. Τοποθετείται στην κάτω δεξιά γωνία του παραθύρου χρησιμοποιώντας μια σταθερή τοποθέτηση, η οποία θα φαίνεται στην ενότητα CSS του σεμιναρίου.

Μέσα σε αυτό divτοποθετούνται πέντε χρωματιστά στοιχεία σπιθαμή. Κάθε ένα από αυτά έχει πλάτος 20% και είναι μετατοπισμένο προς τα αριστερά. Έτσι τοποθετούνται ακριβώς σε όλο το πλάτος. div#ανατροφοδότηση.

Στη συνέχεια έρχεται το κοντέινερ .section, το οποίο περιέχει τον τίτλο, την περιοχή κειμένου και το κουμπί.

CSS

Ας προχωρήσουμε στη ρύθμιση στυλ για τη φόρμα. Αρχικά, ας πούμε λίγα λόγια για το από τι αποτελείται η δομή ενός φύλλου στυλ. Αν κοιτάξετε τους ορισμούς του CSS παρακάτω, θα παρατηρήσετε ότι κάθε κανόνας ξεκινά με #feedback . Αυτό δημιουργεί έναν παρόμοιο χώρο ονομάτων στο CSS, καθιστώντας ευκολότερη την προσθήκη κώδικα σε έναν υπάρχοντα ιστότοπο χωρίς διενέξεις.

styles.css - Μέρος 1

#feedback( background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; ) #feedback .section( background :url("img/bg.png") repeat-x επάνω αριστερά; περίγραμμα: 1px συμπαγές #808f81; border-bottom:none; padding:10px 25px 25px; ) #feedback .color( float:left; ύψος:4px; πλάτος:20%; υπερχείλιση:κρυφό; ) #feedback .color-1( background-color:#d3b112;) #feedback .color-2( background-color:#12b6d3;) #feedback .color-3( background-color :#8fd317;) #feedback .color-4( background-color:#ca57df;) #feedback .color-5( background-color:#8ecbe7;) #feedback h6( background:url("img/feedback.png" ) χωρίς επανάληψη; ύψος: 38 εικονοστοιχεία; περιθώριο: 5 εικονοστοιχεία 0 12 εικονοστοιχεία; εσοχή κειμένου: -99999 εικονοστοιχεία; δρομέας: δείκτης; ) #feedback textarea (χρώμα φόντου:#fff; περίγραμμα: κανένα; χρώμα:#666666; γραμματοσειρά: 13 px "Lucida Sans",Arial,sans-serif; ύψος:100px; padding:10px;πλάτος:236px; αλλαγή μεγέθους:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; )

Το πρώτο στοιχείο που πρέπει να διαμορφωθεί είναι div#ανατροφοδότηση. Εκχωρείται μια σταθερή θέση και αγκυρώνεται στο παράθυρο του προγράμματος περιήγησης. Μετά από αυτό έρχεται ο ορισμός για div .Ενότητακαι πέντε χρωματιστά στοιχεία σπιθαμή. Αυτά τα στοιχεία διαφέρουν μόνο στο χρώμα του φόντου, το οποίο εκχωρείται ξεχωριστά για κάθε τάξη.

Στο κάτω μέρος του παρουσιαζόμενου τμήματος του αρχείου CSS, ορίζονται οι κανόνες για την εμφάνιση της περιοχής κειμένου.

styles.css - Μέρος 2

#feedback a.submit( background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none;text-indown: -99999px; πλάτος:91px; ) #feedback a.submit:hover( background-position:αριστερό κάτω; ) #feedback a.submit.working( background-position:πάνω δεξιά !important; δρομέας:προεπιλογή; ) #feedback .message ( font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; ) #feedback .arrow( background:url("img/arrows.png ") no-repeat; float:δεξιά; πλάτος:23px; ύψος:18px; position:relative; top:10px; ) #feedback .arrow.down( background-position:left top;) #feedback h6:hover .down( background-position:αριστερό κάτω;) #feedback .arrow.up( background-position:right top;) #feedback h6:hover .up( background-position:δεξιά κάτω;) #feedback .response( font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; )

Το δεύτερο μέρος του φύλλου στυλ ορίζει την εμφάνιση του κουμπιού υποβολή. Σημειώστε ότι υπάρχουν τρεις καταστάσεις κουμπιών, οι εικόνες για τις οποίες περιέχονται σε ένα αρχείο για την εικόνα φόντου - submit.png. Εμφανίζονται μόνο όταν είναι απαραίτητο.

jQuery

Η φόρμα σχολίων έχει δύο καταστάσεις - ελαχιστοποιημένη και μέγιστη. Κατά την εκκίνηση, η προεπιλεγμένη κατάσταση ορίζεται στην ελαχιστοποιημένη κατάσταση κάτω δεξιά στην οθόνη. Και το jQuery παίρνει τη φόρμα στη μέγιστη κατάστασή της όταν ο χρήστης κάνει κλικ στην κεφαλίδα. Αυτή η λειτουργία επιτυγχάνεται με τη σύνδεση ενός συμβάντος και την εκτέλεση απλών κινούμενων εικόνων.

script.js - Μέρος 1

$(document).ready(function())( // Σχετική διεύθυνση URL του σεναρίου submit.php. // Πιθανότατα θα χρειαστεί να το αλλάξετε. var submitURL = "submit.php"; // Αποθηκεύστε προσωρινά το αντικείμενο ανατροφοδότησης: var feedback = $( "#feedback"); $("#feedback h6").κάντε κλικ(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)); feedback.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("down up"); )); ));

Για να διατηρηθεί ο κώδικας απλός και σαφής, δημιουργείται ένα αντικείμενο anim στην κορυφή, το οποίο περιέχει τις τιμές για το animation και τοποθετείται ο τελεστής αν. Ανάλογα με την ύπαρξη της τάξης « κάτωΣτο βέλος, επεκτείνουμε ή συμπτύσσουμε το σχήμα.

Δεύτερο μέρος 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 - Η σελίδα δεν βρέθηκε), και εμφανίστε ένα μήνυμα στον χρήστη που του ζητά να ελέγξει τη διαδρομή submitURL.

Τώρα ήρθε η ώρα να προχωρήσουμε στο τελευταίο μέρος - PHP.

PHP

Η PHP επεξεργάζεται τα δεδομένα που αποστέλλονται από το AJAX, τα επικυρώνει και στέλνει ένα μήνυμα ηλεκτρονικού ταχυδρομείου στην καθορισμένη διεύθυνση.

υποβάλω.php

// Εδώ πρέπει να εισαγάγετε τη διεύθυνσή σας $emailAddress = " [email προστατευμένο]"; // Χρησιμοποιήστε τη συνεδρία για να αποτρέψετε το flooding: session_name("quickFeedback"); session_start(); // Εάν η τελευταία φόρμα υποβλήθηκε πριν από λιγότερο από 10 δευτερόλεπτα, // ή ο χρήστης έχει ήδη στείλει 10 μηνύματα την τελευταία ώρα if($_SESSION[ "lastSubmit"] && (time() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Παρακαλώ περιμένετε λίγα λεπτά πριν στείλετε ξανά το μήνυμα."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; απαιτούν "phpmailer/class.phpmailer.php"? if(ini_get("magic_quotes_gpc"))( $_POST["message"] = stripslashes($_POST["message"]); ) if(mb_strlen($_POST["message"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Προσθέστε τη διεύθυνση του παραλήπτη $mail->AddAddress($emailAddress); $mail->Subject = "Νέο email από τη φόρμα σχολίων"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Φόρμα σχολίων στη σελίδα επίδειξης"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Φόρμα σχολίων στη σελίδα επίδειξης"); $mail->Αποστολή(); echo "Ευχαριστώ!"

Χρησιμοποιούμε πρώτα τη διαχείριση περιόδων σύνδεσης για να προσδιορίσουμε πόσο συχνά ένας χρήστης χρησιμοποίησε μια υποβολή φόρμας την τελευταία ώρα, καθώς και για τον προσδιορισμό του χρόνου που έχει περάσει από την τελευταία υποβολή. Εάν έχουν περάσει λιγότερο από 10 δευτερόλεπτα από την τελευταία αποστολή ή ο χρήστης έχει ήδη στείλει περισσότερα από 10 μηνύματα την τελευταία ώρα, εμφανίζεται ένα μήνυμα σφάλματος.

Το email αποστέλλεται χρησιμοποιώντας την κλάση PHPMailer. Προσοχή! Λειτουργεί μόνο με PHP5.

Πολλαπλές Μέθοδοι PHPMailerχρησιμοποιείται για τη διαμόρφωση των εξερχόμενων e-mail. Η μέθοδος IsMail() λέει στην κλάση να χρησιμοποιήσει μια εσωτερική συνάρτηση PHP ταχυδρομείο(). Η μέθοδος AddAddress() προσθέτει τη διεύθυνση του παραλήπτη (μπορείτε να προσθέσετε περισσότερους από έναν παραλήπτες με πρόσθετες κλήσεις σε αυτήν τη μέθοδο). Μετά την προσθήκη του θέματος της επιστολής και του κειμένου, υποδεικνύεται η διεύθυνση για τις απαντήσεις και αποστέλλεται το μήνυμα.

Ετοιμος!

συμπέρασμα

Μπορείτε να χρησιμοποιήσετε αυτήν τη φόρμα για να οργανώσετε γρήγορα σχόλια από τον επισκέπτη του ιστότοπού σας. Ένα πολύ χαμηλό εμπόδιο στην υποβολή - απλά πρέπει να συμπληρώσετε ένα πεδίο κειμένου και να κάνετε κλικ σε ένα κουμπί - θα δημιουργήσει ένα εξαιρετικό περιβάλλον για τους επισκέπτες των σελίδων σας ώστε να αρχίσουν να μοιράζονται τις ιδέες τους. Το σενάριο είναι επίσης καλά δομημένο και εύκολο στην προσαρμογή, κάτι που θα σας βοηθήσει να το χρησιμοποιήσετε στον ιστότοπό σας με ελάχιστη προσπάθεια.

Σε αυτό το μάθημα θα εξοικειωθούμε με τη συνάρτηση mail(), χρησιμοποιώντας το παράδειγμα δημιουργίας μιας φόρμας ανάδρασης στην PHP και στη συνέχεια αποστολής των δεδομένων που λαμβάνονται μέσω email.

Για να γίνει αυτό, θα δημιουργήσουμε δύο αρχεία - forma.php και mail.php. Το πρώτο αρχείο θα περιέχει μόνο μια φόρμα με πεδία για την εισαγωγή δεδομένων από τον χρήστη. Μέσα στην ετικέτα φόρμας υπάρχει ένα κουμπί "Στείλετε"και το χαρακτηριστικό action, το οποίο αναφέρεται στον χειριστή - mail.php, όπου γίνεται πρόσβαση στα δεδομένα από τη φόρμα όταν κάνετε κλικ στο κουμπί "Στείλετε". Στο παράδειγμά μας, τα δεδομένα της φόρμας αποστέλλονται σε μια ιστοσελίδα που ονομάζεται "/mail.php". Αυτή η σελίδα περιέχει ένα σενάριο PHP που επεξεργάζεται τα δεδομένα της φόρμας:

Τα δεδομένα της φόρμας αποστέλλονται χρησιμοποιώντας τη μέθοδο POST (επεξεργάζεται ως $_POST). Το $_POST είναι ένας πίνακας μεταβλητών που μεταβιβάζονται στο τρέχον σενάριο μέσω της μεθόδου POST.

Παρακάτω βλέπετε τα περιεχόμενα του αρχείου forma.php, τα πεδία του οποίου συμπληρώνονται από τον ίδιο τον χρήστη σε κάποια ιστοσελίδα. Όλα τα πεδία για την εισαγωγή δεδομένων πρέπει να έχουν ένα χαρακτηριστικό όνομα· γράφουμε μόνοι μας τις τιμές, με βάση τη λογική.

Φόρμα σχολίων σε PHP που αποστέλλεται με email


Φόρμα σχολίων σε PHP





Αφήστε ένα μήνυμα:
Το όνομα σου:



ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ:

Τηλεφωνικό νούμερο:

Μήνυμα:

Η περιοχή κειμένου μπορεί να περιέχει απεριόριστο αριθμό χαρακτήρων-->

Έτσι φαίνεται οπτικά η φόρμα στο πρόγραμμα περιήγησης.

Στη συνέχεια γράφουμε τον κώδικα για το αρχείο mail.php. Βρίσκουμε τα δικά μας ονόματα για τις μεταβλητές. Στην PHP, μια μεταβλητή ξεκινά με ένα σύμβολο $ και μετά το όνομα της μεταβλητής. Η τιμή κειμένου της μεταβλητής περικλείεται σε εισαγωγικά. Χρησιμοποιώντας μεταβλητές, τα περιεχόμενα της φόρμας αποστέλλονται στο email του διαχειριστή τοποθετώντας απλώς το όνομα του στοιχείου της φόρμας σε αγκύλες - την τιμή του ονόματος.

Έτσι, τα δεδομένα από τον πίνακα $_POST θα μεταφερθούν στις αντίστοιχες μεταβλητές και θα σταλούν στο mail χρησιμοποιώντας τη συνάρτηση αλληλογραφίας. Ας συμπληρώσουμε τη φόρμα μας και ας πατήσουμε το κουμπί υποβολή. Μην ξεχάσετε να συμπεριλάβετε το email σας. Το γράμμα έφτασε αμέσως.

Σε αυτό το άρθρο θα μάθετε πώς να δημιουργείτε μια φόρμα σχολίων σε PHP για τον ιστότοπό σας. Το σενάριο θα επεξεργαστεί τα δεδομένα που έχει εισάγει ο χρήστης και θα στείλει το αποτέλεσμα στο email που χρειάζεστε. Θα παρέχουμε μια επιλογή στην PHP όταν λειτουργεί η φόρμα σχολίων, αλλά παρουσιάζεται σφάλμα κατά την αποστολή της επιστολής. Σε αυτήν την περίπτωση, θα γράψουμε όλες τις καταχωρημένες πληροφορίες σε ένα αρχείο.

Λοιπόν, ας ξεκινήσουμε, πρώτα από όλα θα σημειώσουμε τη σελίδα και θα γράψουμε στυλ για αυτήν. Η σήμανση θα περιλαμβάνει μια κανονική φόρμα σχολίων με δύο εισόδους (τηλέφωνο, αλληλογραφία) και μια περιοχή κειμένου, όπου, σύμφωνα με την ιδέα μας, ο χρήστης θα εισάγει το μήνυμά του. Θα τοποθετήσουμε το πρόγραμμα χειρισμού φόρμας σε ξεχωριστή σελίδα.

Φόρμα σχολίων

Εισαγάγετε τηλέφωνο:

Η ΑΛΛΗΛΟΓΡΑΦΙΑ σου:

Η ερώτησή σου:

Ας γράψουμε τα στυλ:

Html, body( ύψος: 100%; περιθώριο: 0; ) html( χρώμα φόντου: #fff; χρώμα: #333; γραμματοσειρά: 12px/14px Verdana, Tahoma, sans-serif; δρομέας: προεπιλογή; ) #feedback-form ( χρώμα φόντου: #ececec; περιθώριο: 50 εικονοστοιχεία αυτόματη 0; στοίχιση κειμένου: κέντρο; πλάτος: 430 εικονοστοιχεία; συμπλήρωση: 15 εικονοστοιχεία; ) #feedback-form h2( margin-bottom: 25px; ) #feedback-form input, #feedback -form textarea( background-color: #fff; περίγραμμα: 1px solid #A9A9A9; padding: 1px 5px; πλάτος: 90%; ) #feedback-form input( height: 26px; ) #feedback-form textarea(ύψος: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; background-color: #0B7BB5; περίγραμμα: 1px στερεό #CCCCCC; χρώμα: #FFFFFF; βάρος γραμματοσειράς: έντονη; ύψος: 40 px; line- ύψος: 40 εικονοστοιχεία, μετατροπή κειμένου: κεφαλαία, πλάτος: 225 εικονοστοιχεία, δρομέας: δείκτης, )

Ως αποτέλεσμα όλων αυτών των ενεργειών θα λάβετε αυτήν τη φόρμα:

Τώρα ήρθε η ώρα να ασχοληθείτε με τον διακομιστή. Το σενάριό μας θα περιλαμβάνει πολλά μέρη:

• Σύνθεση;
• Δευτερεύουσες λειτουργίες;
• Επεξεργασία εισερχόμενων δεδομένων.
• Έξοδος μηνύματος.

Όλα αυτά τα μέρη, φυσικά, υπόκεινται σε όρους, αφού κανείς δεν μας εμποδίζει να κάνουμε χάος στον κώδικα ή, αντίθετα, να μετακινήσουμε βασικά μέρη σε άλλα αρχεία. Αλλά νομίζω ότι είναι καλύτερο να φτιάξετε το πρόγραμμα χειρισμού σε ένα αρχείο, ώστε να είναι βολικό να το συνδέσετε με άλλα έργα.

Ρυθμίσεις

Σε αυτό το στάδιο, θα δημιουργήσουμε τρεις μεταβλητές: $my_email (το γραμματοκιβώτιο στο οποίο αποστέλλονται τα δεδομένα), $path_log (η διαδρομή προς το αρχείο καταγραφής) και $time_back (ο χρόνος που ο χρήστης επιστρέφει στον ιστότοπο).

// Καθορίστε το γραμματοκιβώτιό σας $my_email = " [email προστατευμένο]"; // Καθορίστε πού θα αποθηκεύονται τα αρχεία καταγραφής $path_log = "log.txt"; // Ώρα επιστροφής του χρήστη στον ιστότοπο (δευτ.) $time_back = 3;

Δευτερεύουσες λειτουργίες

Εδώ περιγράφουμε πέντε λειτουργίες που θα απλοποιήσουν την επεξεργασία δεδομένων.

Πρότυπα εξόδου μηνυμάτων:

Συνάρτηση error_msg($message)( $message = "".$message.""; return $message; ) συνάρτηση success_msg($message)( $message = "".$message.""; return $message; )

Εκκαθάριση δεδομένων που λαμβάνονται από τη φόρμα:

Συνάρτηση clear_data($var)( return trim(strip_tags($var)); )

Αποστολή επιστολής:

Συνάρτηση send_mail($email, $subj, $text, $from)( $headers = "Από: ".$from." \r\n"; $headers .= "MIME-Έκδοση: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result)( return false;) επιστροφή true;)

Και η τελευταία λειτουργία που θα ελέγξει το τηλέφωνο και το mail για τη σωστή εγγραφή της μορφής τους.

Συνάρτηση check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; )

Όπως μπορείτε να δείτε, όλες οι συναρτήσεις που γράψαμε είναι μικρές σε μέγεθος. Θα μπορούσατε να τα αφήσετε έξω από την περιοχή επεξεργασίας δεδομένων, αλλά όταν χρειάζεται να αλλάξετε ή να επεκτείνετε κάτι, για παράδειγμα check_format(), θα είναι πολύ πιο απλό και βολικό.

Επεξεργασία εισερχόμενων δεδομένων

Πρώτα απ 'όλα, μαθαίνουμε από ποια σελίδα προήλθε ο χρήστης. Στη συνέχεια ορίζουμε τις μεταβλητές στις οποίες θα αποθηκευτούν τα μηνύματά μας και η κατάσταση αποστολής της επιστολής.

// Μάθετε την προηγούμενη σελίδα $prev_page = $_SERVER["HTTP_REFERER"]; // Τα μηνύματά μας $msg = ""; // Κατάσταση email $status_email = "";

Τώρα, για να αποφύγουμε προβλήματα με την κωδικοποίηση, το υποδεικνύουμε χρησιμοποιώντας την κεφαλίδα.

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))($number = clear_data ($_POST["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "phone") && check_format($email, "email") && !empty($question))( // Form a letter $e_title = "Νέο μήνυμα"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "Mail: ".$email; $e_body .= "
"; $e_body .= "Ερώτηση: ".$question; $e_body .= ""; $e_body .= ""; // ΤΕΛΟΣ Σχηματίστε ένα γράμμα if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "επιτυχία"; $msg = success_msg("Σας ευχαριστούμε για την ερώτησή σας.
Θα σας απαντήσουμε το συντομότερο δυνατό."); )else( $status_email = "error"; $msg = error_msg("Παρουσιάστηκε σφάλμα κατά την αποστολή του email."); ) // Γράψτε στο αρχείο $str = " Ώρα: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "Τηλέφωνο: ".$number."\n\r"; $str .= "Mail: " .$email." \n\r"; $str .= "Question: ".$question."\n\r"; $str .= "Email: ".$status_email."\n\r"; $ str .= "= ======================================\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg("Συμπληρώστε τη φόρμα σωστά!"); ) )else( $msg = error_msg("Παρουσιάστηκε σφάλμα!"); ) )else( έξοδος ;)

Στον γραπτό κώδικα, προσδιορίζουμε αν η φόρμα έχει υποβληθεί, διαφορετικά κλείνουμε αυτό το αρχείο χρησιμοποιώντας τη συνάρτηση εξόδου. Στη συνέχεια, ελέγχουμε για την παρουσία κελιών με τα δεδομένα μας στον πίνακα POST· εάν έφτασαν, τα καθαρίζουμε από πιθανά σκουπίδια. Μετά τον καθαρισμό, ελέγχουμε τις μορφές αλληλογραφίας και τηλεφώνου, καθώς και την παρουσία κειμένου στη μεταβλητή ερώτησης. Στη συνέχεια, δημιουργούμε ένα γράμμα, το στέλνουμε και γράφουμε αρχεία καταγραφής, όπου, εκτός από τα δεδομένα, αποθηκεύουμε την κατάσταση αποστολής της επιστολής. Με αυτόν τον τρόπο μπορούμε να παρακολουθούμε τη λειτουργία της συνάρτησης mail() και ταυτόχρονα να μην χάνουμε δεδομένα.

Έξοδος μηνύματος

Το μόνο που έχουμε να κάνουμε είναι να ειδοποιήσουμε τον χρήστη για μια επιτυχημένη ή «όχι» ολοκληρωμένη λειτουργία και να τον επιστρέψουμε στον ιστότοπο με τη φόρμα. Για να το κάνουμε αυτό, χρησιμοποιούμε σήμανση με ενσωματώσεις σεναρίων PHP.

Για να ανακατευθύνουμε τον χρήστη πίσω στον ιστότοπο, θα χρησιμοποιήσουμε το refresh meta tag, όπου εισάγουμε τον κώδικα PHP με τις ήδη δημιουργημένες μεταβλητές. Θα χρειαστεί επίσης να χρησιμοποιήσουμε λίγο JavaScript για να κάνουμε τη σελίδα λίγο πιο δυναμική. Γράφουμε μια συνάρτηση timeBack(), η οποία θα μετράει τα δευτερόλεπτα με αντίστροφη σειρά πριν από την ανακατεύθυνση.