Πώς να διαμορφώσετε φόρμες στο Contact Form 7 χρησιμοποιώντας CSS στο WordPress

Θέλετε οι φόρμες WordPress σας να φαίνονται εξίσου εντυπωσιακές με το υπόλοιπο site σας; Με το Contact Form 7, έχετε πλήρη έλεγχο στην εμφάνιση της φόρμας σας χρησιμοποιώντας CSS. Αυτός ο οδηγός σας καθοδηγεί βήμα προς βήμα στη διαδικασία διαμόρφωσης των φορμών Contact Form 7, ώστε να δημιουργήσετε μια ομοιόμορφη, επώνυμη εμπειρία για τους επισκέπτες σας.

Γιατί να διαμορφώσετε τις φόρμες Contact Form 7;

Το Contact Form 7 είναι ένα από τα πιο δημοφιλή plugins του WordPress για τη δημιουργία φορμών—αλλά η προεπιλεγμένη του εμφάνιση είναι βασική. Η προσαρμοσμένη διαμόρφωση σε κλασικά θέματα WordPress σας επιτρέπει να:

• Ταιριάξτε με το branding του site σας

• Βελτιώστε τη χρηστικότητα και την προσβασιμότητα

• Κάντε τις φόρμες πιο φιλόξενες και επαγγελματικές

Βήμα 1: Εντοπίστε τους CSS selectors της φόρμας σας

Πριν ξεκινήσετε τη διαμόρφωση, πρέπει να γνωρίζετε ποιοι CSS selectors στοχεύουν τα στοιχεία της φόρμας σας.

• Κάθε φόρμα Contact Form 7 περιβάλλεται από μια μοναδική κλάση: .wpcf7

• Μεμονωμένα στοιχεία όπως πεδία εισαγωγής, textareas και κουμπιά υποβολής χρησιμοποιούν τυπικά HTML tags

Βήμα 2: Προσθέστε προσαρμοσμένο CSS στο WordPress site σας

Μπορείτε να προσθέσετε CSS με δύο βασικούς τρόπους:

• Μέσω του Customizer:
  Μεταβείτε στο Εμφάνιση > Προσαρμογή > Πρόσθετο CSS και επικολλήστε τα στυλ σας.

ΣΗΜΕΙΩΣΗ: Προσθέστε το CSS σας στο αρχείο style.css του child theme σας για πιο προχωρημένες προσαρμογές.

Βήμα 3: Γράψτε το δικό σας προσαρμοσμένο CSS

Ακολουθούν μερικά συνηθισμένα παραδείγματα για να ξεκινήσετε, χρησιμοποιώντας τα στοιχεία "text" και "submit" της φόρμας ως παράδειγμα:

Διαμορφώστε όλες τις φόρμες Contact Form 7

.wpcf7 input[type="text"],
.wpcf7 textarea {
  border: 2px solid #0073e6;
  padding: 10px;
  width: 100%;
  font-size: 1em;
}

.wpcf7 input[type="submit"] {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background: #005bb5;
}

Οι ψευδοκλάσεις στο CSS, όπως η :hover, σας επιτρέπουν να διαμορφώνετε στοιχεία ανάλογα με την κατάστασή τους ή την αλληλεπίδραση του χρήστη. Για παράδειγμα, η ψευδοκλάση :hover εφαρμόζει στυλ όταν ο χρήστης περνάει το ποντίκι πάνω από ένα κουμπί ή πεδίο. Αυτό χρησιμοποιείται συχνά για να τονίσει κουμπιά ή να αλλάξει το χρώμα τους όταν γίνεται hover, κάνοντας τις φόρμες σας πιο διαδραστικές και οπτικά ελκυστικές. Άλλες χρήσιμες ψευδοκλάσεις είναι οι :focus (όταν ένα πεδίο είναι επιλεγμένο) και :active (όταν ένα στοιχείο πατιέται). Η χρήση ψευδοκλάσεων βοηθά στη βελτίωση της εμπειρίας χρήστη παρέχοντας άμεση οπτική ανατροφοδότηση καθώς οι επισκέπτες αλληλεπιδρούν με τη φόρμα σας.

Στόχευση συγκεκριμένης φόρμας

Κάθε φόρμα έχει ένα μοναδικό ID, όπως #wpcf7-f123-o1. Χρησιμοποιήστε το για να διαμορφώσετε μόνο αυτή τη φόρμα:

