Formulaire de contact moderne avec dégradé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 November 2025

<!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;
}

Formulaire de contact moderne avec dégradé

Recommandé

Animation de chargement CSS

Effet de parallaxe du curseur

Un code par dynamicarray606

HTML

CSS

JS

Recommandé

Animation de chargement CSS

Effet de parallaxe du curseur

Un code par dynamicarray606

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS