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

Crear un formulario de contacto es una de las tareas más comunes al construir una página web.

Un formulario permite que los usuarios puedan enviar su nombre, correo electrónico y mensaje para ponerse en contacto contigo.

En esta guía veremos cómo crear un formulario de contacto con HTML y CSS, darle un diseño limpio y hacerlo funcional para recibir los mensajes en un correo electrónico.

Qué vamos a crear

El objetivo es construir un formulario sencillo con los siguientes campos:

• Nombre.
• Correo electrónico.
• Mensaje.
• Botón de enviar.

Primero crearemos la estructura con HTML, luego agregaremos estilos con CSS y finalmente configuraremos el formulario para que pueda enviar los datos correctamente.

Crear la estructura HTML del formulario

Para comenzar, creamos una etiqueta form con la clase form.

Dentro del formulario agregaremos un contenedor con la clase form_container, que servirá para organizar todo el contenido.

<form class="form">
    <div class="form_container">
        <h2 class="form_title">Contáctame</h2>

        <input type="text" class="form_input" placeholder="Nombre">

        <input type="email" class="form_input" placeholder="Email">

        <textarea class="form_input form_input--message" placeholder="Mensaje"></textarea>

        <input type="submit" value="Enviar" class="form_cta">
    </div>
</form>

En esta estructura tenemos dos campos de entrada, un área de texto y un botón para enviar el formulario.

Campo para el nombre

El primer campo será un input de tipo texto.

<input type="text" class="form_input" placeholder="Nombre">

Este campo servirá para que el usuario escriba su nombre.

Campo para el correo electrónico

El segundo campo será un input de tipo email.

<input type="email" class="form_input" placeholder="Email">

Este tipo de input ayuda a validar que el usuario escriba un formato de correo electrónico.

Campo para el mensaje

Para el mensaje usamos una etiqueta textarea.

<textarea class="form_input form_input--message" placeholder="Mensaje"></textarea>

El textarea permite escribir textos más largos, por eso es ideal para mensajes de contacto.

Botón para enviar

El botón se crea con un input de tipo submit.

<input type="submit" value="Enviar" class="form_cta">

Cuando el usuario haga clic en este botón, el formulario intentará enviar la información.

Agregar una fuente con Google Fonts

Para mejorar el diseño del formulario, podemos utilizar una fuente externa como Montserrat.

Primero se importa la fuente en el archivo CSS.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

Luego la aplicamos al cuerpo de la página.

body {
    font-family: 'Montserrat', sans-serif;
}

Hacer que los campos hereden la fuente

Algunos elementos de formulario no heredan automáticamente la fuente del sitio.

Para solucionarlo, podemos indicar que los inputs y el botón usen la fuente heredada.

.form_input,
.form_cta {
    font-family: inherit;
}

Agregar un fondo con gradiente

Para que el formulario se vea más atractivo, podemos agregar un fondo con gradiente al body.

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    width: 100%;
    display: flex;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

Con min-height: 100vh hacemos que el fondo ocupe todo el alto visible del navegador.

Centrar el formulario

Como el body tiene display: flex, podemos centrar el formulario usando margin: auto.

.form {
    background-color: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 1em;
    padding: 3.5em 1.5em;
    margin: auto;
}

El formulario tendrá fondo blanco, bordes redondeados, un ancho flexible y un ancho máximo para que no ocupe toda la pantalla.

Organizar el contenido con CSS Grid

El contenedor interno puede organizarse con display: grid.

.form_container {
    width: 100%;
    display: grid;
    gap: 1em;
    grid-auto-columns: 100%;
}

Con esto, los elementos se colocan uno debajo del otro y ocupan todo el ancho disponible.

Estilizar el título

El título del formulario puede centrarse y aumentar un poco su tamaño.

.form_title {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: .4em;
}

Estilizar los campos del formulario

Ahora podemos dar estilo a los campos de entrada.

.form_input {
    font-size: 1rem;
    padding: .8em 1em;
    outline: none;
    border: none;
    border: 1px solid #bbb0b0;
    border-radius: .2em;
}

Con esto los campos tendrán mejor tamaño, bordes suaves y una apariencia más limpia.

Evitar que el textarea cambie de tamaño

Por defecto, el usuario puede redimensionar un textarea. Para evitarlo, usamos resize: none.

.form_input--message {
    resize: none;
    padding: 1.8em 1em;
    margin-bottom: .5em;
}

Así el campo de mensaje conserva el diseño definido.

Estilizar el botón de enviar

El botón puede tener un color de fondo, texto blanco, bordes redondeados y cursor de tipo puntero.

.form_cta {
    background-color: #089fe0;
    color: #fff;
    border: none;
    font-weight: 400;
    font-size: 1rem;
    padding: .7em 0;
    border-radius: .2em;
    cursor: pointer;
}

