• Un serveur web avec PHP d’installé
• Composer installé pour gérer les dépendances PHP
• Compte SMTP pour l’envoie des emails

Le formulaire est contenu dans contact.html. Les éléments essentiels sont :

• Un champ pour le nom et prénom (name)
• Un champ pour l’adresse email (email)
• Un champ texte pour le message (message)
• Un bouton de soumission (Transmettre)

Exemple extrait de contact.html :

<form id="contact-form" action="traitement.php" method="POST">
    <div class="contact-form">
        <div class="form-group">
            <label for="name">Votre nom et prénom</label>
            <input type="text" id="name" name="name" placeholder="Votre ID" required>
        </div>

        <div class="form-group">
            <label for="email">Votre adresse mail</label>
            <input type="email" id="email" name="email" placeholder="votre@email.com" required>
        </div>

        <div class="form-group">
            <label for="message">Transmission</label>
            <textarea id="message" name="message" rows="5" placeholder="Votre message" required></textarea>
        </div>

        <button type="submit" class="btn-primary btn-submit">Transmettre</button>
    </div>
</form>

Remarque : action="traitement.php" indique que le formulaire sera traité par le fichier PHP traitement.php.

Dans portfolioCB-scripts.js, on peut améliorer l’expérience utilisateur :

• Intercepter l’envoi du formulaire pour éviter le rechargement de page
• Afficher un message temporaire indiquant que la transmission est en cours
• Réinitialiser le formulaire après l’envoi

Exemple extrait de portfolioCB-scripts.js :

const form = document.getElementById('contact-form');
const button = document.querySelector('.btn-submit');

if (form && button) {
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // Empêche l'envoi classique
        button.disabled = true;
        const originalText = button.textContent;
        button.textContent = 'TRANSMITTING...';

        const formData = new FormData(form);

        fetch('traitement.php', {
            method: 'POST',
            body: formData
        }).finally(() => {
            button.textContent = 'TRANSMISSION COMPLETE';
            setTimeout(() => {
                button.textContent = originalText;
                button.disabled = false;
            }, 2000);
            form.reset();
        });
    });
}

Installer PHPMailer via composer:

• Sur le serveur web, se placer à la racine de cbaudiment : cd /var/www/html/cbaudiment
• Puis taper la commande suivante : composer require phpmailer/phpmailer cela créera le dossier vendor/ contenant PHPMailer.

Configurer le fichier PHP traitement.php :

Le fichier traitement.php aura pour rôle de :

• Charger l’autoload de Composer
• Créer une instance PHPMailer
• Configurer le serveur SMTP
• Définir l’expéditeur et le destinataire
• Construire le corps du message en HTML
• Envoyer le message et gérer les erreurs

Extrait de traitement.php :

<?php
require __DIR__ . '/vendor/autoload.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// Charger la configuration depuis config.php
$config = require __DIR__ . '/var/www/config.php'; // adapte le chemin si besoin

$mail = new PHPMailer(true);

try {
    // Configuration SMTP
    $mail->isSMTP();
    $mail->Host       = $config['smtp_host'];
    $mail->SMTPAuth   = true;
    $mail->Username   = $config['smtp_user'];
    $mail->Password   = $config['smtp_pass'];
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
    $mail->Port       = 587;

    // Expéditeur et destinataire
    $mail->setFrom($config['smtp_user'], 'Formulaire Contact');
    $mail->addAddress($config['recipient']);

    // Répondre à l’expéditeur du formulaire si fourni
    if (!empty($_POST['email']) && !empty($_POST['name'])) {
        $mail->addReplyTo($_POST['email'], $_POST['name']);
    }

    // Contenu HTML
    $mail->isHTML(true);
    $mail->Subject = "Nouveau message depuis le site";
    $mail->Body    = "
        <strong>Nom :</strong> " . htmlspecialchars($_POST['name'] ?? '') . "<br>
        <strong>Email :</strong> " . htmlspecialchars($_POST['email'] ?? '') . "<br><br>
        <strong>Message :</strong><br>" . nl2br(htmlspecialchars($_POST['message'] ?? '')) . "
    ";

    $mail->send();
    echo "Message envoyé avec succès !";

} catch (Exception $e) {
    echo "Erreur lors de l'envoi du message.";
    error_log("PHPMailer Error: " . $mail->ErrorInfo);
}

Configuration SMTP dans config.php :

Création du fichier config.php qui sera placé dans /var/www

<?php
return [
    'smtp_host' => 'ssl0.ovh.net',
    'smtp_user' => 'admin@portfolio-cbaudiment.fr',
    'smtp_pass' => '¤Mot2Pass3¤',
    'recipient' => 'c.baudiment@hotmail.fr'
];

Ce fichier permet de chiffrer les données sensibles contenu dans traitement.php.

Pour vérifier le bon fonctionnement nous allons tester l’envoie de message depuis la page contact:

Après envoie nous allons pouvoir vérifier la bonne réception dans ma boite mail :