Modern Contact Form with Gradient

Open In Editor Publish Your Code

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

Modern Contact Form with Gradient

Recommended

Multi Step Form with Progress Bar using jQuery and CSS3

HTML Admin Dashboard Template with Sidebar

HTML CSS Login Form Code

HTML

CSS

JS

Recommended

Multi Step Form with Progress Bar using jQuery and CSS3

HTML Admin Dashboard Template with Sidebar

HTML CSS Login Form Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS