Παράθυρο τύπου με φόρμα για αποστολή επιστολής. Μια απλή φόρμα επικοινωνίας με χρήση του Ajax. Έκανα τα πάντα σύμφωνα με τις οδηγίες, αλλά η φόρμα δεν λειτουργεί, πού να ψάξω για το σφάλμα;

Γεια σας, αγαπητοί αναγνώστες! Σε αυτό το σεμινάριο θα δείξω πώς μπορούμε να φτιάξουμε μια φόρμα συνδρομής email HTML5 με επικύρωση της εισαγόμενης διεύθυνσης χρησιμοποιώντας το JQuery. Θα χρησιμοποιήσουμε κανονικές εκφράσεις για έλεγχο και θα αποθηκεύσουμε τη διεύθυνση που εισάγατε στη βάση δεδομένων MySql. Με αυτόν τον τρόπο, κατά την αποθήκευση, θα χρησιμοποιηθεί το AJAX (δηλαδή θα καλέσουμε το σενάριο PHP χωρίς να φορτώσουμε ξανά τη σελίδα). Το αποτέλεσμα μπορεί να προβληθεί στη σελίδα επίδειξης και μπορείτε επίσης να κάνετε λήψη των πηγών. Ας ξεκινήσουμε!

Βασική σήμανση

Ας ξεκινήσουμε δημιουργώντας ένα νέο αρχείο index.html. Και θα δημιουργήσουμε μια απλή δομή εγγράφου σύμφωνα με την HTML5. Θα συνδέσουμε επίσης αμέσως τα στυλ CSS και τη βιβλιοθήκη, θα το χρειαστούμε κατά τον έλεγχο του εισαγόμενου e-mail:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Φόρμα συνδρομής email με επικυρωτή jQuery

Τώρα είστε έτοιμοι να δημιουργήσετε τη φόρμα!

Φόρμα συνδρομής email

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

1 2 3 4 5 6 7 8 9

Συνεισφέρω

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

Χρησιμοποιούμε επίσης μερικά νέα χαρακτηριστικά στο πεδίο εισαγωγής. Ο τύπος πεδίου έχει οριστεί σε "email" έτσι ώστε τα προγράμματα περιήγησης για κινητά να μπορούν να εμφανίζουν το κατάλληλο πληκτρολόγιο. Το Chrome και ορισμένα προγράμματα περιήγησης WebKit θα το χρησιμοποιήσουν για να ελέγξουν εάν ο χρήστης έχει εισαγάγει μια διεύθυνση. Τα χαρακτηριστικά αυτόματης διόρθωσης και αυτόματης κεφαλαιοποίησης έχουν σχεδιαστεί ειδικά για προγράμματα περιήγησης για κινητά.

Το span with id error είναι αρχικά κρυφό, για το οποίο ευθύνεται η ιδιότητα εμφάνισης με την τιμή none, αυτό το έχουμε γραμμένο στο αρχείο στυλ, περισσότερα για αυτό αργότερα. Αλλά μόλις ο χρήστης εισάγει μια εσφαλμένη διεύθυνση email στο διάστημα, εμφανίζεται ένα προειδοποιητικό μήνυμα.

Επικυρωτή jQuery και αίτημα AJAX

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

Ας δούμε τη συνάρτηση completeInviteForm(). Για να αποτρέψουμε τη σύγχυση της φόρμας καταχώρισης διεύθυνσης, θα χρησιμοποιήσουμε ένα εφέ fadeOut για 400 χιλιοστά του δευτερολέπτου. Και ως επανάκληση, ας καλέσουμε τη συνάρτηση $.ajax(), να τη χρησιμοποιήσουμε για να καλέσουμε το αρχείο save.php και να αποθηκεύσουμε την εισαγόμενη διεύθυνση στη βάση δεδομένων. Θα δώσω τον πηγαίο κώδικα του αρχείου save.php παρακάτω, αλλά προς το παρόν ας δούμε τη συνάρτηση $.ajax().

$.ajax - φορτώνει μια απομακρυσμένη σελίδα χρησιμοποιώντας ένα αίτημα HTTP. Η συνάρτηση $.ajax() μεταβιβάζεται σε ένα αντικείμενο που αποτελείται από ζεύγη κλειδιών/τιμών που χρησιμοποιούνται για την προετοιμασία και τη διαχείριση της αίτησης. Στην περίπτωσή μας, θα χρησιμοποιήσουμε τα ακόλουθα αντικείμενα:

• type:'POST' - επιλέξτε τον τύπο αιτήματος στο αρχείο, από προεπιλογή GET, η διαφορά μεταξύ POST και GET δεν είναι ιδιαίτερα μεγάλη, απλώς με ένα αίτημα GET τα δεδομένα μεταδίδονται στην κεφαλίδα και με POST στο σώμα του αιτήματος, επομένως χρησιμοποιώντας το POST μπορείτε να μεταδώσετε μεγαλύτερο όγκο πληροφοριών.
• url: ‘save.php’ — διαδρομή προς το εκτελέσιμο αρχείο.
• data:'email='+$("#email").val() - δεδομένα που αποστέλλονται στον διακομιστή. Χρησιμοποιώντας τον επιλογέα CSS #email, έχουμε πρόσβαση στο στοιχείο με id="email" και λαμβάνουμε τα περιεχόμενα του χαρακτηριστικού value, δηλαδή το email που έχει καταχωρίσει ο χρήστης. Και θα αντιστοιχίσουμε αυτό το περιεχόμενο στη μεταβλητή email, την οποία θα χρησιμοποιήσουμε στο αρχείο save.php.
• success: function())( $('#completeform').before('Όλα είναι έτοιμα! Έχετε προστεθεί στη λίστα αλληλογραφίας. ');) - η συνάρτηση επιτυχίας καλείται όταν το αίτημα ajax ολοκληρωθεί με επιτυχία. Η συνάρτηση εκτελεί τις ακόλουθες ενέργειες. Πριν από το #completeform div εισάγουμε περιεχόμενο ειδοποιώντας τον χρήστη ότι το email του έχει προστεθεί στη λίστα αλληλογραφίας.

1 2 3 4 5 6 7 8 9 10 11 12

συνάρτηση completeInviteForm() ( setTimeout(function () ( $("#completeform" ) .fadeOut (400 , συνάρτηση () ( $.ajax(( τύπος: "POST" , url: "save.php" , data: "email=" + $("#email" ) .val () , επιτυχία: function() ( $("#completeform" ) .before ( "Τελειώσατε! Έχετε προστεθεί στη λίστα αλληλογραφίας." ) ; ) } ) ; } ) ; } , 1100 ) ; }

Και χρησιμοποιώντας τη μέθοδο setTimeout, η απόκρυψη της φόρμας και η εκτέλεση του αιτήματος ajax γίνεται ασύγχρονα με καθυστέρηση 1100 χιλιοστών του δευτερολέπτου.

Επεξεργασία Φόρμας

Για να διευκολύνουμε την πρόσβαση σε στοιχεία σελίδας, ας δημιουργήσουμε μερικές μεταβλητές με τους επιλογείς #error και #btnwrap.

var erdiv = $("#error" ) ; var btnwrap = $("#btnwrap" ) ;

Χρησιμοποιώντας το πρόγραμμα χειρισμού ζωντανών εκδηλώσεων, παρακολουθούμε το κλικ στο κουμπί "Εγγραφή" με το αναγνωριστικό του = "sendbtn" . Μέθοδος e.preventDefault();

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

Το πρώτο if(!isEmail(emailval)) ελέγχει εάν η συνάρτηση isEmail επέστρεψε false, αυτό σημαίνει ότι η διεύθυνση email που εισήγαγε ο χρήστης δεν ταιριάζει με την κανονική έκφραση, δηλαδή εσφαλμένη, θα ειδοποιήσουμε τον χρήστη σχετικά με αυτό στο μπλοκ σφάλματος και εμφανίστε ένα μήνυμα (Δεν πληκτρολογήσατε σωστά τη διεύθυνση email σας).

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

