Πώς να φτιάξετε έναν δημιουργό φορμών

Ένας δημιουργός φορμών επιτρέπει στους ανθρώπους να σχεδιάζουν τις δικές τους φόρμες — να επιλέγουν πεδία, να ορίζουν κανόνες, να δημοσιεύουν έναν σύνδεσμο — και μετά συλλέγει τις υποβολές. Στο βάθος είναι τρία πράγματα: ένας ορισμός φόρμας αποθηκευμένος ως δεδομένα, ένας renderer που μετατρέπει τον ορισμό σε λειτουργική φόρμα, και ένα αποθετήριο υποβολών με ειδοποιήσεις και εξαγωγή. Πριν φτιάξετε ένα, ελέγξτε αν το χρειάζεστε πραγματικά: αν χρειάζεστε απλώς φόρμα επικοινωνίας ή αίτησης, φτιάξτε αυτή τη φόρμα απευθείας και παραλείψτε τελείως τον δημιουργό.

Το χρειάζεστε καθόλου;

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

Τι χρειάζεται ένας δημιουργός φορμών

Ορισμοί φορμών

Αποθηκεύστε κάθε φόρμα ως λίστα πεδίων, σε δομημένα δεδομένα (το JSON σε στήλη Postgres δουλεύει καλά). Ένα πεδίο μπορεί να μοιάζει έτσι:

• id — ένα σταθερό αναγνωριστικό που δεν αλλάζει ποτέ, ακόμη κι αν αλλάξει η ετικέτα
• type — κείμενο, email, αριθμός, μακρύ κείμενο, επιλογή, checkbox, ημερομηνία, αρχείο
• label και κείμενο βοήθειας
• υποχρεωτικό, ελάχιστο / μέγιστο, επιτρεπτοί τύποι αρχείων
• επιλογές για πεδία επιλογής
• σειρά και προαιρετικά μια συνθήκη («εμφάνισε μόνο αν το πεδίο Χ είναι Υ»)

Ο επεξεργαστής αλλάζει αυτή τη λίστα· η δημόσια φόρμα τη διαβάζει. Αυτό είναι όλο το κόλπο: καμία νέα γραμμή κώδικα ανά φόρμα.

Υποβολές

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

Σελίδες

• Λίστα φορμών με πλήθος υποβολών.
• Επεξεργαστής — προσθήκη, αναδιάταξη και ρύθμιση πεδίων, με ζωντανή προεπισκόπηση δίπλα.
• Ρυθμίσεις — μήνυμα επιβεβαίωσης ή ανακατεύθυνση, email ειδοποίησης, ημερομηνίες ανοίγματος/κλεισίματος, όριο υποβολών.
• Δημόσια φόρμα στον δικό της σύνδεσμο, και εκδοχή για ενσωμάτωση σε άλλους ιστότοπους.
• Πίνακας υποβολών με αναζήτηση, κατάσταση, προβολή λεπτομερειών και εξαγωγή CSV.

Αποφάσεις και συμβιβασμοί

Εκδόσεις. Κάποιος θα μετονομάσει το «Τηλέφωνο» σε «Αριθμός κινητού» μετά από 200 υποβολές. Αν οι απαντήσεις αποθηκεύονται με αναγνωριστικό πεδίου και κάθε υποβολή καταγράφει την έκδοση της φόρμας, οι παλιές υποβολές εμφανίζονται ακόμη σωστά. Αλλιώς τα δεδομένα σας μπερδεύονται αθόρυβα.

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

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

Ειδοποιήσεις. Το «στείλε μου email όταν υποβληθεί» είναι αναμενόμενο. Χρειάζεται πάροχο email και κλειδί API· δείτε πώς να στέλνετε email από την εφαρμογή σας.

Spam. Μια δημόσια φόρμα θα τη βρουν bots. Χρησιμοποιήστε κρυφό πεδίο honeypot (κρυφό για τους ανθρώπους, γεμίζεται από bots), όρια ανά IP, επικύρωση στον διακομιστή και, αν χρειάζεται, υπηρεσία CAPTCHA.

Ενσωμάτωση. Η ενσωμάτωση με iframe είναι ο απλούστερος και ασφαλέστερος τρόπος να βάλετε φόρμα σε ιστότοπο κάποιου άλλου. Η ενσωμάτωση με script φαίνεται πιο «ντόπια», αλλά είναι πιο δύσκολη στην κατασκευή και στην ασφάλεια.

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

Μια πρώτη εντολή που δουλεύει

Φτιάξε μια web εφαρμογή δημιουργίας φορμών για την ομάδα μου. Οι συνδεδεμένοι χρήστες δημιουργούν φόρμες σε επεξεργαστή με ζωντανή προεπισκόπηση. Τύποι πεδίων: σύντομο κείμενο, μακρύ κείμενο, email, αριθμός, ημερομηνία, μονή επιλογή, checkboxes και ανέβασμα αρχείου. Κάθε πεδίο έχει σταθερό ID, ετικέτα, κείμενο βοήθειας, σήμανση υποχρεωτικού και κανόνες ανά τύπο (ελάχιστο/μέγιστο, επιλογές, επιτρεπτοί τύποι αρχείων και όριο μεγέθους 10 MB). Αποθηκεύστε τον ορισμό της φόρμας ως JSON με αριθμό έκδοσης που αυξάνεται σε κάθε δημοσίευση. Κάθε φόρμα παίρνει δημόσιο σύνδεσμο και κώδικα ενσωμάτωσης με iframe. Επικυρώστε τις υποβολές στον διακομιστή έναντι της δημοσιευμένης έκδοσης, αποθηκεύστε τις απαντήσεις με κλειδί το ID πεδίου και την έκδοση φόρμας, και βάλτε τα ανεβασμένα αρχεία σε ιδιωτικό χώρο αποθήκευσης. Προσθέστε ένα κρυφό πεδίο honeypot και όριο ρυθμού ανά IP. Οι ιδιοκτήτες φορμών βλέπουν πίνακα υποβολών με κατάσταση (νέα, διαβασμένη, αρχειοθετημένη), προβολή λεπτομερειών και εξαγωγή CSV. Αποθηκεύστε τα πάντα σε βάση δεδομένων. Αφήστε τη λογική υπό συνθήκη και τις ειδοποιήσεις email για αργότερα.

