Formulaire de contact
This commit is contained in:
Esteban
@@ -1,7 +1,7 @@
|
||||
<?php
|
||||
// Ce projet est entièrement développé par Esteban MOUSSU
|
||||
// 2026 - Projet Hébergé par l'entreprise TerraTech Hebergement en collaboration avec l'association Eldoria Network
|
||||
// Le CSS est **probablement** généré par intelligence artificielle ou récupéré d'autre projet, cépendant le code PHP / HTML / JS est globalement fait par un humain
|
||||
// Le CSS est **probablement** généré par intelligence artificielle ou récupéré d'autre projet, cependant le code PHP / HTML / JS est globalement fait par un humain
|
||||
|
||||
// Note : Pour lancer un serveur local PHP Depuis VsCode : 'php -v' pour vérifier que php est bien installé et 'php -S localhost:8000' pour lancer le serveur
|
||||
|
||||
|
||||
+36
-4
@@ -1,9 +1,41 @@
|
||||
<?php
|
||||
|
||||
// Formulaire de contact avec WEBHOOK Discord
|
||||
|
||||
// On ajoute ici le header
|
||||
require_once('./../elements/header.php');
|
||||
require_once("../elements/header.php");
|
||||
?>
|
||||
|
||||
<body>
|
||||
<main class="contact-page">
|
||||
<section class="contact-wrapper">
|
||||
<div class="contact-card">
|
||||
<div class="contact-info">
|
||||
<p class="contact-title">Contact</p>
|
||||
<p class="contact-name">Moussu Esteban</p>
|
||||
<p class="contact-line">esteban.moussu@ik.me</p>
|
||||
<p class="contact-line">20 Grande rue</p>
|
||||
<p class="contact-line">52500 Broncourt</p>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire d'envoi -->
|
||||
<form class="contact-form" method="POST" action="../scripts/sendMessage.php">
|
||||
<!-- Deux champs de texte, un subject et un message -->
|
||||
<div class="contact-grid">
|
||||
<input type="text" name="subject" id="subject" placeholder="Sujet du message" required>
|
||||
<input type="text" name="name" id="name" placeholder="Nom et prénom" required>
|
||||
</div>
|
||||
|
||||
<input type="email" name="mail" id="mail" placeholder="E-mail de contact" required>
|
||||
<textarea name="message" id="message" placeholder="Votre message" required></textarea>
|
||||
|
||||
<!-- Bouton d'envoi -->
|
||||
<input type="submit" value="Envoyer le message">
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<?php
|
||||
// Ajout du footer
|
||||
require_once('../elements/footer.php'); ?>
|
||||
require_once("../elements/footer.php");
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
// Envoi de formulaire de contact via WebHook discord
|
||||
$webhook = "https://discord.com/api/webhooks/1513445938033721399/2NxoIw5TYCH7Rei0tyw1lEswmuYizTkgNPIaPe0gmSqvlXNub7qz_uora3duTUxPg8vm";
|
||||
|
||||
|
||||
// Exemple du message :
|
||||
|
||||
// Portfolio Contact
|
||||
// @Este
|
||||
// Nouveau message depuis le formulaire de contact
|
||||
// Sujet : test
|
||||
// Nom : esteban moussu
|
||||
// Mail : esteban.moussu@ik.me
|
||||
// Message :
|
||||
// test
|
||||
|
||||
// Définition de mon ID pour ensuite me ping => notifier
|
||||
$pingOurs1 = "<@471304822016966667>";
|
||||
|
||||
// On récupère les valeurs dans le formulaires et on les mets en variables locales
|
||||
$subject = $_POST["subject"];
|
||||
$name = $_POST["name"];
|
||||
$mail = $_POST["mail"];
|
||||
$message = $_POST["message"];
|
||||
|
||||
// Si les champs sont vides
|
||||
if ($subject == "" || $name == "" || $mail == "" || $message == "") {
|
||||
echo "Tous les champs doivent être remplis.";
|
||||
} else { // Sinon on envoi via Webhook (j'ai recupéré l'envoi de webhook sur github je n'ai rien fais moi même)
|
||||
$contenuMessage = $pingOurs1 . "\n\n";
|
||||
$contenuMessage .= "**Nouveau message depuis le formulaire de contact du portfolio**\n\n";
|
||||
$contenuMessage .= "**Sujet :** " . $subject . "\n";
|
||||
$contenuMessage .= "**Nom :** " . $name . "\n";
|
||||
$contenuMessage .= "**Mail :** " . $mail . "\n";
|
||||
$contenuMessage .= "**Message :**\n" . $message;
|
||||
|
||||
$data = [
|
||||
"content" => $contenuMessage
|
||||
];
|
||||
|
||||
$dataJson = json_encode($data);
|
||||
|
||||
$ch = curl_init($webhook); // On démarre une ressource curl
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
|
||||
curl_setopt($ch, CURLOPT_POST, 1);
|
||||
curl_setopt($ch, CURLOPT_POSTFIELDS, $dataJson);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
$resultat = curl_exec($ch);
|
||||
$codeHttp = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
|
||||
if ($codeHttp == 204) { // Si ça renvoi 204 alors le message a été correctement envoyé
|
||||
curl_close($ch); // Fermer la ressource curl lancée
|
||||
header("Location: ../pages/contact.php?success=1");
|
||||
exit();
|
||||
} else { // Sinon c'est que ça n'a pas été envoyé (discord down / webhook expiré / etcc...)
|
||||
curl_close($ch); // Fermer la ressource curl lancée
|
||||
echo "Le message n'a pas pu être envoyé sur Discord.";
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -387,4 +387,162 @@ main {
|
||||
.footer-links {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- PAGE CONTACT ---- */
|
||||
|
||||
.contact-page {
|
||||
width: 100%;
|
||||
padding: 60px 20px 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contact-wrapper {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 32px;
|
||||
background-color: #111116;
|
||||
border: 1px solid #2a2a3e;
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: linear-gradient(180deg, #161622 0%, #111116 100%);
|
||||
border: 1px solid #2a2a3e;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
margin: 0 0 18px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #cfcfff;
|
||||
}
|
||||
|
||||
.contact-line {
|
||||
margin: 0 0 10px;
|
||||
font-size: 15px;
|
||||
color: #aaaaaa;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact-form input[type="text"],
|
||||
.contact-form input[type="email"],
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
background-color: #1a1a24;
|
||||
border: 1px solid #2a2a3e;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
font-size: 15px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.contact-form textarea {
|
||||
min-height: 180px;
|
||||
resize: vertical;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.contact-form input::placeholder,
|
||||
.contact-form textarea::placeholder {
|
||||
color: #8f8fa8;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #6c63ff;
|
||||
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
|
||||
background-color: #202030;
|
||||
}
|
||||
|
||||
.contact-form input[type="submit"] {
|
||||
width: fit-content;
|
||||
min-width: 220px;
|
||||
background-color: #6c63ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 14px 24px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.contact-form input[type="submit"]:hover {
|
||||
background-color: #5a52e0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.contact-form input[type="submit"]:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.contact-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.contact-page {
|
||||
padding: 30px 14px 50px;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
padding: 18px;
|
||||
gap: 18px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.contact-form input[type="submit"] {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user