1 2 3 4 5 6 7 8 9 10 11 12

Για να γίνει ξεκάθαρη η διαδικασία, εισαγάγετε το κατάλληλο κείμενο στο μπλοκ σφάλματος και τοποθετήστε μια εικόνα GIF στο μπλοκ όπου βρισκόταν το κουμπί "Εγγραφή". Και καλούμε τη συνάρτηση completeInviteForm(), την οποία συζητήσαμε παραπάνω. if (! isEmail(emailval) ) ( erdiv.html ("Έχετε εισάγει λάθος τη διεύθυνση email σας" ) ; } erdiv.css ("εμφάνιση", "μπλοκ") ; if (isEmail(emailval) ) ( erdiv.css ("color" , "#719dc8" ); erdiv.html("επεξεργασία..."); } } ) ; } ) ;

(completeInviteForm(), 900);

Βάση δεδομένων

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

Για αυτό θα χρειαστούμε έναν τοπικό διακομιστή, χρησιμοποιώ τον Denwer. Σίγουρα πολλοί το χρησιμοποιούν, οπότε δεν θα μπω σε λεπτομέρειες. Μεταβείτε στο phpMyAdmin και δημιουργήστε μια βάση δεδομένων email:

Για να αποθηκεύσουμε τις διευθύνσεις των συνδρομητών, χρειαζόμαστε έναν πίνακα με δύο πεδία, ας τον ονομάσουμε διεύθυνση:

• Τα πεδία θα είναι τα εξής:
• id — αναγνωριστικό διεύθυνσης email (γνωστό και ως πρωτεύον κλειδί).

διεύθυνση — η ίδια η διεύθυνση email.

Αρχείο save.php

1 2 3 4 5 6

Αρχικά, ελέγχουμε αν η μεταβλητή email υπάρχει στον καθολικό πίνακα POST, εάν ναι, εκχωρούμε την τιμή της στην τοπική μεταβλητή $email. Στη συνέχεια, δημιουργούμε μια σύνδεση με τον διακομιστή mysql_connect() root χρήστη, χωρίς κωδικό πρόσβασης. Επιλέγουμε τη βάση δεδομένων email και εκτελούμε ένα ερώτημα στη βάση δεδομένων, εισάγουμε μια νέα εγγραφή στον πίνακα διευθύνσεων, όπου η τιμή της μεταβλητής $email θα εισαχθεί στα πεδία διεύθυνσης. Αυτό είναι όλο!

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

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

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

Κάποιοι υποστηρίζουν ότι αυτό οφείλεται στο γεγονός ότι οι άνθρωποι σιγά-σιγά «αναπτύσσουν ανοσία» και η ανοιχτή μορφή είναι μια επιθετική πώληση. Υποτίθεται ότι τώρα είναι η στιγμή που ο χρήστης, βλέποντας μια ανοιχτή φόρμα, πιστεύει ότι προσπαθούν να του «πουλήσουν» κάτι. Δεν συμφωνώ απόλυτα με αυτή τη θεωρία, αλλά υπάρχει ένας κόκκος αλήθειας. Αυτό μπορεί να ισχύει σε ορισμένους τύπους επιχειρήσεων. Λοιπόν, τώρα ας προχωρήσουμε στην εφαρμογή της φόρμας.

Σημείωμα! Δεν θα περιγράψω κάθε ενέργεια λεπτομερώς, αλλά σας προσφέρω μια έτοιμη έκδοση στον πηγαίο κώδικα. Εάν έχετε οποιεσδήποτε ερωτήσεις, γράψτε στα σχόλια. Θα το καταλάβουμε :)

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

Ένα κουμπί στο οποίο, όταν κάνετε κλικ, θα ανοίξει ένα παράθυρο τύπου:

