Ένας επισκέπτης ανοίγει τη φόρμα αιτήματος υπηρεσίας. Επιλέγει «κατοικία» και εμφανίζονται τρία νέα πεδία: μέγεθος ακινήτου, αριθμός δωματίων και επιθυμητός χρόνος. Μετά αλλάζει σε «επαγγελματικό χώρο» και τα πεδία εξαφανίζονται. Στη θέση τους έρχονται ερωτήσεις για τον τύπο της επιχείρησης και τα τετραγωνικά μέτρα. Η φόρμα αλλάζει σχήμα γύρω από την απάντησή του. Αυτό είναι μια δυναμική φόρμα.
Σύγκρινέ το με μια στατική φόρμα, όπου κάθε επισκέπτης βλέπει τα ίδια 15 πεδία, ό,τι κι αν χρειάζεται. Τα μισά πεδία δεν αφορούν τους περισσότερους. Τα ποσοστά ολοκλήρωσης πέφτουν, γιατί η φόρμα φαίνεται μεγάλη και απρόσωπη.
Οι δυναμικές φόρμες λύνουν αυτό το πρόβλημα. Αντιδρούν στις απαντήσεις του επισκέπτη την ίδια στιγμή. Δες πώς λειτουργούν, πότε να τις χρησιμοποιείς και πώς συγκρίνονται με τις στατικές.
Τι είναι μια δυναμική φόρμα;
Μια δυναμική φόρμα είναι μια φόρμα ιστοσελίδας που αλλάζει τα πεδία, τη διάταξη ή το περιεχόμενό της ανάλογα με τις απαντήσεις του χρήστη ή με εξωτερικά δεδομένα. Τα πεδία μπορούν να εμφανιστούν, να εξαφανιστούν ή να γίνουν υποχρεωτικά, ανάλογα με το τι επιλέγει ο επισκέπτης στα προηγούμενα βήματα.
Οι αλλαγές γίνονται αμέσως, χωρίς να φορτώσει ξανά η σελίδα. Μια επιλογή σε αναπτυσσόμενη λίστα φέρνει νέα πεδία. Ένα πλαίσιο επιλογής ανοίγει μια προαιρετική ενότητα. Μια τιμή που έχει συμπληρωθεί από προηγούμενη επίσκεψη αλλάζει το τι θα ρωτήσει η φόρμα μετά.
Οι δυναμικές φόρμες βασίζονται σε κανόνες υπό συνθήκη, που ορίζει όποιος φτιάχνει τη φόρμα. Όταν ισχύει η συνθήκη Α, εμφάνισε το πεδίο Β. Όταν δεν ισχύει, κρύψε το πεδίο Β. Η λογική τρέχει στον περιηγητή, καθώς ο επισκέπτης χρησιμοποιεί τη φόρμα.
Τι είναι μια στατική φόρμα;
Μια στατική φόρμα δείχνει τα ίδια πεδία σε κάθε επισκέπτη, κάθε φορά. Η διάταξη, οι ερωτήσεις και τα υποχρεωτικά πεδία δεν αλλάζουν ποτέ. Μια απλή φόρμα επικοινωνίας με όνομα, email και μήνυμα είναι στατική φόρμα.
Οι στατικές φόρμες είναι πιο απλές να φτιαχτούν, να δοκιμαστούν και να συντηρηθούν. Δεν υπάρχουν κανόνες λογικής για ρύθμιση και δεν υπάρχει κίνδυνος ένα πεδίο να μην εμφανιστεί όταν πρέπει. Για απλή συλλογή στοιχείων, οι στατικές φόρμες δουλεύουν τέλεια.
Πότε να χρησιμοποιείς δυναμικές φόρμες
Οι δυναμικές φόρμες ξεχωρίζουν όταν διαφορετικοί επισκέπτες χρειάζονται διαφορετικές ερωτήσεις. Οι επιχειρήσεις υπηρεσιών με πολλές προσφορές ωφελούνται, γιατί κάθε υπηρεσία θέλει άλλα στοιχεία. Ένα υδραυλικό συνεργείο μπορεί να ρωτά για το σημείο της διαρροής στα αιτήματα επισκευής και για τον αριθμό των ειδών υγιεινής στις προσφορές εγκατάστασης.
Ωφελούνται και οι διαδικασίες με πολλά βήματα. Μια δυναμική φόρμα μπορεί να δείξει τα πεδία του δεύτερου βήματος μόνο αφού ολοκληρωθεί το πρώτο. Έτσι κάθε οθόνη μένει σύντομη και εστιασμένη. Ταιριάζει φυσικά με τον σχεδιασμό φόρμας πολλών βημάτων.
Οι φόρμες που συνδέονται με βάσεις δεδομένων ή λογαριασμούς χρηστών μπορούν να συμπληρώνουν ό,τι ήδη ξέρουν και να ζητούν μόνο ό,τι λείπει. Ένας πελάτης που επιστρέφει μπορεί να βλέπει το όνομα και το email του ήδη συμπληρωμένα. Χρειάζεται μόνο να γράψει τα στοιχεία του νέου αιτήματος.
Πότε είναι καλύτερες οι στατικές φόρμες
Δεν χρειάζεται κάθε φόρμα δυναμική συμπεριφορά. Μια απλή φόρμα επικοινωνίας με τρία πεδία δουλεύει καλύτερα ως στατική φόρμα. Αν προσθέσεις λογική υπό συνθήκη σε φόρμα τριών πεδίων, φέρνεις πολυπλοκότητα χωρίς όφελος.
Οι στατικές φόρμες είναι και πιο εύκολες στον έλεγχο λαθών. Αν οι υποβολές αποτυγχάνουν ή τα πεδία παίζουν περίεργα, μια στατική φόρμα έχει λιγότερα κινούμενα μέρη να ελέγξεις. Στις φόρμες με μεγάλο διακύβευμα, όπως οι φόρμες πληρωμής ή συγκατάθεσης, η απλότητα μειώνει τον κίνδυνο.
Όταν το κοινό σου είναι ομοιογενές και κάθε επισκέπτης δίνει το ίδιο είδος στοιχείων, μια στατική φόρμα φτιάχνεται πιο γρήγορα και είναι εξίσου αποτελεσματική.
Πώς φτιάχνεις δυναμικές φόρμες χωρίς κώδικα
Τα σύγχρονα εργαλεία φορμών έχουν οπτικά εργαλεία για λογική υπό συνθήκη. Ορίζεις κανόνες όπως «αν ο Τύπος υπηρεσίας είναι Εγκατάσταση, δείξε την ενότητα Στοιχεία εγκατάστασης». Δεν χρειάζεται προγραμματισμός. Το εργαλείο φροντίζει μόνο του την εμφάνιση και την απόκρυψη.
Ξεκίνα χαρτογραφώντας τα σημεία απόφασης στη διαδικασία σου. Ποια ερώτηση καθορίζει τι χρειάζεται να ρωτήσεις μετά; Φτιάξε πρώτα αυτά ως αναπτυσσόμενη λίστα ή επιλογές, και μετά πρόσθεσε τα πεδία υπό συνθήκη σε κάθε επιλογή.
Δοκίμασε κάθε διαδρομή της φόρμας. Διάλεξε κάθε επιλογή της λίστας και έλεγξε ότι εμφανίζονται τα σωστά πεδία. Ένας χαλασμένος κανόνας σημαίνει χαμένα δεδομένα από επισκέπτες που πήραν μια διαδρομή που δεν δοκίμασες.
Οι δυναμικές φόρμες κάνουν μια μακριά και σύνθετη συλλογή στοιχείων να φαίνεται σύντομη και προσωπική. Χρησιμοποίησέ τες όταν οι επισκέπτες σου χρειάζονται διαφορετικές ερωτήσεις. Κράτα τη φόρμα στατική όταν όλοι απαντούν το ίδιο πράγμα.
Συχνές ερωτήσεις
Οι δυναμικές φόρμες κάνουν την ιστοσελίδα μου πιο αργή;
Μια καλοφτιαγμένη δυναμική φόρμα προσθέτει ελάχιστο χρόνο φόρτωσης, γιατί η λογική τρέχει στον περιηγητή, χωρίς αίτημα στον διακομιστή για κάθε αλλαγή πεδίου. Φόρμες με δεκάδες κανόνες σε αργή σελίδα μπορεί να φαίνονται βαριές, αλλά η ίδια η λογική είναι ελαφριά. Κράτα τα πεδία σε λογικό αριθμό και δοκίμασε σε κινητά.
Μπορώ να μετατρέψω μια στατική φόρμα σε δυναμική;
Μπορείς να προσθέσεις λογική υπό συνθήκη σε μια υπάρχουσα στατική φόρμα, χωρίς να τη φτιάξεις από την αρχή. Βρες ποια πεδία πρέπει να εμφανίζονται υπό συνθήκη, όρισε τους κανόνες στο εργαλείο φορμών σου και δοκίμασε κάθε διαδρομή. Στον δημιουργό ιστοσελίδων της WEMASY μπορείς να προσθέσεις μια φόρμα.
Πόσους κανόνες υπό συνθήκη μπορεί να έχει μία φόρμα;
Τα περισσότερα εργαλεία φορμών υποστηρίζουν δεκάδες κανόνες ανά φόρμα. Τα πρακτικά όρια εξαρτώνται από την πολυπλοκότητα, όχι από την τεχνολογία. Αν η φόρμα σου χρειάζεται πάνω από δέκα διαφορετικές διακλαδώσεις, σκέψου να τη σπάσεις σε ξεχωριστές φόρμες ή να χρησιμοποιήσεις διάταξη πολλών βημάτων, ώστε κάθε ενότητα να μένει διαχειρίσιμη.
Είναι οι δυναμικές φόρμες προσβάσιμες για προγράμματα ανάγνωσης οθόνης;
Οι δυναμικές φόρμες μπορούν να είναι προσβάσιμες όταν τα πεδία έχουν σωστές ετικέτες και εμφανίζονται ή κρύβονται με τρόπους που τα προγράμματα ανάγνωσης οθόνης αναγνωρίζουν. Δοκίμασε με εργαλεία προσβασιμότητας όταν προσθέτεις λογική υπό συνθήκη. Πεδία που εμφανίζονται χωρίς σωστή διαχείριση εστίασης μπορούν να μπερδέψουν χρήστες με υποστηρικτική τεχνολογία.
Ποια είναι η διαφορά ανάμεσα στις δυναμικές φόρμες και στις φόρμες με λογική υπό συνθήκη;
Η λογική υπό συνθήκη είναι ο μηχανισμός που κάνει τις φόρμες δυναμικές. Μια δυναμική φόρμα χρησιμοποιεί κανόνες υπό συνθήκη για να αλλάζει την εμφάνισή της ανάλογα με τις απαντήσεις. Οι όροι περιγράφουν το ίδιο πράγμα από διαφορετική οπτική: το «δυναμική» περιγράφει τη συμπεριφορά, η «λογική υπό συνθήκη» την τεχνολογία.
Να χρησιμοποιώ δυναμικά πεδία για προαιρετικές πληροφορίες;
Τα δυναμικά πεδία ταιριάζουν σε προαιρετικές ενότητες που τις χρειάζονται μόνο μερικοί επισκέπτες. Κράτα τα υποχρεωτικά πεδία πάντα ορατά και χρησιμοποίησε λογική υπό συνθήκη για τις ερωτήσεις που εξαρτώνται από προηγούμενες απαντήσεις. Έτσι η φόρμα φαίνεται σύντομη και συλλέγει λεπτομέρειες μόνο όταν χρειάζονται.