Κουμπιά ραδιοφώνου HTML που μετατρέπουν: Ο οριστικός οδηγός

Τα κουμπιά ραδιοφώνου φαίνονται απλά. Ένα κλικ, μια επιλογή. Ωστόσο, είναι επίσης ένας από τους ευκολότερους τρόπους για να θέσετε σε κίνδυνο το UX και την προσβασιμότητα. Απόκρυψη της εγγενούς εισαγωγής, παραλείψτε τοσύνολο πεδίωνκαιθρύλος, ή επικυρώστε πολύ επιθετικά και θα στείλετε μια φόρμα που προκαλεί σύγχυση στους χρήστες του πληκτρολογίου, απογοητεύει τους αναγνώστες οθόνης και αιμορραγεί τις μετατροπές.

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

Θα δείτε πρακτικά μοτίβα επικύρωσης που δεν γκρινιάζουν, αποκριτικές διατάξεις που διατηρούν μεγάλους στόχους σε κινητά και αποσπάσματα παραγωγής που μπορείτε να επικολλήσετε σε οποιαδήποτε στοίβα. Θα καλύψουμε επίσης αναλυτικά στοιχεία, ιδέες A/B και μια ρύθμιση Formspree, ώστε να μπορείτε να τραβήξετε άμεσα αποτελέσματα.

Για ποιους απευθύνεται: σχεδιαστές, προγραμματιστές front-end και εμπόρους που ενδιαφέρονται και για τα δύοπροσβασιμότητακαιμετατροπή. Δεν απαιτούνται βαριά πλαίσια, μόνο σταθερό HTML, εστιασμένο CSS και λίγη προοδευτική βελτίωση.

Στο τέλος, θα ξέρετε:

• Όταν τα ραδιόφωνα χτυπούν, επιλέγει, πλαίσια ελέγχου ή εναλλάσσει
• Πώς να δημιουργήσετε μια προσβάσιμη ομάδα ραδιοφώνου (σύνολο πεδί��ν,θρύλος, επισήμανση, εστίαση)
• Πώς να κάνετε στυλ προσαρμοσμένων ραδιοφώνων με «κάρτα» χωρίς να κρύβετε την είσοδο
• Τρόπος επικύρωσης με το API περιορισμού HTML (και καλό μήνυμα)
• Πώς να συνδέσετε ραδιόφωνα στο Formspree και να μετρήσετε τις επιλογές

TL;DR

• Χρήσηραδιόφωναγια ακριβώςέναεπιλογή μέσα σε ένα καλά καθορισμένο σύνολο (ιδανικά2–6 επιλογές) που θα έπρεπε να είναιορατό αμέσως.
• Να τυλίγετε πάντα τα ραδιόφωνα σε<σύνολο πεδίου>+<θρύλος>, δώσε τους τοίδιαόνομακαι κάντε κάθε επιλογή ωςμε δυνατότητα κλικ<ετικέτα>.
• Μην κρύβετε τις εισόδους μεεμφάνιση: κανένα; κρατήστε ταεστιάσιμο(π.χ.,αδιαφάνεια:0; θέση:απόλυτη; ένθετο:0) οπότεΚαρτέλα/Βέλη/Διάστημαεργασία.
• Κάντε μεγάλους στόχους: τουλάχιστον44×44px, με έναδακτύλιος εστίασηςαυτό φαίνεται ξεκάθαρα.
• Επικύρωση με τοAPI περιορισμού HTML(απαιτείται,reportValidity()), στη συνέχεια βελτιώστε τα μηνύματα και όχι το αντίστροφο.
• Εάν έχετε πολλές επιλογές ή δεν είναι γνωστές, προσθέστεβοηθητικό κείμενοκάτω από κάθε ετικέτα και λάβετε υπόψηαναζήτηση ή ομαδοποίησηαντί.
• Σε κινητά, στοιβάστε στομία στήλη; σε ευρείες οθόνες,2–3 στήλεςμέσω πλέγματος CSS.
• Μέτρο: κομμάτιεμφανίσεις, επιλογή και υποβολή, και Α/Β δοκιμήπαραγγελία επιλογήςκαιαντίγραφο.
• Για Formspree, κρατήστεεγγενής POSTως εναλλακτική λύση? προσθήκηφέρωμόνο ως προοδευτική ενίσχυση.

Πότε να χρησιμοποιείτε ραδιόφωνα (Δέντρο αποφάσεων)

Q1. Επιλέγει ο χρ��στης ακριβώς μία επιλογή;

• Όχι →Χρήσηπλαίσια ελέγχου(0–πολλά) ή έναεναλλαγή(δυαδικό) ή ξανασκεφτείτε την εργασία.
• Ναι →Μεταβείτε στο Q2.

