Πολυσταδιακή Φόρμα: Δημιουργία & Βέλτιστες Πρακτικές

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

Σχεδιασμός Πολυσταδιακής Φόρμας

Ο στόχος είναι να οργανώσουμε τα δεδομένα που ζητάμε από τους χρήστες με λογικό τρόπο, χωρίζοντας τις ερωτήσεις σε ξεχωριστά στάδια:

1. Προσωπικές Πληροφορίες: Όνομα, email, τηλέφωνο.
2. Επαγγελματική Εμπειρία: Πρόσφατη εταιρεία, τίτλος εργασίας, χρόνια εμπειρίας.
3. Δεξιότητες και Προσόντα: Καταγραφή δεξιοτήτων και το ανώτατο πτυχίο.
4. Ανασκόπηση & Υποβολή: Επιβεβαίωση των δεδομένων πριν από την υποβολή.

Κάθε στάδιο είναι αυτοτελές και επικεντρώνεται σε ένα συγκεκριμένο μέρος των δεδομένων.

Δημιουργία της HTML Δομής

Η φόρμα μας θα περιλαμβάνει τέσσερα διαφορετικά πεδία (fieldset), με κάθε ένα να αντιστοιχεί σε ένα βήμα. Ορίστε η βασική δομή:

<form id="jobApplicationForm">
  <!-- Βήμα 1: Προσωπικές Πληροφορίες -->
  <fieldset class="step" id="step-1">
    <legend>Βήμα 1: Προσωπικές Πληροφορίες</legend>
    <label for="name">Ονοματεπώνυμο</label>
    <input type="text" id="name" name="name" required />
    <label for="email">Διεύθυνση Email</label>
    <input type="email" id="email" name="email" required />
    <label for="phone">Αριθμός Τηλεφώνου</label>
    <input type="tel" id="phone" name="phone" required />
  </fieldset>

  <!-- Βήμα 2: Επαγγελματική Εμπειρία -->
  <fieldset class="step" id="step-2" hidden>
    <legend>Βήμα 2: Επαγγελματική Εμπειρία</legend>
    <label for="company">Τελευταία Εταιρεία</label>
    <input type="text" id="company" name="company" required />
    <label for="jobTitle">Τίτλος Εργασίας</label>
    <input type="text" id="jobTitle" name="jobTitle" required />
    <label for="yearsExperience">Χρόνια Εμπειρίας</label>
    <input type="number" id="yearsExperience" name="yearsExperience" min="0" required />
  </fieldset>

  <!-- Βήμα 3: Δεξιότητες και Προσόντα -->
  <fieldset class="step" id="step-3" hidden>
    <legend>Βήμα 3: Δεξιότητες και Προσόντα</legend>
    <label for="skills">Δεξιότητες</label>
    <textarea id="skills" name="skills" rows="4" required></textarea>
    <label for="highestDegree">Ανώτατο Πτυχίο</label>
    <select id="highestDegree" name="highestDegree" required>
      <option value="">Επιλέξτε Πτυχίο</option>
      <option value="highschool">Απολυτήριο Λυκείου</option>
      <option value="bachelor">Πτυχίο</option>
      <option value="master">Μεταπτυχιακό</option>
      <option value="phd">Διδακτορικό</option>
    </select>
  </fieldset>

  <!-- Βήμα 4: Ανασκόπηση & Υποβολή -->
  <fieldset class="step" id="step-4" hidden>
    <legend>Βήμα 4: Ανασκόπηση & Υποβολή</legend>
    <p>Ελέγξτε τις πληροφορίες πριν την υποβολή.</p>
    <button type="submit">Υποβολή</button>
  </fieldset>
</form>

Στυλ και Δυναμική Πλοήγηση

Στυλ

Για απλοποίηση, μπορούμε να χρησιμοποιήσουμε το Simple.css:

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />

Πλοήγηση

Για την πλοήγηση μεταξύ βημάτων, χρησιμοποιούμε κουμπιά Επόμενο και Προηγούμενο:

<button type="button" class="next" onclick="nextStep()">Επόμενο</button>
<button type="button" class="previous" onclick="previousStep()">Προηγούμενο</button>

Η JavaScript για την πλοήγηση:

let currentStep = 1;
const steps = document.querySelectorAll(".step");

function showStep(step) {
  steps.forEach((el, index) => {
    el.hidden = index + 1 !== step;
  });
  currentStep = step;
}

function nextStep() {
  showStep(currentStep + 1);
}

function previousStep() {
  showStep(currentStep - 1);
}

Βελτιώσεις Εμπειρίας Χρήστη

Δείκτης Προόδου

Προσθέστε έναν δείκτη προόδου για να κατανοεί ο χρήστης πού βρίσκεται:

<div class="stepper">
  <span><span class="currentStep">1</span>/4</span>
</div>

Ενημερώστε το βήμα στο showStep: (javascript)

const currentStepDiv = document.querySelector(".currentStep");

function showStep(step) {
  steps.forEach((el, index) => {
    el.hidden = index + 1 !== step;
  });
  currentStep = step;
  currentStepDiv.innerText = currentStep;
}

Αποθήκευση Δεδομένων

Χρησιμοποιήστε το localStorage για αποθήκευση και ανάκτηση δεδομένων: (javascript)

// Αποθήκευση δεδομένων κατά την εισαγωγή
form.addEventListener("input", () => {
  const formData = {
    name: name.value,
    email: email.value,
    phone: phone.value,
    company: company.value,
    jobTitle: jobTitle.value,
    yearsExperience: yearsExperience.value,
    skills: skills.value,
    highestDegree: highestDegree.value,
  };
  localStorage.setItem("formData", JSON.stringify(formData));
});

// Ανάκτηση δεδομένων κατά τη φόρτωση της σελίδας
window.addEventListener("DOMContentLoaded", () => {
  const savedData = JSON.parse(localStorage.getItem("formData"));
  if (savedData) {
    name.value = savedData.name || "";
    email.value = savedData.email || "";
    phone.value = savedData.phone || "";
    company.value = savedData.company || "";
    jobTitle.value = savedData.jobTitle || "";
    yearsExperience.value = savedData.yearsExperience || "";
    skills.value = savedData.skills || "";
    highestDegree.value = savedData.highestDegree || "";
  }
});

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