Implementing Multi-Step Sign-In Forms for Improved User Experience

byCodepen.tech -
0

Introduction

Multi-step sign-in forms have become a popular choice in modern web design, offering a streamlined and simplified login process for users. Rather than overwhelming users with too many fields at once, multi-step sign-in forms break down the process into more manageable steps, enhancing the overall user experience. This approach is particularly useful for platforms with complex sign-in requirements, such as authentication codes, security questions, or social media sign-ins. In this step-by-step guide, we’ll walk through how to implement a multi-step sign-in form using HTML, CSS, and JavaScript, while discussing best practices for improved usability.

What is a Multi-Step Sign-In Form?

A multi-step sign-in form divides the login process into multiple stages, asking users to complete one part of the form before moving to the next. This can include entering a username or email in the first step, followed by entering a password, and finally completing a two-factor authentication step. This approach reduces cognitive load and makes it easier for users to complete the login process, improving the chances of successful logins.

Step-by-Step Guide to Implementing a Multi-Step Sign-In Form

1. Basic HTML Structure for Multi-Step Sign-In Form

We’ll begin by creating the basic structure for a multi-step form that includes steps for entering a username, password, and a two-factor authentication code.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi-Step Sign-In Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="form-container">
    <form id="multi-step-form">
      <!-- Step 1: Username -->
      <div class="form-step active" id="step-1">
        <h2>Step 1: Enter Username</h2>
        <input type="text" id="username" placeholder="Username or Email" required>
        <button type="button" class="next-btn">Next</button>
      </div>

      <!-- Step 2: Password -->
      <div class="form-step" id="step-2">
        <h2>Step 2: Enter Password</h2>
        <input type="password" id="password" placeholder="Password" required>
        <button type="button" class="prev-btn">Previous</button>
        <button type="button" class="next-btn">Next</button>
      </div>

      <!-- Step 3: Two-Factor Authentication -->
      <div class="form-step" id="step-3">
        <h2>Step 3: Two-Factor Authentication</h2>
        <input type="text" id="auth-code" placeholder="Enter 2FA Code" required>
        <button type="button" class="prev-btn">Previous</button>
        <button type="submit" class="submit-btn">Submit</button>
      </div>
    </form>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML Structure:

  1. Multi-Step Form Setup:
    • The form consists of three steps, each wrapped in a form-step div. Only one step is visible at a time using the active class.
    • Each step includes its respective input fields: step 1 for the username, step 2 for the password, and step 3 for the two-factor authentication (2FA) code.
    • Buttons allow users to navigate between steps (Next, Previous), and a submit button is displayed in the final step to complete the login process.

2. CSS for Multi-Step Form Styling

Now, we’ll style the form using CSS to ensure each step is displayed correctly and transitions smoothly between steps.


/* styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 400px;
}

h2 {
  margin-bottom: 20px;
  text-align: center;
}

input {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
}

button:hover {
  background-color:#00FF00;
}

/* Hide inactive steps */
.form-step {
  display: none;
}

/* Show only the active step */
.form-step.active {
  display: block;
}

/* Button layout for multi-step navigation */
.prev-btn {
  background-color:none ;
}

.prev-btn:hover {
  background-color:#ff0000;
}

Explanation of the CSS:

  1. General Form Styling:

    • The form is centered on the page with a clean, white background, rounded corners, and a shadow for depth.
    • Input fields and buttons are styled with padding and a border-radius for modern aesthetics.

  2. Step Visibility:

    • By default, .form-step elements are hidden (display: none). Only the currently active step (.form-step.active) is displayed.
    • The Next and Previous buttons allow users to move between steps, with a specific style for the "Previous" button using .prev-btn.

3. JavaScript for Multi-Step Functionality

Next, we’ll add JavaScript to handle the form navigation, enabling users to move between the steps and submit the form when they reach the final step.


// scripts.js

let currentStep = 1; // Track the current step
const formSteps = document.querySelectorAll('.form-step');

// Show the next step
document.querySelectorAll('.next-btn').forEach(button => {
  button.addEventListener('click', () => {
    if (currentStep < formSteps.length) {
      formSteps[currentStep - 1].classList.remove('active');
      currentStep++;
      formSteps[currentStep - 1].classList.add('active');
    }
  });
});

// Show the previous step
document.querySelectorAll('.prev-btn').forEach(button => {
  button.addEventListener('click', () => {
    if (currentStep > 1) {
      formSteps[currentStep - 1].classList.remove('active');
      currentStep--;
      formSteps[currentStep - 1].classList.add('active');
    }
  });
});

// Handle form submission
document.getElementById('multi-step-form').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent default form submission

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const authCode = document.getElementById('auth-code').value;

  if (username && password && authCode) {
    alert('Sign-in successful!');
  } else {
    alert('Please fill out all fields.');
  }
});

Explanation of the JavaScript:

  1. Step Navigation:

    • The script tracks the current step using the currentStep variable. When the user clicks a Next button, the form moves to the next step by hiding the current step and displaying the next one.
    • Similarly, clicking the Previous button navigates back to the previous step.

  2. Form Submission:

    • Once the user reaches the final step and submits the form, the script prevents the default submission behavior (e.preventDefault()), validates the form fields, and simulates a successful sign-in if all fields are filled.

Best Practices for Multi-Step Sign-In Forms

Breaking the sign-in process into multiple steps can help reduce user friction and improve completion rates, but it’s important to follow these best practices to ensure a smooth experience.

1. Keep Each Step Simple

Don’t overwhelm users with too much information or too many fields in one step. Break complex forms into logical steps that focus on one task at a time, such as entering a username, then a password, and finally a security code.

2. Progress Indicators

Consider adding a progress indicator or breadcrumb trail to show users which step they are on and how many steps remain. This provides clarity and improves user experience.


<div class="progress-indicator">
  Step 1 of 3
</div>

3. Validation for Each Step

It’s essential to validate input fields after each step before allowing users to proceed to the next. This prevents errors later in the process and makes users feel confident about their progress.


if (username === '') {
  alert('Please enter your username');
  return;
}

4. Accessibility Considerations

Ensure that your form is accessible for all users. Add proper ARIA labels for screen readers, and ensure that the form is navigable using only the keyboard.


<input type="text" id="username" aria-label="Enter your username" required>

5. Responsive Design

Always make sure your form is responsive and works seamlessly across devices. Use media queries to adjust layout and input sizes for smaller screens.


@media (max-width: 768px) {
  .form-container {
    width: 100%;
  }

  input {
    font-size: 14px;
  }
}

Live preview

See the Pen Implementing Multi-Step Sign-In Forms for Improved User Experience by codepen (@codepen-the-selector) on CodePen.


Conclusion

Implementing multi-step sign-in forms is an effective way to simplify complex sign-in processes, enhance user engagement, and improve overall user experience. By breaking the sign-in process into logical, manageable steps, users are less likely to abandon the form, leading to higher completion rates.

This guide provides a step-by-step approach to creating a multi-step sign-in form using HTML, CSS, and JavaScript, ensuring both usability and functionality.


Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال