skycel/Portfolio-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Story 5.1: formulaire contact HTML5

Browse Source
This commit is contained in:
skycel
2026-02-04 20:41:37 +01:00
parent 325625f664
commit 70580f2d96
5 changed files with 296 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
pages/contact.php
View File

@@ -1,16 +1,157 @@
<?php
$pageTitle = 'Contact';
$pageDescription = 'Contactez-moi pour discuter de votre projet web ou d\'une opportunité professionnelle.';
$currentPage = 'contact';
include_template('header', compact('pageTitle'));
$csrfToken = generateCsrfToken();
include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>
<main class="min-h-screen">
<div class="container-content py-20">
<h1 class="text-heading mb-4">Contact</h1>
<p class="text-text-secondary">Le formulaire arrive bientôt.</p>
</div>
<main>
<section class="section">
<div class="container-content">
<div class="max-w-2xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-display mb-4">Me Contacter</h1>
<p class="text-xl text-text-secondary">
Une question, un projet ? Parlons-en !
</p>
</div>
<form
id="contact-form"
method="POST"
action="/api/contact.php"
class="space-y-6"
>
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken) ?>">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="nom" class="label">Nom <span class="text-primary">*</span></label>
<input
type="text"
id="nom"
name="nom"
class="input"
required
maxlength="100"
autocomplete="family-name"
placeholder="Dupont"
>
</div>
<div>
<label for="prenom" class="label">Prénom <span class="text-primary">*</span></label>
<input
type="text"
id="prenom"
name="prenom"
class="input"
required
maxlength="100"
autocomplete="given-name"
placeholder="Marie"
>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="email" class="label">Email <span class="text-primary">*</span></label>
<input
type="email"
id="email"
name="email"
class="input"
required
maxlength="255"
autocomplete="email"
placeholder="marie.dupont@example.com"
>
</div>
<div>
<label for="entreprise" class="label">Entreprise <span class="text-text-muted">(optionnel)</span></label>
<input
type="text"
id="entreprise"
name="entreprise"
class="input"
maxlength="200"
autocomplete="organization"
placeholder="Nom de votre entreprise"
>
</div>
</div>
<div>
<label for="categorie" class="label">Catégorie <span class="text-primary">*</span></label>
<select id="categorie" name="categorie" class="input" required>
<option value="" disabled selected>Sélectionnez une catégorie...</option>
<option value="projet">Je souhaite parler de mon projet</option>
<option value="poste">Je souhaite vous proposer un poste</option>
<option value="autre">Autre</option>
</select>
</div>
<div>
<label for="objet" class="label">Objet <span class="text-primary">*</span></label>
<input
type="text"
id="objet"
name="objet"
class="input"
required
maxlength="200"
placeholder="Résumez votre demande en quelques mots"
>
</div>
<div>
<label for="message" class="label">Message <span class="text-primary">*</span></label>
<textarea
id="message"
name="message"
class="textarea"
required
maxlength="5000"
rows="6"
placeholder="Décrivez votre projet ou votre demande..."
></textarea>
<p class="text-xs text-text-muted mt-2">
<span id="message-count">0</span> / 5000 caractères
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<button type="submit" class="btn-primary flex-1 justify-center">
Envoyer le message
</button>
<button type="button" class="btn-ghost">
Effacer le formulaire
</button>
</div>
</form>
</div>
</div>
</section>
</main>
<?php include_template('footer'); ?>
<script>
const messageField = document.getElementById('message');
const messageCount = document.getElementById('message-count');
if (messageField && messageCount) {
const updateCount = () => {
messageCount.textContent = String(messageField.value.length);
};
updateCount();
messageField.addEventListener('input', updateCount);
}
</script>
<?php include_template('footer'); ?>