Crea un formulario de contacto en HTML

 

El primer artículo de nuestra serie de html le ofrece tu primera experiencia en la creación de un formulario de contacto en HTML, incluyendo el diseño de un formulario simple, su implementación utilizando los elementos HTML adecuados, la adición de un estilo muy simple a través de CSS, y cómo se envían los datos a un servidor.

¿Qué son los formularios HTML?

Los formularios HTML son uno 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 utilizarlos por sí sola.

Un formulario HTML está formado por uno o más widgets. Estos widgets pueden ser campos de texto (de una o varias líneas), casillas de selección, botones, casillas de selección o botones de selección. La mayoría de las veces, estos widgets están emparejados con una etiqueta que describe su propósito – las etiquetas correctamente implementadas son capaces de instruir claramente tanto a los usuarios con visión como a los más ciegos sobre lo que deben introducir en un formulario de entrada de datos.

Diseño de tu formulario

Antes de empezar a codificar, siempre es mejor dar un paso atrás y tomarse el tiempo para pensar en su forma. Diseñar una maqueta rápida te ayudará a definir el conjunto correcto de datos que deseas preguntarle a tu usuario. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto mayor sea tu formulario, mayor será el riesgo de perder usuarios. Manténlo sencillo y concéntrate: pide sólo los datos que necesites. El diseño de formularios es un paso importante cuando se está construyendo un sitio o una aplicación.

formulario de contacto

No te voy hacer esperar más, aquí tienes el código HTML y CSS del formulario de contacto para que lo puedas implementar en tu página web de forma sencilla:

See the Pen
JgdaGy
by Javi Niguez (@javiniguez)
on CodePen.

Curso gratis en mi canal de html y CSS

Si te ha gustado este artículo y quieres aprender más sobre html y CSS, te recomiendo que veas mi curso totalmente gratis en Youtube, y de paso, suscríbete que no cuesta nada! jeje 😉




52 comentarios en «Crea un formulario de contacto en HTML»

  1. hola quería saber cómo o dónde integrar la llegada de comentarios. Sé que es añadiendo el HTML pero no sé donde insertarlo ni cómo poner los comentarios en la web. Gracias!!

    Responder
    • Hola Carlos!

      te en cuenta que lo que se comenta en este artículo es para realizar el diseño del formulario, para hacer que envíe los comentarios deberás añadirle las funciones en PHP 😉

      un saludo

      Responder
  2. Hla, si quiero recibir el mensaje en mi casilla, solo debo modificar la eqtiqueta action y poner allí «mailto:……………………@gmail.com verdad?
    gracias y saludos.

    Responder
  3. COMO HACER ESTO POR FAVOR AYUDEME SOY NUEVO EN ESTO QUISIERA APRENDER
    EJERCICIO PARA ENTREGAR
    Formulario de Contacto
    Crear un formulario en HTML que corresponda a un formulario de
    Contacto de una pagina web.
    Debe incluir: Nombre, email, teléfono, sección de interés de la
    Pagina web y comentario.
    Debe agregarle 2 campos mas con información que Ud considere
    Necesaria, utilizando los demás elementos de formularios.
    Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje de
    Confirmación de envío del mensaje.
    Puede incluir todos los elementos que desee incorporar (imágenes, links,
    etc).

    Responder
    • Hola Leo!

      para realizar ese formulario que indicas debes de aprender también un poco de PHP, ya que lo que explico en este artículo solo es para realizar el diseño 😉

      Un saludo

      Responder
  4. Hola, es de mucha ayuda para aprender bien sobre formularios, pero me quedo una duda como haces para que salga la alerta si los campos están vacíos al momento de enviar.

    Responder
    • Hola!

      puedes ponerte en contacto conmigo a través del formulario de contacto de esta página web, dime que es lo que necesitas y estaré encantado de darte un presupuesto para realizar el trabajo 😉

      Un saludo

      Responder
    • Hola! lamentablemente el formulario es solo la parte diseño, html y css, para hacer funcionar el botón, necesitas añadirle php. Un saludo!

      Responder
  5. Hola Javi, cordial saludo.

    Muchas gracis por su aporte y conocimiento, me sirvio mucho el formulario, quisiera preguntarle como puedo configurar el botorn enviar, para que sea direccionado a un correo?

    gracias por su respuesta

    Responder
    • Hola Jaime! ten en cuenta que el formulario del artículo es la parte diseño, html y css, para que el botón de enviar funcione deberás añadirle PHP, ok?

      Un saludo!

      Responder

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)