Βήματα κατασκευής

1. Επεξεργαστής και ορισμός. Φτιάξτε μια φόρμα με κάθε τύπο πεδίου και δείτε το αποθηκευμένο JSON με τον agent. Είναι καθαρό και σταθερό;
2. Δημόσια φόρμα. Συμπληρώστε την σε κινητό. Ελέγξτε τα μηνύματα επικύρωσης και την οθόνη επιβεβαίωσης.
3. Επικύρωση στον διακομιστή. Ζητήστε από τον agent να στείλει υποβολή που παραβιάζει τους κανόνες απευθείας στον διακομιστή, παρακάμπτοντας τη σελίδα. Πρέπει να απορριφθεί.
4. Εκδόσεις. Μετονομάστε και αναδιατάξτε πεδία μετά από λίγες υποβολές. Οι παλιές υποβολές πρέπει να εμφανίζουν ακόμη τις σωστές απαντήσεις.
5. Ανεβάσματα. Δοκιμάστε ένα αρχείο πολύ μεγάλο και ένα λάθος τύπου. Βεβαιωθείτε ότι ένας ξένος δεν μπορεί να ανοίξει ανεβασμένο αρχείο μαντεύοντας τον σύνδεσμο.
6. Πίνακας υποβολών και εξαγωγή. Ελέγξτε την εξαγωγή CSV με κόμματα, αλλαγές γραμμής και τονούμενους χαρακτήρες στις απαντήσεις.
7. Ειδοποιήσεις, ενσωματώσεις, λογική. Προσθέστε τα ένα-ένα.

Συχνά λάθη

• Αποθήκευση απαντήσεων με βάση την ετικέτα. Οι ετικέτες αλλάζουν. Χρησιμοποιήστε σταθερά ID πεδίων.
• Επικύρωση μόνο στον περιηγητή. Είναι βοήθεια, όχι προστασία.
• Δημόσια ανεβασμένα αρχεία. Οι φόρμες συχνά συλλέγουν έγγραφα που δεν θα ήθελε κανείς να εκτεθούν.
• Καμία προστασία από spam. Μια δημόσια φόρμα μπορεί να γεμίσει με σκουπίδια μέσα σε λίγες μέρες.
• Χτίζοντας δημιουργό για μία μόνο φόρμα. Φτιάξτε τη φόρμα.
• Απεριόριστες υποβολές σε δημόσιο προϊόν. Αν οι πελάτες δημιουργούν φόρμες, ορίστε όρια ανά πλάνο, αλλιώς μια δημοφιλής φόρμα μπορεί να φουσκώσει τον λογαριασμό φιλοξενίας σας.

Όταν ένα έτοιμο προϊόν είναι η καλύτερη επιλογή

Τα hosted εργαλεία φορμών είναι εξαιρετικά και φθηνά για τις περισσότερες ανάγκες. Έχουν ήδη λύσει την ενσωμάτωση, το spam, τις πληρωμές, τις ενσωματώσεις και την προσβασιμότητα σε δεκάδες τύπους πεδίων. Αν η ομάδα σας χρειάζεται απλώς φόρμες, χρησιμοποιήστε ένα· δείτε εναλλακτικές του Typeform και εναλλακτικές των Google Forms.

Φτιάξτε το δικό σας όταν οι υποβολές πρέπει να ζουν δίπλα στα δικά σας δεδομένα (τροφοδοτώντας ένα CRM ή μια πύλη πελατών που διαχειρίζεστε), όταν χρειάζονται ροές εργασίας μετά την υποβολή που τα εργαλεία δεν μπορούν να κάνουν, όταν η τοποθεσία ή η ιδιοκτησία των δεδομένων είναι απαίτηση, ή όταν οι φόρμες είναι λειτουργία ενός προϊόντος που πουλάτε.

Χτίζοντας το με το Mythex

Στο Mythex περιγράφετε τον δημιουργό στο chat και δοκιμάζετε τον επεξεργαστή και τη δημόσια φόρμα δίπλα-δίπλα στη ζωντανή προεπισκόπηση. Το Mythex προσθέτει ειδική βάση δεδομένων για ορισμούς φορμών και υποβολές, και ενεργοποιεί αυτόματα τον χώρο αποθήκευσης αρχείων όταν η εφαρμογή σας χρειάζεται ανεβάσματα (με όριο 1 GB στο δωρεάν πλάνο). Οι ειδοποιήσεις email περνούν από πάροχο που συνδέετε με το δικό σας κλειδί. Δημοσιεύστε την εφαρμογή σε σύνδεσμο mythex.ai, ή στο δικό σας domain στο Pro, και οι δημόσιοι σύνδεσμοι φορμών λειτουργούν από εκεί.

Ερωτήσεις