Φόρμες σύνδεσης και επαναφοράς κωδικού: τι να περιλαμβάνουν και πώς προστατεύουν τους χρήστες

Ένας επισκέπτης φτάνει στην ιστοσελίδα σου και πατά «Σύνδεση». Περιμένει μια ομαλή εμπειρία σύνδεσης. Αντί γι' αυτό, πέφτει πάνω σε μια φόρμα που τον εκνευρίζει. Οι απαιτήσεις για τον κωδικό κρύβονται μέχρι να υποβάλει. Το πεδίο του κωδικού είναι μικρό και δύσκολο στην πληκτρολόγηση. Δεν υπάρχει επιλογή «Εμφάνιση κωδικού», οπότε δεν μπορεί να ελέγξει τι έγραψε. Βάζει λάθος κωδικό. Πατά «Ξέχασα τον κωδικό» και καταλήγει σε μια μπερδεμένη ροή επαναφοράς. Λίγα λεπτά μετά τα παρατάει και δεν ξαναγυρίζει.

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

Ποια πεδία χρειάζεται μια φόρμα σύνδεσης;

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

Το πεδίο email

Χρησιμοποίησε email, όχι όνομα χρήστη. Το email είναι πιο απλό. Οι χρήστες ξεχνούν τα ονόματα χρήστη. Δεν ξεχνούν τη διεύθυνση email τους. Κάνε αυτό το πεδίο να δέχεται διεύθυνση email και ονόμασέ το καθαρά «Διεύθυνση email». Χρησιμοποίησε το HTML `type="email"` ώστε τα πληκτρολόγια των κινητών να δείχνουν το σύμβολο @ και ο έλεγχος του email να γίνεται αυτόματα. Στο χαρακτηριστικό HTML πρόσθεσε `autocomplete="username"` ώστε οι browsers και οι διαχειριστές κωδικών να ξέρουν ότι εδώ μπαίνει το αναγνωριστικό σύνδεσης και να το συμπληρώνουν αυτόματα για χρήστες που έχουν αποθηκευμένα στοιχεία.

Το πεδίο κωδικού

Χρησιμοποίησε `type="password"` ώστε το κείμενο να κρύβεται. Πρόσθεσε `id="current-password"` και `autocomplete="current-password"` ώστε οι διαχειριστές κωδικών να αναγνωρίζουν αυτό το πεδίο και να συμπληρώνουν τους αποθηκευμένους κωδικούς. Επίτρεψε την επικόλληση. Οι ειδικοί ασφάλειας συμφωνούν ότι η απενεργοποίηση της επικόλλησης στα πεδία κωδικού δεν εμποδίζει επιθέσεις. Απλώς ενοχλεί όσους χρησιμοποιούν διαχειριστές κωδικών.

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

Διακόπτης εμφάνισης κωδικού

Πρόσθεσε έναν διακόπτη «Εμφάνιση κωδικού» ή «Αποκάλυψη κωδικού» (συνήθως ένα εικονίδιο ματιού ή ένα checkbox). Όταν ενεργοποιείται, το πεδίο κωδικού αλλάζει σε `type="text"` ώστε οι χρήστες να βλέπουν τι έγραψαν. Δεν είναι κίνδυνος ασφάλειας. Είναι ένα χαρακτηριστικό ευχρηστίας που μειώνει τα λάθη υποβολής και τον εκνευρισμό. Οι χρήστες πληκτρολογούν τους κωδικούς προσεκτικά και θέλουν να τους ελέγξουν πριν πατήσουν υποβολή.

Checkbox «Να με θυμάσαι» (προαιρετικό αλλά προτεινόμενο)