#wpcf7-f123-o1 input[type="text"] {
  background: #f9f9f9;
}
Αντικαταστήστε το f123-o1 με το πραγματικό ID της φόρμας σας. Μπορείτε να βρείτε το μοναδικό ID της φόρμας σας βλέποντας τη σελίδα όπου είναι ενσωματωμένη η φόρμα Contact Form 7, κάνοντας δεξί κλικ στη φόρμα και επιλέγοντας «Επιθεώρηση» (ή «Inspect Element») στον browser σας. Αναζητήστε το <div> με κλάση .wpcf7—το ID θα εμφανιστεί ως κάτι σαν id="wpcf7-f123-o1" στον HTML κώδικα. Χρησιμοποιήστε αυτό το ID στον CSS selector σας για να στοχεύσετε μόνο αυτή τη φόρμα.

Βήμα 4: Χρησιμοποιήστε τις ενσωματωμένες κλάσεις του Contact Form 7

Το Contact Form 7 προσθέτει αυτόματα κλάσεις στα στοιχεία, διευκολύνοντας ακόμη περισσότερο τη στόχευση. Για παράδειγμα:

• .wpcf7-form-control – Όλα τα στοιχεία ελέγχου της φόρμας

• .wpcf7-submit – Το κουμπί υποβολής

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

Παράδειγμα

.wpcf7-form-control.wpcf7-text {
  border-radius: 5px;
}

.wpcf7-submit {
  font-weight: bold;
  letter-spacing: 1px;
}

Βήμα 5: Προεπισκόπηση και προσαρμογή

Αφού αποθηκεύσετε το CSS σας, ανανεώστε το site σας για να δείτε τις αλλαγές. Χρησιμοποιήστε το εργαλείο επιθεώρησης του browser σας για να τροποποιήσετε τα στυλ σε πραγματικό χρόνο πριν τα αντιγράψετε στο site σας. Βεβαιωθείτε ότι καθαρίσατε την cache του site σας μετά τις αλλαγές ώστε να είναι ορατές στους επισκέπτες.

Ακολουθούν παραδείγματα πριν και μετά μιας φόρμας σε demo site, όπου χρησιμοποιήσαμε τον CSS κώδικα από το Βήμα 3 για να κάνουμε τα πλαίσια γύρω από κάθε πεδίο της φόρμας μπλε. 

Γρήγορες συμβουλές για καλύτερη διαμόρφωση φορμών

• Διατηρήστε την προσβασιμότητα: Εξασφαλίστε καλή αντίθεση χρωμάτων και ευανάγνωστα μεγέθη γραμματοσειράς

• Χρησιμοποιήστε αποστάσεις: Προσθέστε padding και περιθώρια για καθαρή, τακτοποιημένη εμφάνιση

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

• Δοκιμάστε σε κινητά: Βεβαιωθείτε ότι οι φόρμες σας φαίνονται υπέροχες σε όλες τις συσκευές

Αντιμετώπιση προβλημάτων

Αν τα στυλ σας δεν εμφανίζονται, δοκιμάστε τα εξής βήματα:

• Καθαρίστε την cache του browser και του site σας – Μερικές φορές τα αποθηκευμένα αρχεία εμποδίζουν την εμφάνιση του νέου CSS. Αν χρησιμοποιείτε plugin cache ή managed hosting, καθαρίστε και αυτές τις cache.

• Ελέγξτε για προβλήματα ειδικότητας CSS – Αν τα στυλ σας δεν εφαρμόζονται, δοκιμάστε να κάνετε τους selectors σας πιο συγκεκριμένους για να παρακάμψετε υπάρχοντα στυλ.

• Βεβαιωθείτε ότι επεξεργάζεστε το σωστό αρχείο ή τμήμα CSS – Ελέγξτε διπλά ότι προσθέτετε τον κώδικά σας στο σωστό σημείο, όπως το Additional CSS panel, το style.css του child theme ή κάποιο custom CSS plugin.

• Ελέγξτε τις κλάσεις CSS για τυπογραφικά ή λάθη – Αναζητήστε λανθασμένα ονόματα κλάσεων, περιττά κενά ή κατά λάθος χρήση λάθος κλάσης. Επίσης, βεβαιωθείτε ότι η κλάση που στοχεύετε υπάρχει πράγματι στο HTML της φόρμας σας.

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

