Προσαρμογή κώδικα ενσωμάτωσης φόρμας opt-in

Όταν ενσωματώνετε φόρμα opt-in του Flexmail στον ιστότοπό σας, έρχεται με προεπιλεγμένο στυλ. Εάν αυτό το στυλ δεν ταιριάζει με τον σχεδιασμό του ιστοτόπου σας, μπορείτε να το παρακάμψετε χρησιμοποιώντας CSS. Αυτό το άρθρο εξηγεί πώς λειτουργεί ο κώδικας ενσωμάτωσης και πώς να εφαρμόσετε προσαρμοσμένα στυλ με ασφάλεια.

Πώς λειτουργεί ο κώδικας ενσωμάτωσης

Όταν δημιουργείτε τον κώδικα ενσωμάτωσης για φόρμα opt-in στο Flexmail, λαμβάνετε τρία μέρη:

• Ένα τμήμα JavaScript που μεταφέρει τα προσαρμοσμένα στυλ σας στη φόρμα μόλις φορτωθεί.
• Ένα iframe που φορτώνει την ίδια τη φόρμα από το https://return.flexmail.eu.
• Ένα κενό **<style id="flx-styles">** μπλοκ όπου μπορείτε να προσθέσετε δικό σας CSS.

Επικολλάτε και τα τρία μέρη στο HTML του ιστοτόπου σας όπου θέλετε να εμφανιστεί η φόρμα. Όταν φορτώνεται η σελίδα, το iframe ανακτά τη φόρμα και το JavaScript προσθέτει τα περιεχόμενα του μπλοκ στυλ σας στη φόρμα ώστε να εφαρμοστεί το στυλ σας.

Για να λάβετε τον κώδικα ενσωμάτωσης:

1. Μεταβείτε στις Φόρμες > Φόρμες opt-in.
2. Ανοίξτε τη φόρμα που θέλετε να ενσωματώσετε.
3. Κάντε κλικ στο κουμπί Ενσωμάτωση φόρμας.
4. Αντιγράψτε τον κώδικα ενσωμάτωσης από το αναδυόμενο παράθυρο.

Συμβουλή υποστήριξης Αντιγράφετε τον κώδικα ενσωμάτωσης κάθε φορά που κάνετε δομικές αλλαγές στη φόρμα στο Flexmail (όπως προσθήκη ή αφαίρεση πεδίων). Το στυλ σας μπορεί να παραμείνει το ίδιο όσο διατηρείτε τους ίδιους επιλογείς.

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

Τα προσαρμοσμένα στυλ τοποθετούνται εντός του μπλοκ <style id="flx-styles">. Το μπλοκ είναι κενό από προεπιλογή και περιέχει σχολιασμένα placeholders για τους πιο συνηθισμένους επιλογείς:

• #flxml_frm > table > tbody > tr > td:nth-child(1) — οι ετικέτες πεδίων.
• #flxml_frm input[type="text"] — τα πεδία εισαγωγής κειμένου.
• #flxml_frm button[type="submit"] — το κουμπί υποβολής.

Μπορείτε να το επεκτείνετε με επιλογείς για άλλα στοιχεία, όπως #flxml_frm select για αναπτυσσόμενα μενού, #flxml_frm input[type="checkbox"] για πλαίσια ελέγχου, ή #flxml_frm input[type="number"] για αριθμητικά πεδία. Να προτάσσετε πάντα τους επιλογείς σας με #flxml_frm ώστε τα στυλ σας να εφαρμόζονται μόνο στη φόρμα.

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

Η σημαία !important χρειάζεται μερικές φορές επειδή τα προεπιλεγμένα στυλ της φόρμας χρησιμοποιούν τιμές πλάτους ενσωματωμένες. Από εδώ μπορείτε να δημιουργήσετε τα υπόλοιπα: προσαρμόστε γραμματοσειρές, χρώματα, στυλ ετικετών κ.ά. προσθέτοντας περισσότερους κανόνες με το ίδιο πρόθεμα #flxml_frm.

Προσοχή Η φόρμα φορτώνεται εντός iframe, που σημαίνει ότι το CSS από τον κύριο ιστότοπό σας δεν εφαρμόζεται αυτόματα σε αυτήν. Γι' αυτό τα στυλ πρέπει να μεταφέρονται μέσω του μπλοκ <style id="flx-styles"> — το τμήμα JavaScript αναλαμβάνει αυτό το κομμάτι για εσάς.

Συμβουλή υποστήριξης Χρησιμοποιήστε τα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας (δεξί κλικ > Εξέταση) για να εντοπίσετε τα ακριβή ονόματα κλάσεων στη ζωντανή φόρμα σας πριν γράψετε το CSS. Τα ονόματα κλάσεων μπορεί να διαφέρουν ελαφρώς ανάλογα με τη διαμόρφωση φόρμας και την έκδοση Flexmail.

Τι μπορείτε να αλλάξετε

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

Τι δεν πρέπει να αλλάξετε

Μην τροποποιήσετε ή αφαιρέσετε τα παρακάτω από τον κώδικα ενσωμάτωσης:

• Τη διεύθυνση URL src του iframe. Αυτή φορτώνει τη φόρμα από τους διακομιστές του Flexmail. Η αλλαγή της θα καταστρέψει τη φόρμα.
• Το id iframe (iframe_flxml_form) και το id μπλοκ