Comment créer un formulaire de contact HTML fonctionnel

Le formulaire de contact : votre lien avec vos visiteurs

Un formulaire bien conçu augmente les conversions. Voici comment créer un formulaire accessible, validé et stylisé en HTML et CSS, avec les bonnes pratiques UX.

Structure HTML complète

<form action="traitement.php" method="POST" class="form-contact" novalidate>
    <h2>Contactez-nous</h2>
    <p class="form-intro">Remplissez le formulaire ci-dessous et nous vous répondrons sous 24h.</p>
    
    <div class="form-row">
        <div class="form-group">
            <label for="prenom">Prénom *</label>
            <input type="text" id="prenom" name="prenom" required 
                   placeholder="Votre prénom" autocomplete="given-name">
        </div>
        <div class="form-group">
            <label for="nom">Nom *</label>
            <input type="text" id="nom" name="nom" required 
                   placeholder="Votre nom" autocomplete="family-name">
        </div>
    </div>
    
    <div class="form-group">
        <label for="email">Email *</label>
        <input type="email" id="email" name="email" required 
               placeholder="votre@email.com" autocomplete="email">
    </div>
    
    <div class="form-group">
        <label for="téléphone">Téléphone</label>
        <input type="tel" id="téléphone" name="téléphone" 
               placeholder="77 123 45 67" autocomplete="tel">
    </div>
    
    <div class="form-group">
        <label for="sujet">Sujet *</label>
        <select id="sujet" name="sujet" required>
            <option value="" disabled selected>Choisissez un sujet</option>
            <option value="info">Demande d'information</option>
            <option value="devis">Demande de devis</option>
            <option value="formation">Inscription formation</option>
            <option value="partenariat">Partenariat</option>
            <option value="autre">Autre</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="message">Message *</label>
        <textarea id="message" name="message" rows="5" required 
                  placeholder="Décrivez votre demande..."></textarea>
        <span class="compteur"><span id="chars">0</span> / 500</span>
    </div>
    
    <div class="form-group checkbox">
        <input type="checkbox" id="rgpd" name="rgpd" required>
        <label for="rgpd">J'accepte que mes données soient traitées pour répondre à ma demande *</label>
    </div>
    
    <button type="submit" class="btn-submit">
        Envoyer le message
    </button>
</form>

CSS du formulaire

.form-contact {
    max-width: 650px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-contact h2 {
    margin-bottom: 5px;
    color: #1a1a1a;
}

.form-intro {
    color: #666;
    margin-bottom: 30px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
    flex: 1;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

input, select, textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #fafafa;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    background: white;
}

/* Validation visuelle */
input:valid:not(:placeholder-shown) { border-color: #4caf50; }
input:invalid:not(:placeholder-shown):not(:focus) { border-color: #f44336; }

textarea { resize: vertical; min-height: 120px; }

.compteur {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* Checkbox */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox input {
    width: auto;
    margin-top: 3px;
}

.checkbox label {
    font-weight: 400;
    font-size: 13px;
    color: #666;
}

/* Bouton */
.btn-submit {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.btn-submit:hover {
    background: #5a6fd6;
    transform: translateY(-2px);
}

.btn-submit:activé { transform: translateY(0); }

/* Responsive */
@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
    .form-contact { padding: 20px; margin: 20px; }
}

JavaScript : compteur de caractères

const message = document.getElementById('message');
const chars = document.getElementById('chars');

message.addEventListener('input', () => {
    const count = message.value.length;
    chars.textContent = count;
    chars.style.color = count > 450 ? '#f44336' : '#999';
});

Bonnes pratiques UX pour les formulaires

Exercice pratique