Como criar, validar um formulário e receber os dados por e-mail

Neste tutorial você vai aprender como criar e validar um formulário simples e receber os dados por e-mail usando apenas HTML, CSS, Javascript e PHP.

Iniciantes no desenvolvimento web podem encontrar seus primeiros problemas na hora de criar um formulário e receber os dados. Por isso, aprenda a criar um formulário e receber os dados por e-mail de maneira simples e utilizando apenas as linguagens HTML5, CSS3, Javascript e PHP.

Criar e validar um formulário e receber os dados por e-mail usando apenas HTML, CSS, Javascript e PHP é um processo relativamente simples. Aqui estão as etapas envolvidas:

1. Crie um formulário HTML com os campos que deseja enviar por e-mail.
2. Adicione CSS ao formulário para estilizá-lo.
3. Adicione JavaScript ao formulário para validar os dados antes de serem enviados por e-mail.
4. Crie um script PHP para receber os dados do formulário e enviá-los por e-mail.

Aqui está um exemplo de código que você pode usar para criar e validar um formulário e receber os dados por e-mail:

HTML:

<form action="form.php" method="post">
    <input type="text" name="name" placeholder="Nome">
    <input type="email" name="email" placeholder="E-mail"> 
    <input type="submit" value="Enviar"> 
</form>

CSS:

form {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

input {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

button {
  background-color: #000;
  color: #fff;
  margin: 10px 0;
  padding: 10px;
  border: none;
  cursor: pointer;
}

JavaScript:

// Valida os dados do formulário antes de enviar
function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  // Verifica se o nome está vazio
  if (name === "") {
    alert("Por favor, insira seu nome.");
    return false;
  }

  // Verifica se o e-mail está vazio
  if (email === "") {
    alert("Por favor, insira seu e-mail.");
    return false;
  }

  // Verifica se o e-mail é válido
  if (!/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9\-\.]+)\.([a-zA-Z]{2,6})$/.test(email)) {
    alert("O e-mail é inválido.");
    return false;
  }

  // Se todos os dados estiverem válidos, envia o formulário
  return true;
}

PHP:

// Recebe os dados do formulário
$name = $_POST["name"];
$email = $_POST["email"];

// Envia um e-mail com os dados do formulário
$to = "email@example.com";
$subject = "Formulário de contato";
$message = "Nome: $name\nE-mail: $email";

mail($to, $subject, $message);

// Redireciona o usuário para a página de confirmação
header("Location: confirm.php");

Aqui está uma explicação do código:

• O código HTML cria um formulário com dois campos: um campo de texto para o nome e um campo de e-mail.
• O código CSS estiliza o formulário para que ele pareça bom.
• O código JavaScript valida os dados do formulário antes de enviar.
• O código PHP recebe os dados do formulário e envia um e-mail com os dados para o endereço especificado.
• O código PHP também redireciona o usuário para a página de confirmação.

Percebam que para um formulário funcionar corretamente, é necessário além dos inputs, validar os dados para não receber spans ou mensagens vazias com o javascript e receber os dados por e-mail utilizando a linguagem PHP.

O exemplo mostrado é apenas para um formulário simples, mas você pode estilizar e adicionar campos conforme sua necessidade.

Fique sempre atento ao criar formulários se as páginas e códigos estão de acordo com as boas práticas de SEO e com as devidas páginas de Termos de Uso e Política de Privacidade adequadas.

Esperamos ter ajudado! Assine nossa Newsletter para ficar acompanhar nosso blog e ficar sempre por dentro do universo digital.

Assine nossa Newsletter

Email Address*

Nome

Eu aceito os termos e condições.