338 lines
13 KiB
HTML
338 lines
13 KiB
HTML
|
<!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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="css/styles.css">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
background-color: #f4f7fa;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.form-container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 6rem;
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
.progress-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 10px;
|
||
|
|
background-color: #e9ecef;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.progress-bar {
|
||
|
|
height: 100%;
|
||
|
|
width: 0;
|
||
|
|
background-color: #007bff;
|
||
|
|
transition: width 0.3s ease;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
text-align: center;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.step {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.step.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
input[type="text"],
|
||
|
|
input[type="email"],
|
||
|
|
input[type="number"],
|
||
|
|
select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px;
|
||
|
|
margin: 10px 0;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
transition: border-color 0.3s;
|
||
|
|
}
|
||
|
|
input[type="text"]:focus,
|
||
|
|
input[type="email"]:focus,
|
||
|
|
input[type="number"]:focus,
|
||
|
|
select:focus {
|
||
|
|
border-color: #007bff;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
input[type="radio"],
|
||
|
|
input[type="checkbox"] {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.button-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.button-container button {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s, transform 0.2s;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.button-container button:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
#successMessage {
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.step-indicator {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.step-indicator div {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #e9ecef;
|
||
|
|
color: #6c757d;
|
||
|
|
}
|
||
|
|
.step-indicator .active {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.button-container {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.button-container button {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="container">
|
||
|
|
<div class="logo">Digital Agency</div>
|
||
|
|
<nav>
|
||
|
|
<div class="hamburger" onclick="toggleMenu()">
|
||
|
|
<div></div>
|
||
|
|
<div></div>
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-links">
|
||
|
|
<a href="index.html">Home</a>
|
||
|
|
<a href="#services">Services</a>
|
||
|
|
<a href="#pricing">Pricing</a>
|
||
|
|
<a href="#team">Team</a>
|
||
|
|
<a href="contact.html">Contact</a>
|
||
|
|
<a href="swiper.html">Slider</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="form-container">
|
||
|
|
<h2>Multi-Step Form</h2>
|
||
|
|
<div class="progress-container">
|
||
|
|
<div class="progress-bar" id="progressBar"></div>
|
||
|
|
</div>
|
||
|
|
<form id="multiStepForm">
|
||
|
|
<!-- Step 1: Personal Details -->
|
||
|
|
<div class="step active" id="step1">
|
||
|
|
<h3>Step 1: Personal Details</h3>
|
||
|
|
<input type="text" id="fullName" placeholder="Full Name (min 3 chars)" required>
|
||
|
|
<input type="email" id="email" placeholder="Email" required>
|
||
|
|
<input type="text" id="phone" placeholder="Phone (10 digits)" maxlength="10" required>
|
||
|
|
<div>
|
||
|
|
<label>Gender:</label>
|
||
|
|
<input type="radio" name="gender" value="male" required> Male
|
||
|
|
<input type="radio" name="gender" value="female" required> Female
|
||
|
|
<input type="radio" name="gender" value="other" required> Other
|
||
|
|
</div>
|
||
|
|
<input type="number" id="age" placeholder="Age (18-100)" min="18" max="100" required>
|
||
|
|
<div class="button-container">
|
||
|
|
<button type="button" onclick="nextStep()">Next</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Step 2: Professional Details -->
|
||
|
|
<div class="step" id="step2">
|
||
|
|
<h3>Step 2: Professional Details</h3>
|
||
|
|
<select id="education" required>
|
||
|
|
<option value="">Select Education</option>
|
||
|
|
<option value="highschool">High School</option>
|
||
|
|
<option value="bachelor">Bachelor's Degree</option>
|
||
|
|
<option value="master">Master's Degree</option>
|
||
|
|
<option value="phd">PhD</option>
|
||
|
|
</select>
|
||
|
|
<div>
|
||
|
|
<label>Skills:</label>
|
||
|
|
<input type="checkbox" name="skills" value="HTML"> Non-Medical
|
||
|
|
<input type="checkbox" name="skills" value="CSS"> Enineering
|
||
|
|
<input type="checkbox" name="skills" value="JavaScript"> Master of Engineering
|
||
|
|
<input type="checkbox" name="skills" value="React"> PhD
|
||
|
|
</div>
|
||
|
|
<input type="number" id="experience" placeholder="Experience (0-50 years)" min="0" max="50" required>
|
||
|
|
<input type="text" id="currentRole" placeholder="Current Role" required>
|
||
|
|
<div class="button-container">
|
||
|
|
<button type="button" onclick="prevStep()">Previous</button>
|
||
|
|
<button type="button" onclick="nextStep()">Next</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Step 3: Review & Submit -->
|
||
|
|
<div class="step" id="step3">
|
||
|
|
<h3>Step 3: Review & Submit</h3>
|
||
|
|
<div id="review"></div>
|
||
|
|
<div class="button-container">
|
||
|
|
<button type="button" onclick="prevStep()">Edit</button>
|
||
|
|
<button type="button" onclick="submitForm()">Submit</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="button-container">
|
||
|
|
<button type="button" onclick="clearForm()">Clear Form</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="successMessage">
|
||
|
|
<h3>Success!</h3>
|
||
|
|
<p>Your data has been submitted successfully.</p>
|
||
|
|
<button onclick="exportData()">Export Data as JSON</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentStep = 0;
|
||
|
|
|
||
|
|
function showStep(step) {
|
||
|
|
const steps = document.querySelectorAll('.step');
|
||
|
|
steps.forEach(s => s.classList.remove('active'));
|
||
|
|
steps[step].classList.add('active');
|
||
|
|
updateProgressBar();
|
||
|
|
}
|
||
|
|
|
||
|
|
function nextStep() {
|
||
|
|
if (validateStep(currentStep)) {
|
||
|
|
currentStep++;
|
||
|
|
if (currentStep >= document.querySelectorAll('.step').length) {
|
||
|
|
currentStep = document.querySelectorAll('.step').length - 1;
|
||
|
|
}
|
||
|
|
showStep(currentStep);
|
||
|
|
if (currentStep === 2) {
|
||
|
|
reviewData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function prevStep() {
|
||
|
|
currentStep--;
|
||
|
|
if (currentStep < 0) {
|
||
|
|
currentStep = 0;
|
||
|
|
}
|
||
|
|
showStep(currentStep);
|
||
|
|
}
|
||
|
|
|
||
|
|
function validateStep(step) {
|
||
|
|
const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`);
|
||
|
|
for (let input of inputs) {
|
||
|
|
if (!input.checkValidity()) {
|
||
|
|
input.reportValidity();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateProgressBar() {
|
||
|
|
const totalSteps = document.querySelectorAll('.step').length;
|
||
|
|
const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
|
||
|
|
document.getElementById('progressBar').style.width = `${progressPercentage}%`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function reviewData() {
|
||
|
|
const fullName = document.getElementById('fullName').value;
|
||
|
|
const email = document.getElementById('email').value;
|
||
|
|
const phone = document.getElementById('phone').value;
|
||
|
|
const gender = document.querySelector('input[name="gender"]:checked').value;
|
||
|
|
const age = document.getElementById('age').value;
|
||
|
|
const education = document.getElementById('education').value;
|
||
|
|
const experience = document.getElementById('experience').value;
|
||
|
|
const currentRole = document.getElementById('currentRole').value;
|
||
|
|
|
||
|
|
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', ');
|
||
|
|
|
||
|
|
document.getElementById('review').innerHTML = `
|
||
|
|
<p><strong>Full Name:</strong> ${fullName}</p>
|
||
|
|
<p><strong>Email:</strong> ${email}</p>
|
||
|
|
<p><strong>Phone:</strong> ${phone}</p>
|
||
|
|
<p><strong>Gender:</strong> ${gender}</p>
|
||
|
|
<p><strong>Age:</strong> ${age}</p>
|
||
|
|
<p><strong>Education:</strong> ${education}</p>
|
||
|
|
<p><strong>Skills:</strong> ${skills}</p>
|
||
|
|
<p><strong>Experience:</strong> ${experience} years</p>
|
||
|
|
<p><strong>Current Role:</strong> ${currentRole}</p>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function submitForm() {
|
||
|
|
const data = {
|
||
|
|
fullName: document.getElementById('fullName').value,
|
||
|
|
email: document.getElementById('email').value,
|
||
|
|
phone: document.getElementById('phone').value,
|
||
|
|
gender: document.querySelector('input[name="gender"]:checked').value,
|
||
|
|
age: document.getElementById('age').value,
|
||
|
|
education: document.getElementById('education').value,
|
||
|
|
skills: Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value),
|
||
|
|
experience: document.getElementById('experience').value,
|
||
|
|
currentRole: document.getElementById('currentRole').value
|
||
|
|
};
|
||
|
|
|
||
|
|
localStorage.setItem('formData', JSON.stringify(data));
|
||
|
|
document.getElementById('multiStepForm').style.display = 'none';
|
||
|
|
document.getElementById('successMessage').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function exportData() {
|
||
|
|
const data = localStorage.getItem('formData');
|
||
|
|
const blob = new Blob([data], { type: 'application/json' });
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = url;
|
||
|
|
a.download = 'formData.json';
|
||
|
|
document.body.appendChild(a);
|
||
|
|
a.click();
|
||
|
|
document.body.removeChild(a);
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearForm() {
|
||
|
|
document.getElementById('multiStepForm').reset();
|
||
|
|
localStorage.removeItem('formData');
|
||
|
|
currentStep = 0;
|
||
|
|
showStep(currentStep);
|
||
|
|
document.getElementById('successMessage').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize the form
|
||
|
|
showStep(currentStep);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|