Features Implemented
Modern UI Design:
- Clean card-based layout with shadows and rounded corners
- Responsive design that works on mobile, tablet, and desktop
- Attractive color scheme with Poppins font from Google Fonts
- Proper spacing and padding for readability
Form Fields:
- Full Name (required)
- Date of Birth with date picker (required)
- Gender selection (radio buttons, required)
- Parent/Guardian Name (required)
- Email Address (with validation, required)
- Mobile Number (with validation, required)
- Address (multiline textarea, required)
- Grade/Class selection (dropdown, required)
- Photo upload (optional)
Functionality:
- Comprehensive form validation with error messages
- Success modal that appears after successful submission
- PDF generation using html2pdf.js
- Responsive layout using Flexbox
Buttons:
- Submit Form (with validation)
- Download as PDF (converts form data to nicely formatted PDF)
Technical Implementation:
- Clean, commented JavaScript code
- Proper error handling
- CDN links for all external libraries
- Mobile-first responsive approach
The form is ready to use - just copy and paste the entire code into an HTML file and open it in a browser. All dependencies are loaded from CDNs.
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4895ef;
--light-color: #f8f9fa;
--dark-color: #212529;
--success-color: #4bb543;
--error-color: #ff3333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f5f7fa;
color: var(--dark-color);
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
margin-bottom: 30px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: var(--primary-color);
font-size: 2.2rem;
margin-bottom: 10px;
}
.header p {
color: #666;
font-size: 1rem;
}
.form-group {
margin-bottom: 20px;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.form-row .form-group {
flex: 1;
min-width: 200px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
}
.required-field::after {
content: " *";
color: var(--error-color);
}
input, select, textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
transition: all 0.3s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.2);
}
textarea {
min-height: 100px;
resize: vertical;
}
.radio-group {
display: flex;
gap: 20px;
align-items: center;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
}
.radio-option input[type="radio"] {
width: auto;
}
.file-input {
padding: 10px;
}
.file-input::-webkit-file-upload-button {
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 12px;
font-family: 'Poppins', sans-serif;
cursor: pointer;
transition: all 0.3s;
}
.file-input::-webkit-file-upload-button:hover {
background-color: #e0e0e0;
}
.button-group {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
flex-wrap: wrap;
}
.btn {
padding: 12px 25px;
border: none;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
transform: translateY(-2px);
}
.error-message {
color: var(--error-color);
font-size: 0.85rem;
margin-top: 5px;
display: none;
}
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.success-modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 500px;
width: 90%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-20px);
transition: all 0.3s;
}
.success-modal.active .modal-content {
transform: translateY(0);
}
.modal-content .icon {
font-size: 4rem;
color: var(--success-color);
margin-bottom: 20px;
}
.modal-content h2 {
margin-bottom: 15px;
color: var(--success-color);
}
.modal-content p {
margin-bottom: 20px;
}
.modal-content .btn {
margin-top: 10px;
}
@media (max-width: 768px) {
.form-row {
flex-direction: column;
gap: 0;
}
.form-row .form-group {
min-width: 100%;
}
.button-group {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
justify-content: center;
}
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('admissionForm');
const downloadPdfBtn = document.getElementById('downloadPdf');
const successModal = document.getElementById('successModal');
const closeModalBtn = document.getElementById('closeModal');
// Form validation
form.addEventListener('submit', function(e) {
e.preventDefault();
if (validateForm()) {
// Simulate form submission
console.log('Form submitted:', getFormData());
// Show success modal
successModal.classList.add('active');
// Reset form
form.reset();
}
});
// Close modal
closeModalBtn.addEventListener('click', function() {
successModal.classList.remove('active');
});
// Download as PDF
downloadPdfBtn.addEventListener('click', function() {
if (validateForm(true)) {
generatePDF();
}
});
// Validate form function
function validateForm(isPDF = false) {
let isValid = true;
const formData = getFormData();
// Validate Full Name
if (!formData.fullName.trim()) {
showError('fullNameError');
isValid = false;
} else {
hideError('fullNameError');
}
// Validate Date of Birth
if (!formData.dob) {
showError('dobError');
isValid = false;
} else {
hideError('dobError');
}
// Validate Gender
if (!formData.gender) {
showError('genderError');
isValid = false;
} else {
hideError('genderError');
}
// Validate Parent Name
if (!formData.parentName.trim()) {
showError('parentNameError');
isValid = false;
} else {
hideError('parentNameError');
}
// Validate Email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!formData.email || !emailRegex.test(formData.email)) {
showError('emailError');
isValid = false;
} else {
hideError('emailError');
}
// Validate Mobile
const mobileRegex = /^[0-9]{10,15}$/;
if (!formData.mobile || !mobileRegex.test(formData.mobile)) {
showError('mobileError');
isValid = false;
} else {
hideError('mobileError');
}
// Validate Address
if (!formData.address.trim()) {
showError('addressError');
isValid = false;
} else {
hideError('addressError');
}
// Validate Grade
if (!formData.grade) {
showError('gradeError');
isValid = false;
} else {
hideError('gradeError');
}
// For PDF, we might want to be less strict
if (!isValid && !isPDF) {
// Scroll to first error
const firstError = document.querySelector('.error-message[style="display: block;"]');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
return isPDF ? true : isValid;
}
function showError(errorId) {
const errorElement = document.getElementById(errorId);
if (errorElement) {
errorElement.style.display = 'block';
}
}
function hideError(errorId) {
const errorElement = document.getElementById(errorId);
if (errorElement) {
errorElement.style.display = 'none';
}
}
function getFormData() {
return {
fullName: document.getElementById('fullName').value,
dob: document.getElementById('dob').value,
gender: document.querySelector('input[name="gender"]:checked')?.value,
parentName: document.getElementById('parentName').value,
email: document.getElementById('email').value,
mobile: document.getElementById('mobile').value,
address: document.getElementById('address').value,
grade: document.getElementById('grade').value,
photo: document.getElementById('photo').files[0]?.name || 'Not provided'
};
}
function generatePDF() {
// Create a clone of the form to style for PDF
const element = document.createElement('div');
element.style.padding = '20px';
element.style.fontFamily = "'Poppins', sans-serif";
// Add title
const title = document.createElement('h1');
title.textContent = 'School Admission Form - Submission Copy';
title.style.color = '#4361ee';
title.style.textAlign = 'center';
title.style.marginBottom = '20px';
element.appendChild(title);
// Get form data
const formData = getFormData();
// Create table for form data
const table = document.createElement('table');
table.style.width = '100%';
table.style.borderCollapse = 'collapse';
table.style.marginBottom = '20px';
// Add rows for each form field
for (const [key, value] of Object.entries(formData)) {
const row = document.createElement('tr');
const headerCell = document.createElement('th');
headerCell.textContent = formatKey(key) + ':';
headerCell.style.textAlign = 'left';
headerCell.style.padding = '10px';
headerCell.style.borderBottom = '1px solid #ddd';
headerCell.style.width = '30%';
const valueCell = document.createElement('td');
valueCell.textContent = value || 'Not provided';
valueCell.style.padding = '10px';
valueCell.style.borderBottom = '1px solid #ddd';
row.appendChild(headerCell);
row.appendChild(valueCell);
table.appendChild(row);
}
element.appendChild(table);
// Add footer
const footer = document.createElement('div');
footer.style.textAlign = 'center';
footer.style.fontSize = '0.8rem';
footer.style.color = '#666';
footer.style.marginTop = '30px';
footer.textContent = 'Generated on ' + new Date().toLocaleDateString() + ' at ' + new Date().toLocaleTimeString();
element.appendChild(footer);
// PDF options
const opt = {
margin: 10,
filename: 'school_admission_form.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
// Generate PDF
html2pdf().set(opt).from(element).save();
}
function formatKey(key) {
return key
.replace(/([A-Z])/g, ' $1')
.replace(/^./, str => str.toUpperCase())
.replace('Lkg', 'LKG')
.replace('Ukg', 'UKG');
}
});
إرسال تعليق
Thank you
Learning robo team