• Ακολουθήστε γενικές βέλτιστες πρακτικές – Χρησιμοποιήστε σαφή και συνεπή ονοματολογία για τις κλάσεις σας, τελειώστε κάθε κανόνα CSS με ερωτηματικό, και πάντα να κλείνετε σωστά τα blocks με αγκύλη (}).

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

Παράδειγμα: Πλήρες προσαρμοσμένο CSS για φόρμα Contact Form 7

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #218838;
}

Ακολουθεί ένα παράδειγμα φόρμας διαμορφωμένης με τον παραπάνω CSS κώδικα. Αυτός ο CSS κώδικας προσαρμόζει την εμφάνιση αρκετών βασικών στοιχείων στη φόρμα Contact Form 7. Στοχεύει όλα τα πεδία κειμένου, email και τα textareas, δίνοντάς τους ανοιχτό γκρι περίγραμμα, στρογγυλεμένες γωνίες, άνετο padding και σταθερό πλάτος για καθαρή, μοντέρνα εμφάνιση. 

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

Προσθήκη CSS: κλασικά θέματα vs block θέματα

Τα βήματα αυτού του οδηγού για διαμόρφωση φορμών Contact Form 7 με CSS αφορούν τα Κλασικά Θέματα στο WordPress. Τα Κλασικά Θέματα, όπως το δημοφιλές Astra, χρησιμοποιούν το Customizer, όπου μπορείτε εύκολα να προσθέσετε προσαρμοσμένο CSS στην ενότητα «Πρόσθετο CSS». Αυτό κάνει απλή τη διαμόρφωση των φορμών σας και την άμεση προεπισκόπηση των αλλαγών.

Ωστόσο, αν το site σας χρησιμοποιεί Block Theme (μερικές φορές ονομάζεται Full Site Editing ή FSE theme), η διαδικασία είναι διαφορετική. Τα Block Themes δεν περιλαμβάνουν πάντα το Customizer ή το πεδίο «Πρόσθετο CSS» από προεπιλογή. Αντί αυτού, χρησιμοποιείτε το Site Editor για να κάνετε αλλαγές στο design. Ενώ μπορείτε να προσαρμόσετε καθολικά στυλ για χρώματα, τυπογραφία και διάταξη, η προσθήκη αυθαίρετου προσαρμοσμένου CSS δεν είναι πάντα διαθέσιμη στο UI.

Τι να κάνετε αν χρησιμοποιείτε Block Theme

• Ανοίξτε τον πίνακα ελέγχου του WordPress και μεταβείτε στο Εμφάνιση > Επεξεργαστής (Site Editor).

• Στον Site Editor, αναζητήστε το πάνελ Styles (το εικονίδιο με τον μισοσκιασμένο κύκλο).

• Ορισμένα Block Themes προσφέρουν πλέον επιλογή «Πρόσθετο CSS» στο πάνελ Styles, αλλά αυτό εξαρτάται από το θέμα και την έκδοση του WordPress.

• Αν δεν βλέπετε επιλογή για προσθήκη προσαρμοσμένου CSS, μπορείτε να χρησιμοποιήσετε ένα plugin όπως το WPCode για να προσθέσετε προσαρμοσμένο CSS σε όλο το site. WPCode είναι φιλικό για αρχάριους και λειτουργεί με οποιοδήποτε θέμα, διασφαλίζοντας ότι μπορείτε να διαμορφώσετε τις φόρμες σας ακόμα κι αν το θέμα σας δεν υποστηρίζει άμεση επεξεργασία CSS στο UI. Να γνωρίζετε μόνο ότι η εγκατάσταση αυτού του plugin μπορεί να επηρεάσει το στυλ άλλων προϋπαρχουσών φορμών στο site σας. 

Πρόσθετοι πόροι

• Επίσημος οδηγός διαμόρφωσης Contact Form 7

Η διαμόρφωση των φορμών Contact Form 7 είναι ένας απλός αλλά ισχυρός τρόπος να αναβαθμίσετε την εμπειρία χρήστη του site σας. Με λίγες γραμμές CSS, μπορείτε να κάνετε τις φόρμες σας να φαίνονται και να νιώθουν σαν φυσικό κομμάτι του brand σας.