WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulário de contato moderno com gradiente
506
TheDoc
Abrir no Editor
Publique Seu Código
Recomendado
23 July 2025
Modelo HTML CSS de cartão de perfil neumórfico
24 July 2025
Estrutura de Stickman HTML com gancho de agarrar
22 June 2025
Modelo HTML do painel de administração
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(); });