Προσαρμόσιμη φόρμα ανατροφοδότησης: Πώς να δημιουργήσετε online; Πώς να φτιάξετε μια όμορφη φόρμα ανατροφοδότησης pop -up HTML και PHP με ένα τηλέφωνο και στέλνοντας μια παραγγελία e -mail;

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

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

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

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

Σχήμα 1. Τι είναι μια φόρμα ανάδρασης και γιατί είναι τόσο απαραίτητο;

Τι είναι μια φόρμα ανάδρασης και γιατί είναι τόσο απαραίτητο;

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

Η φόρμα ανάδρασης είναι μια ξεχωριστή σελίδα ή μπλοκ (τμήμα), που αποτελείται από διάφορα πεδία εισόδου του κειμένου και το κουμπί "Αποστολή". Κατά κανόνα, η τυποποιημένη φόρμα έχει τα ακόλουθα πεδία:

• Πλήρες όνομα
• E-mail (διεύθυνση email)
• Αριθμός κινητού
• Οι διευθύνσεις του ιστότοπού σας
• Πεδίο για την εισαγωγή μηνύματος κειμένου

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

Εικόνα 2. Τι είναι μια φόρμα ανάδρασης και γιατί είναι τόσο απαραίτητο;

• Επιπλέον, ορισμένοι ιδιοκτήτες προσθέτουν κάρτες Google ή Yandex στη φόρμα ανάδρασης, μορφές εισόδου στον ιστότοπο χρησιμοποιώντας κοινωνικά δίκτυα "Vkontakte", "Facebook", "Google+" και ούτω καθεξής. Αλλά θα μιλήσουμε για τη δημιουργία της απλούστερης μορφής ανατροφοδότησης, για την οποία θα χρειαστείτε αποκλειστικά γνώση των βασικών στοιχείων της γλώσσας σήμανσης HTML Και τίποτα περισσότερο.

Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

Για να μην μετατρέψουμε το άρθρο σε ένα πλήρες βαρετό βιβλίο, θα προχωρήσουμε από το γεγονός ότι είστε ήδη εξοικειωμένοι με τα βασικά της γλώσσας σήμανσης HTML Και έχετε μια γενική ιδέα για το πώς λειτουργεί. Εάν δεν έχετε τέτοιες δεξιότητες, πριν αναλάβετε τη δημιουργία μιας φόρμας, συνιστάται έντονα να σφίξετε τις γνώσεις σας σε έναν ελεύθερο πόρο λίγο htmlbook.ru. Διαφορετικά, δεν μπορείτε μόνο να εγκαταλείψετε αυτό το εγχείρημα, αλλά και να χαλάσετε τον κώδικα του ιστότοπού σας.

Για να αναδημιουργήσετε τη μορφή εργασίας, χρειάζεστε τρία σημαντικά στοιχεία, ένα από τα οποία είναι υπεύθυνο για τη σήμανση και τη δομή της μορφής ( HTML), το δεύτερο για τον εξωτερικό του σχεδιασμό ( CSS) και το τρίτο για την επεξεργασία και τη μετάδοση δεδομένων ( PHP). Ας ξεκινήσουμε με τη σειρά:

Γράφοντας έναν κωδικό HTML για σχόλια

• Βήμα 1. Προκειμένου να υποδείξει τη μορφή HTML Χρησιμοποιείται η ετικέτα ‹Φόρμα\u003e \u003c/Φόρμα›. Μέσα σε αυτό θα ρυθμιστούν μεγέθη, στυλ και άλλες ζωτικές ιδιότητες της μορφής. Κατά την καταγραφή της ίδιας της ετικέτας, πρέπει να ορίσει μια τάξη για να υποδείξει, η οποία θα βοηθήσει περαιτέρω την εγκατάσταση για τη φόρμα CSS Στυλ.

Εικόνα 1. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 2. Για να δημιουργήσουμε το πρώτο πεδίο της φόρμας μας μέσα στην ετικέτα \u003cΜορφή\u003e Πρέπει να γράψετε ετικέτα μπλοκ \u003cΠ\u003eπου είναι υπεύθυνη για τη δημιουργία μιας νέας γραμμής.

Εικόνα 2. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 3. Εσωτερική ετικέτα \u003cΠ\u003e Από τη νέα γραμμή εισάγουμε την ακόλουθη ετικέτα: ‹Ετικέτα για \u003d" Όνομα "›Ονομα \u003c/Επιγραφή\u003e. Είναι υπεύθυνος για τα ονόματα του μελλοντικού πεδίου μορφής.

