Nós iremos salvar os dados no banco de dados e ainda deixar com uma cara agradável com Bootstrap.
No nosso primeiro passo vamos criar o HTML, ou seja o nosso formulário bunitinho e bem agradável aonde fara com que o usuário se sinta a vontade de se cadastrar sem medo de chegar “N” Spams e Newsletters indesejadas. 😀
Vamos ver o HTML, não tem segredo esse código é bem simples.
Como o importante desse post é o arquivo “envia_mensagem.php“, que é o responsável de enviar os dados e salva-los no banco de dados. Então vou encurtar explicações do HTML e mostra-lo num bloco só.
Obs. os “pattern” no HTML nos campos e-mail e telefone não são os ideais, só fiz assim para ser rápida a explicação. Você pode muito bem criar um JavasCript para validar os campos.
Obs. Clique nesse link abaixo para baixar os arquivos do Bootstrap.
<form method="post" action="envia_mensagem.php">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputtelefonel4">Nome:</label>
<input type="nome" name="nome" class="form-control" required="required">
</div>
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">E-mail:</label>
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" class="form-control" required="required"><!-- pattern é responsável de verificar se o e-mail é valido, prática do HTML5. -->
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputtelefonel4">Telefone:</label>
<input type="telefone" name="telefone" pattern="([0-9]{8})[0-9]{1,2}[0-9]{1}$" class="form-control" ><!-- pattern é responsável de verificar o telefone, prática do HTML5. -->
</div>
<div class="form-group col-md-6">
<label for="exampleFormControlSelect1">Selecione um horário:</label>
<select class="form-control" id="exampleFormControlSelect1" name="horario">
<option value="9:00am">9:00am</option>
<!-- Para incurtar o código eu tirei o option até chegar nas 17:30 horas -->
<option value="5:30pm">17:30pm</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Mensagem:</label>
<textarea name="mensagem" class="form-control" required="required"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Selecione uma forma de contato:</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Por_Telefone" id="inlineRadio4" value='<img src="http://micheldeziderio.com.br/landing_page/img/telefone2.jpg" width="25px">' title="TELEFONE">
<!-- Valor img é para o e-mail ficar mais bonitinho e ter alguma imagem e não só texto, e serve também para identificar o que o usúario escolheu de forma de retrno de contato-->
<label class="form-check-label" for="inlineRadio4" title="TELEFONE"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Por_Email" id="inlineRadio5" value='<img src="http://micheldeziderio.com.br/landing_page/img/email2.png" width="25px">' title="E-MAIL">
<!-- Valor img é para o e-mail ficar mais bonitinho e ter alguma imagem e não só texto, e serve também para identificar o que o usúario escolheu de forma de retrno de contato-->
<label class="form-check-label" for="inlineRadio5" title="E-MAIL"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="Por_WhatsApp" id="inlineRadio6" value='<img src="http://micheldeziderio.com.br/landing_page/img/whatsapp2.png" width="25px">' title="WHATSAPP">
<!-- Valor img é para o e-mail ficar mais bonitinho e ter alguma imagem e não só texto, e serve também para identificar o que o usúario escolheu de forma de retrno de contato-->
<label class="form-check-label" for="inlineRadio6" title="WHATSAPP"></label>
</div>
</div>
<button type="submit" class="btn btn-default" name="BTEnvia">Enviar</button>
<input type="hidden" name="tipodecompra" class="form-control" value="Você insere o tipo de compra">
<input type="hidden" name="campanha" class="form-control" value="Você insere o nome da camapnha desejada">
</form>
Vamos começar o arquivo “envia_mensagem.php” conectando com o banco de dados.
<?php
$servername = "localhost"; // coloque aqui o local do banco
$username = "root"; // coloque aqui o nome de usúario do banco
$password = ""; // coloque aqui a senha do banco
$dbname = "leads"; // coloque aqui o nome do banco
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
Após conexão vamos criar um “if = se foi feita a conexão” de conexão e teremos.
Em seguida outro “if = se ele foi clicado” para validar o botão clicado “Enviar = BTenvia“. E setar as variáveis que iram receber os dados do formulário.
Obs. Nesse caso tem que ter uma variável name=”BTenviar” ou qualquer uma outra, desde que ela seja citada em ambos arquivos.
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
if (isset($_POST['BTEnvia'])) {
//Variaveis de POST, Alterar somente se necessário
//====================================================
$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['campanha'];
$telefone = $_POST['telefone'];
$mensagem = $_POST['mensagem'];
$horario = $_POST['horario'];
$tipodecompra = $_POST['tipodecompra'];
$tipo_contato1 = $_POST['Por_Telefone'];
$tipo_contato2 = $_POST['Por_Email'];
$tipo_contato3 = $_POST['Por_WhatsApp'];
Se estiver ocorrer tudo correto na conexão ele vai seguir gravando os dados no banco de dados.
$sql = "INSERT INTO `leads_contato` (
`nome`, `email`, `telefone`, `mensagem`, `horario`, `tipodecompra`, `Por_Telefone`, `Por_Email`, `Por_WhatsApp`
)
VALUES (
'$nome', '$email', '$telefone', '$mensagem', '$horario', '$tipodecompra', '$tipo_contato1', '$tipo_contato2', '$tipo_contato3'
)";
Gravando os dados no banco ele vai abrir outro “if = se foi feita a conexão e gravado os dados“, após a conexão e gravando dados ele ira fazer a função de envio.
if (mysqli_query($conn, $sql)) {
//====================================================
//REMETENTE --> ESTE EMAIL TEM QUE SER VALIDO DO DOMINIO
//====================================================
$email_remetente = "$email"; // deve ser uma conta de email do seu dominio
//====================================================
//Configurações do email, ajustar conforme necessidade
//====================================================
$email_destinatario = "contato@micheldeziderio.com.br"; // pode ser qualquer email que receberá as mensagens
$email_reply = "$email";
$email_assunto = "$assunto"; // Este será o assunto da mensagem
//====================================================
//Monta o Corpo da Mensagem
//====================================================
$email_conteudo = "Nome: $nome \n";
$email_conteudo .= "Email: $email \n";
$email_conteudo .= "Telefone: $telefone \n";
$email_conteudo .= "Horário: $horario \n";
$email_conteudo .= "<br>Mensagem: $mensagem \n";
$email_conteudo .= "<br>Qual preferencia de compra: $tipodecompra \n";
$email_conteudo .= "<br>Preferencia de contato: $tipo_contato1 $tipo_contato2 $tipo_contato3\n";
//====================================================
//Seta os Headers (Alterar somente caso necessario)
//====================================================
$email_headers = implode ( "\n",array ( "From: $email_remetente", "Reply-To: $email_reply", "Return-Path: $email_remetente","MIME-Version: 1.0","X-Priority: 3","Content-Type: text/html; charset=UTF-8" ) );
//====================================================
//Enviando o email
//====================================================
if (mail ($email_destinatario, $email_assunto, nl2br($email_conteudo), $email_headers)){
//Mensagem de formulário enviado com sucesso!
//====================================================
echo "<script>alert('Enviado com Sucesso!');</script>";
echo "<script>window.location.href = 'http://www.micheldeziderio.com.br/landing_page/'</script>"
}
else{
//Mensagem de ocorreu um erro ao enviar!
//====================================================
echo "<script>alert(Algo deu errado ao enviar');</script>";
echo "Entre em contato webmaster@contato.com.br"
}
Enfim no final de após tudo caso ele de um erro de conexão ele tem “else = caso contrário ele mostra uma mensagem de erro e irá falar qual foi o erro“.
Sendo o erro na conexão com o banco de dados. E fechando o arquivo PHP.
} else {
echo "<script>alert(Algo deu errado ao enviar');</script>";
echo "Entre em contato webmaster@contao.com.br" . $sql . "<br>" . mysqli_error($conn);
}
}
?>
Exemplo de HTML:
Use os códigos para o bem e evite sair criando Spams pela internet. 😀
Download dos arquivos do exemplo:
