added form validation and design
This commit is contained in:
124
header.php
124
header.php
@@ -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&k=6LcYxAETAAAAACHBoSfbKWFI5G5o24X3wU-3WA06&co=aHR0cHM6Ly9hY2Nlc3NuZXBhbC5uZXQ6NDQz&hl=en&v=9pvHvq7kSOTqqZusUzJ6ewaF&size=normal&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">×</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>
|
||||
|
||||
|
Reference in New Issue
Block a user