ग्रेडिएंट के साथ आधुनिक संपर्क फ़ॉर्म

अनुशंसित

19 May 2025

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

29 June 2024

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

ग्रेडिएंट के साथ आधुनिक संपर्क फ़ॉर्म

अनुशंसित

आधुनिक एनीमेशन

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

सामग्री लॉगिन फ़ॉर्म टेम्पलेट

HTML

CSS

JS

अनुशंसित

आधुनिक एनीमेशन

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

सामग्री लॉगिन फ़ॉर्म टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS