Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo crear un formulario de contacto con html

html svgcss svg
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

css
form {
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.

Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css