College Admission Enquiry Form Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Admission Enquiry Form</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        <div class="university-header">
            <h1>Prestige <span>University</span></h1>
            <p>Admission Enquiry & Application Portal</p>
        </div>
        
        <div class="form-container">
            
            <div class="info-panel">
                <div>
                    <div class="university-brand">
                        <div class="university-logo">
                            <i class="fas fa-university"></i>
                        </div>
                        <h2>Prestige University</h2>
                        <p>Ranked among top 50 universities globally. Empowering minds since 1895.</p>
                    </div>
                    
                    <ul class="info-features">
                        <li>
                            <i class="fas fa-trophy"></i>
                            <div>
                                <strong>Global Recognition</strong>
                                <span>Accredited by international educational bodies with global partnerships.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-graduation-cap"></i>
                            <div>
                                <strong>120+ Programs</strong>
                                <span>Undergraduate, graduate, and doctoral programs across diverse disciplines.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-user-tie"></i>
                            <div>
                                <strong>Expert Faculty</strong>
                                <span>Nobel laureates, industry experts, and renowned researchers.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-globe-americas"></i>
                            <div>
                                <strong>Global Campus</strong>
                                <span>Students from 80+ countries creating a diverse learning environment.</span>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="contact-details">
                    <h3>Admissions Office</h3>
                    <div class="contact-info">
                        <div class="contact-item">
                            <i class="fas fa-phone-alt"></i>
                            <span>+1 (800) 555-UNIV</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>admissions@prestige.edu</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 University Ave, Campus City</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-clock"></i>
                            <span>Mon-Fri: 9AM-5PM</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="form-panel">
                <div class="form-header">
                    <h3>Admission Enquiry Form</h3>
                    <p>Complete this form to receive detailed information about programs, admission requirements, and scholarship opportunities.</p>
                </div>
                
                
                <div class="form-progress">
                    <div class="progress-bar" id="progressBar"></div>
                    
                    <div class="progress-step active" data-step="1">
                        <div class="step-number">1</div>
                        <div class="step-label">Personal Details</div>
                    </div>
                    
                    <div class="progress-step" data-step="2">
                        <div class="step-number">2</div>
                        <div class="step-label">Academic Info</div>
                    </div>
                    
                    <div class="progress-step" data-step="3">
                        <div class="step-number">3</div>
                        <div class="step-label">Program Choice</div>
                    </div>
                    
                    <div class="progress-step" data-step="4">
                        <div class="step-number">4</div>
                        <div class="step-label">Review & Submit</div>
                    </div>
                </div>
                
                <form id="collegeForm">
                    
                    <div class="form-step" id="step1">
                        <h4 class="section-title">Personal Information</h4>
                        
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="firstName" class="required"><i class="fas fa-user"></i> First Name</label>
                                <input type="text" id="firstName" placeholder="Enter your first name" required>
                                <div class="error-message" id="firstNameError">Please enter your first name</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="lastName" class="required"><i class="fas fa-user"></i> Last Name</label>
                                <input type="text" id="lastName" placeholder="Enter your last name" required>
                                <div class="error-message" id="lastNameError">Please enter your last name</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="dateOfBirth" class="required"><i class="fas fa-calendar"></i> Date of Birth</label>
                                <input type="date" id="dateOfBirth" required>
                                <div class="error-message" id="dobError">Please enter your date of birth</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="gender" class="required"><i class="fas fa-venus-mars"></i> Gender</label>
                                <select id="gender" required>
                                    <option value="" disabled selected>Select gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other / Prefer not to say</option>
                                </select>
                                <div class="error-message" id="genderError">Please select your gender</div>
                            </div>
                            
                            <div class="form-group full-width">
                                <label for="nationality" class="required"><i class="fas fa-globe"></i> Nationality</label>
                                <select id="nationality" required>
                                    <option value="" disabled selected>Select your nationality</option>
                                    <option value="us">United States</option>
                                    <option value="uk">United Kingdom</option>
                                    <option value="ca">Canada</option>
                                    <option value="in">India</option>
                                    <option value="au">Australia</option>
                                    <option value="de">Germany</option>
                                    <option value="fr">France</option>
                                    <option value="other">Other</option>
                                </select>
                                <div class="error-message" id="nationalityError">Please select your nationality</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="email" class="required"><i class="fas fa-envelope"></i> Email Address</label>
                                <input type="email" id="email" placeholder="you@example.com" required>
                                <div class="error-message" id="emailError">Please enter a valid email address</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="phone" class="required"><i class="fas fa-phone"></i> Phone Number</label>
                                <input type="tel" id="phone" placeholder="+1 (123) 456-7890" required>
                                <div class="error-message" id="phoneError">Please enter a valid phone number</div>
                            </div>
                            
                            <div class="form-group full-width">
                                <label for="address" class="required"><i class="fas fa-home"></i> Permanent Address</label>
                                <textarea id="address" placeholder="Enter your complete permanent address" required></textarea>
                                <div class="error-message" id="addressError">Please enter your permanent address</div>
                            </div>
                        </div>
                        
                        <div class="form-footer">
                            <div></div>
                            <button type="button" class="btn btn-primary" id="nextStep1">
                                Next: Academic Info <i class="fas fa-arrow-right btn-icon"></i>
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="form-step hidden" id="step2">
                        <h4 class="section-title">Academic Background</h4>
                        
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="highestQualification" class="required"><i class="fas fa-graduation-cap"></i> Highest Qualification</label>
                                <select id="highestQualification" required>
                                    <option value="" disabled selected>Select highest qualification</option>
                                    <option value="high-school">High School / Secondary</option>
                                    <option value="associate">Associate Degree</option>
                                    <option value="bachelor">Bachelor's Degree</option>
                                    <option value="master">Master's Degree</option>
                                    <option value="phd">PhD / Doctorate</option>
                                </select>
                                <div class="error-message" id="qualificationError">Please select your highest qualification</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="yearOfCompletion" class="required"><i class="fas fa-calendar-check"></i> Year of Completion</label>
                                <select id="yearOfCompletion" required>
                                    <option value="" disabled selected>Select year</option>
                                    
                                </select>
                                <div class="error-message" id="yearError">Please select year of completion</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="institution" class="required"><i class="fas fa-school"></i> Institution Name</label>
                                <input type="text" id="institution" placeholder="Name of your institution" required>
                                <div class="error-message" id="institutionError">Please enter institution name</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="gpa" class="required"><i class="fas fa-chart-line"></i> GPA / Percentage</label>
                                <input type="text" id="gpa" placeholder="Enter your GPA or percentage" required>
                                <div class="error-message" id="gpaError">Please enter your GPA or percentage</div>
                            </div>
                            
                            <div class="form-group">
                                <label><i class="fas fa-language"></i> English Proficiency Test</label>
                                <div class="radio-group">
                                    <div class="radio-option">
                                        <input type="radio" id="toefl" name="englishTest" value="toefl">
                                        <label for="toefl">TOEFL</label>
                                    </div>
                                    <div class="radio-option">
                                        <input type="radio" id="ielts" name="englishTest" value="ielts">
                                        <label for="ielts">IELTS</label>
                                    </div>
                                    <div class="radio-option">
                                        <input type="radio" id="none" name="englishTest" value="none" checked>
                                        <label for="none">Not Taken</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="testScore"><i class="fas fa-file-alt"></i> Test Score (if applicable)</label>
                                <input type="text" id="testScore" placeholder="Enter your test score">
                            </div>
                            
                            <div class="form-group full-width">
                                <label for="achievements"><i class="fas fa-award"></i> Academic Achievements / Awards</label>
                                <textarea id="achievements" placeholder="List any academic achievements, awards, or honors"></textarea>
                            </div>
                        </div>
                        
                        <div class="form-footer">
                            <button type="button" class="btn btn-secondary" id="prevStep2">
                                <i class="fas fa-arrow-left btn-icon"></i> Previous
                            </button>
                            <button type="button" class="btn btn-primary" id="nextStep2">
                                Next: Program Choice <i class="fas fa-arrow-right btn-icon"></i>
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="form-step hidden" id="step3">
                        <h4 class="section-title">Program & Campus Information</h4>
                        
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="programLevel" class="required"><i class="fas fa-layer-group"></i> Program Level</label>
                                <select id="programLevel" required>
                                    <option value="" disabled selected>Select program level</option>
                                    <option value="undergraduate">Undergraduate</option>
                                    <option value="graduate">Graduate (Master's)</option>
                                    <option value="doctoral">Doctoral (PhD)</option>
                                    <option value="certificate">Certificate Program</option>
                                    <option value="diploma">Diploma Program</option>
                                </select>
                                <div class="error-message" id="levelError">Please select program level</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="programOfInterest" class="required"><i class="fas fa-book-open"></i> Program of Interest</label>
                                <select id="programOfInterest" required>
                                    <option value="" disabled selected>Select program</option>
                                    <option value="computer-science">Computer Science</option>
                                    <option value="business">Business Administration</option>
                                    <option value="engineering">Engineering</option>
                                    <option value="medicine">Medicine</option>
                                    <option value="law">Law</option>
                                    <option value="arts">Liberal Arts</option>
                                    <option value="sciences">Natural Sciences</option>
                                    <option value="social-sciences">Social Sciences</option>
                                    <option value="other">Other</option>
                                </select>
                                <div class="error-message" id="programError">Please select program of interest</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="intakeYear" class="required"><i class="fas fa-calendar-alt"></i> Preferred Intake Year</label>
                                <select id="intakeYear" required>
                                    <option value="" disabled selected>Select intake year</option>
                                    
                                </select>
                                <div class="error-message" id="intakeError">Please select intake year</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="intakeSemester" class="required"><i class="fas fa-calendar-day"></i> Preferred Semester</label>
                                <select id="intakeSemester" required>
                                    <option value="" disabled selected>Select semester</option>
                                    <option value="fall">Fall Semester</option>
                                    <option value="spring">Spring Semester</option>
                                    <option value="summer">Summer Semester</option>
                                </select>
                                <div class="error-message" id="semesterError">Please select semester</div>
                            </div>
                            
                            <div class="form-group">
                                <label><i class="fas fa-money-check-alt"></i> Financial Assistance Needed?</label>
                                <div class="radio-group">
                                    <div class="radio-option">
                                        <input type="radio" id="financial-yes" name="financialAssistance" value="yes">
                                        <label for="financial-yes">Yes</label>
                                    </div>
                                    <div class="radio-option">
                                        <input type="radio" id="financial-no" name="financialAssistance" value="no" checked>
                                        <label for="financial-no">No</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label><i class="fas fa-home"></i> Campus Accommodation Needed?</label>
                                <div class="radio-group">
                                    <div class="radio-option">
                                        <input type="radio" id="accommodation-yes" name="accommodation" value="yes">
                                        <label for="accommodation-yes">Yes</label>
                                    </div>
                                    <div class="radio-option">
                                        <input type="radio" id="accommodation-no" name="accommodation" value="no" checked>
                                        <label for="accommodation-no">No</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group full-width">
                                <label for="additionalQuestions"><i class="fas fa-question-circle"></i> Additional Questions / Comments</label>
                                <textarea id="additionalQuestions" placeholder="Any specific questions or additional information you'd like to share with the admissions team"></textarea>
                            </div>
                        </div>
                        
                        <div class="form-footer">
                            <button type="button" class="btn btn-secondary" id="prevStep3">
                                <i class="fas fa-arrow-left btn-icon"></i> Previous
                            </button>
                            <button type="button" class="btn btn-primary" id="nextStep3">
                                Next: Review & Submit <i class="fas fa-arrow-right btn-icon"></i>
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="form-step hidden" id="step4">
                        <h4 class="section-title">Review Your Information</h4>
                        
                        <div style="background: var(--light-blue); padding: 25px; border-radius: var(--radius); margin-bottom: 30px;">
                            <h4 style="color: var(--university-blue); margin-bottom: 20px; font-size: 1.2rem;">Please review your information before submitting</h4>
                            
                            <div id="reviewContent" style="line-height: 1.8;">
                                
                            </div>
                        </div>
                        
                        <div class="checkbox-group">
                            <div class="checkbox-option">
                                <input type="checkbox" id="terms" required>
                                <label for="terms" class="required">I confirm that all information provided is accurate to the best of my knowledge.</label>
                            </div>
                            <div class="error-message" id="termsError">You must confirm the accuracy of your information</div>
                        </div>
                        
                        <div class="checkbox-group">
                            <div class="checkbox-option">
                                <input type="checkbox" id="privacy" required>
                                <label for="privacy" class="required">I agree to the <a href="#" style="color: var(--secondary-blue); font-weight: 600;">Privacy Policy</a> and consent to being contacted by the university.</label>
                            </div>
                            <div class="error-message" id="privacyError">You must agree to the privacy policy</div>
                        </div>
                        
                        <div class="checkbox-group">
                            <div class="checkbox-option">
                                <input type="checkbox" id="updates">
                                <label for="updates">I would like to receive updates about admission deadlines, events, and university news.</label>
                            </div>
                        </div>
                        
                        <div class="form-footer">
                            <button type="button" class="btn btn-secondary" id="prevStep4">
                                <i class="fas fa-arrow-left btn-icon"></i> Previous
                            </button>
                            <button type="submit" class="btn btn-primary" id="submitForm">
                                Submit Enquiry <i class="fas fa-paper-plane btn-icon"></i>
                            </button>
                        </div>
                    </div>
                </form>
                
                
                <div class="success-screen" id="successScreen">
                    <div class="success-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <h2>Enquiry Submitted Successfully!</h2>
                    <p>Thank you for your interest in Prestige University. Your enquiry has been received and our admissions team will contact you within 48 hours.</p>
                    
                    <div class="next-steps">
                        <h4>Next Steps in the Admission Process</h4>
                        <ol>
                            <li>You will receive a confirmation email with your application reference number.</li>
                            <li>Our admissions counselor will contact you to discuss program details and requirements.</li>
                            <li>Schedule a campus tour or virtual information session.</li>
                            <li>Submit required documents for preliminary evaluation.</li>
                            <li>Receive personalized guidance on the application process.</li>
                        </ol>
                    </div>
                    
                    <p style="font-weight: 600; color: var(--university-blue);">For immediate assistance, contact our admissions office at <span style="color: var(--accent-gold);">+1 (800) 555-UNIV</span></p>
                    
                    <button class="btn-success" id="successBtn">
                        <i class="fas fa-download"></i> Download Information Brochure
                    </button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS

:root {
            --university-blue: #0c2340;
            --accent-gold: #c99700;
            --secondary-blue: #1e3d6f;
            --light-blue: #e6f0ff;
            --success-green: #2e7d32;
            --dark-text: #1a1a1a;
            --light-text: #666666;
            --border-color: #d1dce5;
            --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
            --radius: 12px;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Source Sans Pro', sans-serif;
            background-color: #f8fafc;
            color: var(--dark-text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            background-image: 
                linear-gradient(135deg, rgba(12, 35, 64, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 90% 10%, rgba(201, 151, 0, 0.05) 0%, transparent 30%);
        }

.container {
            width: 100%;
            max-width: 1200px;
            animation: fadeIn 0.8s ease-out;
        }

.university-header {
            text-align: center;
            margin-bottom: 30px;
            padding: 0 20px;
        }

.university-header h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--university-blue);
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }

.university-header h1 span {
            color: var(--accent-gold);
        }

.university-header p {
            font-size: 1.2rem;
            color: var(--light-text);
            max-width: 700px;
            margin: 0 auto;
        }

.form-container {
            display: flex;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            min-height: 650px;
        }

.form-container:hover {
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
        }

.info-panel {
            flex: 1;
            background: linear-gradient(145deg, var(--university-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

.info-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        }

.university-brand {
            position: relative;
            z-index: 1;
        }

.university-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 90px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-bottom: 25px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            animation: float 6s ease-in-out infinite;
        }

.university-logo i {
            font-size: 40px;
            color: var(--accent-gold);
        }

.university-brand h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.2;
        }

.university-brand p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 30px;
        }