Εικόνα 3. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 4. Στη νέα γραμμή, όλα βρίσκονται στην ίδια ετικέτα \u003cΠ\u003e Συνταχθούμε την ετικέτα δημιουργίας ενός πεδίου με τις ακόλουθες τιμές: ‹Input type \u003d" text "name \u003d" Όνομα "placeholder \u003d"Εισάγετε το όνομά σας "Απαιτείται \\\u003e. Παράμετρος " type \u003d "κείμενο"" Ορίζει τον τύπο του πεδίου κειμένου και την παράμετρο " placeHolder \u003d "Εισάγετε το όνομά σας «» Ορίζει το αρχικό κείμενο σε αυτό το πεδίο κειμένου. Παράμετρος " Απαιτείται»Καθιστά σαφές στον επισκέπτη του ιστότοπου ότι αυτό το πεδίο είναι υποχρεωτικό για την συμπλήρωση. Ως αποτέλεσμα, θα πρέπει να πάρετε μια φόρμα με ένα πεδίο, όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Εικόνα 4. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 5. Με το παραπάνω παράδειγμα, προσθέστε τα υπόλοιπα πεδία που χρειάζεστε, κάθε φορά ξεκινώντας από την ετικέτα \u003cΠ\u003e. Για να εγκαταστήσετε ένα πεδίο με μήνυμα κειμένου, χρησιμοποιήστε ετικέτα ‹TextArea Name \u003d" Message "Cols \u003d" 50 "σειρές \u003d" 6 "Απαιτείται› \u003c/textarea\u003e. Επιλογές " Κολοκύθας" Και " σειρές»Είναι υπεύθυνοι για το πλάτος και το ύψος του πεδίου κειμένου. Μπορείτε να ορίσετε τις παραμέτρους που σας αρέσουν περισσότερο. Θα πρέπει να πάρετε κάτι τέτοιο που εμφανίζεται στο παρακάτω στιγμιότυπο οθόνης.

Σχήμα 5. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 6. Για να προστατεύσετε τον εαυτό σας από τα bots, τα οποία είναι πολλά στο διαδίκτυο σήμερα, δημιουργήστε μια άλλη γραμμή με ετικέτα ‹Όνομα εισόδου \u003d" bezspama "type \u003d" text "style \u003d" display: none "value \u003d" " /›. Λόγω της παραμέτρου " style \u003d "Display: None"»Αυτό το πεδίο δεν θα είναι ορατό από απλούς θνητούς, αλλά τα bots θα γεμίσουν αυτόματα. Έτσι, μπορείτε πάντα να διακρίνετε ένα ζωντανό άτομο από το πρόγραμμα.

Εικόνα 6. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 7. Το τελικό στάδιο της σήμανσης θα είναι η δημιουργία του κουμπιού αποστολής. Η ετικέτα χρησιμοποιείται για αυτό \u003cΚουμπί\u003e. Δημιουργήστε ένα νέο μπλοκ \u003cΠ\u003e Και μέσα σε αυτό, εισαγάγετε τον κωδικό κουμπιού με τις ακόλουθες παραμέτρους: ‹Κουμπί class \u003d" υποβολή "type \u003d" υποβολή "›στέλνω ένα μήνυμα \u003c/Κουμπί\u003e. Ένα παρόμοιο αποτέλεσμα θα πρέπει να αποδειχθεί, όπως φαίνεται στο στιγμιότυπο οθόνης.

Σχήμα 7. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

Εργασία με στυλ Cascading (CSS)

• Όπως έχετε ήδη παρατηρήσει στη διαδικασία σήμανσης, αποδείξαμε κάτι πολύ στραβά, απίστευτο και αηδιαστικό. Προκειμένου να δοθεί στη φόρμα ανάδρασης μια περισσότερο ή λιγότερο τακτοποιημένη εμφάνιση, μία γλώσσα HTML Δεν θα είναι αρκετό. Για το σκοπό αυτό, θα πρέπει να καταφύγετε στη χρήση στυλ CSS.
• Σε περίπτωση που επωφεληθείτε από τις συμβουλές για να σφίξετε τις βασικές σας δεξιότητες στον πόρο htmlbook.ru, στη συνέχεια, ρυθμίστε ορισμένες παραμέτρους σχεδιασμού για όλα τα μέρη της φόρμας χρησιμοποιώντας CSS Δεν θα είναι δύσκολο για εσάς. Εάν δεν έχετε επιθυμία ή χρόνο για να χάσετε όλα αυτά, τότε θα σας προσφέρουμε έναν έτοιμο κωδικό και θα σας πω πώς να το συνδέσετε.

Εικόνα 8. Πώς να δημιουργήσετε τη απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

Στυλ σύνδεσης CSS Προς την HTML Μπορείτε δύο τρόπους:

• Αντιγράψτε τον κωδικό από τον πίνακα Cascading στο κάτω μέρος του αρχείου style.cssπου υπάρχει στη φιλοξενία ιστότοπου
• Μετακινήστε το αρχείο Styles στη φιλοξενία σας και συνδέστε το

