Δοκιμάζεις τη φόρμα σου στον υπολογιστή και φαίνεται τέλεια. Πλήρες πλάτος, δύο στήλες, άνετη. Κάνεις μια δοκιμαστική υποβολή στο κινητό και καταλαβαίνεις αμέσως ότι κάτι δεν πάει καλά. Τα πεδία είναι μικροσκοπικά. Το πληκτρολόγιο καλύπτει το μισό της φόρμας. Πατάς λάθος πεδίο. Όλη η εμπειρία μοιάζει χαλασμένη.
Οι μισοί επισκέπτες σου είναι σε κινητό. Αν η φόρμα σου δεν είναι responsive, χάνεις τις μισές υποβολές. Σε αυτό το άρθρο θα δεις πώς σχεδιάζεις φόρμες που δουλεύουν σε κινητά, tablet και υπολογιστές.
Οι φόρμες κινητού διαφέρουν από τις φόρμες υπολογιστή
Οι χρήστες κινητού συμπληρώνουν φόρμες αλλιώς από τους χρήστες υπολογιστή. Στον υπολογιστή έχεις χώρο. Μπορείς να χρησιμοποιήσεις διατάξεις πολλών στηλών. Μπορείς να βάλεις ετικέτες δίπλα στα πεδία. Στο κινητό, μετράει κάθε pixel.
Τα πληκτρολόγια των κινητών είναι τεράστια. Όταν ανοίγει το πληκτρολόγιο, καλύπτει το μισό της οθόνης. Η φόρμα σου κυλά. Ο χρήστης χάνει το πλαίσιο. Ένα κουμπί που φαινόταν τώρα κρύβεται πίσω από το πληκτρολόγιο.
Οι περιοχές αφής πρέπει να είναι μεγαλύτερες. Μια περιοχή που πατιέται και έχει 14 επί 14 pixels δουλεύει μια χαρά με ποντίκι. Ένα δάχτυλο χρειάζεται τουλάχιστον 48 επί 48 pixels, αλλιώς ο χρήστης θα αστοχήσει.
Οι χρήστες κινητού έχουν συχνά ασταθές δίκτυο. Κάθε επιπλέον φόρτωση φόρμας ή εικόνα προσθέτει χρόνο. Η ταχύτητα μετράει περισσότερο απ' ό,τι στον υπολογιστή.
Η διάταξη φόρμας με μία στήλη
Η πιο ασφαλής responsive φόρμα έχει μία στήλη. Ένα πεδίο ανά γραμμή, όποιο κι αν είναι το μέγεθος της οθόνης.
Οι διατάξεις μίας στήλης είναι απλές, δουλεύουν σε όλες τις οθόνες, δίνουν σταθερή εμπειρία και είναι πολύ προβλέψιμες. Το βασικό μειονέκτημα είναι ότι οι φόρμες φαίνονται μακρύτερες στον υπολογιστή και θέλουν περισσότερο κύλισμα.
Οι περισσότερες φόρμες πρέπει να έχουν μία στήλη. Αν η φόρμα σου έχει πέντε πεδία, η μία στήλη είναι στην πραγματικότητα πιο σύντομη από διάταξη δύο στηλών στον υπολογιστή. Ο χρήστης κυλά λιγότερο και βλέπει περισσότερο πλαίσιο.
Για να φτιάξεις διάταξη μίας στήλης, χρησιμοποίησε input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Αυτό στοιβάζει τα πάντα κάθετα σε κάθε breakpoint.
Δύο στήλες στον υπολογιστή, μία στήλη στο κινητό
Αν θέλεις να χρησιμοποιήσεις τον οριζόντιο χώρο σε μεγάλες οθόνες, χρησιμοποίησε grid με .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } και ένα media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Στον υπολογιστή αυτό φτιάχνει δύο στήλες και στο κινητό στοιβάζεται σε μία, κρατώντας τη διάταξη απλή και responsive.
Ομάδοποίησε μόνο πεδία που σχετίζονται πραγματικά. Τα πεδία «Όνομα» και «Επώνυμο» το ένα δίπλα στο άλλο έχουν νόημα. Τα πεδία «Διεύθυνση» και «Χώρα» το ένα δίπλα στο άλλο δεν έχουν.
Περιοχές αφής και σχεδιασμός για δάχτυλα
Η ελάχιστη περιοχή αφής στο κινητό είναι 44 επί 44 pixels (σύμφωνα με την Apple) ή 48 επί 48 pixels (Android). Στόχευσε τουλάχιστον 44.
Το μέγεθος περιοχής αφής ισχύει για τα πεδία εισαγωγής, που πρέπει να είναι αρκετά ψηλά για να πατιούνται εύκολα (40 έως 50 pixels είναι καλό), για τα checkboxes και radio buttons, που από προεπιλογή είναι 13 επί 13 pixels και πρέπει να μεγαλώσουν τουλάχιστον σε 44 επί 44 με CSS ή JavaScript, για τα κουμπιά, που πρέπει να είναι τουλάχιστον 44 επί 44 pixels με επιπλέον padding, και για τις ετικέτες, που πρέπει επίσης να είναι 44 επί 44 pixels αν πατιούνται μέσω του χαρακτηριστικού for. Μερικές φορές η ετικέτα και το πεδίο μαζί φτιάχνουν ολόκληρη την περιοχή αφής.
Για να κάνεις τα πεδία μεγαλύτερα και πιο εύκολα στο πάτημα, χρησιμοποίησε input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Το padding κάνει το πεδίο ψηλότερο και βελτιώνει το πάτημα.
Χειρισμός πληκτρολογίου
Στο κινητό, το πληκτρολόγιο του browser καλύπτει το κάτω μισό της οθόνης. Αν η φόρμα σου είναι στο κάτω μέρος της σελίδας, το κουμπί υποβολής κρύβεται. Ο χρήστης πρέπει να κυλήσει προς τα κάτω ή να κλείσει το πληκτρολόγιο για να δει το κουμπί.
Κράτα τη φόρμα κοντά στην κορυφή της σελίδας. Ή βάλε το κουμπί υποβολής και στην κορυφή και στο κάτω μέρος. Μην κρύβεις κρίσιμα κουμπιά κάτω από το πληκτρολόγιο.
Μετράει και ο τύπος πληκτρολογίου. Για πεδίο email, χρησιμοποίησε <input type="email"> για να εμφανίζεται πληκτρολόγιο email με πλήκτρο @. Για πεδίο τηλεφώνου, χρησιμοποίησε <input type="tel"> για να εμφανίζεται αριθμητικό πληκτρολόγιο. Για αριθμητική εισαγωγή, χρησιμοποίησε <input type="number"> για να εμφανίζεται πληκτρολόγιο αριθμών. Με τον σωστό τύπο πεδίου, ο browser διαλέγει μόνος του το πληκτρολόγιο.
Όταν ο χρήστης πατά ένα πεδίο, ο browser κυλά το πεδίο στο οπτικό πεδίο. Αυτό είναι καλό. Το πεδίο φαίνεται όταν χρειάζεται να γράψει. Μερικές φορές όμως μπορεί να προσπεράσει άλλο πλαίσιο. Δοκίμασε τη φόρμα σε πραγματικό κινητό για να δεις τη συμπεριφορά.
Θέση των ετικετών στο κινητό
Στον υπολογιστή, οι ετικέτες μπορούν να είναι πάνω, δίπλα ή μέσα στα πεδία. Στο κινητό, πάνω είναι σχεδόν πάντα το καλύτερο.
Μια ετικέτα πάνω από το πεδίο είναι καθαρή. Ο χρήστης βλέπει την ετικέτα και μετά το πεδίο. Σε στενή οθόνη, μια ετικέτα δίπλα στο πεδίο σπαταλά οριζόντιο χώρο. Ένα placeholder μέσα στο πεδίο εξαφανίζεται μόλις αρχίσεις να γράφεις.
Καλή πρακτική: βάλε τις ετικέτες πάνω από τα πεδία. Πάντα.
<label for="email">Email</label>
<input type="email" id="email">
Αποστάσεις και padding
Οι responsive φόρμες χρειάζονται περισσότερο διάστημα στο κινητό, όχι λιγότερο. Το ένστικτό σου είναι να συμπιέσεις τα πάντα για να χωρέσουν στην οθόνη. Πολέμησε αυτό το ένστικτο.
Χρησιμοποίησε γενναιόδωρο padding και margins: τουλάχιστον 1rem (16 pixels) ανάμεσα στα πεδία, τουλάχιστον 0,75rem (12 pixels) σε όλες τις πλευρές για το padding των πεδίων και τουλάχιστον 1rem (16 pixels) σε όλες τις πλευρές για το padding των κουμπιών. Το γενναιόδωρο διάστημα κάνει τις φόρμες πιο εύκολες, μειώνει τα λάθος πατήματα, βελτιώνει την αναγνωσιμότητα και στο κινητό ο χώρος που αναπνέει αξίζει περισσότερο από τον χώρο της οθόνης.
Μέγεθος κειμένου στο κινητό
Χρησιμοποίησε τουλάχιστον 16 pixels στα πεδία. Μικρότερο κείμενο αναγκάζει τους χρήστες να κάνουν zoom ή να στραβώνουν τα μάτια. Τα 16 pixels είναι η προεπιλογή και δουλεύει.
Οι ετικέτες μπορούν να είναι μικρότερες, γύρω στα 14 pixels. Τα πεδία όμως πρέπει να είναι τουλάχιστον 16 pixels.
Μερικοί browsers κάνουν αυτόματο zoom όταν πατάς πεδίο μικρότερο από 16 pixels, με αποτέλεσμα η φόρμα να πηδά και να μεγεθύνεται απροσδόκητα. Χρησιμοποίησε input { font-size: 16px; } για να το αποφύγεις.
Συνηθισμένα λάθη στις responsive φόρμες
Διάταξη δύο στηλών σε όλα τα μεγέθη οθόνης
Οι φόρμες στριμώχνονται στο κινητό. Τα πεδία είναι μικροσκοπικά. Οι ετικέτες στοιβάζονται άχαρα. Στοίβαζε πάντα σε μία στήλη στα μικρότερα breakpoints.
Πολύ μικρές περιοχές αφής
Τα checkboxes, τα radio buttons και τα κουμπιά πρέπει να είναι τουλάχιστον 44 επί 44 pixels. Δοκίμασε σε πραγματικό κινητό. Αν πρέπει να συγκεντρωθείς για να το πατήσεις, είναι πολύ μικρό.
Το placeholder ως μοναδική ετικέτα
Όταν ο χρήστης αρχίζει να γράφει, το placeholder εξαφανίζεται. Ξεχνά σε τι χρησιμεύει το πεδίο. Χρησιμοποίησε πάντα σωστό στοιχείο label. Κράτα το placeholder αν θες, αλλά μην βασίζεσαι ποτέ μόνο σε αυτό.
Η φόρμα στο κάτω μέρος μιας μεγάλης σελίδας
Ο χρήστης κυλά προς τα κάτω σε μια φόρμα επικοινωνίας, πατά το πεδίο email και το πληκτρολόγιο του κινητού καλύπτει τη φόρμα. Δεν βλέπει τι γράφει ούτε φτάνει το κουμπί υποβολής. Βάλε τις φόρμες κοντά στην κορυφή ή φρόντισε να χωρούν στην οθόνη μαζί με το πληκτρολόγιο.
Δεν δοκιμάζεις σε πραγματικά κινητά
Ο browser του υπολογιστή σου έχει προβολή κινητού. Είναι χρήσιμη για γρήγορο έλεγχο. Δεν δείχνει όμως πώς δουλεύει πραγματικά η φόρμα σε κινητό. Δοκίμασε σε πραγματικές συσκευές. Δανείσου ένα κινητό αν δεν έχεις.
Τεχνικές για responsive φόρμες
CSS Grid για ευέλικτες διατάξεις
Χρησιμοποίησε .form-group { display: grid; gap: 0.5rem; } και .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Οι τιμές auto-fit και minmax φτιάχνουν διάταξη που ρέει ανάλογα με τον διαθέσιμο χώρο, ώστε τα πεδία να στοιβάζονται σε στενά πλάτη και να μπαίνουν δίπλα δίπλα σε φαρδιά.
Flexbox για διατάξεις κουμπιών
Χρησιμοποίησε .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } και .form-actions button { flex: 1; min-width: 150px; }. Τα κουμπιά μπαίνουν δίπλα δίπλα στον υπολογιστή, αναδιπλώνονται σε πολλές γραμμές στο κινητό και κάθε κουμπί μεγαλώνει να γεμίσει τον διαθέσιμο χώρο.
Media queries για συγκεκριμένα breakpoints
Χρησιμοποίησε @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } για να επιβάλεις διάταξη μίας στήλης σε οθόνες μικρότερες από 480 pixels.
Το WEMASY και οι φόρμες σε κάθε μέγεθος οθόνης
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Δες τα διαθέσιμα πακέτα WEMASY.