Ε2. Πρέπει οι επιλογές να είναι ορατές με μια ματιά;

• Ναι →Χρήσηραδιόφωνα(το καλύτερο για σ��ρωση και γρήγορη επιλογή).
• Όχι (ο χώρος είναι στενός / πολλές επιλογές)→ Σκεφτείτε έναεπιλέξτε(αναπτυσσόμενο). Εάν οι επιλογές είναι κρίσιμες και επωφελούνται από τη σύγκριση, προτιμήστε ραδιόφωνα και επανασχεδιάστε τη διάταξη.

Ε3. Πόσες επιλογές;

• 2–6→ Τα ραδιόφωνα είναι ιδανικά.
• 7–10→ Τα ραδιόφωνα μπορεί να εξακολουθούν να λειτουργούν με ομαδοποίηση ή έναδίστηληπλέγμα; διαφορετικά χρησιμοποιήστε μια λίστα επιλογής ή μια λίστα με δυνατότητα αναζήτησης.
• >10→ Χρησιμοποιήστε έναεπιλέξτε με αναζήτησηή έναβήμαπου στενεύει πρώτα το σετ.

Q4. Είναι οι επιλογές αμοιβαία αποκλειόμενες πολιτείες;

• Ναι →Ραδιόφωνα.
• Όχι / οι συνδυασμοί έχουν νόημα →Πλαίσια ελέγχου.

Q5. Η επιλογή θα ενεργοποιήσει διαφορετικές επακόλουθες ερωτήσεις;

• Ναι →Τα ραδιόφωνα ακόμα καλά. Εμφάνιση παρακολούθησηςυ��ό όρους, αλλά κρατήστε κρυφά πεδίαεκτός καρτέλας σειράκαι SR ροή μέχρι να αποκαλυφθεί.
• Όχι →Απλή ομάδα ρ��διοφώνου.

Ε6. Γνωστό έναντι περιγραφικό;

• Γνωστές ετικέτες(π.χ. "Μικρό / Μεσαίο / Μεγάλο") → αρκούν οι σύντομες ετικέτες.
• Άγνωστο ή υψηλού στοιχήματος(π.χ. "Τεχνικό SEO έναντι SEO περιεχομένου") → προσθήκημικροαντίγραφο(περιγραφή μιας γραμμής) κάτω από κάθε ετικέτα.

Ε7. Το κινητό πρώτα;

• Ναι (πάντα)→ Χρήσηστοίβα μιας στήληςμε άφθονα διαστήματα και κείμενο 16–18 εικονοστοιχείων. Προωθήστε τοπιο επιλεγμέναεπιλογή προς την κορυφή.

Πρακτικά παραδείγματα

• Η φόρμα σας: "Ποια υπηρεσία;" → Τα ραδιόφωνα ξεπερνούν έναν επιλεγμένο, επειδή οι χρήστες πρέπει να συγκρίνουν τις επιλογές δίπλα-δίπλα. Κρατήστε 3 κάρτες (Κτίριο συνδέσμων, SEO, Web Dev) με σύντομο υποκείμενο.
• Ταχύτητα αποστολής: 3–4 αμοιβαία αποκλειστικές ταχύτητες → Ραδιόφωνα (με δέλτα τιμών σε υποκείμενο).
• Συχνότητα ενημερωτικών δελτίων: Καθημερινά/Εβδομαδιαία/Μηνιαία → Ραδιόφωνα.
• Ενδιαφέροντα (μπορεί να επιλέξει πολλαπλά)→ Όχι ραδιόφωνα. χρησιμοποιήστε πλαίσια ελέγχου.

Ανατομία μιας σωστής ομάδας ραδιοφώνου

Αντιγραφή-επικόλληση σημασιολογικής γραμμής βάσης (δεν υπάρχει ακόμα φανταχτερό CSS)

Ποια υπηρεσία χρειάζεστε;

Διαλέξτε μία επιλογή που ταιριάζει καλύτερα στο στόχο σας.



<ετικέτα>

Κτίριο συνδέσμου


<ετικέτα>

Βελτιστοποίηση μηχανών αναζήτησης


<ετικέτα>

Σχεδίαση / Ανάπτυξη Ιστού






Συνέχεια

Γιατί κάθε μέρος έχει σημασία