Αφήστε ένα αίτημα

Μπορείτε να ορίσετε οποιαδήποτε κλάση, αλλά στο href γράψτε #modal - αυτό θα είναι το αναγνωριστικό του κοντέινερ με σκίαση και μια φόρμα επικοινωνίας.

Τώρα θα δώσω τον κωδικό για τη φόρμα και το μπλοκ στο οποίο θα βρίσκεται η φόρμα:

Αφήστε τα στοιχεία επικοινωνίας σας και ο σύμβουλός μας θα επικοινωνήσει μαζί σας Θέλω αυτή τη φόρμα για τον ιστότοπό μου

Μετά την προσθήκη στυλ, φαινόταν ως εξής:

Για τη δημιουργία ενός παραθύρου modal, χρησιμοποιήθηκε η βιβλιοθήκη Remodal. Αυτό είναι ένα σύνολο αρχείων css και js, μόνο για τη δημιουργία κινούμενων παραθύρων modal. Μπορείτε να το κατεβάσετε από τον σύνδεσμο ή με τις επεξεργασίες μου στο τέλος του άρθρου.

Προσθέτουμε στυλ μεταξύ των ετικετών κεφαλής:

Και πριν από το κλείσιμο της ετικέτας σώματος, προσθέστε σενάρια:

Το Script.js είναι ένα σενάριο για την επεξεργασία της φόρμας. Το ίδιο Ajax που μας επιτρέπει να πραγματοποιήσουμε ολόκληρη τη διαδικασία χωρίς να φορτώσουμε ξανά τη σελίδα:

