WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de contacto moderno con degradado
504
TheDoc
Abrir en el editor
Publica tu código
Recomendado
2 June 2025
Un código de alejandrokundrah
6 August 2025
Animación de burbujas de corazón con Matter.js
19 October 2024
Formulario de inicio de sesión HTML animado
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(); });