Ένα checkbox «Να με θυμάσαι σε αυτή τη συσκευή» ή «Να μένω συνδεδεμένος» είναι προαιρετικό, αλλά βελτιώνει την εμπειρία. Όταν είναι τικαρισμένο, η συνεδρία διαρκεί περισσότερο ή ο browser αποθηκεύει (με ασφάλεια) ένα μόνιμο διακριτικό σύνδεσης. Έτσι οι χρήστες δεν χρειάζεται να συνδέονται κάθε φορά που επισκέπτονται την ιστοσελίδα. Για λογαριασμούς χαμηλού κινδύνου, αυτό είναι ασφαλές. Για λογαριασμούς υψηλής ασφάλειας (οικονομικοί, υγείας, πίνακες διαχείρισης), παράλειψέ το ή ζήτα ξανά ταυτοποίηση για ευαίσθητες ενέργειες.

Αν βάλεις checkbox «Να με θυμάσαι», πες καθαρά τι κάνει. Το «Να με θυμάσαι για 30 ημέρες» είναι πιο σαφές από ένα απλό «Να με θυμάσαι».

Σύνδεσμος «Ξέχασα τον κωδικό»

Τοποθέτησε έναν σύνδεσμο «Ξέχασες τον κωδικό;» ακριβώς κάτω από το πεδίο κωδικού ή δεξιά του. Δεν είναι προαιρετικός. Οι χρήστες ξεχνούν κωδικούς. Δώσε μια εμφανή διαδρομή για επαναφορά. Αν δεν βρίσκουν τον σύνδεσμο, φεύγουν από την ιστοσελίδα και ίσως δεν ξαναγυρίσουν ποτέ.

Πώς πρέπει να δουλεύει μια φόρμα επαναφοράς κωδικού;

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

Βήμα ένα: Ζήτα το email για επαλήθευση

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

Το κουμπί πρέπει να λέει κάτι σαφές και προσανατολισμένο στη δράση. Το «Στείλε σύνδεσμο επαναφοράς» ή το «Πάρε οδηγίες επαναφοράς» λέει τι θα γίνει μετά. Το «Υποβολή» είναι ασαφές.

Βήμα δύο: Στείλε τον σύνδεσμο επαναφοράς με email

Όταν υποβάλουν το email τους, το σύστημά σου στέλνει αμέσως ένα email επαναφοράς κωδικού. Το email πρέπει να φτάνει μέσα σε δευτερόλεπτα, όχι λεπτά. Η ταχύτητα μετράει. Αν το email αργεί 10 λεπτά, οι χρήστες υποθέτουν ότι δεν δούλεψε και ξαναπροσπαθούν ή, χειρότερα, φεύγουν.

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

Βήμα τρία: Επαλήθευσε τον σύνδεσμο και δείξε τη φόρμα επαναφοράς κωδικού

Όταν πατήσουν τον σύνδεσμο επαναφοράς στο email, φτάνουν στη φόρμα επαναφοράς κωδικού. Η σελίδα πρέπει να επιβεβαιώνει καθαρά τι συμβαίνει: «Επαναφορά κωδικού» ή «Δημιούργησε νέο κωδικό». Να μην υπάρχει σύγχυση αν βρίσκονται στο σωστό μέρος.

Δείξε τη διεύθυνση email για την οποία γίνεται η επαναφορά. «Επαναφέρεις τον κωδικό για το example@email.com.» Έτσι τους καθησυχάζεις ότι επαναφέρουν τον σωστό λογαριασμό.

Βήμα τέσσερα: Δήλωσε καθαρά τις απαιτήσεις του κωδικού πριν υποβάλουν

Εμφάνισε τις απαιτήσεις του κωδικού στη φόρμα επαναφοράς ΠΡΙΝ προσπαθήσουν να υποβάλουν. Μην τους αφήνεις να μαντεύουν. «Ο κωδικός σου πρέπει να έχει τουλάχιστον 12 χαρακτήρες, ένα κεφαλαίο γράμμα, έναν αριθμό και έναν ειδικό χαρακτήρα.» Γίνε συγκεκριμένος. Δείξε παραδείγματα για το τι γίνεται δεκτό.

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

Βήμα πέντε: Πεδίο κωδικού και επιβεβαίωση