.info-features {
            list-style: none;
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

.info-features li {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

.info-features i {
            margin-right: 15px;
            color: var(--accent-gold);
            font-size: 1.2rem;
            margin-top: 3px;
            min-width: 20px;
        }

.info-features strong {
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
            font-size: 1.05rem;
        }

.info-features span {
            font-size: 0.95rem;
            opacity: 0.9;
            line-height: 1.5;
        }

.contact-details {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            position: relative;
            z-index: 1;
        }

.contact-details h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-weight: 600;
        }

.contact-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

.contact-item {
            display: flex;
            align-items: center;
        }

.contact-item i {
            margin-right: 12px;
            color: var(--accent-gold);
            font-size: 1rem;
            width: 20px;
        }

.contact-item span {
            font-size: 0.95rem;
        }

.form-panel {
            flex: 1.5;
            padding: 50px 50px;
            background: white;
            overflow-y: auto;
            max-height: 750px;
        }

.form-header {
            margin-bottom: 30px;
            border-bottom: 2px solid var(--light-blue);
            padding-bottom: 20px;
        }

.form-header h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            color: var(--university-blue);
            margin-bottom: 10px;
            font-weight: 700;
        }

.form-header p {
            color: var(--light-text);
            font-size: 1.1rem;
        }

.form-progress {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 30px 0 40px;
            position: relative;
        }

