Criar formulário de contato em HTML é essencial para quem quer manter-se conectado com sua audiência.
Afinal, disponibilizar uma maneira do seu público interagir em particular com você é realmente importante para seu posicionamento, além de te render bons contatos profissionais. No entanto, criar uma página de contato do zero pode ser para alguns algo difícil de ser feito.
Neste artigo, você aprenderá a criar formulário de contato usando HTML (front-end). Você também terá acesso ao código PHP para o processamento do formulário (back-end) – este é usado para tomar as submissões do formulário e enviá-lo para você por e-mail.
Além disso, vamos dar uma dica extra. Para quem tem sites em WordPress, é mais simples criar um formulário de contato. No final do artigo, também ensinamos como criar um formulário utilizando a plataforma.
Conteúdo
Por que criar um formulário de contato
Existem alguns motivos para usar um formulário de contato ao invés de simplesmente colocar simplesmente visível o e-mail em sua página de contato.
Permite que seu usuário permaneça mais tempo no seu site
Um formulário de contato permite ao seu potencial cliente possa permanecer no seu site. Isso porque ele não precisará utilizar um cliente de e-mail externo.
Eles não precisarão sair do seu site, e assim, poder se distrair e possivelmente até mesmo falhar em entrar em contato em tudo. Acredite: muitos erram na hora de preencher o destinatário.
Reduz o número de spam
Colocar um endereço de e-mail publico na Internet é um convite para receber e-mails indesejáveis. Isso porque há softwares que são especializados em varrer sistemas de busca para coletar esses e-mails.
Por isso, criar um formulário de contato pode te ajudar a proteger o seu endereço de e-mail, pois o e-mail de destino não fica disponível.
Além disso, é mais fácil compartilhar em mídias sociais sua página de contato do que simplesmente um post com seu e-mail.
Permite exigir campos obrigatórios
Um formulário de contato permite-lhe pedir ou exigir, informações específicas antes de o formulário ser enviado.
Você pode criar filtros em JQuery (ou JavaScript puro) antes que a nova mensagem chegue até você.
Pergunte sobre que tipo de trabalho o Lead precisa, qual é o seu número de telefone para contato ou outro campo que seja essencial para seu projeto.
Mais acessível para seus usuários
Os formulários de contato podem muitas vezes sincronizar-se com o preenchimento automático do navegador do visitante, tornando-o ainda mais fácil e rápido de preencher.
Campos como e-mail, número e nome completo podem ser facilmente preenchidos automaticamente, desde que o usuário cadastre pelo navegador.
Além disso, você pode ter a flexibilidade de mudar de endereço de e-mail, caso seja necessário.
Como criar formulário de contato em HTML
O primeiro passo é criar a interface com o qual o nosso usuário irá interagir conosco.
O formulário de contato em HTML terão os seguintes campos: Nome, e-mail, assunto e conteúdo da mensagem. Nosso objetivo aqui é manter o mais simples quanto possível, pois o foco é em demonstrar a funcionalidade de enviar um e-mail.
O formulário no código abaixo é representado pelas tag <form>. Dentro dessa tag, é possível adicionar elementos e campos dentro do formulário que será enviado por e-mail.
É preciso lembrar que o envio será feito, posteriormente no lado do servidor, através de uma linguagem de back-end, como o PHP.
<html>
<head>
<title>Formulário de Contato</title>
</head>
<body>
<form name="frmContact" id="formContato" method="post" action="destino.php" enctype="multipart/form-data">
<label style="padding-top: 20px;">Nome:</label><br /> <input
type="text" name="nomeUsuario" id="nomeUsuario" />
<label>E-mail</label> <input type="text" id="email" />
<label>Assunto</label><br /> <input type="text" name="Assunto" id="assunto" />
<label>Mensagem</label><br /> <textarea name="conteudo" id="conteudo" cols="70" rows="7"></textarea>
<input type="submit" name="enviar" class="btn-submit" value="Enviar" />
</form>
</body>
</html>
O atributo action dentro do formulario define o endereço para onde serão enviados os dados coletados dentro do formulário. Escolhemos o nome destino.php.
O atributo method define o método HTTP como serão transmitidos essas informações. há dois métodos: GET e o POST.
Criando o script para envio de e-mail em PHP
Neste código PHP, os dados do formulário de contato são recebidos usando $ _POST PHP super global. Esses dados são usados para definir o cabeçalho e corpo do E-mail e definir com a função PHP mail.
<?php
if(!empty($_POST["enviar"])) {
$nome = $_POST["nomeUsuario"];
$email = $_POST["email"];
$assunto = $_POST["assunto"];
$content = $_POST["conteudo"];
$enviarParaEmail = "email @ portal desenvolvedor . com";
$mailCabecalhos = "De: " . $nome . "<". $email .">\r\n";
if(mail($enviarParaEmail, $assunto , $conteudo, $mailCabecalhos)) {
$message = "Seu contato foi recebido com sucesso.";
$type = "Sucesso";
}
}
require_once "resposta.php";
?>
Feito isso, sua aplicação será capaz de enviar e-mails.
Criar Formulário de Contato usando WordPress
É possível criar um formulário de contato utilizando o WordPress. Tudo o que você precisa fazer é escolher um plugin para formulário de contato.
Enquanto existem vários plugins de contato WordPress gratuitos e pagos que você pode escolher, nós usamos Contact Form 7.
É o plugin de formulário de contato mais amigável iniciante disponível. Além disso, o Contact Form 7 é disponibilizado gratuitamente.
Agora que decidimos sobre o plugin formulário de Contato, vamos em frente e instalá-lo em seu site.
Conclusão
Estas são algumas das razões pelas quais você deve criar formulário de contato em seu site.
Não tê-lo pode dificultar a interação dos seus visitantes e portanto, você poderá perder ótimas oportunidades profissionais. Caso você tenha gostado do artigo ou tenha dúvida sobre como criar formulário de contato.