• <σύνολο πεδίου>+<θρύλος>δίνει στην ομάδα ένα όνομα για τους αναγνώστες οθόνης και ορίζει το πλαίσιο για όλους.
• Ίδιοόνομακαθιστά τις εισροές αλληλοαποκλειόμενες.
• Με δυνατότητα κλικ<ετικέτα>γύρω από κάθε είσοδοσας δίνει μια τεράστια περιοχή πατήματος/κλικ (44px+).
• απαιτείταιστο πρώτο ραδιόφωνοεπιτρέπει στ�� πρόγραμμα περιήγησης να επικυρώσει την ομάδα εγγενώς.
• Βοηθητικό κείμενο(service-hint) καικείμενο σφάλματος(service-error) είναι ξεχωριστά, ώστε να μπορείτε να εμφανίζετε/κρύβετε σφάλματα χωρίς να μετακινείτε τα πράγματα.
• Δεν χρειάζονται ρόλοι ARIA.Τα εγγενή ραδιόφωνα εκθέτουν ήδη τη σωστή σημασιολογία.

Ελάχιστο CSS για χρηστικότητα (εγγενής εμφάνιση, μεγάλοι στόχοι, σαφής εστίαση)

/* Διάταξη και απόσταση */
Ετικέτα .πεδίου {
οθόνη: flex;
στοίχιση-στοιχεία: κέντρο;
κενό: .6εκ.
padding: .65rem .8rem;      /* στόχος μεγάλου πάτημας */
σύνορα-ακτίνα: .6rem;
δρομέας: δείκτης;
}

/* Εστίαση πληκτρολογίου: επισημάνετε ολόκληρη την ετικέτα όταν η είσοδος είναι εστιασμένη */
.πεδίο label:has(input:focus-visible) {
περίγραμμα: 3px συμπαγές #3b82f6;
outline-offset: 2px;
}

/* Επιλεγμένη κατάσταση (προαιρετικό, η εγγενής κουκκίδα εξακολουθεί να εμφανίζεται) */
.πεδίο label:has(input:checked) {
φόντο: #f1f5ff;
}

/* Κείμενο σφάλματος */
.error { color: #b91c1c; margin-top: .5rem; μέγεθος γραμματοσειράς: .9rem; }

Συμβουλή::has()σας δίνει αυτό το "δακτύλιο εστίασης σε ολόκληρη την κάρτα" χωρίς να κρύβει την πραγματική είσοδο. Εάν ένα παλαιότερο πρόγραμμα περιήγησης δεν το υποστηρίζει, οι χρήστες εξακολουθούν να λαμβάνουν τον εγγενή δακτύλιο εστίασης στο ίδιο το ραδιόφωνο.

Απαλή, προσβάσιμη επικύρωση (χρησιμοποιεί πρώτα το πρόγραμμα περιήγησης)

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

const form = document.getElementById('quote-form');
const group = document.getElementById('service-group');
const error = document.getEementById('service-error');

formula 'true')
  // Trigger native validation UI (works because the first radio has `required`)
Συμπεριφορά που πρέπει να περιμένετε (και να δοκιμάσετε):
Πληκτρολόγιο:
Tab μία φορά για να μπείτε στην ομάδα. χρήση
Πλήκτρα βέλους
να κινηθεί?
Χώρος
επιλέγει.
Αναγνώστες οθόνης:
Ο θρύλος διαβάζεται ως ετικέτα ομάδας. κάθε επιλογή ανακοινώνεται με την κατάσταση «επιλεγμένη/μη επιλεγμένη».
Αγγίξτε:

Πατώντας την ετικέτα εναλλάσσεται το ραδιόφωνο (χάρη στο τύλιγμα ετικετών).

• Ραδιόφωνα με "κάρτα" προσαρμοσμένου στυλ (χωρίς διακοπή προσβασιμότητας)Αντιγραφή-επικόλληση HTMLArrow keys to move; Space selects.
• Screen readers: The legend is read as the group label; each option is announced with “selected/not selected” state.
• Touch: Tapping the label toggles the radio (thanks to label wrapping).

Custom-Styled “Card” Radios (without breaking accessibility)

Copy-paste HTML

<σύνολο πεδίου>
Επιλέξτε ένα σχέδιο

Διαλέξτε μία επιλογή. Μπορείτε να αλλάξετε οποιαδήποτε στιγμή.





Εκκίνηση
Καλό για μικρούς ιστότοπους




Ανάπτυξη
Πιο δημοφιλή




Pro
Σύνθετες λειτουργίες

Ελάχιστο, στιβαρό CSS

:root{
--brand:#0b5cff; --ring: rgba(11,92,255,.35);
--border:#e5e7eb; --bg:#fff; --muted:#6b7280;
--ακτίνα:14px;
}

/* Πλέγμα */
.κάρτα-ομάδα{
οθόνη: grid; κενό:16px;
grid-template-collumns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .card-group{ grid-template-columns:1fr; } }