.form-progress::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 3px;
            background: #e9ecef;
            z-index: 1;
        }

.progress-bar {
            position: absolute;
            top: 20px;
            left: 0;
            height: 3px;
            background: var(--accent-gold);
            z-index: 2;
            transition: width 0.5s ease;
        }

.progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 3;
        }

.step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            border: 3px solid #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--light-text);
            margin-bottom: 10px;
            transition: var(--transition);
        }

.progress-step.active .step-number {
            border-color: var(--accent-gold);
            background: var(--accent-gold);
            color: white;
            transform: scale(1.1);
        }

.progress-step.completed .step-number {
            border-color: var(--success-green);
            background: var(--success-green);
            color: white;
        }

.step-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--light-text);
            text-align: center;
        }

.progress-step.active .step-label {
            color: var(--university-blue);
        }

.form-step {
            display: block;
            animation: slideIn 0.5s ease-out;
        }

.form-step.hidden {
            display: none;
        }

.section-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.4rem;
            color: var(--university-blue);
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light-blue);
            font-weight: 600;
        }

.form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin-bottom: 30px;
        }

.form-group {
            display: flex;
            flex-direction: column;
        }

.form-group.full-width {
            grid-column: span 2;
        }

label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark-text);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
        }

label i {
            margin-right: 8px;
            color: var(--secondary-blue);
            width: 18px;
        }

