Scorpio Car Interest Data Collection Portal PROJECT

[lalit622]

<title>Scorpio Car Interest Form</title> <style> body { background: #2166d6; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; } .container { width: 100%; max-width: 900px; } .form-box { background: #fff; padding: 24px; border-radius: 14px; box-shadow: 0 0 20px #3334a4; width: 100%; box-sizing: border-box; } .form-box img { display: block; margin: 0 auto 12px auto; width: 120px; height: auto; } .form-box h2 { color: #184d47; text-align: center; margin-bottom: 14px; } .form-box label { display: block; font-size: 1.02em; margin-bottom: 6px; } .form-box input[type="text"], .form-box input[type="email"], .form-box input[type="date"], .form-box select { width: 98%; padding: 10px; margin-bottom: 12px; border: 1px solid #bcc5d3; border-radius: 6px; font-size: 1em; outline: none; } .checkbox-group { margin-bottom: 12px; background: #f2f6fc; padding: 10px; border-radius: 7px; } .form-box input[type="checkbox"] { margin-right: 8px; } .form-box input[type="submit"] { width: 100%; padding: 14px; background: #0b3061; color: #fff; border: none; border-radius: 6px; font-size: 1.06em; cursor: pointer; margin-top: 8px; } .form-box input[type="submit"]:hover { background: #184d47; }

    /* SUCCESS BOX (hidden by default) */
    .success-box {
        margin-top: 18px;
        background: linear-gradient(135deg,#e6fff0,#d9fef0);
        border-left: 6px solid #0b3061;
        padding: 22px;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        display: none; /* initially hidden */
        text-align: center;
    }
    .success-box h1 {
        margin: 0 0 6px 0;
        font-size: 28px;
        color: #0b612f;
    }
    .success-box p { margin: 4px 0 0 0; color: #08423a; font-size:16px; }

    /* smooth appear */
    .show {
        display: block !important;
        animation: popIn 450ms ease;
    }
    @keyframes popIn {
        0% { opacity: 0; transform: translateY(10px) scale(0.98); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width:700px){
        body{padding:12px;}
        .form-box{padding:18px;}
    }
</style>

Scorpio Car Interest Form

        <label>Name:</label>
        <input type="text" name="name" id="name" placeholder="Enter your name" required />

        <label>Mobile Number:</label>
        <input type="text" name="mobile" id="mobile" maxlength="12" placeholder="Enter mobile number" required />

        <label>Email:</label>
        <input type="email" name="email" id="email" placeholder="Enter email address" />

        <label>City:</label>
        <input type="text" name="city" id="city" placeholder="Your city" />

        <label>Date of Birth:</label>
        <input type="date" name="dob" id="dob" />

        <label>Music Preference:</label>
        <select name="music" id="music">
            <option value="" disabled selected>Select Music</option>
            <option>Bollywood</option>
            <option>Classical</option>
            <option>Pop</option>
            <option>EDM</option>
            <option>Rock</option>
            <option>Other</option>
        </select>

        <label>Favorite Scorpio Feature:</label>
        <input type="text" name="favoriteFeature" id="favoriteFeature" placeholder="Feature (e.g. Sunroof)" />

        <div class="checkbox-group" aria-label="Your Interests">
            <label><input type="checkbox" name="interest" value="Test Drive">Test Drive</label>
            <label><input type="checkbox" name="interest" value="Finance">Finance Options</label>
            <label><input type="checkbox" name="interest" value="Insurance">Insurance</label>
            <label><input type="checkbox" name="interest" value="Book Now">Book Now</label>
            <label><input type="checkbox" name="interest" value="Exchange Offer">Car Exchange Offer</label>
            <label><input type="checkbox" name="interest" value="Accessories">Accessories</label>
            <label><input type="checkbox" name="interest" value="Service Booking">Service Booking</label>
            <label><input type="checkbox" name="interest" value="Extended Warranty">Extended Warranty</label>
        </div>

        <input type="submit" value="Submit Details" />
    </form>

    <!-- SUCCESS BOX (will appear UNDER the form when user clicks submit) -->
    <div id="successBox" class="success-box" role="status" aria-live="polite">
        <h1>✔Your work is success fully work !</h1>
        <p>Your enteres complete Thank You ।</p>
    </div>
</div>

<script>
   
    (function(){
        const form = document.getElementById('scorpioForm');
        const success = document.getElementById('successBox');

        form.addEventListener('submit', function(e){
            e.preventDefault(); // page reload/redirect stop
           
            const name = document.getElementById('name').value.trim();
            const mobile = document.getElementById('mobile').value.trim();
            if(!name || !mobile){
                alert('please Name & Mobile input।');
                return;
            }

          

           
            success.classList.add('show');

            success.scrollIntoView({behavior: 'smooth', block: 'center'});

            form.querySelector('input[type="submit"]').disabled = true;
            form.querySelector('input[type="submit"]').value = 'Submitted';

    
            setTimeout(() => {
                form.reset();
            }, 700);

        });
    })();
</script>