Formulaire de contact moderne avec dégradé

1,124 TheDoc

Ouvrir dans l'éditeur Publiez votre code

Formulaire de contact moderne avec dégradé

Recommandé

29 September 2024

effet de révélation

20 February 2026

Modèle HTML CSS de portfolio de concepteur web

5 August 2025

Liste de cartes d'entreprise : exemple HTML et CSS

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontaktformular</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contact-container">
        <form id="contactForm" class="contact-form">
            <h2>Kontaktieren Sie uns</h2>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required placeholder="Ihr Name">
            </div>
            <div class="form-group">
                <label for="email">E-Mail</label>
                <input type="email" id="email" name="email" required placeholder="Ihre E-Mail">
            </div>
            <div class="form-group">
                <label for="message">Nachricht</label>
                <input id="message" name="message" rows="5" required placeholder="Ihre Nachricht"/>
            </div>
            <button type="submit">Absenden</button>
            <div id="formMessage"></div>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-container {
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px);}
    to { opacity: 1; transform: translateY(0);}
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #2575fc;
    letter-spacing: 1px;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: #333;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.7rem;
    border: none;
    border-radius: 8px;
    background: #f3f6fb;
    font-size: 1rem;
    transition: box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(37,117,252,0.07);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 2px #2575fc55;
}

button[type="submit"] {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

button[type="submit"]:hover {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    transform: translateY(-2px) scale(1.02);
}

#formMessage {
    margin-top: 1rem;
    text-align: center;
    font-size: 1rem;
    color: #2575fc;
    min-height: 1.2em;
}