ایجاد یک فرم چند مرحله ای موثر برای تجربه کاربری بهتر - مجله Smashing

مرحله 3 همه چیز در مورد این است که متقاضی مهارت ها و صلاحیت های خود را برای شغلی که برای آن درخواست می کند فهرست کند:

و در نهایت، به متقاضی اجازه می دهیم قبل از ارسال اطلاعات خود را بررسی کند:

توجه کنید: ما یک را اضافه کرده ایم hidden نسبت دادن به هر fieldset عنصر اما اولین. این تضمین می کند که کاربر تنها مرحله اول را می بیند. پس از اتمام مرحله اول، می توانند با کلیک بر روی دکمه ناوبری، تجربه کاری خود را در مرحله دوم تکمیل کنند. بعداً این دکمه را اضافه خواهیم کرد.

اضافه کردن سبک ها

برای متمرکز نگه داشتن چیزها، ما روی سبک های این آموزش تاکید نمی کنیم. کاری که ما برای ساده نگه داشتن چیزها انجام خواهیم داد این است که از چارچوب سبک Simple.css استفاده کنیم تا فرم را برای بقیه آموزش به شکل خوبی درآوریم.

اگر دنبال می کنید، می توانیم استایل های Simple را در سند قرار دهیم :

And from there, go ahead and create a style.css فایل با سبک های زیر که من تا کرده ام.

  
View CSS
  body {    min-height: 100vh;    display: flex;    align-items: center;    justify-content: center;  }  main {    padding: 0 30px;  }  h1 {    font-size: 1.8rem;    text-align: center;  }  .stepper {    display: flex;    justify-content: flex-end;    padding-right: 10px;  }  form {    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);    padding: 12px;  }  input,  textarea,  select {    outline: none;  }  input:valid,  textarea:valid,  select:valid,  input:focus:valid,  textarea:focus:valid,  select:focus:valid {    border-color: green;  }  input:focus:invalid,  textarea:focus:invalid,  select:focus:invalid {    border: 1px solid red;  }

ناوبری فرم و اعتبارسنجی

یک راه آسان برای از بین بردن تجربه کاربر برای یک فرم چند مرحله ای این است که منتظر بمانید تا کاربر به آخرین مرحله در فرم برسد قبل از اینکه او را از هرگونه خطایی که در طول مسیر مرتکب شده است آگاه کنید. هر مرحله از فرم باید قبل از رفتن به مرحله بعدی برای خطاها تأیید شود و پیام های خطای توصیفی باید نمایش داده شود تا کاربران بتوانند متوجه شوند که چه چیزی اشتباه است و چگونه آن را برطرف کنند.

اکنون، تنها بخشی از فرم ما که قابل مشاهده است، مرحله اول است. برای تکمیل فرم، کاربران باید بتوانند به مراحل دیگر پیمایش کنند. ما قصد داریم از چندین دکمه برای این کار استفاده کنیم. اولین قدم این است که یک بعدی دکمه مرحله دوم و سوم هر دو a قبلی و الف بعدی را فشار دهید، و مرحله چهارم یک قبلی و الف ارسال کنید دکمه

    
        Next  
    
        Previous    Next  
    
        Previous    Next  
    
        Previous    Submit Application  

توجه کنید: اضافه کردیم onclick صفات به قبلی و بعدی دکمه هایی برای پیوند دادن آنها به توابع جاوا اسکریپت مربوطه خود: previousStep() و nextStep().

دکمه "بعدی".

را nextStep() تابع به دکمه Next مرتبط است. هر زمان که کاربر روی دکمه Next کلیک کند، nextStep() تابع ابتدا بررسی می کند تا مطمئن شود که تمام فیلدهای مربوط به هر مرحله ای که کاربر در آن قرار دارد، قبل از رفتن به مرحله بعدی به درستی پر شده است. اگر فیلدها به درستی پر نشده باشند، برخی از پیام های خطا را نمایش می دهد و به کاربر اطلاع می دهد که کار اشتباهی انجام داده است و به او اطلاع می دهد که برای رفع خطاها چه کاری انجام دهد.

