Tener una web y no tener formulario es como abrir una tienda sin timbre en la puerta. Los visitantes entran, miran y se van sin poder decirte ni "hola". Al principio parece que hace falta saber mucho, pero con cuatro etiquetas de HTML y un poco de CSS lo tienes listo. Eso sí, ojo con los detalles, que aquí es donde la mayoría se atasca.
No necesitas frameworks ni pagar nada. Solo un editor de texto. En unos 15 minutos deberías tener algo que luzca decente en tu pantalla.
Para qué sirve cada parte
El HTML define la estructura: qué campos hay, en qué orden, qué etiquetas los envuelven. El CSS es lo que hace que no parezca una web de 1998. Los dos trabajan juntos, pero en archivos separados — y ese es el primer error que comete la mayoría: mezclarlos o no enlazar bien el CSS desde el HTML.
Venga, vamos al código.
Paso 1: La estructura HTML
Crea un archivo index.html y pega esto. Fíjate bien en el <link> del head: el nombre que pongas ahí tiene que coincidir exactamente con el archivo CSS que crees después. Con mayúsculas, sin mayúsculas, con guión o sin él — si no cuadra, el CSS no carga y te quedas mirando una página sin estilo preguntándote qué has hecho mal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi Formulario de Contacto</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1>Contacta con Nosotros</h1>
<form class="contact-form">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" placeholder="Tu nombre completo" required />
</div>
<div class="form-group">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" placeholder="tu@email.com" required />
</div>
<div class="form-group">
<label for="subject">Asunto:</label>
<input type="text" id="subject" name="subject" placeholder="¿De qué quieres hablar?" />
</div>
<div class="form-group">
<label for="message">Mensaje:</label>
<textarea id="message" name="message" rows="5" placeholder="Escribe tu mensaje aquí..." required></textarea>
</div>
<button type="submit" class="submit-btn">Enviar Mensaje</button>
</form>
</div>
</body>
</html>El <form> es el contenedor, los <input> son los campos de texto, el <textarea> es para mensajes largos y el atributo required hace que el campo sea obligatorio antes de enviar. Los <label> son importantes para accesibilidad — sin ellos los lectores de pantalla no saben qué es cada campo.
Paso 2: El CSS
Crea styles.css en la misma carpeta — mismo nombre que pusiste en el <link>. Este código ya incluye el diseño responsive, así que se verá bien en móvil sin que tengas que tocar nada más:
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
font-weight: bold;
color: #555;
font-size: 0.9rem;
}
input,
textarea {
padding: 15px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
}
input:focus,
textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 18px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(0);
}
/* Responsive */
@media (max-width: 600px) {
.container {
padding: 25px;
margin: 10px;
}
h1 {
font-size: 1.6rem;
}
}Paso 3: Abrirlo en el navegador
Guarda los dos archivos en la misma carpeta y abre index.html directamente desde el explorador de archivos. Verás el formulario con el fondo degradado, los campos con borde y el botón animado al pasar el ratón.
Lo que no va a pasar todavía: que el formulario envíe nada. Si haces clic en Enviar, la página se recarga y punto. Eso es normal — falta la parte de JavaScript y un backend o servicio externo. De momento tienes la estructura y el diseño, que ya es bastante.
Qué necesitas para que envíe de verdad
El formulario visual está listo, pero para que los datos lleguen a algún sitio necesitas tres cosas: JavaScript para validar los campos antes de enviar, y algún servicio que procese el envío. Las opciones más sencillas sin montar un servidor son EmailJS, Netlify Forms o Formspree — los tres funcionan con formularios HTML estáticos sin tocar el backend.
Preguntas frecuentes
¿Cómo crear un formulario de contacto que funcione?
Este tutorial te enseña a crear la estructura y diseño con HTML y CSS. Para que realmente envíe emails, necesitarás añadir validaciones con JavaScript y configurar un backend. En nuestro próximo tutorial cubriremos las validaciones paso a paso.
¿Puedo usar este formulario de contacto en cualquier página web?
¡Sí! Este formulario de contacto HTML y CSS es completamente portable. Solo copia los archivos HTML y CSS a tu proyecto y personaliza los colores y textos según tu diseño.
¿Es responsive este formulario de contacto?
Sí, el CSS incluye media queries para que el formulario contacto HTML se vea perfecto en móviles, tablets y desktop. Se adapta automáticamente al tamaño de pantalla.
¿Necesito saber JavaScript para crear formularios de contacto?
Para la estructura básica no, pero para validaciones y envío de emails sí. Después de dominar este tutorial, te recomendamos aprender cómo hacer elementos interactivos con JavaScript.
El siguiente paso es hacer que ese botón haga algo de verdad. No hace falta montar un servidor: con un poco de JavaScript puedes al menos comprobar que los campos no están vacíos y que el email tiene formato válido antes de mandarlo a ningún sitio.
El siguiente paso natural: validar los campos antes de enviar.