¿Cómo crear un formulario de contacto con html, css y javascript?

Actualizado : 2023-11-10

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" 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 la apariencia del formulario de contacto

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.

Funcionaliad para enviar el correo usando javascript

const formulario = document.querySelector('form');

formulario.addEventListener('submit', function (event) {
  event.preventDefault(); // Evitar que el formulario se envíe de forma convencional
  // Variable para el correo destinario
  const destinario = "[email protected]"
  // Obtener los valores de los campos
  
  const nombre = document.getElementById('nombre').value;
  const email = document.getElementById('email').value;
  const mensaje = document.getElementById('mensaje').value;

  // Crear el enlace "mailto"
  const enlaceMailto = `mailto:${destinario}?subject=Mensaje%20de%20${encodeURIComponent(nombre)}&body=${encodeURIComponent(mensaje)}%0D%0A%0D%0A${encodeURIComponent(email)}`;

  // Abrir el cliente de correo predeterminado con el enlace "mailto"
  window.location.href = enlaceMailto;
});

Esta sección de código JavaScript se encargará de interceptar el envío del formulario, recoger los valores de los campos y abrir el cliente de correo predeterminado del usuario con un nuevo mensaje prellenado.

Asegúrate de reemplazar "[email protected]" con la dirección de correo a la que deseas enviar los mensajes.

Coloca este script al final del cuerpo de tu documento HTML, justo antes de cerrar la etiqueta </body>. Con esto, tu formulario ahora enviará correos electrónicos directamente desde el navegador del usuario.

Ten en cuenta que el uso de mailto depende de la configuración del cliente de correo del usuario y podría no ser compatible con todos los navegadores y configuraciones.

Nota importante

Normalmente esta tarea se suele hacer del lado del servidor (backend) agregando una acción que haga una petición a una ruta para comunicarse con el backend.

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.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi