40 φόρμες CSS που δεν μπορούν να λείπουν σε κανέναν ιστότοπο

Φόρμα σύνδεσης

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

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

Δείκτης

Μινιμαλιστική φόρμα επικοινωνίας

μινιμαλιστική φόρμα

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

σχετικό άρθρο:
23 υψηλής ποιότητας βιβλιοθήκες CSS για σχεδιασμό ιστοσελίδων

Μινιμαλιστική μορφή

Μινιμαλιστική

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

Vintage φόρμα επικοινωνίας

σοδειά

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

Φόρμα επικοινωνίας επιστολών

Επιστολή

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

σχετικό άρθρο:
27 δωρεάν κάρτες HTML και CSS για ιστολόγια, ηλεκτρονικό εμπόριο και άλλα

Διευρυμένη φόρμα επικοινωνίας

Εκτεταμένη φόρμα επικοινωνίας

αυτό διευρυμένη φόρμα επικοινωνίας Είναι μόνο front-end και έχει το επικύρωση με jQuery. Κάνουμε κλικ στο αιωρούμενο κουμπί και η φόρμα θα εμφανιστεί με ζωντανή κίνηση. Εξαιρετική.

Φόρμα επικοινωνίας UI

Φόρμα Επικοινωνίας

Φόρμα επικοινωνίας UI είναι μια φόρμα που γίνεται σε HTML και CSS. Ξεχωρίζει για την ύπαρξη μια απλή κάρτα επαφής που μπορούμε να συμπληρώσουμε, ώστε να αλλάζει μόνο το πεδίο κειμένου όταν γίνεται κλικ.

Ταμείο με κάρτα πληρωμής

Κάρτα πληρωμής πληρωμής

Un πληρωμή κάρτας πληρωμής γίνονται σε HTML, CSS και JavaScript που διακρίνεται από την περιστρεφόμενη κινούμενη εικόνα την πιστωτική κάρτα τη στιγμή που πατάμε το CVC ή το πεδίο αριθμού ασφαλείας.

Επίπεδη σχεδίαση πιστωτικής κάρτας

Καθαρή πιστωτική κάρτα CSS

Καθαρό CSS για ένα ταμείο για πιστωτικές κάρτες σε επίπεδα χρώματα. Πολύχρωμο και πολύ απλό που μπορεί να υποδηλώνει ποιότητα και επαγγελματισμό.

UI πιστωτικής κάρτας

Σνακ

Μια άλλη πιστωτική κάρτα σε HTML, CSS και JavaScript που ξεχωρίζει για το πόσο καλή είναι επέλεξε το συνολικό σχέδιο. Ξεχάσαμε τα κινούμενα σχέδια σε αυτό το κομμάτι κώδικα για τον ιστότοπό σας. Κατεβάστε το σε αυτόν τον σύνδεσμο.

Αντιδράστε στο Ταμείο

Αντίδραση

Αντιδράστε στο Ταμείο, φτιαγμένο με React.js, διακρίνεται από την πλάγια εικόνα που μπορούμε να προσαρμόσουμε με τις υπηρεσίες ή τα προϊόντα που πουλάμε στο ηλεκτρονικό μας εμπόριο.

Κάρτα πληρωμής πληρωμής

Popov

Αυτό το ταμείο ξεχωρίζει για τη δυνατότητα τοποθέτησης εικόνας στην κάρτα. ΕΝΑ απλή και σαφής φόρμα με CSS3, HTML5 και λίγο jQuery. Υψηλή ποιότητα και διαφορετική από τα υπόλοιπα ταμεία αυτής της λίστας. Μπορείτε να πραγματοποιήσετε λήψη Aquí αυτήν την κάρτα πληρωμής.

ΠΛΗΡΩΜΗ ΜΕ ΠΙΣΤΩΤΙΚΗ ΚΑΡΤΑ

Ταινία

αυτό έντυπο πληρωμής με πιστωτική κάρτα είναι προγραμματισμένο να εξασκηθεί με JavaScript για χειρισμό DOM. Μπορείτε να θυμηθείτε στο σχεδιασμό τον κομψό κωδικό της Stripe, της υπηρεσίας ψηφιακής τραπεζικής που πλησιάζει το PayPal.

Πιστωτική κάρτα

Καθημερινά

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

Βήμα προς βήμα φόρμα

Βήμα βήμα

Un βήμα προς βήμα φόρμα για εγγραφή που γίνεται σε HTML, CSS και JavaScript. Τέσσερα βήματα για καθένα από τα σημεία βρίσκεται στην αριστερή πλευρά. Καλές κινούμενες εικόνες για μια εξαιρετικά ολοκληρωμένη φόρμα. Συνιστάται.

Διαδραστική φόρμα

Διαδραστική

Un διαδραστική μορφή πολλαπλή κάρτα με HTML, CSS και JavaScript. Ξεχωρίζει για την κίνηση μετάβασης μεταξύ κάθε βήματος. Έχει ένα κομψό άγγιγμα που δεν θα περάσει απαρατήρητο.

Βήμα προς βήμα φόρμα

