jaanvi/Multi-Step-Form_Task2
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

first commit

Browse source
This commit is contained in:
jaanvi 2024-12-26 14:07:03 +05:30
parent 9a5b523a37
commit d858cfd6bd
5 changed files with 300 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
README.md
View file

Binary file not shown.

BIN
bg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

109
index.html Normal file
View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Step Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="form1" >
<h3>PERSONAL DETAILS</h3>
<input type="text" id="full name" placeholder="Full Name" required>
<span class="error-message" id="fullName-error"></span>
<input type="email" id="email" placeholder="Email" required>
<span class="error-message" id="email-error"></span>
<input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}">
<span class="error-message" id="phone-error"></span>
<input type="number" placeholder="Age" name="age" min="18" max="100">
<span class="error-message" id="age-error"></span>
<label >Gender</label>
<label class="radio-inline">
<input type="radio" name="Male" checked>Male
</label>
<label class="radio-inline">
<input type="radio" name="Female"> Female
</label>
<label class="radio-inline">
<input type="radio" name="Other">Other
</label>
<span class="error-message" id="gender-error"></span>
<div class="btn-box">
<button type="button" id="Next1">Next</button>
</div>
</form>
<!--Perofessonal form-->
<form id="form2">
<h3>PROFESSIONAL DETAILS</h3>
<div class="dropdown">
<label for="education">Education</label>
<select id="education" name="education" required>
<option value="" disabled selected>Select</option>
<option value="High School">High School</option>
<option value="Bachelor's Degree">Bachelor's Degree</option>
<option value="Master's Degree">Master's Degree</option>
<option value="PhD">PhD</option>
</select>
<span class="error-message" id="education-error"></span>
</div>
<div class="checkbox-group">
<label>Skills</label>
<label><input type="checkbox" name="skills" value="programming"> Programming</label>
<label><input type="checkbox" name="skills" value="marketing"> Marketing</label>
<label><input type="checkbox" name="skills" value="design"> Design</label>
<!-- <label><input type="checkbox" name="skills" value="management"> Management</label> -->
<span class="error-message" id="skills-error"></span>
</div>
<label for="experience">Experience
<input type="number" id="experience" name="experience" min="0" max="50" placeholder=" years..." required></label>
<span class="error-message" id="experience-error"></span>
<label for="role">Position
<input type="text" id="role" name="role" placeholder="Your current role" required></label>
<span class="error-message" id="currentRole-error"></span>
<div class="btn-box">
<button type="button" id="Back1">Previous</button>
<button type="button" id="Next2">Next</button>
</div>
</form>
<!--Review-->
<form id="form3">
<h3>Review & Submit</h3>
<div id="reviewSection"></div>
<button type="button" class="edit-btn" id="editDetails">Edit</button>
<!-- <button type="button" class="submit-btn" id="submitForm">Submit</button> -->
<button type="button" id="clearForm">Clear Form</button>
<div class="btn-box">
<button type="button" class="export-btn" id="exportData">Export as JSON</button>
<button type="submit" id="Submit" disabled>Submit</button>
</div>
<p class="success-message" id="successMessage" style="display: none;">Form submitted successfully!</p>
<!-- <pre id="jsonPreview"></pre> -->
</form>
<div class="step-row">
<div id="progress"></div>
<div class="step-col"><small>Step 1</small></div>
<div class="step-col"><small>Step 2</small></div>
<div class="step-col"><small>Step 3</small></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

47
script.js Normal file
View file

@ -0,0 +1,47 @@
var form1= document.getElementById("form1");
var form2= document.getElementById("form2");
var form3= document.getElementById("form3");
var Next1= document.getElementById("Next1");
var Next2= document.getElementById("Next2");
var Back1= document.getElementById("Back1");
var Back2= document.getElementById("Back2");
var progress= document.getElementById("progress");
var clearFormBtn = document.getElementById('clearForm');
var formData = {
personalDetails:{},
professionalDetails:{},
}
//Display Review Section
function displayReviewSection(){
var reviewSection = document.getElementById('reviewSection');
reviewSection.innerHTML = `
<h`
}
Next1.onclick=function(){
form1.style.left = "-450px";
form2.style.left = "40px";
progress.style.width = "240px";
}
Back1.onclick=function(){
form1.style.left = "40px";
form2.style.left = "450px";
progress.style.width = "120px";
}
Next2.onclick=function(){
form2.style.left = "-450px";
form3.style.left = "40px";
progress.style.width = "360px";
}
Back2.onclick=function(){
form2.style.left = "40px";
form3.style.left = "450px";
progress.style.width = "240px";
}

144
style.css Normal file
View file

@ -0,0 +1,144 @@
*{
margin:0;
padding:0;
font-family: sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0,0,0,0.8)),url(bg.jpg);
background-position: center;
background-size: cover;
}
.container{
width: 360px;
height: 500px;
margin: 8% auto;
background: #fff;
border-radius: 5px;
position:relative;
transition: 0.5s;
overflow: hidden;
}
h3{
text-align: center;
margin-bottom: 40px;
color: #777;
}
.container form{
width: 280px;
position:absolute;
top:100px;
left: 40px;
}
form input{
width:100%;
padding: 10px 5px;
margin: 5px 0;
border:0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
transition: all 0.3s ease;
}
label{
display:inline-flex;
margin-left: 10px;
font-size: 14px;
cursor: pointer;
position: relative;
align-items: center;
color: #777;
margin-top: 10px;
}
.radio-inline input{
display:inline-flex;
margin-right: 2px;
}
::placeholder{
color: #777;
}
.btn-box{
width:100%;
margin: 30px auto;
text-align: center;
}
form button{
width: 110px;
height:35px;
margin:0 10px;
background: linear-gradient(to right, #9b06d6,#f905dc);
border-radius: 30px;
border:0;
outline:none;
color:#fff;
cursor:pointer;
}
#form2{
left:450px;
}
#form3{
left:450px;
}
.step-row{
width:360px;
height:40px;
margin:0 auto;
display:flex;
align-items: center;
box-shadow: 0 -1px 5px -1px #000;
position: relative;
}
.step-col{
width: 120px;
text-align: center;
color:#333;
position: relative;
}
#progress{
position:absolute;
height:100%;
width: 120px;
background: linear-gradient(to right, #9b06d6,#f905dc);
transition: 1s;
}
#progress::after{
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
top: 0;
right: -20px;
border-left: 20px solid #f11de7;
}
.dropdown select{
position:relative;
min-width: 18px;
padding: 5px 5px;
display: inline-block;
color:#333
}
.checkbox-group{
display:inline-flex;
position:relative ;
}
.checkbox-group input{
margin-right: 5px;
}