قبل از اینکه به پیاده سازی بپردازیم nextStep تابع، متغیرهای خاصی هستند که باید تعریف کنیم زیرا در تابع مورد نیاز خواهند بود. اول، ما به فیلدهای ورودی از DOM نیاز داریم تا بتوانیم آنها را بررسی کنیم تا مطمئن شویم معتبر هستند.

// Step 1 fieldsconst name = document.getElementById("name");const email = document.getElementById("email");const phone = document.getElementById("phone");// Step 2 fieldsconst company = document.getElementById("company");const jobTitle = document.getElementById("jobTitle");const yearsExperience = document.getElementById("yearsExperience");// Step 3 fieldsconst skills = document.getElementById("skills");const highestDegree = document.getElementById("highestDegree");

سپس، ما به یک آرایه برای ذخیره پیام های خطایمان نیاز داریم.

let errorMsgs = ();

همچنین، ما به عنصری در DOM نیاز داریم که بتوانیم آن پیام های خطا را پس از تولید آن ها درج کنیم. این عنصر باید در HTML درست زیر آخرین عنصر قرار گیرد fieldset برچسب بسته شدن:

موارد بالا را اضافه کنید div به کد جاوا اسکریپت با استفاده از خط زیر:

const errorMessagesDiv = document.getElementById("errorMessages");

و در نهایت، ما به یک متغیر برای پیگیری گام فعلی نیاز داریم.

let currentStep = 1;

اکنون که همه متغیرهای خود را در جای خود داریم، در اینجا پیاده سازی آن است nextstep() تابع:

function nextStep() {  errorMsgs = ();  errorMessagesDiv.innerText = "";  switch (currentStep) {    case 1:      addValidationErrors(name, email, phone);      validateStep(errorMsgs);      break;    case 2:      addValidationErrors(company, jobTitle, yearsExperience);      validateStep(errorMsgs);      break;    case 3:      addValidationErrors(skills, highestDegree);      validateStep(errorMsgs);      break;  }}

لحظه ای که بعدی دکمه فشار داده می شود، کد ما ابتدا بررسی می کند که کاربر در حال حاضر در کدام مرحله است و بر اساس این اطلاعات، داده های مربوط به آن مرحله خاص را با فراخوانی اعتبارسنجی می کند. addValidationErrors() تابع در صورت وجود خطا، آنها را نمایش می دهیم. سپس، فرم، را فراخوانی می کند validateStep() قبل از رفتن به مرحله بعدی، تأیید می کند که هیچ خطایی وجود ندارد. در صورت وجود خطا، کاربر را از رفتن به مرحله بعدی باز می دارد.

هر زمان که nextStep() عملکرد اجرا می شود، پیام های خطا ابتدا پاک می شوند تا از الحاق خطاهای یک مرحله دیگر به خطاهای موجود یا اضافه کردن مجدد پیام های خطای موجود جلوگیری شود. addValidationErrors تابع اجرا می شود را addValidationErrors تابع برای هر مرحله با استفاده از فیلدهای آن مرحله به عنوان آرگومان فراخوانی می شود.

در اینجا نحوه addValidationErrors تابع پیاده سازی شده است:

