Skip to content

Commit

Permalink
Merge pull request #1100 from ananyag309/master
Browse files Browse the repository at this point in the history 
 Replaced alert contact us form submission with toast notification method
  • Loading branch information
@vivekvardhan2810
vivekvardhan2810 authored Oct 29, 2024
2 parents 063d4aa + 3b0c021 commit 098a25b
Showing 1 changed file with 30 additions and 23 deletions.
53 changes: 30 additions & 23 deletions pages/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,18 @@
</head>

<body>
<!-- Toast Notification -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1055;">
<div id="confirmationToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Form submitted successfully!
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>

<header>
<div id="progress-container">
<div id="progress-bar"></div>
Expand All @@ -36,15 +48,11 @@ <h1>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- <div class="theme-switch" id="theme-switch"></div> -->
<div id="themeSwitch" class="theme-switch">
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">

<img src="../Assets/sun.png" class="theme-btn">
<img src="../Assets/moon.png" class="theme-btn">
<!-- <i class="fas fa-moon"></i>
<i class="fas fa-sun"></i> -->
<span class="ball"></span>
</label>
</div>
Expand Down Expand Up @@ -90,6 +98,7 @@ <h2>Contact Us</h2>
<span>Opening Hours</span>
<span class="text">Monday - Friday (9:00 AM to 5:00 PM)</span>
</div>
<!-- Contact info content here -->
</div>

<div class="contact-map-container">
Expand All @@ -100,37 +109,32 @@ <h2>Contact Us</h2>
<div class="form-container">
<form id="contactForm">
<div>
<input type="text" class="form-control" id="firstName" placeholder="First Name"
required pattern="[a-zA-Z ]+"
<input type="text" class="form-control" id="firstName" placeholder="First Name" required pattern="[a-zA-Z ]+"
oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
oninput="this.setCustomValidity('')">

<input type="text" class="form-control" id="lastName" placeholder="Last Name" required pattern="[a-zA-Z ]+"
oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
oninput="this.setCustomValidity('')">
</div>
<div>
<input type="email" class="form-control" id="email" placeholder="E-mail" required>
<div id="emailError" class="text-danger" style="display: none;">Please enter a valid
email address from trusted providers (Gmail, Yahoo, Outlook, Hotmail, iCloud).</div>
<div id="emailError" class="text-danger" style="display: none;">Please enter a valid email address from trusted providers (Gmail, Yahoo, Outlook, Hotmail, iCloud).</div>
</div>
<input type="text" class="form-control" id="phone" placeholder="Phone" required pattern="[0-9]{10}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<textarea rows="5" placeholder="Message" class="form-control" id="message"
required></textarea>
<textarea rows="5" placeholder="Message" class="form-control" id="message" required></textarea>
<input id="send-btn" type="submit" class="send-btn" value="Send Message">
</form>
</div>
</div>
<div class="map" style="display: flex; align-items: center; margin-top: 15%; margin-right: 5%;">
<div class="map" style="display: flex; align-items: center; margin-top: 15%; margin-right: 5%;"></div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3441.911005285574!2d75.6909327144019!3d31.253255681433364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a9089cd71f61f%3A0x3d684c9690d14a5!2sLovely%20Professional%20University%2C%20Jalandhar%2C%20Punjab%20144401%2C%20India!5e0!3m2!1sen!2sus!4v1649982737577!5m2!1sen!2sin"
width="500px" height="500" frameborder="0" style="border:0; border-radius: 15px;"
allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- Map content here -->
</div>
</div>
</div>


</section>

<div class="footer">
Expand Down Expand Up @@ -168,6 +172,7 @@ <h4 class="h46">Contact</h4>
</div>
<div class="footer-bar">
&copy; 2024 ML Fusion Labs | All Rights Reserved
<!-- Footer content here -->
</div>
<button id="scrollTopBtn" onclick="scrollToTop()"> <i class="fas fa-arrow-up"></i></button>
<script src="../script/scroll.js"></script>
Expand All @@ -187,19 +192,20 @@ <h4 class="h46">Contact</h4>
document.getElementById('emailError').style.display = 'none'; // Hide error message if valid
}
});

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('contactForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form from submitting

// Get form values
const firstName = document.getElementById('firstName').value.trim();
const lastName = document.getElementById('lastName').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const message = document.getElementById('message').value.trim();

// Validate first and last name
if (firstName === '' || lastName === '') {
// Validate first and last name
if (firstName === '' || lastName === '') {
alert('Please enter your first and last name.');
return;
}
Expand All @@ -217,11 +223,12 @@ <h4 class="h46">Contact</h4>
return;
}

// If all validations pass
alert('Form submitted successfully!');
this.reset();
// You can submit the form here, for example:
// this.submit();
if (firstName && lastName && phone && message) {
const confirmationToast = new bootstrap.Toast(document.getElementById('confirmationToast'));
confirmationToast.show();

this.reset();
}
});

// Google Translate Settings
Expand Down

0 comments on commit 098a25b

Please sign in to comment.