Formulaire de contact
This commit is contained in:
Esteban
@@ -1,7 +1,7 @@
|
|||||||
<?php
|
<?php
|
||||||
// Ce projet est entièrement développé par Esteban MOUSSU
|
// 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
|
// 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
|
// 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
|
<?php
|
||||||
|
|
||||||
// Formulaire de contact avec WEBHOOK Discord
|
// Formulaire de contact avec WEBHOOK Discord
|
||||||
|
|
||||||
// On ajoute ici le header
|
// 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
|
// 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 {
|
.footer-links {
|
||||||
justify-content: center;
|
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