$(document).ready(function () ( $("form").submit(function () ( // Λήψη του αναγνωριστικού φόρμας var formID = $(this).attr("id"); // Προσθήκη κατακερματισμού στο όνομα var formNm = $("#" + formID $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) (); // Εξαγωγή κειμένου του αποτελέσματος αποστολής $(formNm).html(σφάλμα δεδομένων: συνάρτηση (jqXHR, κείμενο, σφάλμα) ( // Εμφάνιση του κειμένου του σφάλματος αποστολής $(formNm).html(error); ) ));

Δεν θα παράσχω τον πηγαίο κώδικα των css και js από τα αρχεία που είναι υπεύθυνα για το παράθυρο και τη φόρμα modal, καθώς είναι αρκετά μεγάλα. Αν ναι, κοιτάξτε την πηγή. Αλλά ο χειριστής PHP είναι σε μεγάλο βαθμό τυπικός (αν μπορώ να το πω):

Μην ξεχάσετε να αλλάξετε τις διευθύνσεις email σας με τις δικές σας.

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

Παιδιά, σας προτρέπω να δοκιμάσετε τη φόρμα σε πραγματικό ή εικονικό διακομιστή (hosting). Βεβαιωθείτε ότι ο διακομιστής σας υποστηρίζει PHP, ότι έχετε πρόγραμμα επί πληρωμή και όχι δοκιμαστική περίοδο. Διαφορετικά, στο 90% των περιπτώσεων η φόρμα δεν θα λειτουργήσει.

Μην περιμένετε ένα γράμμα στα εισερχόμενά σας εάν μόλις ανοίξατε το αρχείο ευρετηρίου στο πρόγραμμα περιήγησής σας και κάνετε κλικ στο κουμπί "Αποστολή". Η Php είναι μια γλώσσα διακομιστή!

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

Βρίσκεται η ενημερωμένη έκδοση του άρθρου

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

Κατά τη γνώμη μου, ένα υπέροχο παράδειγμα εργαλείων αλληλεπίδρασης χρήστη.

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

Ο κώδικας HTML της φόρμας

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

ΚοντάΣτείλτε μας ένα μήνυμα

ΚοντάΣτείλτε μας μήνυμα Παρακαλούμε εισάγετε το μήνυμά σας εδώ..

Επίσης, πρέπει να δημιουργήσουμε ένα σκοτεινό στρώμα για το γενικό φόντο κατά την ενεργοποίηση της αναδυόμενης φόρμας. Αυτή η εργασία μπορεί να επιτευχθεί με διαφορετικούς τρόπους, αλλά δεν θα είμαστε πολύ έξυπνοι και θα προσθέσουμε ένα άλλο div, εκχωρώντας του ένα αναγνωριστικό: id="fade" και ένα class: class="black-overlay" . Μπορείτε να το τοποθετήσετε δίπλα στη φόρμα, ώστε να μην χρειάζεται να κάνετε αναζήτηση για μεγάλο χρονικό διάστημα, αν χρειαστεί.

Ανατροφοδότηση

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

Αυτό είναι όλο, ας δούμε τώρα τον πλήρη κώδικα HTML της σελίδας που περιέχει την αναδυόμενη φόρμα σχολίων:

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

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

Πριν προχωρήσουμε στο διασκεδαστικό μέρος, διαμορφώνοντας τη φόρμα επικοινωνίας μας χρησιμοποιώντας CSS, θα κάνω λίγο πίσω. Οι πιο προσεκτικοί άνθρωποι πιθανότατα έχουν παρατηρήσει ότι τα κουμπιά για το άνοιγμα και το κλείσιμο της φόρμας υλοποιούνται με τη μορφή συνδέσμων με ένα "jammer" href="javascript:void(0)" . Είτε αυτό είναι καλό είτε κακό, δεν έχω βρει ακριβή απάντηση για τον εαυτό μου, χρησιμοποιώ αυτή τη μέθοδο από συνήθεια. Αν και για τα στοιχεία στα οποία το συμβάν onclick επεξεργάζεται το σενάριο, νομίζω ότι είναι πιο λογικό και σωστό να χρησιμοποιείται ή . Εάν θέλετε, μπορείτε πάντα να το κάνετε αυτό με τα κουμπιά από αυτό το παράδειγμα.

Η μαγεία του CSS

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

Και εδώ είναι ο ίδιος ο κώδικας CSS, της υπέροχης μας μορφής, με λίγα σχόλια, για σαφήνεια και για αποφυγή περιττών ερωτήσεων:

/* ορίστε το στρώμα σκουρόχρωμου φόντου, ** ορίστε τις θέσεις, το χρώμα και την ένταση του σκουρόχρωμου */ .black-overlay( display : none ; position : absolute ; top : 0% ; left : 0% ; πλάτος : 100% ; Ύψος : 100% ;χρώμα φόντου : 1001 -moz-opacity : , . ύψος : 340 px : url (images/envelope.png ) centre no-repeat : 1002 : περιθώριο : 10% auto ; form */ .close-btn (πλάτος: 31px; ύψος: 31px; εμφάνιση: μπλοκ; δρομέας: δείκτης; /* για περιπτώσεις εκτός ετικέτες */ φόντο : url (images/close.png ) ; Glow(Color=#bfa8b2bc, Strength=5) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Θετικό = true)" ; φίλτρο : progid: DXImageTransform.Microsoft.Glor=Microsoft. #bfa8b2bc , Strength= 5 ) progid: DXImageTransform.Microsoft .dropshadow(OffX = 0 , OffY = 1 , Color = #80ffffff , Positive = true) ) .your-message ( font-family : "Arthoma,Trebu" sans-serif-color: rgb (255, 255, color: 0 0 182) σκιά: 0px 1px 0px rgba (255, 255, 255, 0,5) , ένθετο 0px 1px 2px 0px rgba (0 , 0 , 0 , 0.2 ) ; 55, 255 , 0,5 , ένθετο 0 px 2 px 0 px rgba (0 , 0 , 0 , 0,2 ) ; , 0,2 ) 5), ένθετο 0px 1px 3px rgb (97, 108, 122); Microsoft .dropshadow(OffX = 0 , OffY = 1 , Color = #80ffffff , Positive = true) ;

/* ορίστε το επίπεδο σκουρόχρωμου φόντου, ** ορίστε τη θέση, το χρώμα και την ένταση του σκουρόχρωμου */ .black-overlay( εμφάνιση: καμία; θέση: απόλυτη; επάνω: 0%; αριστερά: 0%, πλάτος: 100%; Ύψος: 100% χρώμα φόντου: 1001 -moz-opacity: άλφα (αδιαφάνεια = 70); ύψος: 340px: url(images/envelope.png) no-repeat:1002 position: 10% auto ; μορφή */ .close-btn ( πλάτος: 31 px; ύψος: 31 px; εμφάνιση: μπλοκ; δρομέας: δείκτης;/* για την περίπτωση χρήσης διαφορετικών από ετικέτες */ φόντο: url(images/close.png); 5) ,inset 0px 1px 2px 0px rgba(0,0,0,0,2); 5) ,inset 0px 1px 3px rgb(97,108,122);

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

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

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

Ενημέρωση από 21/05/2017
Πρόσθεσα το φάκελο "mail" στο αρχείο προέλευσης, στο οποίο θα βρείτε έναν απλό χειριστή PHP για τη φόρμα και ένα αρχείο διαμόρφωσης για τη διαμόρφωση. Ο χειριστής είναι συνδεδεμένος με αυτήν τη φόρμα, μια μικρή οδηγία και σχόλια γραμμένα απευθείας στον κώδικα των αρχείων χειριστή, ελπίζω ότι θα σας βοηθήσουν να καταλάβετε τι, πού και γιατί.

Με εκτίμηση, Andrey

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

Δομή άρθρου

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

UPD. 08/02/2018
Το άρθρο έχει ξαναγραφτεί λαμβάνοντας υπόψη ότι η φόρμα δημοσιεύτηκε στο GitHub

Λοιπόν, ας ξεκινήσουμε. Πρώτα απ 'όλα, κατεβάστε τις πηγές φόρμας από το αποθετήριο GitHub μου.

Συναρμολόγησα αυτή τη διάταξη χρησιμοποιώντας τη διαχείριση εργασιών Gulp. Έγραψα για το πώς να συνεργαστώ μαζί του, φροντίστε να διαβάσετε.

Σύνδεση της φόρμας με τον ιστότοπο

Αποσυσκευάστε το αρχείο με τη φόρμα. Στη συνέχεια, αντιγράψτε όλα τα περιεχόμενα από τον φάκελο dist στον φάκελο φόρμες (για παράδειγμα, ajax-form) στο πρότυπο του ιστότοπού σας. Στη συνέχεια, συνδέουμε πόρους - στυλ και σενάρια. Υπάρχουν δύο εκδόσεις στους φακέλους css και js - συμπιεσμένες και κανονικές. Εάν σκοπεύετε να κάνετε αλλαγές στον κώδικα στο μέλλον, είναι προτιμότερο να συνδέσετε μη συμπιεσμένες εκδόσεις.

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

Αρχικοποίηση της φόρμας

Επιτρέψτε μου να σημειώσω αμέσως ότι η επικύρωση πεδίου οργανώνεται χρησιμοποιώντας HTML5.

Η φόρμα καλείται με τη μέθοδο .simpleSendForm(), για παράδειγμα:

$("#idForm").simpleSendForm();

Αντί για #idForm καθορίζουμε το αναγνωριστικό φόρμας. Γενικά, μπορείτε να βρείτε τον κώδικα προετοιμασίας της φόρμας στο αρχείο scripts.js. Ο κωδικός κλήσης της προσθήκης μπορεί να αποκοπεί από εκεί και να γραφεί ακριβώς πριν από το . Μην ξεχνάτε το jQuery.(document).ready() .

Η φόρμα μπορεί να δεχθεί ορισμένες επιλογές.

Επιλογές

• successTitle (string) — Τίτλος του ευχαριστήριου μηνύματος κατά την υποβολή της φόρμας. Η προεπιλογή είναι "Σας ευχαριστούμε που μας επιλέξατε!"
• successText (string) - Το κείμενο κάτω από τον τίτλο του ευχαριστήριου μηνύματος. Η προεπιλογή είναι "Θα επικοινωνήσουμε μαζί σας σύντομα".
• errorTitle (string) — τίτλος του μηνύματος σφάλματος υποβολής φόρμας. Η προεπιλογή είναι "Το μήνυμα δεν εστάλη!".
• errorSubmit (string) — κείμενο του μηνύματος σφάλματος υποβολής φόρμας. Η προεπιλογή είναι "Σφάλμα υποβολής φόρμας!".
• errorNocaptcha (string) — κείμενο σφάλματος εάν η captcha δεν είχε συμπληρωθεί.
• errorCaptcha (string) — κείμενο σφάλματος εάν ο έλεγχος απέτυχε.
• mailUrl (string) — διαδρομή προς το αρχείο χειριστή. Η προεπιλογή είναι "../form-submit/submit.php". Θα πρέπει να αλλάξετε και να καθορίσετε την πλήρη διαδρομή εάν ο φάκελος "φόρμα-υποβολή" δεν βρίσκεται στη ρίζα του ιστότοπου.
• autoClose (boolean) - Κλείνει αυτόματα το παράθυρο μετά την επιτυχή υποβολή της φόρμας (για φόρμες σε παράθυρο τροπικού τρόπου). Το παράθυρο της φόρμας κλείνει, εμφανίζοντας ένα ευχαριστήριο μήνυμα μετά από 5 δευτερόλεπτα. Αυτός ο χρόνος μπορεί να παρακαμφθεί.
• autoCloseDelay (αριθμός) - διάρκεια (σε χιλιοστά του δευτερολέπτου) εμφάνισης του ευχαριστήριου μηνύματος μετά την οποία θα κλείσει. Η προεπιλογή είναι 5000 (5 δευτερόλεπτα).
• εντοπισμός σφαλμάτων (boolean) - false από προεπιλογή. Ενεργοποιήστε τον εντοπισμό σφαλμάτων εάν υπάρχουν προβλήματα με τη φόρμα. Δείτε μηνύματα σφάλματος στην κονσόλα.
• captcha (boolean) - false από προεπιλογή. Ενεργοποιήστε ή απενεργοποιήστε το Recaptcha 2.0.
• captchaPublicKey (string) — recaptcha δημόσιο κλειδί.

Φόρμα σε ένα παράθυρο τρόπου

Η φόρμα μας μπορεί επίσης να εμφανιστεί σε ένα παράθυρο τρόπου λειτουργίας. Το modal θα εμφανιστεί από τη βιβλιοθήκη.

Κώδικας HTML

Κωδικός κουμπιού

Ζητήστε μια κλήση

Κωδικός φόρμας

Αρχικοποιήστε το παράθυρο και τη φόρμα. Ας κάνουμε το παράθυρο να κλείνει αυτόματα μετά από 3 δευτερόλεπτα. μετά την επιτυχή υποβολή της φόρμας. Μπορείτε επίσης να βρείτε τον κωδικό κλήσης Magnific Popup στο αρχείο scripts.js.

Κλήση φόρμας με παράθυρο τρόπου // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", fixedContentPos: false, fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removeDelay: 300, mainClass: "mfp-top-up" )); // ===== Εκκίνηση modal form ==== $("#idForm").simpleSendForm (( successTitle: "Η αίτησή σας έγινε αποδεκτή!", successText: "Ο υπάλληλος μας θα επικοινωνήσει μαζί σας το συντομότερο δυνατό." , autoClose : true, autoCloseDelay: 3000 )); Πώς να ενεργοποιήσετε το Recaptcha;

Εάν θέλετε να ενεργοποιήσετε το recaptcha σε μια φόρμα, τότε πρέπει να προσθέσετε ένα κενό μπλοκ με την κλάση recaptcha στον κώδικα html της φόρμας στο μέρος όπου θέλετε να το εμφανίσετε. Στη συνέχεια, στον κώδικα για την κλήση της προσθήκης φόρμας, περνάμε την επιλογή captcha με την τιμή true και περνάμε το δημόσιο κλειδί recaptcha στην επιλογή captchaPublicKey. Μπορείτε να λάβετε δημόσια και ιδιωτικά κλειδιά.

// ===== Εκκίνηση captcha με τη μορφή ==== $("#idForm").simpleSendForm(( successTitle: "Η αίτησή σας έγινε αποδεκτή!", successText: "Ο υπάλληλος μας θα επικοινωνήσει μαζί σας το συντομότερο δυνατό ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Στη συνέχεια, ανοίξτε το αρχείο χειριστή φορμών submit.php από τον κατάλογο φόρμας-υποβολής. Αναζητούμε τη μεταβλητή recaptchaOn (περίπου την 7η γραμμή) και την ορίζουμε σε true . Στη συνέχεια, αναζητήστε τη μεταβλητή $secret (περίπου γραμμή 89) και αλλάξτε το ιδιωτικό κλειδί στο δικό σας.

Βασικά τα πάντα. Μετά από αυτούς τους χειρισμούς, θα πρέπει να δείτε ένα captcha.

Λάβετε υπόψη ότι στον ιστότοπο επίδειξης το captcha λειτουργεί σε δοκιμαστική λειτουργία, καθώς υποδεικνύονται τα κλειδιά δοκιμής από την Google.

Ας δούμε τώρα το αρχείο χειριστή φόρμας (submit.php) και ας δούμε τα κύρια κομμάτια κώδικα. Ο χειριστής λειτουργεί σε PHP, οπότε αν θέλετε να δοκιμάσετε τη φόρμα θα χρειαστεί να χρησιμοποιήσετε .

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

Δείτε εάν η διαδρομή προς το αρχείο χειριστή έχει καθοριστεί σωστά στην προετοιμασία της φόρμας:

mailUrl: — διαδρομή προς το αρχείο χειριστή

Ελέγξτε επίσης ότι το recaptcha είναι ενεργοποιημένο σωστά. Δηλαδή, εάν είναι απενεργοποιημένο, τότε οι επιλογές recaptcha στον κώδικα αρχικοποίησης και $recptchaOn στο αρχείο χειριστή θα πρέπει να οριστούν σε false ή true εάν είναι ενεργοποιημένο το recaptcha.

Το Google Recaptcha δεν εμφανίζεται στη φόρμα

Ελέγξτε εάν οι τιμές recaptcha (κλήση recaptcha) και $recaptchaOn (αρχείο χειριστή) έχουν μεταδοθεί - αληθής. Ελέγξτε επίσης εάν προσδιορίσατε σωστά τα κλειδιά - δημόσια και ιδιωτικά.

Έκανα τα πάντα σύμφωνα με τις οδηγίες, αλλά η φόρμα δεν λειτουργεί, πού μπορώ να αναζητήσω το σφάλμα;

Πρώτα απ 'όλα, σας συμβουλεύω να κοιτάξετε στην κονσόλα του προγράμματος περιήγησης και να ελέγξετε για σφάλματα. Ελέγξτε επίσης εάν έχετε ενεργοποιημένη τη βιβλιοθήκη jQuery. Ελέγξτε ότι το αρχείο scripts.js περιλαμβάνεται σωστά. Εάν όλα είναι καλά, δοκιμάστε να ενεργοποιήσετε τον εντοπισμό σφαλμάτων με την επιλογή εντοπισμού σφαλμάτων: αληθινή. Μετά την ενεργοποίηση, κοιτάξτε στην κονσόλα για σφάλματα.

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

Αυτό είναι όλο. Σας ευχαριστώ για την προσοχή σας. Τα λέμε στις επόμενες αναρτήσεις!