Ενεργή φόρμα σχολίων. Δημιουργία φόρμας σχολίων. Κώδικας φόρμας σχολίων HTML
Γεια σας αγαπητοί αναγνώστες, σήμερα θέλω να σας πω πώς δημιουργώ φόρμες για να αποκτήσω στοιχεία επικοινωνίας χρήστη.
Σήμερα, , αποτελεί μέρος της δομής της σελίδας προορισμού. Άλλωστε, αυτός είναι ένας από τους τρόπους αποδοχής μιας παραγγελίας ή αποστολής καταλόγου των προϊόντων σας, έχοντας προηγουμένως λάβει το e-mail του επισκέπτη.
Δημιουργία φόρμας σχολίων - σήμανσης html
Συνήθως χρειάζομαι τρία πεδία και στις περισσότερες περιπτώσεις χρησιμοποιώ αυτήν τη σήμανση για να δημιουργήσω μια φόρμα επικοινωνίας:
Δοκιμάστε να ανοίξετε αυτόν τον κωδικό στο πρόγραμμα περιήγησής σας και δείτε τι λαμβάνετε, ανάλογα με το πρόγραμμα περιήγησης που χρησιμοποιείτε, θα πρέπει να μοιάζει κάπως έτσι:
Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με τη σήμανση, μη διστάσετε να τις ρωτήσετε στα σχόλια, θα προσπαθήσω να απαντήσω λεπτομερώς και δεν θα περιγράψω κάθε στοιχείο στο άρθρο για να μην αυξήσω το μέγεθός του. Επιπλέον, τα στοιχεία είναι αρκετά απλά.
Δημιουργία φόρμας σχολίων - σήμανση css
Ας διαμορφώσουμε τη φόρμα μας και ας την κάνουμε ευανάγνωστη:
/* Στυλ φόρμας */ #application ( πλάτος: 475 px; περιθώριο: 0 αυτόματα; ) /* Στυλ πεδίων εισαγωγής */ #applicationName, #applicationEmail, #applicationTelephone ( πλάτος: 100%; ύψος: 73 px; φόντο: κανένα; περιθώριο - κορυφή: 25 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχεία συμπαγές #fff; ακτίνα περιγράμματος: 40 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; χρώμα: #fff; μέγεθος γραμματοσειράς: 24 εικονοστοιχεία; ) /*Στιλ πεδίων όταν κάνετε κλικ σε αυτά*/ #applicationName:focus , #applicationEmail:focus, #applicationTelephone:focus ( περίγραμμα: 1px solid #30ad64; ) /*Στιλ κειμένου που εμφανίζονται στο σύμβολο κράτησης θέσης*/ ::-webkit-input-placeholder ( χρώμα: #efefef; γραμματοσειρά-οικογένεια: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-placeholder ( χρώμα: #fff; γραμματοσειρά-οικογένεια: "PT Sans", sans-serif ; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( color: #fff; font-family: "PT Sans", sans- serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( χρώμα: #fff; font-family: "PT Sans" , sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( χρώμα: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /*Button styles*/ .applicationButton (margin-top: 25px; background: #30ad64 ; περίγραμμα: κανένα, πλάτος: 100%, ύψος: 73 εικονοστοιχεία, ακτίνα περιγράμματος: 40 εικονοστοιχεία, χρώμα: #fff, μέγεθος γραμματοσειράς: 24 εικονοστοιχεία, μετατροπή κειμένου: κεφαλαία, οικογένεια γραμματοσειράς: "PT Sans", sans-serif, δρομέας : δείκτης; ) .applicationButton:hover ( φόντο: #d68c18; )
Εάν θέλετε το χρώμα του κουμπιού να αλλάζει ομαλά, προσθέστε την ακόλουθη γραμμή στα .applicationButton και .applicationButton:hover:
Μετάβαση: .6s;
Where.6s είναι ο χρόνος κίνησης σε χιλιοστά του δευτερολέπτου.
Τώρα η φόρμα μας έχει αποκτήσει μια όμορφη εμφάνιση, τώρα μοιάζει με αυτό:
Δημιουργία φόρμας σχολίων - σήμανση php
Τώρα πρέπει να δημιουργήσουμε το αρχείο application.php. Θα λάβει τις εισαγόμενες παραμέτρους από τη φόρμα και θα μας τις στείλει μέσω email.
Η δομή του μοιάζει με ένα κανονικό αρχείο html· μπορεί να είναι μια σελίδα στην οποία γράφετε «Ευχαριστούμε, η αίτησή σας έγινε αποδεκτή. Μετά την επεξεργασία της αίτησης, οι διευθυντές μας θα επικοινωνήσουν μαζί σας"
Δηλαδή, όταν ο χρήστης κάνει κλικ στο κουμπί, θα ανακατευθυνθεί στη σελίδα application.php. Αυτή είναι μια πλήρης σελίδα και θα πρέπει να την διαμορφώσετε ανάλογα.
"; $msg .= "
Μήνυμα από τον ιστότοπο
\r\n"; $msg .= "Από ποιόν:".$username."
\r\n"; $msg .= "Ταχυδρομείο:".$usermail."
\r\n"; $msg .= "Δικτυακός τόπος:".$usertel."
\r\n"; $msg .= ""; // αποστολή μηνύματος if(@mail($sendto, $subject, $msg, $headers)) ( echo "
Ας εξηγήσουμε λίγο τον κώδικα:
$sendto = " [email προστατευμένο]"; // αλληλογραφία στην οποία θα σταλεί το γράμμα $username = $_POST["name"]; // αποθηκεύστε τα δεδομένα που λαμβάνονται από το πεδίο με το όνομα σε μια μεταβλητή $usertel = $_POST["τηλέφωνο"]; / / αποθηκεύστε τα δεδομένα σε μια μεταβλητή που ελήφθη από το πεδίο με έναν αριθμό τηλεφώνου $usermail = $_POST["email"]; // αποθηκεύστε τα δεδομένα που ελήφθησαν από το πεδίο με μια διεύθυνση email σε μια μεταβλητή
Εδώ, νομίζω, είναι ξεκάθαρο.
Τώρα ας δημιουργήσουμε την κεφαλίδα του γράμματος.
$subject = "Νέο μήνυμα"; $headers = "Από: " . strip_tags ($usermail) . "\r\n"; $headers .= "Απάντηση-Σε: ". strip_tags ($usermail) . "\r\n"; $headers .= "MIME-Έκδοση: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
Γραμμή $subject = "Νέο μήνυμα";— είναι υπεύθυνος για το θέμα της επιστολής, μπορεί να γράψει εκεί: «Αίτηση από τον ιστότοπο» ή ό,τι σας ταιριάζει καλύτερα.
Προτείνω να βεβαιωθείτε ότι η επιστολή προέρχεται από τη διεύθυνση που καθορίζεται στο πεδίο εισαγωγής type="email". Δηλαδή από αυτό από το οποίο μπήκε ο χρήστης κατά τη συμπλήρωση της φόρμας. Για να γίνει αυτό, γράφουμε τις ακόλουθες γραμμές:
$headers = "Από: " . strip_tags ($usermail) . "\r\n";
Δηλαδή, θα αντικαταστήσουμε δεδομένα από τη μεταβλητή $usermail, όπου αποθηκεύονται οι πληροφορίες από το πεδίο που είναι υπεύθυνο για την εισαγωγή της διεύθυνσης email.
Τώρα ας ορίσουμε την εμφάνιση του γράμματος. Μπορείτε να το σχεδιάσετε όπως θέλετε, αλλά σας προτείνω την ακόλουθη δομή:
$msg = "
"; $msg .= "Μήνυμα από τον ιστότοπο
\r\n"; $msg .= "Από ποιόν:".$username."
\r\n"; $msg .= "Ταχυδρομείο:".$usermail."
\r\n"; $msg .= "Τηλέφωνο:".$usertel."
\r\n"; $msg .= "";
Η πρώτη γραμμή ορίζει τη γραμματοσειρά του γράμματος. Δεύτερον, εμφανίζουμε ένα μήνυμα, για παράδειγμα: «Αίτημα από τη φόρμα σχολίων στην πρώτη οθόνη». Η τρίτη, η τέταρτη και η πέμπτη γραμμή μεταδίδουν δεδομένα από τη φόρμα. Το καθένα σε μια νέα γραμμή.
Τώρα πρέπει να στείλετε μια επιστολή χρησιμοποιώντας τη λειτουργία αλληλογραφίας και να καθορίσετε τι θα συμβεί εάν η επιστολή σταλεί με επιτυχία και όχι:
If(@mail($sendto, $subject, $msg, $headers)) ( echo "
Το έφτιαξα έτσι ώστε σε οποιαδήποτε από τις περιπτώσεις να εμφανίζεται μια εικόνα με το αντίστοιχο κείμενο. Μπορείτε να εμφανίσετε μια πλήρη σελίδα αντί για μια εικόνα. Απλώς γράψτε τον κωδικό αντί για την εικόνα.
Λίγα δευτερόλεπτα αργότερα, αφού εμφανιστεί η εικόνα, ανακατευθύνω (αυτόματη ανακατεύθυνση) στην κεντρική σελίδα. Μπορείτε να το κάνετε αυτό εισάγοντας την ακόλουθη γραμμή μεταξύ των ετικετών κεφαλής.
Δηλαδή μετά από 4 δευτερόλεπτα ο χρήστης θα επιστρέψει αυτόματα στην κεντρική σελίδα!
Δεν είμαι ειδικός στην PHP - είναι μια γλώσσα προγραμματισμού back-end· με ελκύει να μαθαίνω το front-end όλη μου τη ζωή. Μην κρίνετε λοιπόν αυστηρά. Ναι, εδώ μπορείτε να κάνετε ελέγχους για τη συμπλήρωση φορμών επικοινωνίας και ούτω καθεξής, αλλά αυτό ήταν πάντα αρκετό για μένα, οπότε αν κάποιος έχει κάποια πρόταση για το πώς να βελτιώσω αυτόν τον κωδικό, παρακαλώ γράψτε στα σχόλια ή μέσω email, θα διορθώσω το μάθημα, ευχαριστώ!
Παρεμπιπτόντως, εάν χρειάζεστε μια φόρμα σχολίων χωρίς να φορτώσετε ξανά τη σελίδα, τότε μπορείτε να διαβάσετε πώς να την εγκαταστήσετε στο
Ίσως κάποιοι άνθρωποι να μην καταλαβαίνουν πολύ καλά το υλικό, αλλά αν επαναλάβετε ακριβώς τα βήματά μου, τότε η φόρμα επικοινωνίας σας θα λειτουργήσει σίγουρα. Εάν έχετε οποιεσδήποτε ερωτήσεις, γράψτε στα σχόλια, θα προσπαθήσω να απαντήσω! Τα λέμε στο blog!
ΥΣΤΕΡΟΓΡΑΦΟ. Επειδή άρχισα να λαμβάνω πολύ συχνά ερωτήσεις σχετικά με το γιατί η φόρμα δεν λειτουργεί και τα μηνύματα ηλεκτρονικού ταχυδρομείου δεν φτάνουν, αποφάσισα να περιγράψω αρκετούς από τους πιο δημοφιλείς λόγους για τους οποίους μπορεί να συμβεί αυτό:
- Δοκιμάζετε τη φόρμα που δεν βρίσκεται στον διακομιστή.
- Δοκιμάστε τη φόρμα σε δωρεάν φιλοξενία.
- Δοκιμάζετε τη φόρμα σε επί πληρωμή φιλοξενία, αλλά κατά τη διάρκεια της δωρεάν δοκιμαστικής περιόδου.
Σε αυτές τις περιπτώσεις, οι επιστολές δεν θα αποστέλλονται στο email σας.
Εάν είστε πολύ τεμπέλης για να το καταλάβετε και να φτιάξετε τη φόρμα μόνοι σας, τότε σας συνιστώ να δώσετε προσοχή.
23/07/2014 12/07/2018
dimadv7