/* Ετικέτα κάρτας */
.κάρτα{
θέση:συγγενής;
οθόνη: grid; τόπος-αντικείμενα:κέντρο; text-align:center;
κενό: 6px; padding:18px;
περίγραμμα: 1px στε��εό var(--border); border-radius:var(--radius);
φόντο:var(--bg);
δρομέας:δείκτης; user-select:none;
μετάβαση: κουτί-σκιά .15s, περίγραμμα-χρώμα .15s, μετασχηματισμός .02s;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Διατηρήστε την εγγενή είσοδο με δυνατότητα εστίασης: no display:none */
Είσοδος .κάρτας{
θέση:απόλυτη; ένθετο: 0; αδιαφάνεια:0;
}

/* Δαχτυλίδι εστίασης πληκτρολογίου σε ολόκληρη την κάρτα */
.card:has(input:focus-visible){
box-shadow:0 0 0 3px var(--ring);
χρώμα περιγράμματος: var(--brand);
}

/* Επιλεγμένη κατάσταση */
.card:has(input:checked){
χρώμα περιγράμματος: var(--brand);
box-shadow:0 0 0 3px var(--ring);
}

/* Περιεχόμενο */
.card-title{ font-weight:700; color:#111; }
.card-sub{ font-size:14px; color:var(--muted); }

/* Κείμενο σφάλματος */
.error{ color:#b91c1c; margin-top:.5rem; μέγεθος γραμματοσειράς:.9rem; }

Σημειώσεις συμπεριφοράς (γιατί λειτουργεί αυτό το μοτίβο)

• Όχιεμφάνιση: κανέναστην είσοδο → οι χρήστες πληκτρολογίου μπορούν να εισέλθουν με Tab in.Πλήκτρα βέλουςεπιλογή μετακίνησης.Χώροςεπιλέγει.
• Ολόκληρη η κάρτα μπορεί να κάνει κλικ επειδή η είσοδος βρίσκεται μέσα στοετικέτα.
• :has()μας αφήνει το στυλεστίασηκαιελεγμένοδηλώνει στη γονική κάρτα χωρίς εισβολές ARIA.
• Το αποκριτικό πλέγμα δίνει1–3 στήλεςαυτομάτως; Οι στόχοι αφής παραμένουν μεγάλοι.

Προαιρετικό: ήπια επικύρωση (αρχική εγγενής)

const form = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // χρησιμοποιεί το `required` στην πρώτη ραδιοφωνική μετάδοση
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;||}
Στρατηγικές επικύρωσης που δεν ενοχλούν
Η μεγάλη επικύρωση είναι αόρατη μέχρι να χρειαστεί. Ακολουθεί μια προσέγγιση ειδικά για το ραδιόφωνο που είναι γρήγορη, προσβάσιμη και καταπραϋντική για τους χρήστες.

Αρχές

Πρώτα η μητρική.

Αφήστε το HTML να χειριστεί "πρέπει να επιλεγεί".

• Αναβολή σφαλμάτων.Μην φωνάζετε στους χρήστες προτού προσπαθήσουν να συνεχίσουν.
• Επισημάνετε το πρόβλημα.Ανακοινώστε τα σφάλματα, μετακινήστε έξυπνα την εστίαση και διατηρήστε το αντίγραφο σύντομο.
• Καθαρίστε την αλλαγή.Μόλις γίνει μια έγκυρη επιλογή, αφαιρέστε το σφάλμα.
• Γραμμή βάσης (μόνο εγγενής)Μόνο η HTML μπορεί να επιβάλει τον κανόνα με

απαιτείται

σε ένα ραδιόφωνο στην ομάδα.

Διαλέξτε μία επιλογή.

<ετικέτα>


  <label>
    <input type="radio" name="service" value="link" required>
Κτίριο συνδέσμου

<ετικέτα>

Βελτιστοποίηση μηχανών αναζήτησης

<ετικέτα>

Σχεδίαση / Ανάπτυξη Ιστού

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

Φιλικά ενσωματωμένα σφάλματα (προοδευτική βελτίωση)

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

HTML (προσθήκη περιοχής σφάλματος)

Συνέχεια

CSS (απλό στυλ)

.error { color:#b91c1c; margin-top:.5rem; μέγεθος γραμματοσειράς:.9rem; }

JS (αναβολή σφαλμάτων, αναγγελία σωστά)

const form = document.getElementById('quote');
const group = document.getElementById('svc');
const err = document.getElementById('svc-err');
const radios = form.querySelectorAll('input[name="service"]');

ας επιχειρήθηκε = ψευδής? // εμφάνιση σφαλμάτων μόνο αφού ο χρήστης προσπαθήσει να συνεχίσει

συνάρτηση hasSelection() {
επιστροφή [...ραδιόφωνα].some(r => r.checked);
}

συνάρτηση showError(msg='Διαλέξτε μία επιλογή.') {
err.textContent = msg;
err.hidden = ψευδής;
group.setAttribute('aria-invalid', 'true');
// Προσθήκη σφάλματος στο descriptionby, ώστε οι SR να το ανακοινώσουν την επόμενη
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

συνάρτηση clearError() {
err.hidden = true;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-describedby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
επιχειρήθηκε = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// Φέρτε την ομάδα στην προβολή και τοποθετήστε την εστίαση στο πρώτο ραδιόφωνο | 'smooth', block: 'center' } else {
.
// Μην γκρινιάζετε νωρίς. ξεκαθαρίστε μόλις διαλέξουν κάτι
radios.forEach(r => {
r.addEventListener('change', () => {
if (επιχειρήθηκε) clearError();
});

});
Γιατί αυτό λειτουργεί
Δεν υπάρχουν φυσαλίδες επεξήγησης εργαλείου προγράμματος περιήγησης. οι χρήστες βλέπουν σφάλματα
εν σειρά
δίπλα στην ομάδα.
Οι αναγνώστες οθόνης ακούνε το

θρύλος

• , μετά τοσφάλμα, χάρη στο
• aria-περιγράφεται από.Τα σφάλματα εμφανίζονται μόνομετάμια προσπάθεια υποβολής (ή κατά την επιστροφή για επιδιόρθωση).Απαλή επικύρωση ανά βήμα (φόρμες πολλαπλών βημάτων)Εάν εισέρχεστε με ένα κουμπί "Επόμενο", επικυρώστε ακριβώς αυτό το βήμα.
• document.getElementById('nextBtn').addEventListener('κλικ', () => {if (!hasSelection()) {showError();

} else {

clearError();

// προχωρήστε στο επόμενο βήμα...
}
});
Προσαρμοσμένα μηνύματα με το Constraint API (προαιρετικό)
Εάν προτιμάτε να διατηρήσετε το μοντέλο εγκυρότητας του προγράμματος περιήγησης, ορίστε ένα προσαρμοσμένο μήνυμα στο
πρώτο
ραδιόφωνο στην ομάδα.
const firstRadio = ραδιόφωνα[0];

form.addEventListener('submit', (e) => {

if (!hasSelection()) {firstRadio.setCustomValidity('Παρακαλώ επιλέξτε μία επιλογή.'); } else {firstRadio.setCustomValidity('') }

.
Χρησιμοποιήστε το όταν θέλετε το εγγενές "φούσκα" συν το δικό σας κείμενο, διαφορετικά ακολουθήστε την παραπάνω μέθοδο ενσωματωμένης για συνεπή διεπαφή χρήστη.
Σύνοψη σφαλμάτων (για μεγάλες φόρμες)
Εάν η φόρμα σας είναι μεγάλη, προσθέστε ένα
κορυφή περίληψη
που συνδέεται με την προβληματική περιοχή.

συνάρτηση showSummary() {
const sum = document.getElementById('error-summary');

sum.hidden = ψευδής;

sum.querySelector('a').focus(); // Οι SR ανακοινώνουν την ειδοποίηση

}Εναλλακτικά από την πλευρά του διακομιστή και του δικτύουΗ επικύρωση από την πλευρά του πελάτη βελτιώνει το UX, αλλά

πάντα
επικυρώστε και στον διακομιστή (ή στην υπηρεσία υποβολής σας). Εάν η υποβολή αποτύχει, επιστρέψτε τη σελίδα με:
</div>

function showSummary() {
  const sum = document.getElementById('error-summary');
  sum.hidden = false;
  sum.querySelector('a').focus(); // SRs announce the alert
}

Server-side & network fallbacks

Client-side validation improves UX, but always validate on the server (or by your submission service) too. If submission fails, return the page with:

• Το προηγούμενοη επιλογή παρέμεινε, και
• Τοίδιο ενσωματωμένο σφάλμαδίπλα στην ομάδα.

Formspree Integration (Progressive Enhancement)

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

Εγγενής HTML (λειτουργεί πάντα)

<μορφή
id="quote"
action="https://formspree.io/f/your_form_id"
μέθοδος="POST"
>
<σύνολο πεδίου>
Ποια υπηρεσία χρειάζεστε;

Διαλέξτε μία επιλογή.




Κτίριο συνδέσμου
Κερδίστε backlinks υψηλής ποιότητας.




Βελτιστοποίηση μηχανών αναζήτησης
Ενισχύστε την κατάταξη και την επισκεψιμότητα.




Σχεδίαση / Ανάπτυξη Ιστού
Γρήγοροι ιστότοποι που προορίζονται για κινητά.



<ετικέτα>
Ονοματεπώνυμο



<ετικέτα>
Ηλεκτρονικό ταχυδρομείο









Λήψη της δωρεάν πρότασής μου

Τι σας δίνει αυτό:

• Λειτουργεί με JS off (καλό για SEO, αξιοπιστία).
• Το πρόγραμμα περιήγησης χειρίζεται "πρέπει να επιλεγεί" (απαιτείταιστο πρώτο ραδιόφωνο).
• Το Formspree λαμβάνειυπηρεσία,όνομα,email, και_θέμα.

Βελτίωση JS (ωραίο UX, καλύτερη παρακολούθηση)

Κλείστε την υποβολή, επικυρώστε, στείλτε μεφέρω, και εμφανίστε ένα ενσωματωμένο ευχαριστώ (ή ανακατεύθυνση).

Σημειώσεις

• ΣετΑποδοχή: application/jsonοπότε το Formspree επιστρέφει JSON και μπορείτε να αποφασίσετε καθαρά την επιτυχία/αποτυχία.
• Χρήσηform.reportValidity()έτσι το πρόγραμμα περιήγησης επιβάλλει την επιλογή ραδιοφώνου και τη μορφή email πριν στείλετε.
• Κρατήστε το μητρικόδράση/μέθοδοςοπότε η φόρμα εξακολουθεί να λειτουργεί χωρίς JS.

Έλεγχος ανεπιθύμητων μηνυμάτων χωρίς να βλάπτονται οι μετατροπές

• Honeypot(περιλαμβάνεται παραπάνω) πιάνει πολλά bots με μηδενική τριβή.
• Χρονομέτρηση: προσθήκη ενός κρυφούξεκίνησε_στοόταν φορτώνει η σελίδα. αγνοήστε τις υποβολές πιο γρήγορα από, ας πούμε, 2 δευτερόλεπτα.
• Σήματα περιεχομένου: εάν βλέπετε επαναλαμβανόμενε�� ανεπιθύμητες τιμές, φιλτράρετε τις στους κανόνες Formspree ή στη μετεπεξεργασία.

// στον χειριστή υποβολής πριν από την αποστολή:
const start = Αριθμός(fd.get('started_at'));
if (Date.now() - start < 2000) return? // μοιάζει με ρομπότ

Γραμμές θέματος που αντικατοπτρίζουν την επιλογή ραδιοφώνου (καθαρά εισερχόμενα)

Μπορείτε να προσαρμόσετε_θέμααπό το επιλεγμένο ραδιόφωνο:

const service = fd.get('service'); // π.χ., "seo"
fd.set('_subject', `Νέος δυνητικός πελάτης ${service} από τη φόρμα επικοινωνίας`);

Κοινές παγίδες προς αποφυγή

• Απόκρυψη ραδιοφώνων μεεμφάνιση: κανένα.Χρήσηαδιαφάνεια:0; θέση:απόλυτη; ένθετο:0μέσα στην ετικέτα, έτσι τα πληκτρολόγια εξακολουθούν να λειτουργούν.
• Ξεχνώνταςσύνολο πεδίων/θρύλος.Οι αναγνώστες οθόνης βασίζονται σε αυτά για το πλαίσιο.
• Υπερ-επικύρωση έγκαιρα.Εμφάνιση σφαλμάτων μετά την υποβολή/Επόμενο και, στη συνέχεια, διαγράψτε τα αμέσως μόλις ο χρήστης διορθώσει την ομάδα.
• Δεν καταγράφεται το πλαίσιο.Προσθήκηpage_url,παραπομπός, και πεδία UTM, θα ευχαριστήσετε τον εαυτό σας αργότερα.

Διεθνοποίηση & Συμμετοχικότητα

Γλώσσα, ετικέτες και τόνος

• Χρησιμοποιήστε τοτης σελίδας γλώσσα(και εναλλαγή σελίδων ανά τοποθεσία): …
• Κρατήστε τις ετικέτες σύντομες καιπεριγραφικό, αποφύγετε την ορολογία της συγκεκριμένης κουλτούρας.
• Προτιμήστεουδέτεροδιατύπωση ("Επιλέξτε ένα σχέδιο") πάνω από υποθέσεις ("Ποιος είναι ο προϋπολογισμός σας;").
• Εντοπισμόςλάθηκαιβοηθητικό κείμενομε ένα απλό λεξικό κλειδωμένο απόdocument.documentElement.lang.

const i18n = {
el: { επιλέξτε: 'Παρακαλώ επιλέξτε μία επιλογή.' },
es: { επιλέξτε: 'Elige una opción, por favor.' },
ar: { επιλέξτε: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('επιλογή');

Μεγάλες ετικέτες & επιλογές πολλαπλών γραμμών

• Αφήστε ετικέτεςτυλίγω; ποτέ μην περικόβεις κρίσιμες λέξεις.
• Διατηρήστε την περιοχή επίσκεψης μεγάλη ακόμα και όταν αναδιπλώνεται το κείμενο: χρησιμοποιήστε padding στοετικέτα, όχι μόνο η εισαγωγή.

.card { inline-size: 100%; padding: 16px; }
.card .card-title { font-weight: 700; Ύψος γραμμής: 1,25; }
.card .card-sub { font-size: 14px; Ύψος γραμμής: 1,4; }

Υποστήριξη από δεξιά προς τα αριστερά (RTL)

Χρησιμοποιήστε CSSλογικές ιδιότητεςκαι:dir()έτσι δεν χρειάζεστε ξεχωριστά στυλ.

/* Διάστημα που αναστρέφεται αυτόματα σε RTL */
.card { padding-inline: 16px; padding-block: 16px; }

/* Δακτύλιος εστίασης που σέβεται την κατεύθυνση */
.card:has(input:focus-visible) {
περίγραμμα: 3px στερεά var(--ring);
outline-offset: 2px;
}

/* Προαιρετικά: προσαρμογές για συγκεκριμένη κατεύθυνση */
:dir(rtl) .card-group {direction: rtl; }

Προσβασιμότητα πέρα ​​από το ARIA

• Βεβαιωθείτεαντίθεση ≥ 4,5:1για ετικέτες και καταστάσεις εστίασης.
• Αγγίξτε στόχους ≥44×44 px(επένδυση αντί για μέγεθος γραμματοσειράς).
• Μην επικοινωνείτε μόνο με βάση το χρώμα. χρήσηπεριγράμματα, εικονίδια ή κείμενο.

Λίστα ελέγχου δοκιμών (Φιλική προς εκτύπωση)

• Σημασιολογία: Τα ραδιόφωνα είναι μέσασύνολο πεδίωνμε ορατόθρύλος.
• Πληκτρολόγιο: Η καρτέλα εισέρχεται στην ομάδα.βέληκίνηση;Χώροςεπιλέγει.
• Αναγνώστες οθόνης: Ανακοινώθηκε ο θρύλος. κάθε επιλογή λέει επιλεγμένο/μη επιλεγμένο.
• Εστίαση: Ορατό δαχτυλίδι στοολόκληρη κάρτα(και στην εγγενή είσοδο).
• Περιοχή χτυπήματος: Ολόκληρη η ετικέτα έχει δυνατότητα κλικ. λειτουργεί σε κινητό.
• Επικύρωση: Δεν υπάρχουν σφάλματα μέχρι την υποβολή/Επόμενο. τα λάθη ξ��κάθαρα κατά την αλλαγή.
• Αντιγραφή: Οι επιλογές είναι σύντομες. Το βοηθητικό κείμενο διευκρινίζει τις διαφορές.
• Διάταξη: 1 στήλη σε τηλέφωνα. 2–3 στην επιφάνεια εργασίας. κανένα απόκομμα υπερχείλισης.
• i18n: Τα σφάλματα/ετικέτες έχουν εντοπιστεί. Το μακρύ κείμενο αναδιπλώνεται με χάρη. RTL ΟΚ.
• Αναλύσεις: Εκδηλώσεις για εμφάνιση, επιλογή, υποβολή.
• Απόδοση: Χωρίς βαριές lib UI. ελάχιστο CSS? καμία αλλαγή διάταξης.

Απόδοση & Συντηρησιμότητα

• Μπομπονιέραεγγενείς εισροές+ ελαφρύ CSS; αποφύγετε την αντικατάσταση των ραδιοφώνων με div.
• Διατηρήστε το CSS αρθρωτό (προσαρμοσμένες ιδιότητες για χρώματα, ακτίνα, δακτύλιο).
• Αποφύγετεεμφάνιση: κανέναστις εισροές? χρήσηαδιαφάνεια:0; θέση:απόλυτη; ένθετο:0έτσι η προσβασιμότητα παραμένει ανέπαφη.
• Αναβολή μη κρίσιμου JS. διατηρήστε τις βελτιώσεις κάτω από ~2–5 KB όταν είναι δυνατόν.
• Χρήσηερωτήματα κοντέινερ(όταν είναι διαθέσιμο) αντί για πολύπλοκα σημεία διακοπής μέσων για ενσωματωμένες φόρμες.

@container (ελάχ. πλάτος: 680 εικονοστοιχεία) {
.card-group { grid-template-columns: 1fr 1fr 1fr; }
}

Αναλύσεις & Πειραματισμοί

Σημεία πρόθεσης και τριβής τροχιάς:

// Ενεργοποίηση όταν η ομάδα ραδιοφώνου γίνεται ορατή
gtag?.('event','form_step_view', { step: 1, form: 'contact' });

// Πυρκαγιά στην επιλογή
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
);
// Ενεργοποίηση κατά την επιτυχή υποβολή

gtag?.('event','generate_lead', { form: 'contact', service: form.service.value });
Δοκιμή Α/Β:

Εντολή επιλογής

• (οι περισσότεροι επιλέχθηκαν πρώτοι)Αντίγραφο CTA
• ("Λάβετε τη δωρεάν πρόταση μου" εναντίον "Λάβετε την προσφορά μου")Βοηθητικό κείμενο
• παρουσίαΑντι-μοτίβα (Μην τα κάνετε αυτά)

Απόκρυψη εισόδων με

• εμφάνιση: κανένα(σπάει πληκτρολόγιο & SR).Λείπει
• σύνολο πεδίων/υπόμνημα.Μικρές περιοχές χτυπήματος (μόνο η μικρή κουκκίδα με δυνατότητα κλικ).
• Κατάσταση επιλογής μόνο χρώματος. αόρατη εστίαση.
• Επικύρωση
• πρινο χρήστης προσπαθεί να προχωρήσει.Συσκευασία 10–20 επιλογών σε ραδιόφωνα. χρησιμοποιήστε μια επιλογή με δυνατότητα αναζήτησης.
• Τελικός κατάλογος ελέγχου

σύνολο πεδίων

• +θρύλοςπαρόνΊδιο
• όνομα, μοναδικόαξίαsΕτικέτες αναδίπλωση εισόδων? ολόκληρη η κάρτα με δυνατότητα κλικ
• Ο δακτύλιος εστίασης είναι ευδιάκριτος
• απαιτείται
• στο πρώτο ραδιόφωνο? ήπια ενσωματωμένα σφάλματαΜε απόκριση πλέγματος 1–3 στηλών, μεγάλοι στόχοι αφής
• Τοπικές συμβολοσειρές. RTL ασφαλές μέσω λογικών ιδιοτήτων
• Analytics κατά την προβολή/επιλογή/υποβολή
• Η επικύρωση από την πλευρά του διακομιστή αντικατοπτρίζει τους κανόνες πελάτη
• Πόροι

Προδιαγραφές & Μοτίβα Συγγραφής

Πρότυπο HTML –

• : εγγενής σημασιολογία, ομαδοποίηση κατάόνομα, σ��μπεριφορά μορφής.WAI-ARIA Συγγραφικές Πρακτικές 1.2 – Ομάδα Ραδιοφώνου
• : αναμενόμενη συμπεριφορά πληκτρολογίου (Καρτέλα σε ομάδα,Βέλοςγια μετακίνηση,Κενόγια επιλογή), μοτίβα ετικετών.WCAG 2.2
• απαραίτητα για ραδιόφωνα:2.1.1
  • Πληκτρολόγιο(όλα λειτουργούν μέσω πληκτρολογίου)2.4.7
  • Εστίαση ορατή(ευκρινώς ορατή εστίαση)2.5.5
  • Μέγεθος στόχου(≥44×44px συνιστάται)1.4.3
  • Αντίθεση (Ελάχιστη)Οδηγοί αναφοράς

MDN

• : Είσοδος ραδιοφώνου,ετικέτα,σύνολο πεδίων/θρύλος, επικύρωση φόρμας (Constraint Validation API).Σύστημα σχεδίασης GOV.UK – Ραδιόφωνα
• : εξαιρετική, δοκιμασμένη σε μάχη καθοδήγηση σχετικά με τη διατύπωση και τα λάθη.Περιεκτικά εξαρτήματα (Heydon Pickering)
• : πρακτικά μοτίβα και κριτικές a11y.Ρίξτε μια ματιά στο πρόσφατο blog μας στο

Πώς να αναζητήσετε Ευκαιρίες ανάρτησης επισκέπτη στο Ahrefs (Οδηγός βήμα προς βήμα)Δοκιμές & Εργαλεία

ax DevTools

• (επέκταση προγράμματος περιήγησης) – αυτοματοποιημένοι έλεγχοι a11y.Προσβασιμότητα Insights
• – γρήγορες καθοδηγούμενες δοκιμές.Φάρος
• – επιδόσεις + σήματα προσβασιμότητας.WebAIM Contrast Checker
• – επαλήθευση χρωματικής αντίθεσης.Αναγνώστες οθόνης
• για να ελέγξετε την πραγματική συμπεριφορά:NVDA
  • (Windows),ΣΑΓΟΝΕΣ(Windows),VoiceOver(macOS/iOS),TalkBack(Android).Χειροκίνητο πάσο πληκτρολογίου
• : Καρτέλα στην ομάδα → Μετακίνηση βέλους → Επιλέγει το διάστημα → ο δακτύλιος εστίασης παραμένει εμφανής.Ρίξτε μια ματιά στο

ανασκόπηση του Noions MarketingΣυχνές ερωτήσεις (Σύντομες & Πρακτικές)

1) Πόσες επιλογές είναι πάρα πολλές για τα ραδιόφωνα;