Ajouter une Page de Contact en HTML est une compétence essentielle pour tout développeur web. Une page de contact bien conçue améliore l’interaction avec vos visiteurs et renforce la crédibilité de votre site. Dans ce tutoriel, nous allons parcourir les étapes pour créer une page de contact en utilisant HTML et CSS uniquement.

Introduction à la Création d’une Page de Contact en HTML

Une page de contact est essentielle pour tout site web, car elle permet à vos visiteurs de vous joindre facilement. En utilisant du HTML et du CSS basiques, vous pourrez créer une page propre et fonctionnelle.

Création de la Structure de la Page

Commençons par créer la structure de base de notre page de contact. Nous utiliserons des balises HTML telles que <form>, <label>, et <input>. Voici comment créer un formulaire simple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page de Contact</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .contact-form {
            background: #fff;
            padding: 25px;
            margin: 50px auto;
            width: 70%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .contact-form h2 {
            margin: 0 0 15px;
            padding: 0;
            font-size: 24px;
        }
        .contact-form .form-group {
            margin-bottom: 15px;
        }
        .contact-form .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .contact-form .form-group input,
        .contact-form .form-group textarea {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .contact-form .form-group textarea {
            height: 150px;
            resize: none;
        }
        .contact-form .form-group button {
            padding: 10px 30px;
            background-color: #701cf5;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .contact-form .form-group button:hover {
            background-color: #5f1abc;
        }
    </style>
</head>
<body>

<div class="contact-form">
    <h2>Contactez-Nous</h2>
    <form>
        <div class="form-group">
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        <div class="form-group">
            <button type="submit">Envoyer</button>
        </div>
    </form>
</div>

</body>
</html>

Ajouter du Style à la Page de Contact

Pour rendre notre page plus attrayante, nous allons ajouter quelques styles CSS. Par exemple, nous pouvons centrer le formulaire sur la page, ajouter des marges, des bordures et des ombres portées pour un effet plus professionnel.

Validation des Champs du Formulaire

Pour améliorer l’expérience utilisateur, nous devons nous assurer que les champs du formulaire sont correctement remplis avant de permettre l’envoi. Voici un exemple de validation dans le code HTML :

<form>
    <div class="form-group">
        <label for="name">Nom</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" required></textarea>
    </div>
    <div class="form-group">
        <button type="submit">Envoyer</button>
    </div>
</form>

Ajouter des Icônes aux Champs de Formulaire

Pour améliorer encore le design de notre formulaire, nous allons ajouter des icônes aux champs de saisie. Nous utiliserons Font Awesome pour ce faire :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page de Contact</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .contact-form {
            background: #fff;
            padding: 25px;
            margin: 50px auto;
            width: 70%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .contact-form h2 {
            margin: 0 0 15px;
            padding: 0;
            font-size: 24px;
        }
        .contact-form .form-group {
            margin-bottom: 15px;
            position: relative;
        }
        .contact-form .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .contact-form .form-group input,
        .contact-form .form-group textarea {
            width: calc(100% - 50px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding-left: 45px; /* Space for icon */
        }
        .contact-form .form-group input {
            font-size: 16px;
        }
        .contact-form .form-group textarea {
            height: 150px;
            resize: none;
        }
        .contact-form .form-group button {
            padding: 10px 30px;
            background-color: #701cf5;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .contact-form .form-group button:hover {
            background-color: #5f1abc;
        }
        .contact-form .form-group i {
            position: absolute;
            top: 34px;
            left: 10px;
            font-size: 20px;
            color: #aaa;
        }
    </style>
</head>
<body>

<div class="contact-form">
    <h2>Contactez-Nous</h2>
    <form>
        <div class="form-group">
            <label for="name">Nom</label>
            <i class="fas fa-user"></i>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <i class="fas fa-envelope"></i>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <i class="fas fa-comment"></i>
            <textarea id="message" name="message" required></textarea>
        </div>
        <div class="form-group">
            <button type="submit">Envoyer</button>
        </div>
    </form>
</div>

</body>
</html>

Concevoir le Message de Confirmation

Enfin, nous devons ajouter un message de confirmation qui s’affiche après que l’utilisateur a soumis le formulaire. Voici un simple script JavaScript pour cela :

<script>
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    alert('Merci de nous avoir contactés. Nous vous répondrons bientôt.');
    this.reset();
});
</script>

En suivant ces étapes simples, vous pouvez créer une page de contact fonctionnelle pour votre site web. N’hésitez pas à personnaliser votre formulaire de contact en fonction de vos besoins spécifiques.

Améliorations Supplémentaires pour Votre Page de Contact

Pour aller plus loin dans l’amélioration de votre page de contact HTML, vous pouvez incorporer des fonctionnalités supplémentaires. Par exemple, vous pourriez inclure une carte interactive montrant l’emplacement de votre entreprise. Pour cela, vous pouvez utiliser l’API Google Maps. De

Categorized in:

CSS, HTML,

Tagged in: