WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modern Contact Form with Gradient
898
TheDoc
Open In Editor
Publish Your Code
Recommended
26 March 2025
Multi Step Form with Progress Bar using jQuery and CSS3
28 June 2025
HTML Admin Dashboard Template with Sidebar
10 February 2025
HTML CSS Login Form Code
HTML
Copy
Kontaktformular
Kontaktieren Sie uns
Name
E-Mail
Nachricht
Absenden
CSS
Copy
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; }
JS
Copy
document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const message = document.getElementById('message').value.trim(); const formMessage = document.getElementById('formMessage'); // Einfache Validierung if (!name || !email || !message) { formMessage.textContent = "Bitte füllen Sie alle Felder aus."; formMessage.style.color = "#d32f2f"; return; } // Simuliere erfolgreichen Versand formMessage.textContent = "Vielen Dank für Ihre Nachricht!"; formMessage.style.color = "#2575fc"; this.reset(); });