Cómo crear un formulario de contacto simple usando HTML, CSS y JavaScript

Los formularios de contacto son un componente crucial de los sitios web, ya que permiten a los usuarios comunicarse con usted con consultas, comentarios o solicitudes.

Aquí aprenderá el proceso de creación de un formulario de contacto básico para su sitio web. Desde configurar el proyecto hasta agregar validación y estilo al formulario, asegurando que al final tengas un formulario de contacto funcional y agradable.

Configurando el proyecto

Antes de comenzar a codificar, asegúrese de que su entorno de desarrollo esté configurado. Abra su editor de texto preferido o uno de los entornos de desarrollo integrados (IDE) recomendados como Código de estudio visual o Texto sublime.

Cree una carpeta de proyecto para mantener organizados sus archivos HTML y CSS.

Dentro de esta carpeta, cree archivos separados para HTML (índice.html) y CSS (estilo.css). Por último, vincule su archivo CSS en su documento HTML. sección usando el etiqueta.

Creando la estructura HTML

La base de cualquier formulario de contacto es su estructura HTML. A continuación le mostramos cómo puede crear los elementos HTML necesarios para su formulario de contacto.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

El código HTML anterior crea un elemento de formulario y anida múltiples campos de entrada para recibir entradas del usuario para el formulario de contacto.

Por el momento, su formulario de contacto se ve así:

Un formulario de contacto atractivo y fácil de usar mejora la experiencia general del usuario. El siguiente código CSS utiliza propiedades de modelo de caja flexbox y CSS, como relleno y margen, para diseñar el formulario de contacto y lograr una mejor apariencia.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}
body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}
h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}
form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}
.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}
.input__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

Su formulario de contacto ahora se ve así:

Implementación de validación de formularios

Garantizar la exactitud e integridad de la información proporcionada por el usuario es primordial. Un enfoque eficaz implica usando JavaScript para la validación de formularios del lado del cliente. Para comenzar, cree una etiqueta de secuencia de comandos al final de su archivo HTML y apunte al elemento del formulario.