Cómo crear un formulario de contacto con HTML y CSS

¿Quieres que los visitantes de tu web puedan contactarte fácilmente? Un formulario de contacto es lo primero que deberías aprender a crear. En este tutorial te enseño cómo hacerlo paso a paso.

Este es un tutorial 100% para principiantes. No necesitas saber nada de programación. Solo seguir los pasos y tendrás tu formulario funcionando.

2 Archivos que crearás

15 Minutos de trabajo

0€ Costo total

🤔 ¿Qué es HTML y CSS?

Antes de empezar, déjame explicarte rápido qué vamos a usar:

HTML: Es el "esqueleto" de tu página. Define qué elementos tiene (botones, textos, formularios)
CSS: Es el "maquillaje" de tu página. Define cómo se ve todo (colores, tamaños, espacios)

¿Listo? ¡Vamos a crear tu primer formulario!

🗂️ Paso 1: Crear la estructura HTML

Vamos a crear un archivo llamado index.html. Abre cualquier editor de texto (incluso el Bloc de notas) y pega este código:

<!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>

¿Qué hace cada parte?

<form>: Contenedor principal del formulario
<label>: Etiquetas descriptivas para cada campo
<input>: Campos donde el usuario escribirá
<textarea>: Campo más grande para mensajes largos
required: Hace que el campo sea obligatorio

🎨 Paso 2: Darle estilo con CSS

Ahora crea un archivo llamado styles.css en la misma carpeta y pega este código:

/* 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;
  }
}

                ✨ ¿Qué hemos conseguido con este CSS?
                Diseño moderno: Gradientes, sombras y esquinas redondeadas
Responsive: Se adapta perfectamente a móviles
Interactivo: Efectos hover y focus para mejor experiencia
Profesional: Colores y tipografía equilibrados

            

🚀 Paso 3: Probarlo en tu navegador

Guarda ambos archivos en la misma carpeta y abre index.html con tu navegador. ¡Deberías ver tu formulario funcionando!

Características que incluye:

📱 Responsive design (se ve bien en móviles)
✅ Validación básica (campos obligatorios)
🎨 Diseño moderno con gradientes y animaciones
♿ Accesible con labels correctas

🔧 ¿Qué sigue después?

Este formulario tiene todo lo básico, pero no envía emails por sí solo. Para que funcione completamente necesitas:

JavaScript: Para capturar los datos del formulario
Backend: Un servidor que procese y envíe los emails
Servicios como: EmailJS, Netlify Forms, o Formspree

                💡 Siguiente nivel: Mejoras que puedes hacer
                Cambiar colores: Modifica los colores en el CSS para que coincida con tu marca
Añadir campos: Teléfono, empresa, etc.
Validación custom: Mensajes de error personalizados
Animaciones: Transiciones más elaboradas

            

📚 ¿Te ha gustado este tutorial?

❓ Preguntas frecuentes sobre formularios de contacto

¿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.

🚀 Próximos pasos

Ya tienes tu formulario de contacto con HTML y CSS funcionando perfectamente. Pero esto es solo el comienzo:

✅ Validaciones JavaScript - Verificar que los campos estén correctos antes de enviar
✅ Envío de emails - Conectar tu formulario con un servicio de email
✅ Mensajes de éxito/error - Mostrar feedback al usuario
✅ Formularios avanzados - Campos dinámicos, subida de archivos, etc.

📚 Continúa aprendiendo

¡Ya disponible! Validaciones de formularios con JavaScript - Aprende a validar campos, mostrar mensajes de error y hacer tu formulario completamente funcional.

Este es solo el principio. En StudyCode Pro creamos tutoriales como este pero llevándote paso a paso desde cero hasta conseguir tu primer trabajo en tech.

¿Quieres más tutoriales prácticos como este? Únete a nuestra comunidad y te avisaremos cuando tengamos nuevo contenido.

📧 Mantente al día

Si este tutorial te ha servido y quieres recibir más contenido como este, únete a la lista de espera de StudyCode Pro.

📬 Únete Gratis