function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) {  if (!fieldOne.checkValidity()) {    const label = document.querySelector(`label(for="${fieldOne.id}")`);    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);  }  if (!fieldTwo.checkValidity()) {    const label = document.querySelector(`label(for="${fieldTwo.id}")`);    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);  }  if (fieldThree && !fieldThree.checkValidity()) {    const label = document.querySelector(`label(for="${fieldThree.id}")`);    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);  }  if (errorMsgs.length > 0) {    errorMessagesDiv.innerText = errorMsgs.join("\");  }}

اینگونه است که validateStep() تابع تعریف شده است:

function validateStep(errorMsgs) {  if (errorMsgs.length === 0) {    showStep(currentStep + 1);  }}

را validateStep() عملکرد خطاها را بررسی می کند. اگر هیچ کدام وجود نداشته باشد، با کمک به مرحله بعدی می رود showStep() تابع

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

را showStep() تابع به چهار مجموعه فیلد در DOM نیاز دارد. خط زیر را به بالای کد جاوا اسکریپت اضافه کنید تا مجموعه فیلدها در دسترس باشند:

const steps = document.querySelectorAll(".step");

چه چیزی showStep() تابع انجام این است که از طریق تمام fieldsets به شکل ما و هر چیزی را پنهان کنیم fieldset با چیزی که ما در حال حرکت به آن هستیم برابر نیست. سپس، آن را به روز می کند currentStep متغیر برابر با مرحله ای باشد که در حال حرکت به آن هستیم.

دکمه "قبلی".

را previousStep() تابع به قبلی دکمه هر زمان که دکمه قبلی کلیک می شود، به طور مشابه nextStep عملکرد، پیام های خطا نیز از صفحه پاک می شوند و ناوبری نیز توسط صفحه انجام می شود showStep تابع

function previousStep() {  errorMessagesDiv.innerText = "";  showStep(currentStep - 1);}

هر زمان که showStep() تابع با " فراخوانی می شودcurrentStep - 1” به عنوان یک استدلال (مانند این مورد)، به مرحله قبل برمی گردیم، در حالی که حرکت به مرحله بعدی با فراخوانی showStep() عملکرد با "currentStep + 1” به عنوان یک استدلال (مانند مورد validateStep() تابع).

بهبود تجربه کاربر با نشانه های بصری

یکی دیگر از راه های بهبود تجربه کاربر برای یک فرم چند مرحله ای، ادغام نشانه های بصری است، چیزهایی که به کاربران در مورد فرآیندی که در آن هستند بازخورد می دهد. این موارد می تواند شامل یک نشانگر پیشرفت یا یک پله باشد که به کاربر کمک می کند تا دقیقاً مرحله ای را که در آن قرار دارد، بداند.

ادغام A Stepper

برای ادغام یک استپر در فرم خود (مثلاً مانند این از طراحی متریال)، اولین کاری که باید انجام دهیم این است که آن را دقیقاً زیر باز شده به HTML اضافه کنیم. tag.

در مرحله بعد، باید بخشی از استپر را که نمایانگر مرحله فعلی است، پرس و جو کنیم. این تگ span با نام کلاس است currentStep.

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

اکنون، هر زمان که دکمه های قبلی یا بعدی کلیک می شود، باید مقدار استپر را به روز کنیم. برای این کار باید به روز رسانی کنیم showStep() با الحاق خط زیر به آن عمل کنید:

currentStepDiv.innerText = currentStep;

این خط به showStep() عملکرد زیرا showStep() تابع وظیفه پیمایش بین مراحل و به روز رسانی آن است currentStep متغیر بنابراین، هر زمان که currentStep متغیر به روز شده است، currentStepDiv نیز باید به روز شود تا آن تغییر را منعکس کند.

ذخیره و بازیابی اطلاعات کاربر

یکی از راه های اصلی که می توانیم تجربه کاربری فرم را بهبود ببخشیم، ذخیره داده های کاربر در مرورگر است. فرم های چند مرحله ای معمولا طولانی هستند و کاربران را ملزم می کند تا اطلاعات زیادی درباره خود وارد کنند. تصور کنید کاربری 95 درصد از یک فرم را پر می کند، سپس به طور تصادفی به آن ضربه می زند F5 روی صفحه کلید خود را فشار دهید و تمام پیشرفت خود را از دست بدهند. این یک تجربه واقعا بد برای کاربر خواهد بود.

با استفاده از localStorage، ما می توانیم اطلاعات کاربر را به محض وارد کردن ذخیره کنیم و به محض بارگیری محتوای DOM آن را بازیابی کنیم، بنابراین کاربران همیشه می توانند از هر کجا که کار را متوقف کرده اند، به پر کردن فرم های خود ادامه دهند. برای افزودن این ویژگی به فرم هایمان، می توانیم اطلاعات کاربر را به محض تایپ کردن، ذخیره کنیم. این را می توان با استفاده از input رویداد

قبل از اضافه کردن input شنونده رویداد، عنصر فرم را از DOM دریافت کنید:

const form = document.getElementById("jobApplicationForm");

حالا می توانیم اضافه کنیم input شنونده رویداد:

// Save data on each input eventform.addEventListener("input", () => {  const formData = {    name: document.getElementById("name").value,    email: document.getElementById("email").value,    phone: document.getElementById("phone").value,    company: document.getElementById("company").value,    jobTitle: document.getElementById("jobTitle").value,    yearsExperience: document.getElementById("yearsExperience").value,    skills: document.getElementById("skills").value,    highestDegree: document.getElementById("highestDegree").value,  };  localStorage.setItem("formData", JSON.stringify(formData));});

در مرحله بعد، باید مقداری کد اضافه کنیم تا به ما کمک کند پس از بارگیری محتوای DOM، داده های کاربر را بازیابی کنیم.

window.addEventListener("DOMContentLoaded", () => {  const savedData = JSON.parse(localStorage.getItem("formData"));  if (savedData) {    document.getElementById("name").value = savedData.name || "";    document.getElementById("email").value = savedData.email || "";    document.getElementById("phone").value = savedData.phone || "";    document.getElementById("company").value = savedData.company || "";    document.getElementById("jobTitle").value = savedData.jobTitle || "";    document.getElementById("yearsExperience").value = savedData.yearsExperience || "";    document.getElementById("skills").value = savedData.skills || "";    document.getElementById("highestDegree").value = savedData.highestDegree || "";  }});

در نهایت، تمرین خوبی است که داده ها را حذف کنید localStorage به محض اینکه دیگر مورد نیاز نیست:

// Clear data on form submitform.addEventListener(\'submit\', () => {  // Clear localStorage once the form is submitted  localStorage.removeItem(\'formData\');}); 

افزودن ارزش مرحله فعلی به localStorage

اگر کاربر به طور تصادفی مرورگر خود را ببندد، باید بتواند به هر کجا که کار را متوقف کرده است، بازگردد. این بدان معنی است که مقدار مرحله فعلی نیز باید در آن ذخیره شود localStorage.

برای ذخیره این مقدار، خط زیر را به آن اضافه کنید showStep() تابع:

localStorage.setItem("storedStep", currentStep);

اکنون می توانیم مقدار مرحله فعلی را بازیابی کنیم و هر زمان که محتوای DOM بارگیری می شود، کاربران را به جایی که کار را متوقف کرده اند برگردانیم. کد زیر را به DOMContentLoaded کنترل کننده برای انجام این کار:

const storedStep = localStorage.getItem("storedStep");if (storedStep) {    const storedStepInt = parseInt(storedStep);    steps.forEach((el, index) => {      el.hidden = index + 1 !== storedStepInt;    });    currentStep = storedStepInt;    currentStepDiv.innerText = currentStep;  }

همچنین فراموش نکنید که مقدار مرحله فعلی را از آن پاک کنید localStorage هنگام ارسال فرم

localStorage.removeItem("storedStep");

خط بالا باید به کنترل کننده ارسال اضافه شود.

بسته بندی

ایجاد فرم های چند مرحله ای می تواند به بهبود تجربه کاربر برای ورود داده های پیچیده کمک کند. با برنامه ریزی دقیق مراحل، اجرای اعتبارسنجی فرم در هر مرحله، و ذخیره موقت داده های کاربر در مرورگر، تکمیل فرم های طولانی را برای کاربران آسان تر می کنید.

برای پیاده سازی کامل این فرم چند مرحله ای، می توانید به کد کامل در گیت هاب دسترسی داشته باشید.

(gg, yk)