corentin.caillot
/
site_web
generated from Templates_CodeFirst/templateHtmlCss
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix form
continuous-integration/drone/push Build is passing Details

Browse Source
master
cocaillot 7 months ago
parent c85b6616c0
commit cd7570f972
3 changed files with 63 additions and 117 deletions
Show Stats Download Patch File Download Diff File

29
form-handler.js
Unescape View File

@ -0,0 +1,29 @@
document.getElementById("contact-form").addEventListener("submit", function (e) {
e.preventDefault();
// Get form values
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;
// Prepare parameters for EmailJS
const params = {
from_name: name,
from_email: email,
message: message,
};
// Send email using EmailJS
emailjs.send("service_auuixzl", "template_9w001tg", params)
.then(response => {
document.getElementById("response-message").textContent =
"Your message has been sent successfully!";
document.getElementById("response-message").classList.remove("hidden");
document.getElementById("contact-form").reset();
})
.catch(error => {
document.getElementById("response-message").textContent =
"There was an error sending your message. Please try again.";
document.getElementById("response-message").classList.remove("hidden");
});
});

118
form.html
Unescape View File

@ -3,112 +3,62 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="effect.js" defer></script>
<title>Contact Form</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- EmailJS SDK -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
(function() {
emailjs.init("YOUR_EMAILJS_PUBLIC_KEY"); // Replace with your EmailJS public key
})();
</script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Navigation -->
<nav class="navbar bg-gray-200 shadow-lg">
<ul class="navbar-list flex justify-around items-center py-4">
<li><a href="index.html" class="text-gray-700 hover:text-blue-500">Accueil</a></li>
<li><a href="cursus.html" class="text-gray-700 hover:text-blue-500">Cursus</a></li>
<li><a href="planning.html" class="text-gray-700 hover:text-blue-500">Planning</a></li>
<li class="dropdown relative">
<a href="#" class="text-gray-700 hover:text-blue-500">Gallerie</a>
<ul class="dropdown-content absolute left-0 mt-2 bg-white shadow-lg p-4 hidden">
<li><a href="images.html" class="hover:text-blue-500">Images</a></li>
<li><a href="videos.html" class="hover:text-blue-500">Vidéos</a></li>
</ul>
</li>
<li><a href="form.html" class="text-gray-700 hover:text-blue-500">Formulaire</a></li>
<li><a href="gallery.html" class="text-gray-700 hover:text-blue-500">Gallery</a></li>
<li><a href="form.html" class="text-gray-700 hover:text-blue-500">Contact</a></li>
<label class="switch">
<input type="checkbox" id="theme-switch">
<span class="slider"></span>
<input type="checkbox" id="theme-switch">
<span class="slider"></span>
</label>
</ul>
</nav>
<!-- Contact Form -->
<form action="process_form.php" method="POST" id="contact-form">
<div class="container px-4 mx-auto mt-10">
<form id="contact-form" class="container mx-auto mt-10 px-4">
<div class="max-w-md mx-auto px-8 py-6 bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
<form>
<h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
<div class="mb-4">
<label class="block text-white mb-1" for="name">Your Name</label>
<input
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
placeholder="Enter your name"
type="text"
name="name"
id="name"
/>
<label class="block text-white mb-1" for="name">Your Name</label>
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
type="text" name="name" id="name" required>
</div>
<div class="mb-4">
<label class="block text-white mb-1" for="email">Your Email</label>
<input
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
placeholder="Enter your email"
type="email"
name="email"
id="email"
/>
<label class="block text-white mb-1" for="email">Your Email</label>
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
type="email" name="email" id="email" required>
</div>
<div class="mb-4">
<label class="block text-white mb-1" for="message">Your Message</label>
<textarea
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
rows="4"
placeholder="Enter your message"
name="message"
id="message"
></textarea>
<label class="block text-white mb-1" for="message">Your Message</label>
<textarea class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
name="message" id="message" rows="4" required></textarea>
</div>
<button
class="w-full bg-yellow-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-yellow-400 transition duration-300"
type="submit"
>
Send Message
</button>
</form>
<button class="w-full bg-yellow-300 text-gray-800 py-2 rounded-lg hover:bg-yellow-400 transition"
type="submit">Send Message</button>
</div>
</div>
<!-- JavaScript to Handle Form Submission -->
<script>
document.getElementById('contact-form').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Display confirmation message
const responseMessage = document.getElementById('form-response');
responseMessage.textContent = `Thank you, ${name}! Your message has been sent successfully.`;
responseMessage.classList.remove('hidden');
// Clear the form
e.target.reset();
// Example: Send data via fetch to a backend API (optional)
/*
fetch('your-backend-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name, email, message })
});
*/
});
</script>
</form>
<p id="response-message" class="hidden text-center mt-4 text-white"></p>
<!-- External JS -->
<script src="form-handler.js"></script>
</body>
</html>
</html>

33
process_form.php
Unescape View File

@ -1,33 +0,0 @@
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$message = htmlspecialchars($_POST['message']);
if ($name && $email && $message) {
// Recipient email
$to = "corentin.caillot03@gmail.com";
// Email subject
$subject = "New Contact Form Submission";
// Email content
$body = "You have received a new message from your website's contact form:\n\n";
$body .= "Name: $name\n";
$body .= "Email: $email\n";
$body .= "Message:\n$message\n";
// Email headers
$headers = "From: $email";
// Send the email
if (mail($to, $subject, $body, $headers)) {
echo "Your message has been sent successfully!";
} else {
echo "There was an issue sending your message. Please try again later.";
}
} else {
echo "Invalid input. Please make sure all fields are filled out correctly.";
}
}
?>
Write Preview
Loading…
Cancel
Save