Formulario de contacto con campos de nombre, email, asunto y mensaje. Validación nativa del navegador.
Descripción
El Formulario de contacto de Kodeval Pages deja que los visitantes de tu sitio te manden un mensaje. Tiene campos de nombre, email, asunto y mensaje, acomodados de forma prolija y fácil de usar.
Está armado solo con HTML y CSS, sin JavaScript ni librerías externas. Por eso lo podés pegar en cualquier proyecto sin preocuparte por si choca con otro código o con el framework que uses.
Los campos se validan solos, gracias al atributo HTML "required" (un atributo es una palabra extra que le agregás a una etiqueta para darle una instrucción). Con "required", el navegador no deja enviar el formulario si falta completar algo, y muestra el aviso de error automáticamente. No hace falta escribir código para eso.
Los campos de nombre y email se muestran en dos columnas, una al lado de la otra. En pantallas chicas (como el celular) se acomodan uno debajo del otro gracias a una regla especial de CSS (llamada media query) que ya viene incluida. El cuadro de mensaje se puede estirar hacia abajo con el mouse, para escribir mensajes largos más cómodo.
Cada campo tiene un texto que explica qué es (label) y un texto de ejemplo adentro (placeholder) que se borra al escribir. Esto ayuda a cualquier persona a entender qué poner, incluida gente que usa lectores de pantalla (programas que leen la página en voz alta).
Los colores y bordes se guardan en variables CSS (valores reutilizables) adentro de .contact-section. Si cambiás solo la variable --form-accent, cambiás el color principal en todo el formulario de una sola vez, incluido lo que pasa cuando tocás un campo.
Cuando hacés clic en un campo, aparece un brillo suave alrededor (hecho con box-shadow, una sombra de CSS). Así el usuario ve fácil en qué campo está escribiendo, algo útil cuando hay varios campos seguidos.
Para que los mensajes te lleguen de verdad por email, tenés que cambiar el "action="#"" del formulario por la dirección de un servicio como Formspree, EmailJS, Netlify Forms o Basin. Estos servicios reciben los datos del formulario sin que vos tengas que programar un servidor propio. A veces también hay que agregar algún campo extra oculto, según las instrucciones del servicio elegido.
El botón de enviar ocupa todo el ancho del formulario (con "width: 100%"), para que sea fácil de tocar con el dedo en el celular. Al pasar el mouse por encima, se ve un poco más transparente gracias a una transición suave de CSS.
En pantallas de hasta 560px de ancho (como celulares), el formulario reduce los espacios internos, apila los dos primeros campos en una sola columna y ajusta el espacio de la sección para que entre mejor en pantallas chicas.
Este módulo sirve para portfolios personales, páginas de agencias, sitios de servicios, páginas de instituciones y cualquier proyecto donde necesites que la gente te pueda escribir, sin tener que armar un chat o un sistema complicado.
Usa las etiquetas propias de un formulario en HTML: form, label, input y textarea. Usar estas etiquetas (en vez de divs genéricos) ayuda a que los navegadores, buscadores y lectores de pantalla entiendan bien de qué se trata cada parte.
Para usarlo, pegá el HTML donde quieras mostrar el formulario de contacto. Pegá el CSS en tu archivo de estilos, o en una etiqueta <style> dentro del head. Después conectá el action a un servicio de email si querés recibir los mensajes.
<section class="contact-section">
<div class="contact-inner">
<div class="contact-header">
<h2>Contacto</h2>
<p>Completá el formulario y te respondemos a la brevedad.</p>
</div>
<form class="contact-form" action="#" method="POST">
<div class="form-row">
<div class="form-field">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre"
placeholder="Tu nombre completo" required>
</div>
<div class="form-field">
<label for="email">Email</label>
<input type="email" id="email" name="email"
placeholder="[email protected]" required>
</div>
</div>
<div class="form-field">
<label for="asunto">Asunto</label>
<input type="text" id="asunto" name="asunto"
placeholder="¿En qué te podemos ayudar?" required>
</div>
<div class="form-field">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5"
placeholder="Escribí tu mensaje acá..." required></textarea>
</div>
<button type="submit" class="btn-submit">Enviar mensaje →</button>
</form>
</div>
</section>
/*
|--------------------------------------------------------------------------
| Formulario de Contacto — Kodeval Pages
|--------------------------------------------------------------------------
| Formulario con nombre, email, asunto y mensaje.
| Validación nativa del navegador (atributo required).
| Para enviar emails: conectá Formspree, EmailJS o similar.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.contact-section {
--form-bg: #f8fafc;
--form-card-bg: #ffffff;
--form-border: #e2e8f0;
--form-text: #0f172a;
--form-muted: #64748b;
--form-accent: #5865f2;
--form-focus: rgba(88,101,242,0.3);
--form-input-bg: #f8fafc;
}
/* =====================
SECCIÓN
===================== */
.contact-section {
background: var(--form-bg);
padding: 5rem 2rem;
}
.contact-inner {
max-width: 680px;
margin: 0 auto;
}
/* =====================
ENCABEZADO
===================== */
.contact-header {
margin-bottom: 2.5rem;
}
.contact-header h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--form-text);
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.contact-header p {
font-size: 1rem;
color: var(--form-muted);
line-height: 1.6;
}
/* =====================
FORMULARIO
===================== */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
background: var(--form-card-bg);
border: 1px solid var(--form-border);
border-radius: 20px;
padding: 2rem;
}
/* =====================
FILA DE DOS CAMPOS
En móvil se apilan automáticamente.
===================== */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* =====================
CAMPO INDIVIDUAL
===================== */
.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* =====================
LABEL
===================== */
.form-field label {
font-size: 0.8rem;
font-weight: 600;
color: var(--form-text);
letter-spacing: 0.02em;
}
/* =====================
INPUT Y TEXTAREA
Los estilos se comparten con un selector de grupo.
===================== */
.form-field input,
.form-field textarea {
background: var(--form-input-bg);
border: 1px solid var(--form-border);
border-radius: 12px;
padding: 0.75rem 1rem;
font-size: 0.9rem;
font-family: inherit;
color: var(--form-text);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: #94a3b8;
}
/* =====================
ESTADO FOCUS
box-shadow crea un "glow" alrededor del campo activo.
===================== */
.form-field input:focus,
.form-field textarea:focus {
border-color: var(--form-accent);
box-shadow: 0 0 0 3px var(--form-focus);
}
/* =====================
TEXTAREA
resize:vertical permite al usuario ajustar la altura.
Cambiá a resize:none para bloquearlo.
===================== */
.form-field textarea {
resize: vertical;
min-height: 120px;
}
/* =====================
BOTÓN DE ENVÍO
width:100% lo hace ocupar todo el ancho.
===================== */
.btn-submit {
background: var(--form-accent);
color: #fff;
border: none;
border-radius: 12px;
padding: 0.9rem 2rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: opacity 0.15s;
}
.btn-submit:hover { opacity: 0.85; }
/* =====================
RESPONSIVE
===================== */
@media (max-width: 560px) {
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 1.5rem; }
.contact-section { padding: 3rem 1.5rem; }
}