Con este estilo el botón se verá más claro y fácil de identificar.

Hacer el formulario responsive

El formulario ya es flexible porque usa width: 90% y max-width: 400px.

Aun así, podemos agregar una media query para pantallas pequeñas.

@media (max-width: 450px) {
    .form {
        padding: 3.5em 1em;
    }
}

Esto reduce el espacio lateral del formulario en pantallas pequeñas y ayuda a que el diseño no se rompa.

Código CSS completo

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    width: 100%;
    display: flex;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.form {
    background-color: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 1em;
    padding: 3.5em 1.5em;
    margin: auto;
}

.form_container {
    width: 100%;
    display: grid;
    gap: 1em;
    grid-auto-columns: 100%;
}

.form_title {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: .4em;
}

.form_input {
    font-family: inherit;
    font-size: 1rem;
    padding: .8em 1em;
    outline: none;
    border: none;
    border: 1px solid #bbb0b0;
    border-radius: .2em;
}

.form_input--message {
    resize: none;
    padding: 1.8em 1em;
    margin-bottom: .5em;
}

.form_cta {
    font-family: inherit;
    background-color: #089fe0;
    color: #fff;
    border: none;
    font-weight: 400;
    font-size: 1rem;
    padding: .7em 0;
    border-radius: .2em;
    cursor: pointer;
}

@media (max-width: 450px) {
    .form {
        padding: 3.5em 1em;
    }
}

Hacer funcional el formulario

Después de crear el diseño, el siguiente paso es hacer que el formulario pueda enviar los datos.

Para esto se puede usar una herramienta externa como Formspree, que permite recibir los mensajes enviados desde un formulario HTML.

El proceso general consiste en crear una cuenta, crear un nuevo formulario y copiar la URL que la herramienta proporciona para usarla en el atributo action.

Agregar action y method al formulario

Para que el formulario envíe los datos, se agrega un action y un method.

<form class="form" action="URL_DE_TU_FORMULARIO" method="POST">

El valor de action debe ser la URL generada por la herramienta que usarás para recibir los mensajes.

El método debe ser POST, porque se enviarán datos del formulario.

Agregar atributos name

Para que los datos se envíen correctamente, cada campo debe tener un atributo name.

Por ejemplo:

<input type="text" class="form_input" placeholder="Nombre" name="name">

<input type="email" class="form_input" placeholder="Email" name="email">

<textarea class="form_input form_input--message" placeholder="Mensaje" name="message"></textarea>

Estos nombres permiten identificar qué valor corresponde al nombre, al correo y al mensaje del usuario.

HTML final del formulario funcional

<form class="form" action="URL_DE_TU_FORMULARIO" method="POST">
    <div class="form_container">
        <h2 class="form_title">Contáctame</h2>

        <input type="text" class="form_input" placeholder="Nombre" name="name">

        <input type="email" class="form_input" placeholder="Email" name="email">

        <textarea class="form_input form_input--message" placeholder="Mensaje" name="message"></textarea>

        <input type="submit" value="Enviar" class="form_cta">
    </div>
</form>

Probar el formulario

Después de agregar el action, el method y los atributos name, puedes probar el formulario.

Escribe un nombre, un correo y un mensaje. Luego presiona el botón de enviar.

Si todo está configurado correctamente, la herramienta mostrará una confirmación y el mensaje llegará al correo configurado.

Ver mensajes enviados

Además de recibir los mensajes por correo, algunas herramientas permiten ver los envíos desde un panel de administración.

Desde ese panel se pueden revisar los datos enviados y, en algunos casos, exportarlos a un archivo CSV.

Consejos importantes

• Usa siempre campos con atributo name.
• Configura correctamente el atributo action.
• Usa method="POST" para enviar los datos.
• Prueba el formulario antes de publicarlo.
• No publiques datos sensibles dentro del código.
• Agrega validaciones básicas cuando sea necesario.

Resumen del proceso

• Crear la estructura del formulario con HTML.
• Agregar campos para nombre, correo y mensaje.
• Crear un botón de envío.
• Aplicar estilos con CSS.
• Hacer el diseño responsive.
• Crear un formulario en una herramienta externa.
• Agregar action y method.
• Agregar atributos name a los campos.
• Probar el envío del formulario.

Conclusión

Crear un formulario de contacto con HTML y CSS es sencillo si separamos el proceso en dos partes: primero la estructura y el diseño, luego la funcionalidad.

Con HTML creamos los campos, con CSS damos estilo al formulario y con una herramienta externa podemos recibir los mensajes enviados por los usuarios.

Este tipo de formulario es útil para portafolios, páginas personales, sitios de servicios, landing pages y cualquier proyecto donde necesites que las personas puedan contactarte fácilmente.