added form validation and design

This commit is contained in:
2025-08-11 17:35:51 +05:45
parent e7c1d50e9f
commit 5fb284e4b6
91 changed files with 12072 additions and 72 deletions

View File

@@ -76,47 +76,60 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="row g-4">
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="Your Name">
<label for="name">Your Name</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="Your Email">
<label for="email">Your Email</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="phone" class="form-control" id="phone" placeholder="Phone">
<label for="phone">Your Phone</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="project" placeholder="Destination">
<label for="Destination">Study Destination</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="subject" placeholder="Subject">
<label for="subject">Subject</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a message here" id="message"
style="height: 160px"></textarea>
<label for="message">Enter your Enquiry in Detail(Optional)</label>
</div>
</div>
</div>
</form>
<form action="mailQuery.php" method="POST">
<div class="row g-4">
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="Your Name" name="name">
<label for="name">Your Name</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="Your Email" name="email">
<label for="email">Your Email</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="phone" class="form-control" id="phone" placeholder="Phone" name="phone">
<label for="phone">Your Phone</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="project" placeholder="Destination" name="destination">
<label for="Destination">Study Destination</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="subject" placeholder="Subject" name="subject">
<label for="subject">Subject</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a message here" id="message" name="message"
style="height: 160px"></textarea>
<label for="message">Enter your Enquiry in Detail(Optional)</label>
</div>
</div>
<div class="col-12">
<div class="g-recaptcha mb-3" data-sitekey="6LcYxAETAAAAACHBoSfbKWFI5G5o24X3wU-3WA06">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-6uj92ut1c260"
frameborder="0" scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LcYxAETAAAAACHBoSfbKWFI5G5o24X3wU-3WA06&amp;co=aHR0cHM6Ly9hY2Nlc3NuZXBhbC5uZXQ6NDQz&amp;hl=en&amp;v=9pvHvq7kSOTqqZusUzJ6ewaF&amp;size=normal&amp;cb=3vx1ipul9wvl"></iframe>
</div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div>
<a href="#"><button class="btn btn-primary w-100 py-3 ">Apply Now</button></a>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -201,6 +214,32 @@
</div>
<!-- Navbar & Hero End -->
<!-- Toast Container (Fixed Position) -->
<div class="flash-toaster">
<?php if (isset($_GET['status'])): ?>
<?php
$type = $_GET['status'] === 'success'
? 'success'
: ( $_GET['status'] === 'error' ? 'error' : 'warning' );
$msg = $_GET['status'] === 'success'
? '✅ Message sent successfully!'
: ( $_GET['status'] === 'error'
? '❌ There was an error: ' . htmlspecialchars($_GET['message'])
: '⚠️ Please fill in all required fields.'
);
?>
<div id="flashToast" class="toast toast--<?= $type ?>">
<span class="toast__body"><?= $msg ?></span>
<button class="toast__close" aria-label="Close">&times;</button>
</div>
<?php unset($_GET['status'], $_GET['message']); ?>
<?php endif; ?>
</div>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
@@ -230,4 +269,5 @@
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
</script>
</script>