This code includes:
A modern gradient background with glassmorphism effect
Soft shadows and rounded corners for all elements
Clean Poppins font throughout
Two-step form with smooth sliding transition
Client-side validation for required fields
Visual indicators for required fields and validation errors
Progress bar and step indicators
Responsive design that works on different screen sizes
Color selection with "Other" option that shows a text field when selected
Proper navigation between steps with Previous/Next buttons
The form validates all required fields and shows appropriate error messages when validation fails. The design follows modern UI trends with subtle animations and visual feedback.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
width: 100%;
max-width: 800px;
padding: 30px;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
z-index: -1;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-weight: 600;
}
.form-container {
display: flex;
width: 200%;
transition: transform 0.5s ease-in-out;
}
.form-step {
width: 50%;
padding: 0 30px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
}
.required::after {
content: '*';
color: #e74c3c;
margin-left: 4px;
}
input, select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
input:focus, select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}
.error {
border-color: #e74c3c !important;
}
.error-message {
color: #e74c3c;
font-size: 12px;
margin-top: 5px;
display: none;
}
.color-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.color-option {
display: flex;
align-items: center;
}
.color-option input[type="checkbox"] {
width: auto;
margin-right: 8px;
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-next {
background: #3498db;
color: white;
margin-left: auto;
}
.btn-prev {
background: #95a5a6;
color: white;
}
.btn-submit {
background: #2ecc71;
color: white;
}
button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.progress-bar {
height: 5px;
background: #ecf0f1;
border-radius: 5px;
margin-bottom: 30px;
overflow: hidden;
}
.progress {
height: 100%;
width: 50%;
background: linear-gradient(90deg, #3498db, #2ecc71);
transition: width 0.5s ease;
}
.step-indicator {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.step {
width: 30px;
height: 30px;
border-radius: 50%;
background: #bdc3c7;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
font-weight: 600;
}
.step.active {
background: #3498db;
}
.step.completed {
background: #2ecc71;
}
document.addEventListener('DOMContentLoaded', function() {
const formContainer = document.getElementById('form-container');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const submitBtn = document.getElementById('submitBtn');
const progress = document.getElementById('progress');
const step1Indicator = document.getElementById('step1-indicator');
const step2Indicator = document.getElementById('step2-indicator');
// Color other option toggle
const colorCheckboxes = document.querySelectorAll('input[name="color"]');
const otherColorInput = document.getElementById('otherColor');
colorCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.value === 'Other' && this.checked) {
otherColorInput.style.display = 'block';
} else if (this.value === 'Other' && !this.checked) {
otherColorInput.style.display = 'none';
}
});
});
// Form navigation
nextBtn.addEventListener('click', function(e) {
e.preventDefault();
if (validateStep1()) {
formContainer.style.transform = 'translateX(-50%)';
progress.style.width = '100%';
step1Indicator.classList.remove('active');
step1Indicator.classList.add('completed');
step2Indicator.classList.add('active');
}
});
prevBtn.addEventListener('click', function(e) {
e.preventDefault();
formContainer.style.transform = 'translateX(0)';
progress.style.width = '50%';
step2Indicator.classList.remove('active');
step1Indicator.classList.add('active');
step1Indicator.classList.remove('completed');
});
// Form validation
function validateStep1() {
let isValid = true;
const email = document.getElementById('email');
const phone = document.getElementById('phone');
// Email validation
if (!email.value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
email.classList.add('error');
document.getElementById('email-error').style.display = 'block';
isValid = false;
} else {
email.classList.remove('error');
document.getElementById('email-error').style.display = 'none';
}
// Phone validation (simple version)
if (!phone.value || !/^[\d\s\-\(\)]{10,}$/.test(phone.value)) {
phone.classList.add('error');
document.getElementById('phone-error').style.display = 'block';
isValid = false;
} else {
phone.classList.remove('error');
document.getElementById('phone-error').style.display = 'none';
}
return isValid;
}
function validateStep2() {
let isValid = true;
const requiredFields = [
'vehicleName', 'vehicleModel', 'registrationNumber',
'chassisNumber', 'fabricationYear', 'mileage',
'ignitionKey', 'doorKey', 'dealerName', 'dealerCity'
];
// Check required fields
requiredFields.forEach(fieldId => {
const field = document.getElementById(fieldId);
if (!field.value) {
field.classList.add('error');
document.getElementById(`${fieldId}-error`).style.display = 'block';
isValid = false;
} else {
field.classList.remove('error');
document.getElementById(`${fieldId}-error`).style.display = 'none';
}
});
// Fabrication year validation
const year = document.getElementById('fabricationYear');
if (year.value && (year.value < 1900 || year.value > 2023)) {
year.classList.add('error');
document.getElementById('fabricationYear-error').style.display = 'block';
isValid = false;
}
// Mileage validation
const mileage = document.getElementById('mileage');
if (mileage.value && mileage.value < 0) {
mileage.classList.add('error');
document.getElementById('mileage-error').style.display = 'block';
isValid = false;
}
// Color validation
const colors = document.querySelectorAll('input[name="color"]:checked');
if (colors.length === 0) {
document.getElementById('color-error').style.display = 'block';
isValid = false;
} else {
document.getElementById('color-error').style.display = 'none';
}
return isValid;
}
// Form submission
submitBtn.addEventListener('click', function(e) {
e.preventDefault();
if (validateStep2()) {
// Here you would typically send the form data to the server
alert('Registration submitted successfully!');
// Reset form
formContainer.style.transform = 'translateX(0)';
progress.style.width = '50%';
step2Indicator.classList.remove('active');
step1Indicator.classList.add('active');
document.getElementById('dmvForm').reset();
}
});
});
Post a Comment
Thank you
Learning robo team