Coding Session 1: Frontend Mentor Challenge — Multi-Step Form Using Next.js

Photo by Pankaj Patel on Unsplash

For my latest project from Frontend Mentor, I worked on building a multi-step form using Next.js. This challenge involves guiding users through several steps to complete a form, which is a common feature in modern web applications. In this first coding session, I focused on creating the basic structure and implementing essential functionality, such as passing form data from the first step to the last.

Project Overview

The multi-step form allows users to:

Enter personal information
Choose a subscription plan
Select additional add-ons
Review and confirm their input

The goal for this initial session was to complete the basic HTML structure and establish the navigation logic in Next.js to ensure users can progress through the form steps and persist data between them.

Approach and Setup

Step 1: Setting Up Next.js

I began by creating a new Next.js project to house the multi-step form. Using Next.js’s file-based routing, I created a dedicated page for the form.

npx create-next-app@latest multi-step-form

Step 2: Structuring the Form

With the project set up, I built the form’s skeleton. Each step in the multi-step process is treated as a separate section, but they are all contained within a single form element. I decided to manage the steps and form state globally in the main component.

// components/MultiStepForm.tsx
import { useState } from 'react';

const MultiStepForm = () => {
const [currentStep, setCurrentStep] = useState(1);
const [formData, setFormData] = useState({
name: '',
email: '',
plan: '',
addOns: []
});

const handleNextStep = () => setCurrentStep(prev => prev + 1);
const handlePrevStep = () => setCurrentStep(prev => prev - 1);

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

return (

{currentStep === 1 && (

Name

Email

)}

{currentStep === 2 && (

{/* Plan selection logic goes here */}

)}

{/* Add additional steps as needed */}

{currentStep > 1 && Previous}
Next

);
};

export default MultiStepForm;

One of the key aspects of this session was setting up the navigation between steps. I used React’s **useState** hook to track both the current step and form data. Each time a user progresses to the next step, the form data from the previous step is retained in the state.

Here’s how I handled step transitions and data persistence:

const handleNextStep = () => {
if (currentStep < totalSteps) {
setCurrentStep((prev) => prev + 1);
}
};

const handlePrevStep = () => {
if (currentStep > 1) {
setCurrentStep((prev) => prev - 1);
}
};

Step 4: Passing Form Data Across Steps

To ensure that user inputs are retained as they navigate between steps, I stored the input values in a formData object using React’s state. Each input element is controlled through this state, making sure that all data entered remains available even when switching between steps.

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

Step 5: Rendering the Steps

The form’s steps are conditionally rendered based on the current step number. For example, in step 1, the user provides their name and email, while in step 2, they select a plan. This ensures that only one part of the form is visible at a time.

{currentStep === 1 && (

Name

{/* Other inputs for step 1 */}

)}

{currentStep === 2 && (

{/* Plan selection inputs */}

)}

Challenges Encountered

One challenge I faced was ensuring that form data was not lost when navigating between steps. Initially, moving to a new step caused input fields to reset. However, by managing form state using a single object, I was able to resolve this issue and ensure all data persisted across steps.

What’s Next?

With the basic structure and data flow in place, the next steps for the project are:

Form validation: Ensuring that all inputs are correctly filled before users can progress to the next step.
Styling with Tailwind CSS: Giving the form a polished, responsive design using Tailwind.
Advanced interactivity: Dynamically adjusting add-on options based on the plan selected by the user.

Final Thoughts

This first coding session laid the foundation for the multi-step form, focusing on the essentials: navigation between steps and ensuring form data persists. I’m excited to dive into the next phase, where I’ll enhance the functionality and start working on the form’s appearance.