Δημιουργία και ενσωμάτωση φορμών εγγραφής

Published: 16 Ιουλίου 2026 · Last updated: 21 Ιουλίου 2026 · By Marcus Biel

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

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

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

Δημιουργία ενσωματωμένης φόρμας

Ανοίξτε τις «Signup Forms», κάντε κλικ στο «Create Form» και επιλέξτε «Embedded Form». Εισαγάγετε ένα σαφές εσωτερικό όνομα και συνεχίστε στον δημιουργό.

Μπορείτε επίσης να επεξεργαστείτε μια υπάρχουσα φόρμα κάνοντας κλικ στο όνομά της στην επισκόπηση Signup Forms.

Το εσωτερικό όνομα δεν εμφανίζεται αυτόματα στους επισκέπτες. Ονομάστε τη φόρμα ανάλογα με την τοποθεσία ή τον σκοπό της, για παράδειγμα «Ενημερωτικό δελτίο αρχικής σελίδας», «Υποσέλιδο ιστολογίου» ή «Ενημερώσεις προϊόντων».

Επιλογή αρχικού σχεδίου

Οι ενσωματωμένες φόρμες προσφέρουν μια κενή φόρμα, μια τυπική φόρμα και τέσσερα σχεδιασμένα πρότυπα:

• Ήρεμη σημείωση
• Λωρίδα κουπονιού
• Σκούρο εκδοτικό
• Μινιμαλιστικό μπλε

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

Σχεδιασμός της ενσωματωμένης φόρμας

Χρησιμοποιήστε τις επιλογές «Layout» και «Content» για να οργανώσετε τη φόρμα. Μια ενσωματωμένη φόρμα μπορεί να περιέχει τη φόρμα εγγραφής μαζί με υποστηρικτικό κείμενο, εικόνες, λίστες, κουμπιά, συνδέσμους κοινωνικών δικτύων, μετρητή συνδρομητών, κενά ή διαχωριστικές γραμμές.

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

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

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

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

Σύνδεση της ροής εγγραφής

Χρησιμοποιήστε το στοιχείο ελέγχου της ροής εγγραφής στην κεφαλίδα του δημιουργού για να ελέγξετε τι συμβαίνει μετά την υποβολή, ποιο email Double Opt-in αποστέλλεται και τι βλέπει ο επισκέπτης μετά την επιβεβαίωση.

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

Προεπισκόπηση και αποθήκευση

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

Κάντε κλικ στο «Save changes» για να αποθηκεύσετε την τρέχουσα έκδοση. Επιστρέψτε στην επισκόπηση Signup Forms όταν είστε έτοιμοι να την ενσωματώσετε.

Ενεργοποίηση της φόρμας

Η ενσωματωμένη φόρμα πρέπει να είναι ενεργή πριν χρησιμοποιηθεί ο δημόσιος κώδικάς της.

Αν η φόρμα είναι ανενεργή, ανοίξτε το μενού ενεργειών με τις τρεις τελείες στην επισκόπηση Signup Forms και επιλέξτε «Activate». Μια ενεργή φόρμα εμφανίζει την ενέργεια «Show Code Snippet».

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

Αντιγραφή του κώδικα JavaScript

Κάντε κλικ στο «Show Code Snippet» και ανοίξτε την καρτέλα «JavaScript». Το Maildroppa παρέχει ένα σύντομο script που περιέχει το μοναδικό ID της φόρμας.

Ο κώδικας ακολουθεί αυτή τη δομή:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Αντιγράψτε ολόκληρο τον κώδικα χωρίς να αλλάξετε τη διεύθυνση του script ή το ID της φόρμας.

Η επιλογή JavaScript φορτώνει την τρέχουσα αποθηκευμένη φόρμα μέσω του runtime φορμών του Maildroppa. Όταν αργότερα επεξεργαστείτε και αποθηκεύσετε την ίδια φόρμα στο Maildroppa, το υπάρχον απόσπασμα κώδικα εξακολουθεί να αναφέρεται σε αυτό το ID φόρμας. Δεν χρειάζεται να δημιουργήσετε νέα φόρμα μόνο και μόνο για να αλλάξετε το κείμενο ή τον σχεδιασμό της.

Προσθήκη της φόρμας στον ιστότοπό σας

Επικολλήστε το script στη θέση της σελίδας όπου θέλετε να εμφανίζεται η ενσωματωμένη φόρμα.

Τα ακριβή βήματα εξαρτώνται από το σύστημα του ιστοτόπου σας. Σε έναν δημιουργό σελίδων ή ένα σύστημα διαχείρισης περιεχομένου, χρησιμοποιήστε ένα μπλοκ που δέχεται προσαρμοσμένο κώδικα HTML ή script. Σε έναν προσαρμοσμένο ιστότοπο, προσθέστε το script στο σχετικό πρότυπο ή στη σήμανση της σελίδας.

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

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

Χρήση της καρτέλας HTML

Η καρτέλα «HTML» παρέχει τη δημιουργημένη σήμανση της φόρμας. Αυτή η επιλογή προορίζεται για προσαρμοσμένες υλοποιήσεις όπου θέλετε να εργαστείτε απευθείας με το αποδιδόμενο HTML.

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

Για την κανονική φόρμα που διαχειρίζεται το Maildroppa, το απόσπασμα JavaScript είναι η συντομότερη ενσωμάτωση και φορτώνει την τρέχουσα δημόσια διαμόρφωση της φόρμας με βάση το ID της.

Δοκιμή της ενσωματωμένης φόρμας

Δημοσιεύστε ή κάντε προεπισκόπηση της σελίδας του ιστοτόπου που περιέχει τον κώδικα. Στη συνέχεια δοκιμάστε τη φόρμα όπως θα την δοκίμαζε ένας επισκέπτης:

1. Ελέγξτε ότι η φόρμα εμφανίζεται στη σωστή θέση.
2. Προβάλετε τη σελίδα σε ευρεία και στενή οθόνη.
3. Συμπληρώστε κάθε υποχρεωτικό πεδίο.
4. Υποβάλετε τη φόρμα και ελέγξτε την απόκριση.
5. Ανοίξτε το email Double Opt-in.
6. Επιβεβαιώστε τη διεύθυνση και ελέγξτε την τελική απόκριση.
7. Επαληθεύστε ότι ο συνδρομητής και τυχόν κρυφές ετικέτες εμφανίζονται σωστά στο Maildroppa.

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

Ενημέρωση μιας ενσωματωμένης φόρμας

Ανοίξτε την ίδια φόρμα στο Maildroppa, κάντε τις αλλαγές, κάντε προεπισκόπηση και κάντε κλικ στο «Save changes». Το απόσπασμα JavaScript στον ιστότοπό σας συνεχίζει να χρησιμοποιεί το ίδιο ID φόρμας και φορτώνει την αποθηκευμένη δημόσια διαμόρφωση.

Αν η φόρμα πρέπει να αφαιρεθεί προσωρινά, απενεργοποιήστε την από την επισκόπηση Signup Forms. Αν δεν χρειάζεται πλέον, αφαιρέστε και το απόσπασμα από τον ιστότοπο, ώστε η σελίδα να μην περιέχει αχρησιμοποίητο κώδικα.