WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de contacto - Actualizado
988
Asher
Abrir en el editor
Publica tu código
Recomendado
12 July 2025
animación de coches
19 March 2025
Botón de confeti
22 August 2025
Blogium: Plantilla HTML para blogs de tecnología, diseño y vida
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulario de Contacto</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="form-container"> <h2>Formulario de Contacto</h2> <form action="/enviar-consulta" method="POST"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required> <label for="email">Correo Electrónico:</label> <input type="email" id="email" name="email" placeholder="Tu correo electrónico" required> <label for="telefono">Teléfono:</label> <input type="tel" id="telefono" name="telefono" placeholder="Tu número de teléfono" required> <label for="mensaje">Mensaje:</label> <input id="mensaje" name="mensaje" placeholder="Escribe tu mensaje aquí..." rows="5" required> <button type="submit">Enviar</button> </form> </div> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .form-container { background: #ffffff; padding: 20px 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; } h2 { text-align: center; margin-bottom: 20px; color: #333333; } form label { display: block; margin: 10px 0 5px; color: #555555; } form input, form textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #cccccc; border-radius: 5px; } form button { width: 100%; background-color: #007BFF; color: white; padding: 10px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } form button:hover { background-color: #0056b3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
