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.

Te recomiendo leer  ¿Qué es React y para qué te puede servir?

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.

29 comentarios en “Crea un formulario de contacto en HTML”

    • Hola Cristidenis!

      tienes toda la razón, pero recuerda que esto es un tutorial para hacer el formulario en html, doy por entendido que sabes programar, pero no maquetar, por eso este tutorial 😉

      Un saludo

      Responder
  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

Deja un comentario

Conviértete en desarrollador web fullstack

50% de descuento!!! Código descuento:

ENTORNODEV50

  • Cursos siempre actualizados

  • Mastersclass en directo

  • Recursos para descargar

  • Foro de ayuda

  • Comunidad exclusiva en Discord

  • Certificado de estudios

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