Cómo crear un formulario de contacto con html

actualizado: 30 / 12 / 2022

Los formularios de contacto son una parte esencial de cualquier sitio web o aplicación. Permiten a los usuarios enviar mensajes o información a través de una página web, y son una forma efectiva de establecer una comunicación directa con tus clientes o seguidores.

En este artículo aprenderás a crear una página de contacto con un formulario responsive en HTML y CSS, paso a paso.

Estructura html para nuestro formulario

html<form action="/enviar-mensaje" method="POST">
  <label for="nombre">Nombre:</label><br />
  <input type="text" id="nombre" name="nombre" /><br />
  <label for="email">Email:</label><br />
  <input type="email" id="email" name="email" /><br />
  <label for="mensaje">Mensaje:</label><br />
  <textarea id="mensaje" name="mensaje"></textarea><br />
  <input type="submit" value="Enviar mensaje" />
</form>

Estilos css para mejorar nuestro formulario html

cssform {
  width: 500px;
  margin: 0 auto;
  text-align: left;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 12px 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

Con estos estilos, el formulario tendrá un ancho de 500 píxeles, estará centrado en la página, tendrá un borde y un borde redondeado, y los elementos (como los inputs y el botón Enviar) tendrán un diseño atractivo y consistente.

Puedes agregar algunos estilos adicionales si lo deseas. Por ejemplo, puedes agregar un fondo de color o una imagen de fondo al formulario, o cambiar el tamaño y el tipo de letra de los elementos del formulario.

No olvides darle funcionalidad al formulario

Una vez que hayas diseñado y agregados estilos a tu formulario, asegúrate de incluir una acción en el formulario (en este caso, la ruta "/enviar-mensaje") para que el formulario se envíe a una página o servidor que procese la información y la envíe a su destino final (por ejemplo, un correo electrónico o una base de datos).

Conclusión

Con estos pasos simples, podrás crear un formulario de contacto atractivo y funcional en HTML y CSS. Recuerda que es importante proporcionar instrucciones claras y una acción definida para que los usuarios sepan cómo usar el formulario y cómo se procesará la información que envíen.

Además, es importante asegurarte de que el formulario sea accesible para todos los usuarios, independientemente de su dispositivo o capacidades. Esto incluye hacer que el formulario sea fácil de leer y usar en dispositivos móviles (responsive), y utilizar etiquetas y atributos adecuados para ayudar a las personas con discapacidad visual a usar el formulario.

Con un poco de planificación y diseño, puedes crear un formulario de contacto atractivo y funcional que permita a tus usuarios enviar mensajes y comunicarse contigo de manera efectiva.