Aprenda a criar um simples formulário de contato com HTML e CSS

Aprenda nesse tutorial como criar um formulário para página de contato com apenas HTML e CSS. Este tutorial é para quem está começando a aprender HTML e CSS e os fundamentos do desenvolvimento para web.

Assista o vídeo e aprenda.

Para criar um formulário de página de contato simples com HTML e CSS, siga os seguintes passos:

1. Crie um novo arquivo HTML e nomeie-o como "contato.html".

2. Dentro do arquivo HTML, crie um formulário HTML usando a tag <form>. Defina o atributo "action" como o endereço do script de processamento do formulário (por exemplo, um arquivo PHP que você criou para lidar com os dados do formulário). Defina o atributo "method" como "post", pois este é o método mais seguro para enviar dados do formulário.

<form action="contact_send.php" method="post"></form>

3. Adicione os campos do formulário dentro da tag <form>. Para criar um campo de entrada de texto simples, use a tag <input> e defina o atributo "type" como "text". Defina o atributo "name" como um nome que você deseja usar para referenciar este campo mais tarde. Adicione uma etiqueta para descrever o campo de entrada. Por exemplo:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>

4. Adicione mais campos de entrada de texto para outras informações de contato, como e-mail e telefone. Você também pode adicionar um campo de mensagem usando a tag <textarea>.

<label for="email">E-mail:</label>
<input type="text" id="email" name="email" required>
<label for="telefone">Telefone:</label>
<input type="text" id="telefone" name="telefone">
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>

5. Adicione um botão "Enviar" para enviar o formulário. Use a tag <button> e defina o atributo "type" como "submit".

<button type="submit">Enviar</button>

6. Adicione estilos CSS para o formulário, como fontes, cores, margens e preenchimentos, para torná-lo mais atraente e fácil de usar. Por exemplo:

form {
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0 auto;
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ccc;
}
label {
  display: block;
  margin-bottom: 10px;
}
input,
textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}

7. Salve o arquivo HTML e abra-o em um navegador da web para ver como o formulário ficará. Lembre-se de criar o script de processamento do formulário (por exemplo, um arquivo PHP) para lidar com os dados do formulário quando o usuário enviar o formulário.

O tutorial do vídeo é bem mais completo do este tutorial simples escrito. Assista o vídeo, baixe os arquivos e aprenda muito mais.