Como criar um formulário de contato simples usando HTML, CSS e JavaScript

Os formulários de contato são um componente crucial dos sites, permitindo que os usuários entrem em contato com você para fazer perguntas, comentários ou solicitações.

Aqui você aprenderá o processo de criação de um formulário de contato básico para o seu site. Desde a configuração do projeto até a adição de validação e estilo ao formulário, garantindo que você tenha um formulário de contato funcional e agradável ao final.

Configurando o Projeto

Antes de começar a codificar, certifique-se de que seu ambiente de desenvolvimento esteja configurado. Abra seu editor de texto preferido ou um dos ambientes de desenvolvimento integrado (IDEs) recomendados como Código do Visual Studio ou Texto sublime.

Crie uma pasta de projeto para manter seus arquivos HTML e CSS organizados.

Dentro desta pasta, crie arquivos separados para HTML (index.html) e CSS (estilo.css). Por último, vincule seu arquivo CSS ao documento HTML seção usando o marcação.

Criando a estrutura HTML

A base de qualquer formulário de contato é sua estrutura HTML. Veja como você pode criar os elementos HTML necessários para o seu formulário de contato.

<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>

O código HTML acima cria um elemento de formulário e aninha vários campos de entrada para receber entradas do usuário para o formulário de contato.

No momento, seu formulário de contato está assim:

Um formulário de contato atraente e fácil de usar melhora a experiência geral do usuário. O código CSS abaixo usa propriedades de modelo flexbox e caixa CSS, como preenchimento e margem para estilizar o formulário de contato para uma melhor aparência.

* {
 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;
}

Seu formulário de contato agora fica assim:

Implementando Validação de Formulário

Garantir a precisão e integridade das informações fornecidas pelo usuário é fundamental. Uma abordagem eficaz envolve usando JavaScript para validação de formulário do lado do cliente. Para começar, crie uma tag de script no final do seu arquivo HTML e direcione o elemento do formulário.