<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>React Js Step form</h2>
</div>
</div>
import React, { useState } from 'react';
const StepForm = () => {
const [step, setStep] = useState(1); // Track the current step
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
phone: '',
password: '',
profileImage: ''
});
// Function to handle changes in form fields
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
// Function to go to the next step
const nextStep = () => {
setStep(step + 1);
};
// Function to go to the previous step
const prevStep = () => {
setStep(step - 1);
};
// Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form Submitted:', formData);
};
return (
<div>
<h1>Multi-Step Form</h1>
<form onSubmit={handleSubmit}>
{step === 1 && (
<>
<h2>Step 1: Personal Information</h2>
<label>First Name:</label>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
required
/>
<label>Last Name:</label>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
required
/>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
<button type="button" onClick={nextStep}>
Next
</button>
</>
)}
{step === 2 && (
<>
<h2>Step 2: Account Information</h2>
<label>Phone Number:</label>
<input
type="text"
name="phone"
value={formData.phone}
onChange={handleChange}
required
/>
<label>Password:</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
/>
<button type="button" onClick={prevStep}>
Back
</button>
<button type="button" onClick={nextStep}>
Next
</button>
</>
)}
{step === 3 && (
<>
<h2>Step 3: Profile Picture</h2>
<label>Profile Image:</label>
<input
type="file"
name="profileImage"
onChange={(e) =>
setFormData({ ...formData, profileImage: e.target.files[0] })
}
/>
<button type="button" onClick={prevStep}>
Back
</button>
<button type="submit">Submit</button>
</>
)}
</form>
</div>
);
};
export default StepForm;
