Ξόδεψες εβδομάδες να στήσεις σωστά τα χρώματα, τις γραμματοσειρές και τις αποστάσεις της ιστοσελίδας σου. Μετά έβαλες μια φόρμα που μοιάζει να ήρθε από εντελώς άλλη ιστοσελίδα. Άλλη γραμματοσειρά, άλλο χρώμα κουμπιού, άλλο στυλ περιγράμματος. Οι επισκέπτες το προσέχουν, ακόμη κι αν δεν μπορούν να πουν τι τους ξενίζει.
Το στυλ της φόρμας είναι ο τρόπος να κλείσεις αυτό το κενό. Καλύπτει ό,τι είναι οπτικό στη φόρμα σου: μεγέθη πεδίων, γραμματοσειρές ετικετών, χρώματα κουμπιών, στρογγυλεμένες γωνίες, αποστάσεις ανάμεσα στα στοιχεία και πώς συμπεριφέρεται η φόρμα σε διαφορετικά μεγέθη οθόνης. Αν το κάνεις σωστά, η φόρμα μοιάζει φυσική για την ιστοσελίδα σου. Αν το κάνεις λάθος, τα ποσοστά ολοκλήρωσης πέφτουν.
Δες πώς στήνεις το στυλ των φορμών με οπτικά εργαλεία και CSS, και τι να βάλεις σε προτεραιότητα για το μεγαλύτερο αποτέλεσμα.
Τι είναι το στυλ φόρμας;
Το στυλ φόρμας είναι το σύνολο των οπτικών επιλογών που εφαρμόζονται στα στοιχεία μιας φόρμας ιστοσελίδας. Περιλαμβάνει την τυπογραφία για τις ετικέτες και το κείμενο των πεδίων, τα χρώματα για πεδία και κουμπιά, τις αποστάσεις ανάμεσα στις ομάδες της φόρμας, τα στυλ περιγραμμάτων, τις καταστάσεις εστίασης και την εμφάνιση των μηνυμάτων σφάλματος.
Κάθε στοιχείο της φόρμας μπορεί να πάρει στυλ: πεδία κειμένου, αναπτυσσόμενες λίστες, checkboxes, radio buttons, περιοχές μεταφόρτωσης αρχείων και κουμπιά υποβολής. Το ενιαίο στυλ σε όλα αυτά κάνει τη φόρμα συνεκτική και επαγγελματική.
Το στυλ της φόρμας είναι ξεχωριστό από τη δομή της. Μπορεί να έχεις καλά οργανωμένη φόρμα με απαίσιο στυλ, ή όμορφη φόρμα με μπερδεμένη σειρά πεδίων. Και τα δύο μετράνε, αλλά το στυλ είναι αυτό που κρίνουν οι επισκέπτες στο πρώτο δευτερόλεπτο.
Επιλογές στυλ χωρίς κώδικα
Τα περισσότερα εργαλεία φορμών έχουν οπτικό editor στυλ που σου επιτρέπει να προσαρμόζεις την εμφάνιση χωρίς CSS. Διαλέγεις χρώματα, γραμματοσειρές, στρογγυλεμένες γωνίες και στυλ κουμπιών από έναν πίνακα ρυθμίσεων. Οι αλλαγές φαίνονται σε πραγματικό χρόνο.
Ξεκίνα ταιριάζοντας τη φόρμα με το υπάρχον σχέδιο της ιστοσελίδας σου. Χρησιμοποίησε την ίδια οικογένεια γραμματοσειράς, το βασικό χρώμα για το κουμπί υποβολής και τις στρογγυλεμένες γωνίες που εμφανίζονται σε άλλα στοιχεία, όπως κάρτες ή κουμπιά σε όλη την ιστοσελίδα σου.
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Προσαρμογή με CSS για προχωρημένο έλεγχο
Όταν ο οπτικός editor δεν δίνει αρκετό έλεγχο, το CSS σου δίνει πλήρη εξουσία σε κάθε οπτική λεπτομέρεια. Το προσαρμοσμένο CSS στοχεύει συγκεκριμένα στοιχεία της φόρμας με ονόματα κλάσεων ή IDs που δημιουργεί το εργαλείο φορμών σου.
Συνηθισμένες προσαρμογές με CSS είναι η αλλαγή ύψους και padding των πεδίων, το στυλ των καταστάσεων εστίασης με χρωματιστή λάμψη στο περίγραμμα, η προσαρμογή του χρώματος του placeholder, ο σχεδιασμός δικής σου εμφάνισης για checkboxes και radio buttons και τα εφέ hover στο κουμπί υποβολής.
Αν χρησιμοποιείς προσαρμοσμένο CSS, κράτα αντίγραφο των προεπιλεγμένων στυλ. Οι παρακάμψεις CSS μπορεί να σπάσουν όταν τα εργαλεία φορμών αλλάζουν τη δομή HTML τους. Σημείωσε ποια στυλ άλλαξες και γιατί, ώστε οι μελλοντικές ενημερώσεις να μην σε ξαφνιάσουν.
Καλές πρακτικές στυλ φόρμας
Ταίριαξε την ιστοσελίδα σου, όχι μια τάση. Τα στρογγυλεμένα πεδία και τα κουμπιά με gradient φαίνονται μοντέρνα, αλλά μόνο αν ταιριάζουν με το υπάρχον σχέδιό σου. Η ιστοσελίδα ενός δικηγορικού γραφείου με παιχνιδιάρικο, πολύχρωμο στυλ φόρμας δημιουργεί παράξενη εμπειρία.
Κάνε το κουμπί υποβολής να ξεχωρίζει. Πρέπει να είναι το πιο εμφανές στοιχείο της φόρμας. Χρησιμοποίησε το βασικό χρώμα της επιχείρησής σου, κάν' το πλήρους πλάτους στο κινητό και δώσε του αρκετό padding για να πατιέται εύκολα.
Κράτα τις ετικέτες ορατές. Το placeholder δεν αντικαθιστά τις ετικέτες. Οι ετικέτες με στυλ πάνω από κάθε πεδίο βελτιώνουν την προσβασιμότητα και μειώνουν τα λάθη. Αν χρησιμοποιείς ετικέτες που επιπλέουν, δοκίμασε ότι παραμένουν ευανάγνωστες όταν το πεδίο έχει εστίαση και είναι συμπληρωμένο.
Δώσε καθαρό στυλ στις καταστάσεις σφάλματος. Κόκκινα περιγράμματα, κόκκινο κείμενο ή ένα εικονίδιο δίπλα στα άκυρα πεδία βοηθούν τους επισκέπτες να διορθώσουν γρήγορα τα λάθη. Το διακριτικό στυλ σφάλματος περνά απαρατήρητο και οι επισκέπτες εγκαταλείπουν τη φόρμα απογοητευμένοι.
Δοκίμασε στο κινητό. Μια φόρμα που φαίνεται άψογη στον υπολογιστή μπορεί να χαλάσει στο κινητό αν τα πλάτη των πεδίων, τα μεγέθη γραμματοσειράς ή η θέση των κουμπιών δεν είναι responsive. Σχεδίασε με το κινητό ως βασικό καμβά, όχι ως δεύτερη σκέψη.
Συνηθισμένα λάθη στο στυλ φόρμας
Η χρήση του προεπιλεγμένου στυλ του εργαλείου φορμών χωρίς προσαρμογή είναι το πιο συνηθισμένο λάθος. Τα προεπιλεγμένα στυλ είναι φτιαγμένα να είναι γενικά, που σημαίνει ότι σπάνια ταιριάζουν με την επιχείρησή σου. Ξόδεψε δέκα λεπτά στις ρυθμίσεις στυλ και η φόρμα φαίνεται αμέσως πιο επαγγελματική.
Βλάπτει και το υπερβολικό στυλ. Οι υπερβολικές σκιές, τα animations και τα διακοσμητικά στοιχεία αποσπούν την προσοχή από τον σκοπό της φόρμας. Οι επισκέπτες είναι εδώ για να στείλουν πληροφορίες, όχι για να θαυμάσουν σχεδιαστικά στολίδια. Το καθαρό και σαφές νικά το έξυπνο και φορτωμένο.
Η αγνόηση των καταστάσεων εστίασης δημιουργεί προβλήματα προσβασιμότητας. Οι επισκέπτες που πλοηγούνται με πληκτρολόγιο χρειάζονται ορατούς δείκτες εστίασης σε κάθε πεδίο. Αφαίρεσε το προεπιλεγμένο περίγραμμα του browser μόνο αν το αντικαταστήσεις με δικό σου στυλ εστίασης.
Το στυλ της φόρμας είναι ο πιο γρήγορος τρόπος να βελτιώσεις το πώς βλέπουν οι επισκέπτες τις φόρμες σου. Ταίριαξε την επιχείρησή σου, τόνισε το κουμπί υποβολής και δοκίμασε σε κάθε μέγεθος οθόνης. Η οπτική φροντίδα δείχνει ότι η επιχείρησή σου προσέχει τις λεπτομέρειες.
Συχνές ερωτήσεις
Πρέπει να ξέρω CSS για να δώσω στυλ στις φόρμες;
Όχι. Τα σύγχρονα εργαλεία φορμών έχουν οπτικούς editors στυλ που χειρίζονται χρώματα, γραμματοσειρές, αποστάσεις και σχεδιασμό κουμπιών χωρίς κώδικα. Το CSS είναι διαθέσιμο όταν χρειάζεσαι έλεγχο στο επίπεδο του pixel, αλλά οι περισσότερες επιχειρήσεις πετυχαίνουν επαγγελματικό αποτέλεσμα μόνο με τις οπτικές ρυθμίσεις.
Θα χαλάσει το προσαρμοσμένο CSS τη λειτουργία της φόρμας μου;
Το CSS αλλάζει μόνο την εμφάνιση και δεν επηρεάζει το πώς η φόρμα συλλέγει ή υποβάλλει δεδομένα. Ο κίνδυνος είναι οπτικός: υπερβολικά επιθετικό CSS μπορεί να κρύψει πεδία, να χαλάσει τις διατάξεις στο κινητό ή να κάνει αόρατα τα μηνύματα σφάλματος. Δοκίμαζε μετά από κάθε αλλαγή CSS σε διάφορα μεγέθη οθόνης.
Πώς ταιριάζω τη φόρμα μου με την εικόνα της επιχείρησής μου;
Πάρε τα χρώματα, την οικογένεια γραμματοσειράς και τις στρογγυλεμένες γωνίες της επιχείρησής σου από τα υπάρχοντα στυλ της ιστοσελίδας σου. Εφάρμοσέ τα στα πεδία, στις ετικέτες και στο κουμπί υποβολής. Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου.
Πρέπει τα πεδία φόρμας να έχουν περίγραμμα ή να είναι χωρίς περίγραμμα;
Και τα δύο δουλεύουν όταν εφαρμόζονται με συνέπεια. Τα πεδία με περίγραμμα είναι η πιο ασφαλής προεπιλογή, γιατί δείχνουν καθαρά πού να γράψεις. Τα πεδία χωρίς περίγραμμα, με γραμμή μόνο στο κάτω μέρος, φαίνονται μοντέρνα αλλά μπορεί να μπερδέψουν τους επισκέπτες για το πού αρχίζει η περιοχή εισαγωγής. Διάλεξε ένα στυλ και εφάρμοσέ το σε κάθε πεδίο.
Πώς επηρεάζει το στυλ της φόρμας τα ποσοστά μετατροπής;
Μια φόρμα με επαγγελματική εμφάνιση χτίζει εμπιστοσύνη και ενθαρρύνει την ολοκλήρωση. Ένας ασύμβατος ή ξεπερασμένος σχεδιασμός φόρμας δημιουργεί αμφιβολία για το αν η υποβολή είναι ασφαλής ή αν θα απαντήσει κανείς. Το στυλ μόνο του δεν διορθώνει μια κακή δομή φόρμας, αλλά το κακό στυλ μπορεί να υπονομεύσει μια καλοφτιαγμένη φόρμα.
Μπορώ να χρησιμοποιήσω διαφορετικά στυλ για διαφορετικές φόρμες στην ίδια ιστοσελίδα;
Μπορείς, αλλά κράτα συνεπή τα βασικά στοιχεία. Η ίδια γραμματοσειρά, το ίδιο χρώμα κουμπιού και το ίδιο στυλ πεδίων πρέπει να εμφανίζονται σε όλες τις φόρμες. Μπορεί να προσαρμόσεις το κείμενο του κουμπιού υποβολής ή το πλάτος της φόρμας για συγκεκριμένες χρήσεις, αλλά η οπτική γλώσσα πρέπει να μοιάζει με μία επιχείρηση.