Popup student registration form html with javascript form validation

0

Features Implemented:
Responsive 4-Column Layout:

  • Uses CSS Grid for desktop view (4 columns)
  • Switches to 2 columns on medium screens (tablets)
  • Stacks to 1 column on mobile devices

Profile Column:

  • Circular profile image with border
  • Centered with caption
  • Soft shadow and hover effect

Basic Details Column:

  • Student name as heading
  • Field of study as subheading
  • Short bio paragraph

Portfolio Column:

  • List of 5 projects with clickable links
  • Hover effects for better interactivity

Contact Column:

  • Contact form with name, email, and message fields
  • JavaScript alert on form submission
  • Download CV button with distinct styling

Design Elements:

  • Clean, minimal aesthetic
  • Soft shadows and rounded corners
  • Hover animations for interactivity
  • Professional color scheme
  • Legible typography

Technical Implementation:

  • Pure HTML, CSS, and JavaScript (no external libraries)
  • CSS Grid for layout
  • Media queries for responsiveness
  • Simple form validation and feedback

The placeholder image can be replaced with an actual student photo by changing the src attribute in the profile image tag. Similarly, the download CV link can be updated to point to an actual PDF file.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Student Registration Form</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> </head> <body> <button class="open-btn">Register Now</button> <div class="modal-overlay"> <div class="modal"> <div class="modal-header"> <h2>Student Registration</h2> <button class="close-btn">×</button> </div> <form id="registrationForm"> <div class="form-group"> <label for="fullName">Full Name</label> <input type="text" id="fullName" name="fullName" placeholder="Enter your full name"> <span class="error">Please enter your full name</span> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Enter your email"> <span class="error">Please enter a valid email</span> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" placeholder="Enter your phone number"> <span class="error">Please enter a valid phone number</span> </div> <div class="form-group"> <label for="dob">Date of Birth</label> <input type="date" id="dob" name="dob"> <span class="error">Please select your date of birth</span> </div> <div class="form-group"> <label for="course">Course/Program</label> <select id="course" name="course"> <option value="">Select a course</option> <option value="Computer Science">Computer Science</option> <option value="Business Administration">Business Administration</option> <option value="Engineering">Engineering</option> <option value="Medicine">Medicine</option> <option value="Arts">Arts</option> </select> <span class="error">Please select a course</span> </div> <div class="form-group"> <label>Gender</label> <div class="radio-group"> <div class="radio-option"> <input type="radio" id="male" name="gender" value="Male"> <label for="male">Male</label> </div> <div class="radio-option"> <input type="radio" id="female" name="gender" value="Female"> <label for="female">Female</label> </div> <div class="radio-option"> <input type="radio" id="other" name="gender" value="Other"> <label for="other">Other</label> </div> </div> <span class="error">Please select your gender</span> </div> <div class="form-group"> <label for="address">Address</label> <textarea id="address" name="address" placeholder="Enter your address"></textarea> <span class="error">Please enter your address</span> </div> <div class="form-actions"> <button type="button" class="btn btn-reset" id="resetBtn">Reset</button> <button type="submit" class="btn btn-submit">Submit</button> </div> <div class="success-message" id="successMessage"> <h3>Registration Successful!</h3> <p>Thank you for registering. We'll contact you soon.</p> </div> </form> </div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .open-btn {
            padding: 12px 24px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .open-btn:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-50px);
            transition: all 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-overlay.active .modal {
            transform: translateY(0);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h2 {
            color: #333;
            font-size: 24px;
            font-weight: 600;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #777;
            transition: color 0.3s ease;
        }

        .close-btn:hover {
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #4CAF50;
            outline: none;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .radio-group {
            display: flex;
            gap: 15px;
        }

        .radio-option {
            display: flex;
            align-items: center;
        }

        .radio-option input {
            margin-right: 5px;
        }

        .error {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .form-group.invalid input,
        .form-group.invalid select,
        .form-group.invalid textarea {
            border-color: #e74c3c;
        }

        .form-group.invalid .error {
            display: block;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-submit {
            background-color: #4CAF50;
            color: white;
        }

        .btn-submit:hover {
            background-color: #45a049;
        }

        .btn-reset {
            background-color: #f1f1f1;
            color: #333;
        }

        .btn-reset:hover {
            background-color: #ddd;
        }

        .success-message {
            display: none;
            text-align: center;
            padding: 20px;
            background-color: #dff0d8;
            color: #3c763d;
            border-radius: 5px;
            margin-top: 20px;
        }

        @media (max-width: 480px) {
            .modal {
                width: 95%;
                padding: 15px;
            }

            .radio-group {
                flex-direction: column;
                gap: 5px;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }
        }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const openBtn = document.querySelector('.open-btn');
            const modalOverlay = document.querySelector('.modal-overlay');
            const closeBtn = document.querySelector('.close-btn');
            const resetBtn = document.getElementById('resetBtn');
            const form = document.getElementById('registrationForm');
            const successMessage = document.getElementById('successMessage');
            
            // Open modal
            openBtn.addEventListener('click', function() {
                modalOverlay.classList.add('active');
                // Clear form and success message when reopening
                form.reset();
                successMessage.style.display = 'none';
                // Remove error states
                document.querySelectorAll('.form-group').forEach(group => {
                    group.classList.remove('invalid');
                });
            });

            // Close modal
            closeBtn.addEventListener('click', function() {
                modalOverlay.classList.remove('active');
            });

            // Close modal when clicking outside
            modalOverlay.addEventListener('click', function(e) {
                if (e.target === modalOverlay) {
                    modalOverlay.classList.remove('active');
                }
            });

            // Reset form
            resetBtn.addEventListener('click', function() {
                form.reset();
                // Remove error states
                document.querySelectorAll('.form-group').forEach(group => {
                    group.classList.remove('invalid');
                });
            });

            // Form validation
            function validateForm() {
                let isValid = true;
                
                // Validate Full Name
                const fullName = document.getElementById('fullName');
                if (!fullName.value.trim()) {
                    fullName.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    fullName.parentElement.classList.remove('invalid');
                }

                // Validate Email
                const email = document.getElementById('email');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value)) {
                    email.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    email.parentElement.classList.remove('invalid');
                }

                // Validate Phone
                const phone = document.getElementById('phone');
                const phoneRegex = /^[0-9]{10,15}$/;
                if (!phoneRegex.test(phone.value)) {
                    phone.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    phone.parentElement.classList.remove('invalid');
                }

                // Validate Date of Birth
                const dob = document.getElementById('dob');
                if (!dob.value) {
                    dob.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    dob.parentElement.classList.remove('invalid');
                }

                // Validate Course
                const course = document.getElementById('course');
                if (!course.value) {
                    course.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    course.parentElement.classList.remove('invalid');
                }

                // Validate Gender
                const genderSelected = document.querySelector('input[name="gender"]:checked');
                const genderGroup = document.querySelector('.radio-group').parentElement;
                if (!genderSelected) {
                    genderGroup.classList.add('invalid');
                    isValid = false;
                } else {
                    genderGroup.classList.remove('invalid');
                }

                // Validate Address
                const address = document.getElementById('address');
                if (!address.value.trim()) {
                    address.parentElement.classList.add('invalid');
                    isValid = false;
                } else {
                    address.parentElement.classList.remove('invalid');
                }

                return isValid;
            }

            // Form submission
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (validateForm()) {
                    // Store form data in localStorage
                    const formData = {
                        fullName: document.getElementById('fullName').value,
                        email: document.getElementById('email').value,
                        phone: document.getElementById('phone').value,
                        dob: document.getElementById('dob').value,
                        course: document.getElementById('course').value,
                        gender: document.querySelector('input[name="gender"]:checked').value,
                        address: document.getElementById('address').value
                    };
                    
                    localStorage.setItem('studentRegistration', JSON.stringify(formData));
                    
                    // Show success message
                    successMessage.style.display = 'block';
                    
                    // Reset form after 3 seconds
                    setTimeout(() => {
                        form.reset();
                        successMessage.style.display = 'none';
                        modalOverlay.classList.remove('active');
                    }, 3000);
                }
            });

            // Load saved data if exists (optional)
            const savedData = localStorage.getItem('studentRegistration');
            if (savedData) {
                const formData = JSON.parse(savedData);
                document.getElementById('fullName').value = formData.fullName;
                document.getElementById('email').value = formData.email;
                document.getElementById('phone').value = formData.phone;
                document.getElementById('dob').value = formData.dob;
                document.getElementById('course').value = formData.course;
                document.querySelector(`input[name="gender"][value="${formData.gender}"]`).checked = true;
                document.getElementById('address').value = formData.address;
            }
        });
We hope you Like this Post Thanks for coming Here
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied