Crea un formulario de contacto en HTML

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.

Comparte este artículo 🙂
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
Email this to someone
email
Digg this
Digg

2 Comments

    1. JaviNiguezJaviNiguez Post author Reply

      Muchas gracias Leslie, me alegro de que te guste, si tienes cualquier duda me avisas por aquí, un saludo 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.