como crear un formulario de contacto

En este tutorial mostraremos la manera de crear un formulario de contacto, es decir un formulario HTML, incluido el diseño de un formulario simple, implementarlo utilizando los elementos HTML correctos, agregar un estilo muy simple a través de CSS y cómo se envían los datos a un servidor y a nuestro email.

¿Qué son los formularios?

Los formularios son unos de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Permiten a los usuarios enviar datos al sitio web. La mayoría de las veces los datos se envían al servidor web, pero la página web también puede interceptarlos para usarlos por su cuenta.

Un formulario está compuesto por uno o más widgets. Esos widgets pueden ser campos de texto (línea simple o multilínea), cuadros de selección, botones, casillas de verificación o botones de opción. La mayoría de las veces esos widgets están emparejados con una etiqueta que describe su propósito: las etiquetas implementadas adecuadamente pueden instruir claramente a los usuarios videntes y ciegos sobre qué ingresar en una entrada de formulario. La principal diferencia entre un formulario HTML y un documento HTML normal es que la mayoría de las veces, los datos recopilados por el formulario se envían a un servidor web. En ese caso, debe configurar un servidor web para recibir y procesar los datos.

Diseñando tu formulario

No necesitas nada más que lo que se requiere para trabajar con HTML: un editor de texto y un web browser. Antes de comenzar a codificar, siempre es mejor dar un paso atrás y tomarse el tiempo para pensar en su formulario. Diseñar una maqueta rápida lo ayudará a definir el conjunto correcto de datos que desea preguntar a su usuario. Desde el punto de vista de la experiencia del usuario, es importante recordar que cuanto más grande sea su forma, más se arriesga a perder usuarios. Manténgalo simple y manténgase enfocado: solicite solo los datos que absolutamente necesita.

En este tutoriales, crearemos un formulario de contacto simple. Hagamos un bosquejo aproximado.

MDN Web Docs

Nuestro formulario contendrá tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al presionar el botón se enviarán sus datos a un servidor web.

Ahora estamos listos para ir a HTML y codificar nuestro formulario. Para construir nuestro formulario de contacto, utilizaremos los siguientes elementos HTML: <form>, <label>, <input>, <textarea>, y <button>.

Antes de continuar, haga una copia local de nuestra plantilla HTML simple: ingresará su formulario HTML en el archivo descargado.

El elemento <form>

Todos los formularios HTML comienzan con el elemento <form> de la siguiente forma:

<form action="enviar.php" method="post">

</form>

Este elemento define formalmente un formulario. Es un contenedor como lo son <div> o <p>, pero también soporta algunos atributos específicos para configurar la forma en que el formulario se comporta. Todos sus atributos son opcionales pero se considera una buena práctica que siempre al menos el los atributos action y method se encuentren presentes.

El atributo action define la locación (una URL) desde donde la información recolectada por el formulario debería enviarse.
El atributo method define con que método HTTP se enviará la información (puede ser "get" o "post").

Agrega widgets con los elementos <label>, <input>, y <textarea>

Nuestro formulario de contacto es muy simple y contiene tres campos de texto, cada uno con un label. El campo de texto para el nombre será de linea simple; el del e-mail también será de linea simple que aceptará solamente una dirección de correo electrónico; el campo de texto para el mensaje será multilínea.

En términos de código HTML vamos a tener algo como lo siguiente:

<form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

Los elementos <div> están allí para estructurar nuestro código de forma conveniente y poder darles estilos de una forma más sencilla (ver abajo). Puedes notar el uso de atributo for en todos los elementos <label>; es la forma correcta de unir un label a un widget en un formulario. Este atributo referencia el id del widget correspondiente. Hay algunos beneficios de hacer esto. El más obvio es permitir al usuario hacer click en el label para activar el widget correspondiente. Si quieres aprender otros beneficios, tienes todo detallado en el artículo: Como estructurar un formulario HTML.

En el elemento <input>, el atributo más importante es type. Este atributo es sumamente importante porque define la forma en que el elemento <input> se comporta. Puede cambiar radicalmente el elemento, así que presta atención a esto. Si quieres saber más sobre esto, lee el artículo Widgets nativos de formularios. En nuestro ejemplo usamos únicamente el valor text - el valor por defecto de este atributo. Representa un campo de texto básico de una linea que acepta cualquier tipo de texto sin ningún control o validación.

Por último pero no menos importante, veamos la sintaxis del <input /> vs. <textarea></textarea>. Esta es una de las extrañezas del HTML. La etiqueta <input> se cierra a si misma, lo que significa que si quieres cerrar formalmente el elemento, tienes que agregar un " / " al final del mismo y no una etiqueta de cierre. Por el contrario, <textarea> no es un elemento que se cierre así mismo, por lo que tienes que cerrarlo con su etiqueta correspondiente. Esto tiene impacto sobre una característica específica de los formularios HTML: la forma en que defines el valor por defecto. Para definir el valor por defecto de un elemento <input> debes usar el atributo value de la siguiente forma:

<input type="text" value="por defecto este elemento se llena con este texto" />

Por el contrario, si quieres definir el valor por defecto de un <textarea>, solamente tienes que poner el valor por defecto entre el comienzo y el final de las etiquetas del elemento <textarea>, así:

<textarea>por defecto este elemento se llena con este texto</textarea>

Y un <button> para finalizar

Nuestro formulario está casi listo; tenemos que agregar un botón para permitir al usuario enviar la información que llenó en el formulario. Esto se hace simplemente usando el elemento <button>:

<form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg"></textarea>
    </div>

    <div class="button">
        <button type="submit">Envía tu mensaje</button>
    </div>

</form>

Un botón puede ser de tres tipos: submit, reset, o button.

Un click en un botón submit envía la información del formulario a una página web definida por defecto en el atributo action del elemento <form>.
Un click en un botón reset reinicia inmediatamente todos los widgets del formulario a sus valores por defecto. Desde un punto de vista de UX(Experiencia de usuario), esto se considera una mala práctica.
Un click en un botón button... ¡no hace nada! Puede sonar tonto, pero es muy útil para construir botones customizados con jаvascript.

Puedes también usar el elemento <input> con el type correspondiente para producir un botón. La diferencia principal con el elemento <button> es que el elemento <input> únicamente permite texto plano como su label mientras que el elemento <button> permite contenido HTML en su label.