Αρχείο style.css Συνδέεται μέσα στην ετικέτα ‹Επικεφαλής› ‹/κεφάλι› Χρησιμοποιώντας ένα σενάριο ‹Link rel \u003d" stylesheet "media \u003d" screen "href \u003d" style.css "›. Σε περίπτωση που ένα αρχείο με στυλ δεν βρίσκεται στον ίδιο φάκελο με το κύριο αρχείο HTML, τότε πρέπει να καθορίσετε τη διαδρομή προς αυτό. Στο αρχείο μας με στυλ, κάθε στοιχείο έχει μια ονομασία. Εάν επιθυμείτε, μπορείτε να αλλάξετε τις παραμέτρους για τον εαυτό σας, καθοδηγούνται μόνο από βασικές δεξιότητες προγραμματισμού.

Σύνδεση αρχείου PHP και Ρύθμιση της

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

Σε αντίθεση με το αρχείο style.css, ένα αρχείο με ένα σενάριο PHP συνδέεται με τις ιδιότητες της ίδιας της φόρμας. Ας ξεκινήσουμε με τη σειρά:

• Βήμα 1. Ανοίξτε τον προηγουμένως γραπτό κώδικα και βρείτε μια γραμμή με μια ανοιχτή ετικέτα φόρμας. Προσθέστε ιδιότητες σε αυτό " action \u003d "contact-form.php"" Και " Μέθοδος \u003d "Δημοσίευση"". Παρακολουθήστε ένα παράδειγμα στο στιγμιότυπο οθόνης.

Εικόνα 9. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 2. Κατεβάστε το αρχείο PHP και τοποθετήστε το στη φιλοξενία στον ίδιο φάκελο όπου βρίσκεται το έγγραφο HTML. Έτσι, τα αρχεία PHP και HTML θα αλληλεπιδρούν μεταξύ τους.

Εικόνα 10. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 3. Στη συνέχεια, πρέπει να διαμορφώσετε το σενάριο για τον εαυτό σας. Ανοίξτε το αρχείο και ρυθμίστε τις μεταβλητές, αναθέτοντας τους τα ίδια ονόματα όπως στο σενάριο HTML. Εάν προσθέσετε επιπλέον πεδία στη φόρμα, προσθέστε τα στο σενάριο PHP ακριβώς όπως φαίνεται στο στιγμιότυπο οθόνης.

Εικόνα 11. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 4. Στη συνέχεια, πρέπει να προσθέσετε δύο ακόμη μεταβλητές με τη διεύθυνση του email σας και το θέμα της επιστολής που θα εμφανιστεί στο κουτί σας. Σε μια γραμμή με μια μεταβλητή " $ Διεύθυνση"Αναφέρετε το e-mail και στη γραμμή" $ Sub»Το θέμα της επιστολής εμφανίζεται στο στιγμιότυπο οθόνης.

Εικόνα 12. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

• Βήμα 5. Σε μια γραμμή με μια μεταβλητή " $ MS»Η μορφή της επιστολής που θα λάβετε μέσω ταχυδρομείου έχει ρυθμιστεί. Μπορείτε να το ξαναγράψετε αμετάβλητο ή να επεξεργαστείτε τη δική σας γεύση.

Εικόνα 13 Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

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

Εικόνα 14. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

Κατεβάστε τα αρχεία CSS και PHP για σχόλια

Αφού εκτελέσετε όλες τις ενέργειες στην έξοδο, θα λάβετε μια τόσο απλή φόρμα ανατροφοδότησης

Εικόνα 15. Πώς να δημιουργήσετε την απλούστερη φόρμα ανάδρασης για τον ιστότοπο σε HTML και PHP;

Μια επιλογή από όμορφες μορφές σχεδίασης ανατροφοδότησης σχετικά με το HTML και το CSS για διαφορετικούς σκοπούς

• Με βάση τις παραπάνω οδηγίες, μπορείτε εύκολα να "σχεδιάσετε" τη φόρμα ανατροφοδότησης στη δική σας γεύση. Ωστόσο, εάν δεν έχετε χρόνο ή επιθυμία να δημιουργήσετε ανεξάρτητα μια φόρμα από το μηδέν, μπορείτε να βρείτε έτοιμες -κατασκευασμένες φόρμες σχεδιασμού στο διαδίκτυο και να έχετε βασικές δεξιότητες HTML Επεξεργαστείτε τα για τον εαυτό σας.

Σχήμα 1. Μια επιλογή από όμορφες μορφές σχεδίασης ανατροφοδότησης για HTML και CSS για διαφορετικούς σκοπούς

• Έχοντας αναζητήσει λίγο, βρήκαμε για εσάς μια επιλογή 35 Όμορφες μορφές ανατροφοδότησης, τα οποία είναι γραμμένα HTML Και CSS. Αυτές οι μορφές είναι κατάλληλες για κινητήρες όπως Wordpress Και JoomlaΈχουν μια απλή και εύκολη ρύθμιση από τον πίνακα ελέγχου και είναι επίσης ιδανικά για τοποθεσίες χωρίς κινητήρα.

Κατεβάστε μια επιλογή από μορφές ανατροφοδότησης σχεδιαστών για ιστότοπους

Βίντεο: ReadPress Ανανεωμένη ανατροφοδότηση ανατροφοδότησης