Ζήτα έναν νέο κωδικό. Μετά ζήτα να τον επιβεβαιώσουν πληκτρολογώντας τον ξανά. Αυτό το βήμα επιβεβαίωσης πιάνει τα λάθη πληκτρολόγησης. Το μειονέκτημα είναι ότι ένα πεδίο επιβεβαίωσης προσθέτει τριβή. Έρευνες δείχνουν ότι η αφαίρεση του πεδίου επιβεβαίωσης κωδικού αυξάνει τα ποσοστά ολοκλήρωσης. Αν το κρατήσεις, βάλε και στα δύο πεδία διακόπτη «Αποκάλυψη κωδικού» ώστε να ελέγξουν ότι ταιριάζουν και τα δύο πριν υποβάλουν.

Βήμα έξι: Άμεση επιβεβαίωση και επόμενα βήματα

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

Στείλε τους επίσης ένα email επιβεβαίωσης. «Ο κωδικός σου επαναφέρθηκε πρόσφατα. Αν δεν το έκανες εσύ, πάτα εδώ για να ασφαλίσεις τον λογαριασμό σου.» Έτσι τους ειδοποιείς αν κάποιος άλλος επανέφερε τον κωδικό τους και τους δίνεις τρόπο να το αναιρέσουν.

Πού μπαίνουν οι φόρμες σύνδεσης στην ιστοσελίδα σου;

Οι φόρμες σύνδεσης δεν είναι διακοσμητικές. Πρέπει να βρίσκονται χωρίς ψάξιμο.

Κεφαλίδα ή μενού πλοήγησης

Το πιο ορατό σημείο είναι η κεφαλίδα. Ένας σύνδεσμος (ή κουμπί) «Σύνδεση» πάνω δεξιά στην ιστοσελίδα σου είναι εκεί που τον περιμένουν οι χρήστες. Όταν τον πατήσουν, πήγαινέ τους σε ειδική σελίδα σύνδεσης ή άνοιξε ένα modal με τη φόρμα σύνδεσης. Οι χρήστες κινητού περιμένουν την επιλογή σύνδεσης στο μενού με τις τρεις γραμμές. Μην την κρύβεις ποτέ πίσω από στρώματα πλοήγησης.

Ειδική σελίδα σύνδεσης

Φτιάξε μια ειδική σελίδα `/login` ή `/sign-in`. Αυτή η σελίδα περιέχει τη φόρμα σύνδεσης και τίποτα άλλο. Χωρίς άρθρα blog. Χωρίς διαφημιστικό κείμενο. Μόνο η φόρμα και όποιο κείμενο βοήθειας χρειάζεται. Μια καθαρή, εστιασμένη σελίδα μετατρέπει καλύτερα από το να ενσωματώσεις τη φόρμα σύνδεσης σε μια γενική σελίδα.

Σελίδα επαναφοράς κωδικού

Η φόρμα επαναφοράς κωδικού πρέπει να βρίσκεται σε ειδικό URL όπως `/reset-password` ή `/forgot-password`. Αυτή η σελίδα είναι προσβάσιμη μόνο από τη φόρμα σύνδεσης ή από έναν σύνδεσμο στο email επαναφοράς. Δεν πρέπει να ευρετηριάζεται από τις μηχανές αναζήτησης. Πρόσθεσε `noindex` σε αυτή τη σελίδα στο HTML ή στο robots.txt ώστε η Google να μην προσπαθήσει να την κατατάξει.

Συνηθισμένα λάθη στον σχεδιασμό φορμών σύνδεσης

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

Πάρα πολλά πεδία πριν τη σύνδεση

Ορισμένες ιστοσελίδες ζητούν όνομα χρήστη, email, τηλέφωνο και απάντηση ασφαλείας στην ίδια τη φόρμα σύνδεσης. Μην το κάνεις. Η σύνδεση δεν είναι εγγραφή. Ζήτα μόνο email και κωδικό. Όλα τα άλλα είναι επιπλέον τριβή.

Κρυμμένες ή ασαφείς απαιτήσεις κωδικού

Αν οι απαιτήσεις του κωδικού κρύβονται μέχρι την υποβολή, οι χρήστες εκνευρίζονται. Γράφουν έναν κωδικό. Πατούν υποβολή. Εμφανίζεται σφάλμα: «Ο κωδικός πρέπει να έχει 12 χαρακτήρες και έναν αριθμό.» Τώρα πρέπει να ξαναπροσπαθήσουν. Δείξε τις απαιτήσεις από την αρχή.

Καμία επιλογή εμφάνισης κωδικού

Οι χρήστες δεν βλέπουν τι έγραψαν. Υποβάλλουν. Κάνουν λάθος. Ξαναπροσπαθούν. Ξανακάνουν λάθος. Ένας απλός διακόπτης γλιτώνει αυτόν τον εκνευρισμό.

Μπερδεμένα μηνύματα σφάλματος

Μην πεις ποτέ στους χρήστες «Μη έγκυρη σύνδεση». Δεν βοηθά. Χρησιμοποιούν λάθος email; Λάθος κωδικό; Ο λογαριασμός δεν έχει ενεργοποιηθεί; Γίνε συγκεκριμένος. Το «Δεν βρέθηκε λογαριασμός για αυτή τη διεύθυνση email» ή το «Ο κωδικός είναι λάθος» τους λέει τι να διορθώσουν. Ή, αν θέλεις να είσαι αόριστος για λόγους ασφαλείας, δώσε τους μια διαδρομή ανάκτησης. «Το email και ο κωδικός δεν ταιριάζουν. Δοκίμασε ξανά ή επανάφερε τον κωδικό σου.»

Ο σύνδεσμος επαναφοράς λήγει πολύ γρήγορα

Ένας σύνδεσμος επαναφοράς που λήγει σε 15 λεπτά εκνευρίζει τους χρήστες. Ελέγχουν το email τους μετά τη δουλειά. Ο σύνδεσμος έχει πεθάνει. Πρέπει να ξεκινήσουν από την αρχή. Δώσε τους τουλάχιστον 24 ώρες.

Η ροή επαναφοράς στέλνει σε μπερδεμένη σελίδα

Ορισμένες ροές επαναφοράς στέλνουν τους χρήστες σε μια σελίδα που δεν λέει καθαρά τι να κάνουν. Πατούν τον σύνδεσμο επαναφοράς. Καταλήγουν σε μια σελίδα με ασαφές κείμενο και χωρίς φόρμα. Νομίζουν ότι κάτι πήγε στραβά. Κάνε το προφανές. «Επαναφορά κωδικού για το example@email.com» με ένα πεδίο κωδικού και ένα κουμπί υποβολής.

Θέματα ασφάλειας για τη σύνδεση και την επαναφορά κωδικού

Μια φόρμα σύνδεσης είναι κρίσιμο για την ασφάλεια κομμάτι της ιστοσελίδας σου. Προστάτεψέ τη σωστά.

Χρησιμοποίησε HTTPS για κάθε κίνηση σύνδεσης

Η σελίδα σύνδεσής σου πρέπει να σερβίρεται μέσω HTTPS, όχι HTTP. Το HTTPS κρυπτογραφεί τα δεδομένα κατά τη μεταφορά, ώστε οι χάκερ να μην διαβάζουν το email και τον κωδικό καθώς ταξιδεύουν προς τον διακομιστή σου. Αυτό δεν διαπραγματεύεται. Αν η ιστοσελίδα σου δεν έχει πιστοποιητικό SSL, πάρε ένα. Οι περισσότεροι πάροχοι φιλοξενίας δίνουν πλέον δωρεάν πιστοποιητικά SSL.

Έλεγξε την ισχύ του κωδικού στον διακομιστή

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

Κάνε hash και salt στους κωδικούς στη βάση δεδομένων σου