.required::after {
            content: " *";
            color: #d32f2f;
            font-weight: 700;
        }

input, select, textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
            background-color: #fcfcfc;
            color: var(--dark-text);
        }

input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--secondary-blue);
            box-shadow: 0 0 0 3px rgba(30, 61, 111, 0.1);
            background-color: white;
        }

textarea {
            resize: vertical;
            min-height: 120px;
        }

.radio-group, .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 8px;
        }

.radio-option, .checkbox-option {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

.radio-option input, .checkbox-option input {
            width: auto;
            margin-right: 10px;
            transform: scale(1.2);
        }

.radio-option label, .checkbox-option label {
            margin-bottom: 0;
            font-weight: 500;
            cursor: pointer;
        }

.checkbox-group {
            margin-bottom: 20px;
        }

.form-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            padding-top: 25px;
            border-top: 2px solid var(--light-blue);
            gap: 20px;
        }

.btn {
            padding: 16px 32px;
            border-radius: 8px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 150px;
        }

.btn-primary {
            background: linear-gradient(135deg, var(--university-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(12, 35, 64, 0.2);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(12, 35, 64, 0.3);
        }

.btn-secondary {
            background: white;
            color: var(--university-blue);
            border: 2px solid var(--border-color);
        }

.btn-secondary:hover {
            background: #f8fafc;
            border-color: var(--secondary-blue);
        }

.btn-icon {
            font-size: 1rem;
            transition: transform 0.3s ease;
        }

.btn-primary:hover .btn-icon {
            transform: translateX(5px);
        }

.success-screen {
            text-align: center;
            padding: 40px 20px;
            display: none;
            animation: fadeIn 0.8s ease-out;
        }

.success-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--success-green) 0%, #4caf50 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            animation: scaleIn 0.5s ease-out 0.3s both;
            box-shadow: 0 8px 24px rgba(46, 125, 50, 0.3);
        }

