Εάν υπάρχει κάτι που είναι συνήθως πολύ κοινό για οποιονδήποτε τύπο ιστότοπου, αυτές είναι οι φόρμες. Οι φόρμες που χρησιμοποιούμε για να συμπληρώσουμε τα στοιχεία επικοινωνίας, εισαγάγετε τα στοιχεία της τράπεζας, συνδεθείτε σε ένα κοινωνικό δίκτυο ή απλώς πραγματοποιήστε μια αναζήτηση όπως αυτή που συνήθως κάνουμε καθημερινά στη μηχανή αναζήτησης Google
Έτσι σήμερα θα σας δείξουμε 40 φόρμες σε CSS που κυμαίνονται από φόρμες επικοινωνίας, πληρωμές με πιστωτική κάρτα, συνδέσεις, απλές, συνδρομές ή ακόμη και επικύρωση. Μια σειρά από μορφές εξαιρετικής κομψότητας και στυλ για να δώσει αυτό το ιδιαίτερο σημείο στον ιστότοπό σας, ανεξάρτητα από το θέμα.
Μινιμαλιστική φόρμα επικοινωνίας
Μια απλή φόρμα επικοινωνίας με ένα μεγάλη ποικιλία εφέ όπως κινούμενα σημάδια ή κινούμενα σχέδια γραμμής. Κομψός κώδικας CSS με λίγο JavaScript. Αν ψάχνετε για μινιμαλιστική φόρμα επικοινωνίας αυτό είναι ιδανικό για εσάς.
Μινιμαλιστική μορφή
άλλος ελάχιστη μορφή, αν και μόνο σε CSS να είναι απλή και υψηλής ποιότητας μορφή. Δεν έχει τα μινιμαλιστικά κινούμενα σχέδια του προηγούμενου, αλλά εκπληρώνει τον στόχο του πολύ καλά.
Vintage φόρμα επικοινωνίας
Vintage φόρμα επικοινωνίας, ένα πολύ κομψό σχέδιο. Ανταποκρίνεται σε αυτούς τους ιστότοπους για προβολή από κινητό, αν και δεν περιλαμβάνει επικύρωση.
Φόρμα επικοινωνίας επιστολών
αυτό φόρμα επικοινωνίας έχει ένα αρκετά περίεργο κινούμενο σχέδιο: σχηματίζεται ένα γράμμα. Απλό, αλλά πολύ χρήσιμο με άφθονο χρώμα.
Διευρυμένη φόρμα επικοινωνίας
αυτό διευρυμένη φόρμα επικοινωνίας Είναι μόνο front-end και έχει το επικύρωση με jQuery. Κάνουμε κλικ στο αιωρούμενο κουμπί και η φόρμα θα εμφανιστεί με ζωντανή κίνηση. Εξαιρετική.
Φόρμα επικοινωνίας UI
Φόρμα επικοινωνίας UI είναι μια φόρμα που γίνεται σε HTML και CSS. Ξεχωρίζει για την ύπαρξη μια απλή κάρτα επαφής που μπορούμε να συμπληρώσουμε, ώστε να αλλάζει μόνο το πεδίο κειμένου όταν γίνεται κλικ.
Ταμείο με κάρτα πληρωμής
Un πληρωμή κάρτας πληρωμής γίνονται σε HTML, CSS και JavaScript που διακρίνεται από την περιστρεφόμενη κινούμενη εικόνα την πιστωτική κάρτα τη στιγμή που πατάμε το CVC ή το πεδίο αριθμού ασφαλείας.
Επίπεδη σχεδίαση πιστωτικής κάρτας
Καθαρό CSS για ένα ταμείο για πιστωτικές κάρτες σε επίπεδα χρώματα. Πολύχρωμο και πολύ απλό που μπορεί να υποδηλώνει ποιότητα και επαγγελματισμό.
UI πιστωτικής κάρτας
Μια άλλη πιστωτική κάρτα σε HTML, CSS και JavaScript που ξεχωρίζει για το πόσο καλή είναι επέλεξε το συνολικό σχέδιο. Ξεχάσαμε τα κινούμενα σχέδια σε αυτό το κομμάτι κώδικα για τον ιστότοπό σας. Κατεβάστε το σε αυτόν τον σύνδεσμο.
Αντιδράστε στο Ταμείο
Αντιδράστε στο Ταμείο, φτιαγμένο με React.js, διακρίνεται από την πλάγια εικόνα που μπορούμε να προσαρμόσουμε με τις υπηρεσίες ή τα προϊόντα που πουλάμε στο ηλεκτρονικό μας εμπόριο.
Κάρτα πληρωμής πληρωμής
Αυτό το ταμείο ξεχωρίζει για τη δυνατότητα τοποθέτησης εικόνας στην κάρτα. ΕΝΑ απλή και σαφής φόρμα με CSS3, HTML5 και λίγο jQuery. Υψηλή ποιότητα και διαφορετική από τα υπόλοιπα ταμεία αυτής της λίστας. Μπορείτε να πραγματοποιήσετε λήψη Aquí αυτήν την κάρτα πληρωμής.
ΠΛΗΡΩΜΗ ΜΕ ΠΙΣΤΩΤΙΚΗ ΚΑΡΤΑ
αυτό έντυπο πληρωμής με πιστωτική κάρτα είναι προγραμματισμένο να εξασκηθεί με JavaScript για χειρισμό DOM. Μπορείτε να θυμηθείτε στο σχεδιασμό τον κομψό κωδικό της Stripe, της υπηρεσίας ψηφιακής τραπεζικής που πλησιάζει το PayPal.
Πιστωτική κάρτα
Ένα κομψό πληρωμή για πληρωμή με κάρτα διαφορετικό από τα άλλα και βασίζεται σε μια πιστωτική κάρτα που βρίσκεται στην κορυφή έτσι ώστε παρακάτω να έχουμε ολόκληρη τη φόρμα με τα διαφορετικά δεδομένα που πρέπει να συμπληρώσει ο πελάτης για να πραγματοποιήσει την πληρωμή στο ηλεκτρονικό εμπόριο.
Βήμα προς βήμα φόρμα
Un βήμα προς βήμα φόρμα για εγγραφή που γίνεται σε HTML, CSS και JavaScript. Τέσσερα βήματα για καθένα από τα σημεία βρίσκεται στην αριστερή πλευρά. Καλές κινούμενες εικόνες για μια εξαιρετικά ολοκληρωμένη φόρμα. Συνιστάται.
Διαδραστική φόρμα
Un διαδραστική μορφή πολλαπλή κάρτα με HTML, CSS και JavaScript. Ξεχωρίζει για την κίνηση μετάβασης μεταξύ κάθε βήματος. Έχει ένα κομψό άγγιγμα που δεν θα περάσει απαρατήρητο.
Βήμα προς βήμα φόρμα
αυτό βήμα προς βήμα φόρμα ξεχωρίζει για το ότι είναι αρκετά δημιουργικός. Θα απαντήσετε στις ερωτήσεις έτσι ώστε να μπορείτε να επιστρέφετε σε αυτά ανά πάσα στιγμή με την παρουσία οπτικά στην οθόνη όλη την ώρα.
Βήμα βήμα
Η βήμα προς βήμα ολοκληρώθηκε σε HTML, CSS και JavaScript. Χαρακτηρίζεται από την κίνηση μετάβασης ανάμεσα σε κάθε ένα από τα βήματα.
Φόρμα Jquery πολλαπλών βημάτων
Εάν έχετε ένα πολύ μεγάλη φόρμα, αυτό είναι ιδανικό για διαφορετικά τμήματα με μια πολύ εντυπωσιακή γραμμή προόδου. Με βάση το jQuery και το CSS, ξεχωρίζει για το σχεδιασμό του και για την εξαιρετική του κομψότητα.
Φόρμα κίνησης διεπαφής χρήστη
Οι μεταβάσεις αυτού Φόρμα κίνησης διεπαφής χρήστη είναι βασισμένο στο Domink Marskusic. Προσοχή στο δημιουργικό αποτέλεσμα του πλαισίου με μπλε χρώμα όταν κάνουμε κλικ σε μερικά από τα δύο πεδία της σύνδεσης ή της σύνδεσης.
Φόρμα δημιουργίας λογαριασμού / σύνδεσης
Ένα τέχνασμα σύνδεση και δημιουργία λογαριασμού που βασίζεται σε κινούμενα σχέδια τι συμβαίνει μεταξύ αυτών των δύο τμημάτων. Πολύ τρέχουσα και εντυπωσιακή παρουσία που πρέπει να γίνει σε HTML, JavaScript και CSS.
Επισήμανση φιδιού
Επισήμανση φιδιού είναι ένα από τα πιο εντυπωσιακά στοιχεία σύνδεσης σε οποιαδήποτε λίστα που ξεχωρίζει για το κομψό κινούμενο σχέδιο που εμφανίζεται γρήγορα τη στιγμή που κάνουμε κλικ σε ένα από τα δύο πεδία.
Οθόνη σύνδεσης
Θεία αυτό το σχέδιο οθόνη σύνδεσης το ίδιο και το δικό τους κινούμενα σχέδια και πόσο δημιουργικό είναι. Εάν θέλετε να είστε ο πιο πρόσφατος όσον αφορά το σχεδιασμό ιστοσελίδων, αυτή η φόρμα δεν μπορεί να λείπει. Απαραίτητος.
Σύνδεση διεπαφής χρήστη
Σχεδιάστηκε με χρήση HTML, Sass και jQuery. Σύνδεση διεπαφής χρήστη es eνόμιμος και ξεκάθαρος σχετικά με το θέμα που δεν έχει λεπτές κινούμενες εικόνες για να γίνει ένα από τα αγαπημένα της λίστας.
Σύνδεση και δημιουργία λογαριασμού διεπαφής χρήστη
Ενα ξεχωριστό σχεδιασμός σύνδεσης και διεπαφή δημιουργίας λογαριασμού για τα χρώματα και για παρουσίαση στο ένα μεγάλο φύλλο τα δύο τμήματα. Ένα άλλο από τα πιο όμορφα στην εκτέλεση που δεν μπορούμε να χάσουμε. Κατασκευασμένο σε HTML, CSS και JavaScript.
Ανόητα λάθη
Ανόητα λάθη Είναι μια εξαιρετική σύνδεση λόγω του animation του πεδία με obnoxious.css. Πρωτότυπο για να είναι μια διασκεδαστική, ανέμελη και πολύ διαφορετική σύνδεση. Πρωτότυπο χωρίς αμφιβολία για τον ιστότοπό μας.
Σύνδεση CSS HTML
Μια περίεργη σύνδεση από τα διαφορετικά εικονίδια που δείχνουν καθένα από τα πεδία για να μεταφέρει τον επισκέπτη όπου θέλουμε. Οι επιλεγμένες αποχρώσεις στα χρώματα ξεχωρίζουν επίσης. Δεν έχει κινούμενα σχέδια. Είναι κατασκευασμένο σε HTML και CSS για να το εφαρμόσει στον ιστότοπο για έναν πελάτη ή δικό μας.
Φόρμα σύνδεσης Modal
αυτό Φόρμα σύνδεσης Modal είναι εμπνευσμένο από τη γλώσσα του σχεδιασμός γνωστός για το σχεδιασμό υλικών. Το έχουμε δει σε πολλές εφαρμογές σε κινητές συσκευές. Σε αυτόν τον κωδικό έχουμε έναν πίνακα σύνδεσης και έναν πίνακα εγγραφής που είναι κρυμμένος από προεπιλογή. Ο πίνακας εγγραφής μπορεί να ενεργοποιηθεί κάνοντας κλικ στην μπλε στήλη που βρίσκεται στη δεξιά πλευρά. Έχει μια υπέροχη κίνηση για να είναι μια πολύ ξεχωριστή και εντυπωσιακή σύνδεση.
Φόρμα flexbox
Ξεκινάμε τις φόρμες αναζήτησης με αυτό μορφή βασίζεται στο flexbox. Ξεχωρίζει για το κόκκινο χρώμα της «αναζήτησης» και για λίγο περισσότερο για ένα κομψό πεδίο αναζήτησης για τον ιστότοπό σας.
Κινούμενο κουτί
Με αυτό κινούμενο κουτί κάντε κλικ στο εικονίδιο του μεγεθυντικού φακού και θα εμφανιστεί ένα φωτεινό μπλε κινούμενο σχέδιο ώστε να πρέπει να πληκτρολογήσουμε μόνο την αναζήτηση που πρόκειται να πραγματοποιήσουμε στον ιστότοπο. Φτιαγμένο με HTML, CSS και JavaScript.
Πεδίο αναζήτησης
ένα η μεγάλη γραμμή διασχίζει την οθόνη έτσι ώστε όταν το πατάμε αρχίζουμε να πληκτρολογούμε την αναζήτηση. Ένα κουμπί παραλαβής για να το ορίσετε απλή φόρμα αναζήτησης.
Απλό πεδίο αναζήτησης κάντε κλικ στο
Απλό πεδίο αναζήτησης κάντε κλικ στο βασίζεται σε μια αλληλεπίδραση που φαίνεται στο την εφαρμογή κοινότητας Waze Driver τροχαίος. Όλα τα εικονίδια και οι εικόνες γίνονται με CSS. Ξεχωρίζει για τα εικονίδια που μας επιτρέπουν να πραγματοποιούμε συγκεκριμένες αναζητήσεις για ένα προϊόν ή μια υπηρεσία. Εντυπωσιακό λόγω του πόσο δροσερό είναι.
Εφέ εισαγωγής κειμένου CSS
Εφέ εισαγωγής κειμένου CSS περιλαμβάνει μια σειρά από κινούμενα σχέδια σε κείμενο και συρτάρι αναζήτησης να είστε προσεκτικοί αναζητητές στη φόρμα.
Αναζήτηση πλήρους οθόνης
Αυτή η καταχώρηση από αναζήτηση πλήρους οθόνης λειτουργεί με οποιονδήποτε τύπο διάταξης ή θέσης. Απαιτεί στυλ στοιχείο κοντέινερ και στοιχείο αναζήτησης-επικάλυψης να βρίσκεται στη ρίζα. Χαρακτηρίζεται από μια γεμάτη κινούμενη εικόνα στιγμή που πατάμε το κουμπί αναζήτησης
Αναζήτηση
Un φόρμα αναζήτησης απλό αυτό του αρέσει να παίζει με τις διαφορετικές θέσεις και κινούμενα σχέδια. Κάνουμε κλικ στο κουμπί αναζήτησης και το πλήρες συρτάρι φαίνεται να πληκτρολογεί τις λέξεις. Πολύ σύγχρονο και συνιστάται για το πόσο απλό είναι.
Καμία ερώτηση
Καμία ερώτηση es απλή φόρμα με πεδίο κειμένου και την επιλογή ορισμένων απαντήσεων για να τις επιλέξει ο χρήστης. Πολύ οπτικά για να είναι ένα από τα καλύτερα.
Αναδυόμενη φόρμα συνδρομής
Με αυτό αναδυόμενη φόρμα συνδρομής, κάνουμε κλικ στο πλωτό κουμπί και θα μας οδηγήσει φόρμα με πολύ αστείο τόνο και ένα πεδίο για να εισαγάγετε το email. Ιδανικό για μάρκετινγκ μέσω email.
UI πλαισίου συνδρομής
ένα κουτί συνδρομής με κουδούνι συναγερμού και λίγο περισσότερο από τα επίπεδα χρώματα Στο σχεδιασμό.
Κουτί συνδρομής CSS
ένα έξυπνο κουτί συνδρομής για το γεγονός του χρησιμοποιήστε ντεγκραντέ για το κουμπί εγγραφής όπως το μωβ απόχρωση του πεδίου.
Κουτί συνδρομής
ένα απλό κουτί συνδρομής αλλά με μεγάλο αποτέλεσμα από το σχεδιασμό.
Φόρμα επικύρωσης EMOJI
Σε καθαρό CSS αυτό έντυπο επικύρωσης για να δημιουργήσετε το κλειδί ή κωδικός πρόσβασης. Καθώς γράφουμε, το emoji θα μετρήσει το επίπεδο ασφάλειας της φόρμας. Αστείο και περίεργο χωρίς αμφιβολία.
Μην το χάσετε αυτό λίστα με 23 κινούμενα βέλη στο CSS.
Εξαιρετικό δείγμα παραδειγμάτων που παρουσιάζονται εδώ. Η ποικιλία και η προσαρμογή σε διαφορετικά περιβάλλοντα και το καλύτερο είναι ότι ο σύνδεσμος κάθε τίτλου περιλαμβάνει το demo και τον πηγαίο κώδικα, αν και θα πρέπει να το επισημάνετε με ένα κουμπί «Εμφάνιση επίδειξης» επειδή ήταν περιέργως που το ανακάλυψα στο τίτλος. Ευχαριστώ για τη συμβολή. Χαιρετίσματα από τον Καράκα.
Με βοήθησε πολύ, ευχαριστώ.