Μην αποθηκεύεις ποτέ κωδικούς ως απλό κείμενο. Χρησιμοποίησε έναν ασφαλή αλγόριθμο hashing (όπως bcrypt ή Argon2) με salt. Ακόμα κι αν κάποιος παραβιάσει τη βάση δεδομένων σου, δεν μπορεί να διαβάσει τους κωδικούς. Ένας σωστά κατακερματισμένος κωδικός δεν μπορεί να αντιστραφεί στον αρχικό κωδικό.

Περιόρισε τις απόπειρες σύνδεσης

Αν κάποιος προσπαθήσει να συνδεθεί 10 φορές μέσα σε ένα λεπτό, μπλόκαρέ τον. Ο περιορισμός ρυθμού αποτρέπει επιθέσεις ωμής βίας, όπου οι χάκερ δοκιμάζουν χιλιάδες συνδυασμούς κωδικών. Μετά από μερικές αποτυχημένες απόπειρες, κάνε παύση 15 λεπτών πριν επιτρέψεις περισσότερες δοκιμές.

Κάνε τα διακριτικά επαναφοράς κωδικού να λήγουν γρήγορα

Ένα διακριτικό επαναφοράς κωδικού που ισχύει για 24 ώρες είναι το σύνηθες. Διακριτικά που ισχύουν για 7 ημέρες ή περισσότερο αυξάνουν τον κίνδυνο ένας παραβιασμένος λογαριασμός email να οδηγήσει σε παραβιασμένο λογαριασμό στην ιστοσελίδα σου. Κράτα τα διακριτικά βραχύβια.

Κατάγραψε τη δραστηριότητα σύνδεσης για τον εντοπισμό απάτης

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

Φόρμες σύνδεσης στο κινητό: τι αλλάζει;

Το κινητό αλλάζει τον τρόπο που πρέπει να δουλεύουν οι φόρμες σύνδεσης.

Περιοχές αφής και μέγεθος κουμπιών

Στο κινητό, τα δάχτυλα δεν είναι τόσο ακριβή όσο ο κέρσορας. Τα κουμπιά και τα πεδία εισαγωγής πρέπει να είναι μεγαλύτερα. Το κουμπί υποβολής πρέπει να έχει ύψος τουλάχιστον 44 pixel. Τα πεδία εισαγωγής πρέπει να είναι αρκετά ψηλά για άνετη πληκτρολόγηση. Στόχευσε σε ύψος 44 έως 48 pixel.

Πληκτρολόγια κινητού και τύποι πεδίων

Χρησιμοποίησε `type="email"` για το πεδίο email. Αυτό λέει στις συσκευές κινητού να δείξουν το πληκτρολόγιο email με τα σύμβολα @ και . . Χωρίς αυτό, οι χρήστες πρέπει να αλλάξουν λειτουργία πληκτρολογίου. Χρησιμοποίησε `type="password"` για το πεδίο κωδικού ώστε το πληκτρολόγιο να ταιριάζει. Αυτή η μικρή λεπτομέρεια γλιτώνει πατήματα και εκνευρισμό.

Αυτόματη συμπλήρωση και διαχειριστές κωδικών

Οι browsers κινητού και οι εφαρμογές διαχείρισης κωδικών μπορούν να συμπληρώσουν αυτόματα τα στοιχεία σύνδεσης. Βεβαιώσου ότι τα χαρακτηριστικά HTML το υποστηρίζουν. Βάλε `autocomplete="username"` στο πεδίο email και `autocomplete="current-password"` στο πεδίο κωδικού. Είναι τεράστια διευκόλυνση στο κινητό, όπου η πληκτρολόγηση είναι πιο αργή.

Διάταξη φόρμας σε μικρές οθόνες

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

Απόφυγε να καλύπτει το πληκτρολόγιο τη φόρμα

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

Συχνές ερωτήσεις

Πώς σε βοηθά η WEMASY με τις φόρμες σύνδεσης και επαναφοράς κωδικού

Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα. Δες τα πακέτα της WEMASY.