.success-icon i {
            font-size: 50px;
            color: white;
        }

.success-screen h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            color: var(--university-blue);
            margin-bottom: 15px;
            font-weight: 700;
        }

.success-screen p {
            color: var(--light-text);
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.next-steps {
            background: var(--light-blue);
            padding: 25px;
            border-radius: var(--radius);
            margin: 30px 0;
            text-align: left;
            border-left: 5px solid var(--accent-gold);
        }

.next-steps h4 {
            color: var(--university-blue);
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-weight: 700;
        }

.next-steps ol {
            padding-left: 20px;
            margin-bottom: 0;
        }

.next-steps li {
            margin-bottom: 12px;
            line-height: 1.5;
        }

.btn-success {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #e6b800 100%);
            color: var(--university-blue);
            padding: 16px 40px;
            border-radius: 8px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 10px;
            font-size: 1.1rem;
        }

.btn-success:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(201, 151, 0, 0.3);
        }

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

@keyframes scaleIn {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

/* Responsive design */
        @media (max-width: 1024px) {
            .form-container {
                flex-direction: column;
                min-height: auto;
            }
            
            .form-panel {
                max-height: none;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .contact-info {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .university-header h1 {
                font-size: 2.2rem;
            }
            
            .form-panel, .info-panel {
                padding: 30px 25px;
            }
            
            .form-progress {
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }
            
            .progress-step {
                flex: 1;
                min-width: 100px;
            }
            
            .form-footer {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }

@media (max-width: 480px) {
            .university-header h1 {
                font-size: 1.8rem;
            }
            
            .form-header h3 {
                font-size: 1.6rem;
            }
            
            .section-title {
                font-size: 1.2rem;
            }
        }

/* Validation styles */
        .error-message {
            color: #d32f2f;
            font-size: 0.85rem;
            margin-top: 8px;
            display: none;
            font-weight: 500;
        }

.error input, .error select, .error textarea {
            border-color: #d32f2f;
            box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
        }

.success input, .success select, .success textarea {
            border-color: var(--success-green);
        }

JavaScript

// DOM Elements
        const steps = document.querySelectorAll('.form-step');
        const progressSteps = document.querySelectorAll('.progress-step');
        const progressBar = document.getElementById('progressBar');
        const form = document.getElementById('collegeForm');
        const successScreen = document.getElementById('successScreen');
        const reviewContent = document.getElementById('reviewContent');
        
        // Navigation buttons
        const nextStep1 = document.getElementById('nextStep1');
        const nextStep2 = document.getElementById('nextStep2');
        const nextStep3 = document.getElementById('nextStep3');
        const prevStep2 = document.getElementById('prevStep2');
        const prevStep3 = document.getElementById('prevStep3');
        const prevStep4 = document.getElementById('prevStep4');
        const submitForm = document.getElementById('submitForm');
        const successBtn = document.getElementById('successBtn');
        
        // Current step tracking
        let currentStep = 1;
        const totalSteps = 4;
        
        // Populate year dropdowns
        function populateYearDropdowns() {
            const currentYear = new Date().getFullYear();
            const yearOfCompletion = document.getElementById('yearOfCompletion');
            const intakeYear = document.getElementById('intakeYear');
            
            // Clear existing options
            yearOfCompletion.innerHTML = '<option value="" disabled selected>Select year</option>';
            intakeYear.innerHTML = '<option value="" disabled selected>Select intake year</option>';
            
            // Add years for completion (last 20 years)
            for (let year = currentYear; year >= currentYear - 20; year--) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                yearOfCompletion.appendChild(option);
            }
            
            // Add years for intake (current year to next 3 years)
            for (let year = currentYear; year <= currentYear + 3; year++) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                intakeYear.appendChild(option);
            }
            
            // Set default intake year to next year
            intakeYear.value = currentYear + 1;
        }
        
        // Update progress bar and step indicators
        function updateProgress() {
            // Update progress bar width
            const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
            progressBar.style.width = `${progressPercentage}%`;
            
            // Update step indicators
            progressSteps.forEach((step, index) => {
                step.classList.remove('active', 'completed');
                
                if (index + 1 < currentStep) {
                    step.classList.add('completed');
                } else if (index + 1 === currentStep) {
                    step.classList.add('active');
                }
            });
        }
        
        // Navigate to step
        function goToStep(step) {
            // Hide all steps
            steps.forEach(stepEl => {
                stepEl.classList.add('hidden');
            });
            
            // Show current step
            const currentStepEl = document.getElementById(`step${step}`);
            currentStepEl.classList.remove('hidden');
            currentStepEl.style.animation = 'slideIn 0.5s ease-out';
            
            currentStep = step;
            updateProgress();
            
            // Scroll to top of form
            document.querySelector('.form-panel').scrollTop = 0;
            
            // If step 4, populate review content
            if (step === 4) {
                populateReviewContent();
            }
        }
        
        // Validation functions for each step
        function validateStep1() {
            let isValid = true;
            
            const fields = [
                { id: 'firstName', errorId: 'firstNameError' },
                { id: 'lastName', errorId: 'lastNameError' },
                { id: 'dateOfBirth', errorId: 'dobError' },
                { id: 'gender', errorId: 'genderError' },
                { id: 'nationality', errorId: 'nationalityError' },
                { id: 'email', errorId: 'emailError', validation: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) },
                { id: 'phone', errorId: 'phoneError', validation: (value) => /^[\+]?[1-9][\d]{0,15}$/.test(value.replace(/[\s\-]/g, '')) },
                { id: 'address', errorId: 'addressError', validation: (value) => value.trim().length >= 10 }
            ];
            
            fields.forEach(field => {
                const element = document.getElementById(field.id);
                const errorElement = document.getElementById(field.errorId);
                const parent = element.parentElement;
                
                if (!element.value || (field.validation && !field.validation(element.value))) {
                    parent.classList.add('error');
                    errorElement.style.display = 'block';
                    isValid = false;
                } else {
                    parent.classList.remove('error');
                    errorElement.style.display = 'none';
                }
            });
            
            return isValid;
        }
        
        function validateStep2() {
            let isValid = true;
            
            const fields = [
                { id: 'highestQualification', errorId: 'qualificationError' },
                { id: 'yearOfCompletion', errorId: 'yearError' },
                { id: 'institution', errorId: 'institutionError' },
                { id: 'gpa', errorId: 'gpaError', validation: (value) => /^[0-9]+(\.[0-9]+)?$/.test(value) || /^[0-9]+%$/.test(value) }
            ];
            
            fields.forEach(field => {
                const element = document.getElementById(field.id);
                const errorElement = document.getElementById(field.errorId);
                const parent = element.parentElement;
                
                if (!element.value || (field.validation && !field.validation(element.value))) {
                    parent.classList.add('error');
                    errorElement.style.display = 'block';
                    isValid = false;
                } else {
                    parent.classList.remove('error');
                    errorElement.style.display = 'none';
                }
            });
            
            return isValid;
        }
        
        function validateStep3() {
            let isValid = true;
            
            const fields = [
                { id: 'programLevel', errorId: 'levelError' },
                { id: 'programOfInterest', errorId: 'programError' },
                { id: 'intakeYear', errorId: 'intakeError' },
                { id: 'intakeSemester', errorId: 'semesterError' }
            ];
            
            fields.forEach(field => {
                const element = document.getElementById(field.id);
                const errorElement = document.getElementById(field.errorId);
                const parent = element.parentElement;
                
                if (!element.value) {
                    parent.classList.add('error');
                    errorElement.style.display = 'block';
                    isValid = false;
                } else {
                    parent.classList.remove('error');
                    errorElement.style.display = 'none';
                }
            });
            
            return isValid;
        }
        
        function validateStep4() {
            let isValid = true;
            
            const terms = document.getElementById('terms');
            const termsError = document.getElementById('termsError');
            const privacy = document.getElementById('privacy');
            const privacyError = document.getElementById('privacyError');
            
            if (!terms.checked) {
                termsError.style.display = 'block';
                isValid = false;
            } else {
                termsError.style.display = 'none';
            }
            
            if (!privacy.checked) {
                privacyError.style.display = 'block';
                isValid = false;
            } else {
                privacyError.style.display = 'none';
            }
            
            return isValid;
        }
        
        // Populate review content
        function populateReviewContent() {
            const formData = new FormData(form);
            const data = Object.fromEntries(formData);
            
            // Get additional form values not in FormData
            const englishTest = document.querySelector('input[name="englishTest"]:checked');
            const financialAssistance = document.querySelector('input[name="financialAssistance"]:checked');
            const accommodation = document.querySelector('input[name="accommodation"]:checked');
            
            let reviewHTML = `
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                    <div>
                        <strong>Full Name:</strong><br>
                        ${document.getElementById('firstName').value} ${document.getElementById('lastName').value}
                    </div>
                    <div>
                        <strong>Date of Birth:</strong><br>
                        ${document.getElementById('dateOfBirth').value}
                    </div>
                    <div>
                        <strong>Email:</strong><br>
                        ${document.getElementById('email').value}
                    </div>
                    <div>
                        <strong>Phone:</strong><br>
                        ${document.getElementById('phone').value}
                    </div>
                    <div>
                        <strong>Nationality:</strong><br>
                        ${document.getElementById('nationality').options[document.getElementById('nationality').selectedIndex].text}
                    </div>
                    <div>
                        <strong>Gender:</strong><br>
                        ${document.getElementById('gender').options[document.getElementById('gender').selectedIndex].text}
                    </div>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <strong>Address:</strong><br>
                    ${document.getElementById('address').value}
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                    <div>
                        <strong>Highest Qualification:</strong><br>
                        ${document.getElementById('highestQualification').options[document.getElementById('highestQualification').selectedIndex].text}
                    </div>
                    <div>
                        <strong>Institution:</strong><br>
                        ${document.getElementById('institution').value}
                    </div>
                    <div>
                        <strong>Year of Completion:</strong><br>
                        ${document.getElementById('yearOfCompletion').value}
                    </div>
                    <div>
                        <strong>GPA/Percentage:</strong><br>
                        ${document.getElementById('gpa').value}
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                    <div>
                        <strong>Program Level:</strong><br>
                        ${document.getElementById('programLevel').options[document.getElementById('programLevel').selectedIndex].text}
                    </div>
                    <div>
                        <strong>Program of Interest:</strong><br>
                        ${document.getElementById('programOfInterest').options[document.getElementById('programOfInterest').selectedIndex].text}
                    </div>
                    <div>
                        <strong>Intake Year:</strong><br>
                        ${document.getElementById('intakeYear').value}
                    </div>
                    <div>
                        <strong>Semester:</strong><br>
                        ${document.getElementById('intakeSemester').options[document.getElementById('intakeSemester').selectedIndex].text}
                    </div>
                </div>
            `;
            
            reviewContent.innerHTML = reviewHTML;
        }
        
        // Event Listeners
        nextStep1.addEventListener('click', () => {
            if (validateStep1()) {
                goToStep(2);
            }
        });
        
        nextStep2.addEventListener('click', () => {
            if (validateStep2()) {
                goToStep(3);
            }
        });
        
        nextStep3.addEventListener('click', () => {
            if (validateStep3()) {
                goToStep(4);
            }
        });
        
        prevStep2.addEventListener('click', () => goToStep(1));
        prevStep3.addEventListener('click', () => goToStep(2));
        prevStep4.addEventListener('click', () => goToStep(3));
        
        // Form submission
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (validateStep4()) {
                // Show success screen
                form.style.display = 'none';
                successScreen.style.display = 'block';
                
                // Animate progress to 100%
                progressBar.style.width = '100%';
                
                // Mark all steps as completed
                progressSteps.forEach(step => {
                    step.classList.remove('active');
                    step.classList.add('completed');
                });
            }
        });
        
        // Success button
        successBtn.addEventListener('click', () => {
            alert('Thank you! The university brochure will be downloaded shortly. Check your email for the download link.');
        });
        
        // Set date constraints
        const today = new Date();
        const minDob = new Date();
        minDob.setFullYear(minDob.getFullYear() - 70);
        const maxDob = new Date();
        maxDob.setFullYear(maxDob.getFullYear() - 16);
        
        document.getElementById('dateOfBirth').min = minDob.toISOString().split('T')[0];
        document.getElementById('dateOfBirth').max = maxDob.toISOString().split('T')[0];
        
        // Initialize
        populateYearDropdowns();
        updateProgress();
        
        // Add real-time validation for email
        const emailInput = document.getElementById('email');
        emailInput.addEventListener('blur', function() {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (this.value && !emailRegex.test(this.value)) {
                this.parentElement.classList.add('error');
                document.getElementById('emailError').style.display = 'block';
            } else if (this.value) {
                this.parentElement.classList.remove('error');
                document.getElementById('emailError').style.display = 'none';
            }
        });

College Admission Enquiry Form Template Preview

Download Options