Φτιάχνεις φόρμες σε ένα εξειδικευμένο εργαλείο φορμών. Τώρα πρέπει να βάλεις τη φόρμα στην ιστοσελίδα σου. Δεν μπορείς να αντιγράψεις και να επικολλήσεις τον κώδικα αν η ιστοσελίδα σου χρησιμοποιεί άλλη πλατφόρμα. Την ενσωματώνεις. Μια ενσωματωμένη φόρμα εμφανίζεται στην ιστοσελίδα σου αλλά ζει κάπου αλλού.
Σε αυτό το άρθρο θα δεις πώς ενσωματώνεις φόρμες, πώς δουλεύουν τα iframes, την ασφάλεια ανάμεσα σε domains και τα συνηθισμένα προβλήματα των ενσωματωμένων φορμών.
Τι είναι μια ενσωματωμένη φόρμα;
Μια ενσωματωμένη φόρμα είναι μια φόρμα που ζει σε έναν server αλλά εμφανίζεται σε άλλη ιστοσελίδα. Η φόρμα φιλοξενείται στο wemasy.gr αλλά εμφανίζεται στην ιστοσελίδα σου με iframe όπως <iframe src="https://wemasy.com/form/abc123"></iframe>.
Το iframe φτιάχνει ένα παράθυρο προς άλλη σελίδα. Εκείνη η σελίδα περιέχει τη φόρμα. Για τον χρήστη, φαίνεται ότι η φόρμα είναι στην ιστοσελίδα σου. Τεχνικά, είναι ξεχωριστή σελίδα μέσα σε ένα κουτί.
Πώς δουλεύουν τα iframes
Το iframe είναι ένα ενσωματωμένο πλαίσιο. Φορτώνει μια εντελώς ξεχωριστή σελίδα μέσα στη σελίδα σου. Εκείνη η σελίδα έχει δικό της HTML, CSS και JavaScript. Είναι απομονωμένη (sandboxed), που σημαίνει ότι δεν μπορεί να προσπελάσει τη σελίδα σου και το αντίστροφο.
Τα iframes προσφέρουν απομόνωση ασφάλειας: το εργαλείο φορμών δεν μπορεί να προσπελάσει τα δεδομένα της σελίδας σου, η σελίδα σου δεν μπορεί να προσπελάσει τα δεδομένα της φόρμας και, αν η φόρμα καταρρεύσει, δεν καταρρέει η σελίδα σου. Έχουν όμως και μειονεκτήματα: περιορισμένη άμεση επικοινωνία ανάμεσα στη σελίδα και τη φόρμα, πιθανή επίδραση στο SEO (η Google μπορεί να μην ευρετηριάσει το περιεχόμενο της φόρμας), πιο αργή φόρτωση και έλλειψη υποστήριξης cookies ανάμεσα σε domains.
Ενσωμάτωση φόρμας με iframe
Τα περισσότερα εργαλεία φορμών δίνουν κώδικα ενσωμάτωσης όπως <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Αντίγραψε και επικόλλησε αυτόν τον κώδικα στο HTML της ιστοσελίδας σου για να εμφανιστεί η φόρμα μέσα στο κουτί. Ένα συνηθισμένο πρόβλημα είναι ότι το σταθερό ύψος προκαλεί προβλήματα κυλίσματος. Αν η φόρμα είναι μεγαλύτερη από το ύψος που όρισες, η φόρμα κυλά μέσα στο iframe (κακή εμπειρία). Πρέπει να ξέρεις το ακριβές ύψος της φόρμας, αλλά οι φόρμες μεγαλώνουν και μικραίνουν ανάλογα με τη λογική υπό όρους, οπότε το ύψος δεν είναι σταθερό. Η λύση είναι να χρησιμοποιήσεις iframes με αυτόματη αλλαγή μεγέθους και postMessage για επικοινωνία ανάμεσα στο iframe και τη γονική σελίδα. Όταν η φόρμα αλλάζει μέγεθος, λέει στη γονική σελίδα να αλλάξει το μέγεθος του iframe. Το JavaScript της γονικής σελίδας ακούει μηνύματα από το iframe με window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Η φόρμα μέσα στο iframe στέλνει μήνυμα με το ύψος της με parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, οπότε το iframe μεγαλώνει αυτόματα για να χωρέσει το περιεχόμενο της φόρμας.
Ασφάλεια ανάμεσα σε domains
Τα iframes είναι απομονωμένα για λόγους ασφάλειας. Η φόρμα δεν μπορεί να προσπελάσει τα δεδομένα της σελίδας σου. Η σελίδα σου δεν μπορεί να προσπελάσει τα δεδομένα της φόρμας. Αυτό είναι καλό.
Πρόσεχε το χαρακτηριστικό sandbox στο <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Το sandbox περιορίζει τι μπορεί να κάνει το iframe. Το allow-same-origin επιτρέπει στο iframe να προσπελάζει cookies και αποθήκευση συνεδρίας, το allow-scripts επιτρέπει να τρέχει JavaScript και το allow-forms επιτρέπει στη φόρμα να υποβάλλεται. Ενεργοποίησε μόνο τις άδειες sandbox που χρειάζεσαι πραγματικά, γιατί η προεπιλογή (όλες οι άδειες απορριφθείσες) είναι η πιο ασφαλής αλλά χαλά τις περισσότερες φόρμες.
Υποβολή φόρμας με ενσωματωμένες φόρμες
Όταν ο χρήστης υποβάλλει μια φόρμα μέσα σε iframe, η υποβολή γίνεται μέσα στο iframe και η φόρμα στέλνει τα δεδομένα στον server του εργαλείου φορμών (όχι στον δικό σου). Ο server σου δεν βλέπει ποτέ τα δεδομένα της φόρμας, γιατί το εργαλείο φορμών τα αποθηκεύει και εσύ τα ανακτάς αργότερα μέσω API ή ειδοποίησης email. Αν χρειάζεσαι περισσότερο έλεγχο, πρέπει να πιάσεις την υποβολή. Αυτό απαιτεί από το εργαλείο φορμών να στείλει postMessage στη γονική σελίδα με window.parent.postMessage({ type: 'submit', data: formData }, origin);, και μετά η γονική σελίδα μπορεί να κάνει κάτι με τα δεδομένα (να τα στείλει στον server σου, να δείξει δική σου σελίδα ευχαριστίας κ.λπ.).
Ζητήματα κινητών για ενσωματωμένες φόρμες
Στο κινητό, τα iframes μπορεί να δημιουργούν προβλήματα. Η φόρμα είναι μικρότερη και πιο δύσκολη στη χρήση. Το iframe μπορεί να μην αλλάζει σωστά μέγεθος αν δεν υποστηρίζει αυτόματη αλλαγή μεγέθους.
Καλύτερη προσέγγιση στο κινητό είναι να βάλεις σύνδεσμο σε φόρμα πλήρους σελίδας αντί για iframe. Εντόπισε το μέγεθος της οθόνης και δείξε κουμπί συνδέσμου στο κινητό, ενώ στον υπολογιστή ενσωμάτωσε με if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Άνοιγμα φόρμας</a>'; } else { // embed the iframe }.
Επιπτώσεις των ενσωματωμένων φορμών στην ταχύτητα
Τα iframes προσθέτουν επιβάρυνση. Κάθε iframe είναι ξεχωριστό αίτημα HTTP. Φορτώνει δικό του HTML, CSS και JavaScript. Αυτό επιβραδύνει τη σελίδα σου.
Φόρτωσε το iframe με καθυστέρηση, χωρίς να το φορτώνεις μέχρι ο χρήστης να κυλήσει κοντά του, με <iframe data-src="https://..." style="display: none"></iframe> και window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Το iframe φορτώνει μόνο όταν ο χρήστης είναι έτοιμος να το δει.
Πότε να χρησιμοποιείς ενσωματωμένες φόρμες και πότε εναλλακτικές
Χρησιμοποίησε ενσωματωμένες φόρμες όταν δεν μπορείς να προσαρμόσεις την ιστοσελίδα σου (για παράδειγμα σε κλειστό δημιουργό ιστοσελίδων) ή όταν θέλεις να κρατήσεις το εργαλείο φορμών ξεχωριστό από την ιστοσελίδα σου.
Χρησιμοποίησε εγγενείς φόρμες όταν ελέγχεις την ιστοσελίδα σου και θέλεις ταχύτητα. Μια φόρμα χτισμένη στη δική σου τεχνολογία φορτώνει πιο γρήγορα και ενσωματώνεται καλύτερα.
Χρησιμοποίησε φιλοξενούμενες (αυτόνομες) φόρμες όταν θέλεις απλότητα. Μια φόρμα στο domain του εργαλείου είναι η πιο εύκολη στο στήσιμο αλλά φαίνεται λιγότερο επαγγελματική.
Το WEMASY και οι ενσωματωμένες φόρμες
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Δες τα διαθέσιμα πακέτα WEMASY.