WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Formulaire de contact moderne avec dégradé
1,214
TheDoc
Ouvrir dans l'éditeur
Publiez votre code
1
Recommandé
28 May 2025
Un code de Metehan
12 March 2026
Code HTML5 du jeu de puzzle Block Blast
10 December 2025
Jeu de clic HTML avec renaissance, améliorations et JavaScript
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(); });