Skip to content

Commit

Permalink
Merge pull request #158 from simmi-verma/main
Browse files Browse the repository at this point in the history 
add functionality to submit button #51
  • Loading branch information
@tushargupta1504
tushargupta1504 authored Oct 3, 2024
2 parents 473e63a + 93ed207 commit b45f26f
Showing 1 changed file with 58 additions and 55 deletions.
113 changes: 58 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,75 +371,77 @@ <h6>Jane Galadriel</h6>
</button>
</div>
</div>

<div id="contact"
class="max-w-2xl mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-44 before:h-44 before:absolute before:bg-cyan-400 before:rounded-full before:-z-10 before:blur-2xl after:w-56 after:h-56 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-60 after:-right-12">
<h2 class="text-5xl text-sky-900 font-bold mb-6">Contact Us</h2>

<form method="post" action="#" id="contactForm">
<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="name">Name</label>
<input class="mt-1 p-2 w-full border rounded-md" type="text" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="email">Email Address</label>
<input class="mt-1 p-2 w-full border rounded-md" name="email" id="email" type="email" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="subject">Subject</label>
<input class="mt-1 p-2 w-full border rounded-md" type="text" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="Message">Message</label>
<textarea class="mt-1 p-2 w-full border rounded-md" rows="3" name="Message"
id="Message"></textarea>
</div>

<div class="flex justify-end">
<button
class=" text-2xl [background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
type="submit">
Send Message
</button>
</div>
<div class="d-flex justify-content-center">
<div id="confirmationMessage" class="alert alert-success mt-3" style="display: none;">
Thank you! Your message has been sent successfully.
</div>
class="max-w-2xl mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-44 before:h-44 before:absolute before:bg-cyan-400 before:rounded-full before:-z-10 before:blur-2xl after:w-56 after:h-56 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-60 after:-right-12">
<h2 class="text-5xl text-sky-900 font-bold mb-6">Contact Us</h2>

<form method="post" action="#" id="contactForm">
<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="name">Name</label>
<input class="mt-1 p-2 w-full border rounded-md" type="text" id="nameInput" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="email">Email Address</label>
<input class="mt-1 p-2 w-full border rounded-md" name="email" id="emailInput" type="email" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="subject">Subject</label>
<input class="mt-1 p-2 w-full border rounded-md" type="text" id="subjectInput" />
</div>

<div class="mb-4">
<label class="block text-xl font-medium text-gray-600" for="message">Message</label>
<textarea class="mt-1 p-2 w-full border rounded-md" rows="3" name="message" id="messageInput"></textarea>
</div>

<div class="flex justify-end">
<button
class="text-2xl [background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
type="submit" id="contactBtn">
Send Message
</button>
</div>
<div class="d-flex justify-content-center">
<div id="confirmationMessage" class="alert alert-success mt-3" style="display: none;">
Thank you! Your message has been sent successfully.
</div>
</form>
</div>
</div>
</form>
</div>
</div>

</div>







</div>
</div>
</section>



<script>
// JavaScript to handle form submission and display thank you message
document.getElementById('contactForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form from submitting

// Show thank you message
document.getElementById('confirmationMessage').style.display = 'block';
document.getElementById('thankYouMessage').style.display = 'block';

document.getElementById('contactForm').reset();
});
</script>
<script>
// JavaScript to handle form submission and display thank you message
document.getElementById('contactBtn').addEventListener('click', function(event) {
event.preventDefault(); // Prevents the form from being submitted to a server

// Show the confirmation message
document.getElementById('confirmationMessage').style.display = 'block';

// Hide the confirmation message after a few seconds
setTimeout(function() {
document.getElementById('confirmationMessage').style.display = 'none';
}, 3000);

// Clear form fields
document.getElementById('nameInput').value = '';
document.getElementById('emailInput').value = '';
document.getElementById('subjectInput').value = '';
document.getElementById('messageInput').value = '';
});
</script>


</main>
Expand Down Expand Up @@ -543,3 +545,4 @@ <h5>Aligarh</h5>
</body>

</html>

0 comments on commit b45f26f

Please sign in to comment.