Formularios en HTML

← Diseño Web ⌂ Home

¿Para qué sirve un formulario?

Los formularios en html nos permiten recolectar información para enviarla al propietario del sitio web o a un servicio externo. Está formado por dos partes:

Los formularios se crean con la etiqueta form. El atributo principal de un formulario es action, ya que contiene la ruta a la que serán enviados los datos recolectados.

Hay diversos elementos html que permiten la captura o recolección de datos, aunque generalmente se usan los elementos creados con la etiqueta input. El atributo principal de los inputs es type, que indica el tipo de comportamiento o dato que se espera recibir.

Los elementos creados con la etiqueta label muestran un texto que se puede asociar con un input para darle mayor significado al campo, principalmente cuando no se usa el atributo placeholder.

Agregaremos en nuestro código el siguiente formulario para el área de contacto:

<footer id="contacto">
    <p>Puedes encontrarnos en los teléfonos: 1234-1234 y 4321-4321</p>

    <form action="">
        <label for="correo">Correo</label>
        <input id="correo" type="email" placeholder="correo@ejemplo.com">

        <label for="comentario">Comentario</label>
        <input id="comentario" type="text" placeholder="Dudas o comentarios">

        <input type="submit" value="Enviar">
    </form>

    <p>
        <small>Todos los derechos reservados. 2019. Playeras Geek.</small>
    </p>
</footer>

Como podrás observar nuestro formulario le hace falta la parte del backend para que pueda funcionar de manera correcta. Existen muchos snippets hechos en PHP que podrían ayudarnos a cumplir ese objetivo. O también existen servicios de terceros que ofrecen dicho servicio, por ejemplo:

Para poder usarlo hay que seguir los siguientes pasos:

  1. Conectar el formulario con formspree colocando el siguiente valor en el atributo action.

Nota: coloca tu email

<form action="https://formspree.io/hola@alejandrozepeda.mx" method="POST">
  1. Agregar los atributos name en cada uno de los inputs del formulario.
<form action="https://formspree.io/hola@alejandrozepeda.mx" method="POST">
    <label for="correo">Correo</label>
    <input id="correo" type="email" name="email" placeholder="correo@ejemplo.com">

    <label for="comentario">Comentario</label>
    <input id="comentario" type="text" name="message" placeholder="Dudas o comentarios">

    <input type="submit" value="Enviar">
</form>

NOTA: Para poder ver en funcionamiento el formulario tu proyecto debe estar sobre un servidor web, es decir, ya en algún hosting.