Βήμα βήμα

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

Βήμα βήμα

Βήμα

Η βήμα προς βήμα ολοκληρώθηκε σε HTML, CSS και JavaScript. Χαρακτηρίζεται από την κίνηση μετάβασης ανάμεσα σε κάθε ένα από τα βήματα.

Φόρμα Jquery πολλαπλών βημάτων

JQuery πολλαπλών βημάτων

Εάν έχετε ένα πολύ μεγάλη φόρμα, αυτό είναι ιδανικό για διαφορετικά τμήματα με μια πολύ εντυπωσιακή γραμμή προόδου. Με βάση το jQuery και το CSS, ξεχωρίζει για το σχεδιασμό του και για την εξαιρετική του κομψότητα.

Φόρμα κίνησης διεπαφής χρήστη

Φόρμα κινουμένων σχεδίων

Οι μεταβάσεις αυτού Φόρμα κίνησης διεπαφής χρήστη είναι βασισμένο στο Domink Marskusic. Προσοχή στο δημιουργικό αποτέλεσμα του πλαισίου με μπλε χρώμα όταν κάνουμε κλικ σε μερικά από τα δύο πεδία της σύνδεσης ή της σύνδεσης.

Φόρμα δημιουργίας λογαριασμού / σύνδεσης

Δημιουργία σύνδεσης

Ένα τέχνασμα σύνδεση και δημιουργία λογαριασμού που βασίζεται σε κινούμενα σχέδια τι συμβαίνει μεταξύ αυτών των δύο τμημάτων. Πολύ τρέχουσα και εντυπωσιακή παρουσία που πρέπει να γίνει σε HTML, JavaScript και CSS.

Επισήμανση φιδιού

Φίδι

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

Οθόνη σύνδεσης

Σύνδεση

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

Σύνδεση διεπαφής χρήστη

Φόρμα σύνδεσης

Σχεδιάστηκε με χρήση HTML, Sass και jQuery. Σύνδεση διεπαφής χρήστη es eνόμιμος και ξεκάθαρος σχετικά με το θέμα που δεν έχει λεπτές κινούμενες εικόνες για να γίνει ένα από τα αγαπημένα της λίστας.

Σύνδεση και δημιουργία λογαριασμού διεπαφής χρήστη

Εγγραφή σύνδεσης

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

Ανόητα λάθη

Απεχθής

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

Σύνδεση CSS HTML

CSS

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

Φόρμα σύνδεσης Modal

κεφάλαιο

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

Φόρμα flexbox

Flexbox

Ξεκινάμε τις φόρμες αναζήτησης με αυτό μορφή βασίζεται στο flexbox. Ξεχωρίζει για το κόκκινο χρώμα της «αναζήτησης» και για λίγο περισσότερο για ένα κομψό πεδίο αναζήτησης για τον ιστότοπό σας.

Κινούμενο κουτί

Κινούμενο κουτί

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

Πεδίο αναζήτησης

Πιέστε αναζήτηση

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

Απλό πεδίο αναζήτησης κάντε κλικ στο

Waze

Απλό πεδίο αναζήτησης κάντε κλικ στο βασίζεται σε μια αλληλεπίδραση που φαίνεται στο την εφαρμογή κοινότητας Waze Driver τροχαίος. Όλα τα εικονίδια και οι εικόνες γίνονται με CSS. Ξεχωρίζει για τα εικονίδια που μας επιτρέπουν να πραγματοποιούμε συγκεκριμένες αναζητήσεις για ένα προϊόν ή μια υπηρεσία. Εντυπωσιακό λόγω του πόσο δροσερό είναι.

Εφέ εισαγωγής κειμένου CSS

Εισαγωγή CSS

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

Αναζήτηση πλήρους οθόνης

Αναζήτηση πλήρους οθόνης

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

Αναζήτηση

Αναζήτηση

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

Καμία ερώτηση

Καμία ερώτηση

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

Αναδυόμενη φόρμα συνδρομής

Εγγραφή

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

UI πλαισίου συνδρομής

Συνδρομή

ένα κουτί συνδρομής με κουδούνι συναγερμού και λίγο περισσότερο από τα επίπεδα χρώματα Στο σχεδιασμό.

Κουτί συνδρομής CSS

Συνδρομή

ένα έξυπνο κουτί συνδρομής για το γεγονός του χρησιμοποιήστε ντεγκραντέ για το κουμπί εγγραφής όπως το μωβ απόχρωση του πεδίου.

Κουτί συνδρομής

Κουτί συνδρομής

ένα απλό κουτί συνδρομής αλλά με μεγάλο αποτέλεσμα από το σχεδιασμό.

Φόρμα επικύρωσης EMOJI

EMOJI

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

Μην το χάσετε αυτό λίστα με 23 κινούμενα βέλη στο CSS.


Το περιεχόμενο του άρθρου συμμορφώνεται με τις αρχές μας συντακτική ηθική. Για να αναφέρετε ένα σφάλμα κάντε κλικ Aquí.

Ένα σχόλιο, αφήστε το δικό σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Χουάν Χοσέ Περέζ dijo

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