Ένας επισκέπτης φτάνει στη φόρμα σου. Το πρώτο πεδίο ζητά το email του. Η ιστοσελίδα σου όμως έχει ήδη το email του από προηγούμενη εγγραφή. Πρέπει να το γράψει ξανά. Φτάνει δεύτερος επισκέπτης και η φόρμα ρωτά τη χώρα του. Τα analytics σου ξέρουν ήδη πού βρίσκεται. Γιατί να ρωτήσεις;
Οι προσυμπληρωμένες φόρμες ολοκληρώνονται πιο γρήγορα. Οι επισκέπτες δεν χρειάζεται να ξαναγράψουν πληροφορίες που ήδη έχεις. Σε αυτό το άρθρο θα δεις πώς να προσυμπληρώνεις φόρμες και ποιες πηγές δεδομένων μπορείς να χρησιμοποιήσεις.
Γιατί μετράνε οι προσυμπληρωμένες φόρμες
Κάθε πεδίο που πρέπει να συμπληρώσει ο επισκέπτης μειώνει το ποσοστό ολοκλήρωσης. Αν μπορείς να συμπληρώσεις αυτόματα το 50% των πεδίων, η φόρμα φαίνεται πιο σύντομη. Ο επισκέπτης ξοδεύει λιγότερο χρόνο. Λιγότερα πεδία σημαίνει λιγότερες ευκαιρίες για λάθη.
Μελέτες δείχνουν ότι οι προσυμπληρωμένες φόρμες έχουν 20-30% υψηλότερα ποσοστά ολοκλήρωσης από τις κενές. Η διαφορά είναι πραγματική.
Προσυμπλήρωση από παραμέτρους URL
Ο πιο απλός τρόπος προσυμπλήρωσης είναι να περάσεις δεδομένα στο URL με wemasy.gr/contact?email=user@example.com&name=John. Όταν φορτώνει η σελίδα, το JavaScript εξάγει τις παραμέτρους και γεμίζει τη φόρμα με const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Αυτό δουλεύει όταν συνδέεις μια φόρμα από άλλη σελίδα, για παράδειγμα όταν μια καμπάνια email οδηγεί σε φόρμα επικοινωνίας με προσυμπληρωμένο το email του παραλήπτη ή όταν μια landing page οδηγεί σε φόρμα εγγραφής με προσυμπληρωμένη την καμπάνια προέλευσης.
Πρόσεχε τα ευαίσθητα δεδομένα. Μην περνάς κωδικούς ή αριθμούς πιστωτικών καρτών στα URLs. Πέρνα μόνο μη ευαίσθητα δεδομένα όπως email και όνομα.
Προσυμπλήρωση από συνεδρίες χρηστών
Αν ο χρήστης είναι συνδεδεμένος, ξέρεις ποιος είναι και μπορείς να προσυμπληρώσεις το email, το όνομα, τη διεύθυνση και άλλα στοιχεία από τον λογαριασμό του. Στον server, πριν δημιουργήσεις τη φόρμα, χρησιμοποίησε const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Μετά, στο πρότυπο HTML, όρισε <input type="text" name="name" value="<%= form.name %>">. Εναλλακτικά, με JavaScript μετά τη φόρτωση της σελίδας, χρησιμοποίησε _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. Αυτή η προσέγγιση απαιτεί συνδεδεμένο χρήστη. Για δημόσιες φόρμες, χρησιμοποίησε παραμέτρους URL ή δεδομένα τρίτων.
Προσυμπλήρωση από δεδομένα του browser
Ο browser αποθηκεύει δεδομένα που μπορείς να προσπελάσεις με δύο τρόπους. Πρώτον, το localStorage σου επιτρέπει να αποθηκεύεις δεδομένα στον browser και να τα ανακτάς αργότερα με localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Αυτά μένουν ανάμεσα σε φορτώσεις σελίδων και συνεδρίες του browser, οπότε είναι χρήσιμα για να αποθηκεύεις την πρόοδο της φόρμας ή να θυμάσαι το email του χρήστη από προηγούμενη επίσκεψη. Δεύτερον, οι σύγχρονοι browsers θυμούνται δεδομένα φόρμας που έχει γράψει ο χρήστης στο παρελθόν. Όρισε χαρακτηριστικά autocomplete και ενεργοποιείται η αυτόματη συμπλήρωση του browser με <input type="email" name="email" autocomplete="email"> και <input type="text" name="name" autocomplete="name">. Ο browser δείχνει προτάσεις και γεμίζει το πεδίο χωρίς κώδικα, και η αυτόματη συμπλήρωση βοηθά ιδιαίτερα στο κινητό, όπου η πληκτρολόγηση είναι αργή.
Προσυμπλήρωση από γεωγραφική θέση
Μπορείς να εντοπίσεις την κατά προσέγγιση θέση του χρήστη και να προσυμπληρώσεις τη χώρα ή την περιοχή με _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Αυτό χρησιμοποιεί τη διεύθυνση IP για να μαντέψει τη θέση. Δεν είναι απόλυτα ακριβές (ειδικά για χρήστες VPN) αλλά αρκεί στις περισσότερες περιπτώσεις. Δώσε πάντα στον χρήστη τη δυνατότητα να το αλλάξει.
Προσυμπλήρωση από υπηρεσίες δεδομένων τρίτων
Οι υπηρεσίες εμπλουτισμού δεδομένων μπορούν να βρουν πληροφορίες για εταιρεία και πρόσωπο με βάση μια διεύθυνση email. Όταν ο χρήστης γράφει ένα email, το JavaScript το στέλνει στην υπηρεσία εμπλουτισμού, που απαντά με στοιχεία εταιρείας, θέση εργασίας και τοποθεσία, και η φόρμα προσυμπληρώνεται με αυτά τα δεδομένα. Αυτό απαιτεί κλειδί API και κώδικα ενσωμάτωσης, οπότε είναι πιο σύνθετο αλλά πολύ δυνατό για φόρμες B2B.
Προσυμπλήρωση κρυφών πεδίων
Τα κρυφά πεδία μεταφέρουν δεδομένα που ο χρήστης δεν βλέπει αλλά το backend σου χρειάζεται.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Αυτά προσυμπληρώνονται από τον server πριν δημιουργηθεί η φόρμα. Χρησιμοποίησέ τα για να παρακολουθείς από πού ήρθε η υποβολή ή ποια καμπάνια οδήγησε σε αυτήν.
Προσυμπλήρωση φορμών πολλών βημάτων
Στις φόρμες πολλών βημάτων, προσυμπλήρωσε το βήμα 2 με δεδομένα από το βήμα 1, ώστε ο χρήστης να μην ξαναγράφει πληροφορίες που έχει ήδη πληκτρολογήσει. Μετά την υποβολή του βήματος 1, αποθήκευσε τα δεδομένα στη συνεδρία ή στο localStorage. Όταν φορτώνει το βήμα 2, ανάκτησέ τα και προσυμπλήρωσέ τα με const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Ζητήματα απορρήτου και άδειας
Η προσυμπλήρωση είναι βολική αλλά εγείρει ζητήματα απορρήτου. Το να δείχνεις το email κάποιου χωρίς άδεια φαίνεται παρεμβατικό.
Προσυμπλήρωνε μόνο δεδομένα που έχεις άδεια να χρησιμοποιείς. Αν ο χρήστης είναι συνδεδεμένος, έχεις άδεια. Αν τα δεδομένα ήρθαν από καμπάνια email στην οποία πάτησε, έχεις άδεια. Αν τα δεδομένα ήρθαν από υπηρεσία τρίτου, έλεγξε την πολιτική απορρήτου σου.
Άφηνε πάντα τους χρήστες να αλλάζουν τις προσυμπληρωμένες τιμές. Μην τους κλειδώνεις.
Το WEMASY και οι φόρμες
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Δες τα διαθέσιμα πακέτα WEMASY.