Como criar um formulário HTML que envia um e-mail para você

Você já criou um formulário em seu site, apenas para perder o controle das informações? Criar um formulário de e-mail em HTML é uma maneira eficaz de resolver esse problema.

Abaixo, você aprenderá como criar um formulário que envia um e-mail para você, assim como para o cliente, após o envio. Este truque simples ajudará você a criar uma estratégia de entrada perfeita.

O que é um formulário HTML?

Um formulário HTML é usado em um site para coletar informações inseridas pelos visitantes. Se você deseja ser notificado quando alguém envia suas informações, pode configurar um processo que envia e-mails de um formulário HTML.

Idealmente, os navegadores permitiriam que você encaminhasse os envios de formulários diretamente para um endereço de e-mail. No entanto, eles não o fazem porque enviar um e-mail diretamente de um formulário da Web em HTML revelaria o endereço de e-mail do visitante, tornando-o vulnerável a atividades maliciosas, como phishing.

Além disso, o HTML não oferece a opção de criar um formulário que envie um e-mail após o envio. Em vez disso, você pode usar o elemento de ação do formulário para definir um endereço mailto: (neste caso, o seu próprio), acionando a abertura do cliente de email do remetente. Esta é uma opção de última hora se você não pode criar um formulário baseado em PHP.

No entanto, existem alguns problemas com a opção mailto:.

• Não é 100% compatível com todos os navegadores.
• O processo não é muito amigável.
• Você não pode controlar a formatação dos dados quando o formulário é enviado pelo navegador.
• Uma mensagem de aviso aparecerá quando o usuário enviar o formulário, informando que as informações que estão prestes a enviar não serão criptografadas para fins de privacidade.

Em vez disso, você deve procurar maneiras alternativas de enviar um e-mail a partir de um formulário, que discutiremos a seguir.

Como fazer um formulário HTML que envia e-mail

Existem várias opções para criar um formulário HTML que envia um e-mail para você quando uma nova entrada é enviada. A opção escolhida depende de como você trabalha e da plataforma que está usando.

Isso quer dizer que as coisas são um pouco diferentes se o plano for usar uma mistura de HTML e scripts diferentes. Escolha a opção que funciona melhor com o conjunto de habilidades de sua equipe.

Método 1: Criar um formulário de envio de e-mail usando HTML (não recomendado)

Usando apenas HTML? Se você está começando do zero, nossa equipe está aqui para ajudar. Este código irá ajudá-lo a criar um formulário que o notificará por e-mail.

O formulário solicitará o nome e a mensagem do contato. Ele também inclui um botão de envio (não visível no CodePen) no qual os usuários clicarão para enviar suas informações.

Note que este código é básico. Não vai parecer super estiloso. Para um formulário visualmente mais atraente que corresponda à sua marca, você terá que adicionar linhas de código específicas para suas necessidades.

Lembrar: Embora você possa usar apenas HTML básico, essa não é a opção ideal. Este formulário não envia diretamente para endereços de e-mail, mas abre um cliente de e-mail ou uma janela de ferramenta para enviar o formulário. Isso pode impedir o usuário de enviar o formulário.

Então, qual código HTML permite que você envie envios de formulário diretamente para um endereço de e-mail?

Para fazer o formulário funcionar com seu servidor de e-mail e enviá-lo para uma caixa de correio, o PHP é a resposta. Vamos explorar essa opção agora.

Método 2: Criar um formulário de envio de e-mail usando PHP (Avançado)

Para criar um formulário que envie um e-mail, o PHP será seu melhor amigo. PHP significa Hypertext Preprocessor, e esta linguagem colabora com HTML para processar o formulário.

Antes de entrar no processo, vamos detalhar alguns fundamentos do formulário.

Formulários PHP: o que você precisa saber

Um formulário da web tem dois lados: o front-end, visto no navegador pelos visitantes, e um script de back-end em execução no servidor.

O navegador da web do visitante usa código HTML para exibir o formulário. Quando o formulário é enviado, o navegador envia as informações para o backend usando o link mencionado no atributo “action” da tag form, enviando os dados do formulário para essa URL.

Por exemplo: .

O servidor então passa os dados para o script especificado na URL da ação — myform-processor.php neste caso. Usando esses dados, o script de back-end pode criar um banco de dados de envios de formulários, direcionar o usuário para outra página (por exemplo, pagamento) e enviar um e-mail.

Existem outras linguagens de script que você pode usar na programação de back-end, como Ruby, Perl ou ASP para Windows. No entanto, o PHP é o mais popular e é usado por quase todos os provedores de serviços de hospedagem na web.

Se você estiver criando um formulário do zero, aqui estão as etapas que você pode seguir.

Passo 1: Use PHP para criar uma página.

Para esta etapa, você precisará ter acesso ao cPanel do seu site na sua plataforma de hospedagem.

Ao criar uma página da Web, em vez de usar a extensão “.html”, digite “.php”. Isso é semelhante ao que acontece quando você salva uma imagem como “jpg” em vez de “png”.

Ao fazer isso, o servidor saberá hospedar o PHP que você escreve. Em vez de salvar a página HTML vazia como tal, salve-a como algo assim: “subscriberform.php”. Depois que sua página for criada e salva, você poderá criar o formulário.

Passo 2: Faça o formulário usando o código.

Nesta etapa, você escreverá o código para criar o formulário.

Se você não tem certeza de como criar formulários em HTML, confira o recurso do HTML Dog para obter uma cartilha sobre o básico.

O código a seguir é o necessário para um formulário básico:

<form method="post" action="subscriberform.php">
<textarea name="message"></textarea>
<input type="submit">
</form>

Como isso é semelhante à redação somente em HTML, essas linhas também criarão um nome para o formulário e uma área para os assinantes digitarem uma mensagem personalizada e enviá-la para você.

Uma diferença importante é a parte action=”subscriberform.php”. Essa parte do código é o que fará com que a página envie o formulário ao ser submetido.

Passo 3: Faça com que o formulário envie um e-mail.

Depois de criar o formulário e adicionar todas as correções adequadas, dependendo de suas preferências de design, é hora de criar a parte do e-mail.

Para isso, você vai rolar até o início da página (bem no começo, antes mesmo de definir o HTML Doctype). Para habilitar o envio de dados no e-mail, temos que adicionar o código que processará os dados. Copie este código ou crie algo semelhante:

<?php
if($_POST["message"]) {
  mail("[email protected]", "Here is the subject line",
  $_POST["insert your message here"]. "From: [email protected]");
}
?>

Tudo dentro da primeira e da última linha dirá à página da Web para fazer essas funções funcionarem como PHP. Esse código também verifica se um assinante usa o formulário. A partir daí, ele verifica se o formulário foi enviado.

Além disso, “correio” envia o formulário preenchido como um e-mail para “[email protected]” e a linha de assunto é a seguinte. Na próxima linha, você pode escrever uma cópia da mensagem de e-mail entre aspas, para ser enviada de qualquer endereço de e-mail que você escolher.

Depois que o formulário é enviado, a página envia os dados para si mesma. Se os dados foram enviados com sucesso, a página os envia por e-mail. O navegador então carrega o HTML da página — o formulário incluído.

Com isso, você tem o código básico necessário para criar o formulário.

Observe que esta é apenas uma maneira de fazer isso. Como alternativa, você também pode criar um formulário usando um construtor e, em seguida, incorporá-lo ao seu site.

Método 3: Criar um formulário de envio de e-mail usando um construtor de formulários

Se você não estiver usando o WordPress para criar seu site e não for experiente em codificação, pode não saber como criar um formulário. Isso é especialmente verdadeiro se o seu CMS não oferecer um editor de página de arrastar e soltar.

Cada uma das ferramentas abaixo permite que você crie um formulário que envie um e-mail sem nenhuma codificação. A melhor parte é que você não precisa alterar os sistemas de gerenciamento de conteúdo se não quiser. Em vez disso, você pode incorporar o formulário em seu site usando o código de incorporação de cada ferramenta.

(Dica profissional: um editor de arrastar e soltar pode tornar muito mais fácil e simples criar um formulário de envio de e-mail. Experimente o CMS Hub. É 100% gratuito!)

1. HubSpot: Melhor construtor de formulários de e-mail em geral

A HubSpot inclui um construtor de formulários no nível gratuito de todos os seus produtos. Como o HubSpot já tem seu e-mail, ele enviará uma mensagem automaticamente quando uma nova entrada for enviada.

O construtor de formulários da HubSpot está vinculado a outras ferramentas da plataforma, incluindo Marketing Hub e CMS Hub. Além disso, você não precisa de nenhum conhecimento técnico especial. Se você deseja estender o formulário para incluir recursos de marketing, também pode fazê-lo.

Por exemplo, você pode criar formulários personalizados que se conectam à sua lista de contatos. Você também pode personalizar esses formulários e acionar e-mails automáticos com base no preenchimento de seus formulários. (Observe que o último requer uma atualização premium.)

Se você quiser saber como receber um e-mail após o envio de um formulário, consulte nosso artigo da Base de conhecimento.

2. Forms.io: Melhor Construtor de Formulários de E-mail Rápido

Forms.io permite que você crie rapidamente um formulário em sua interface de arrastar e soltar. Em seguida, você pode incorporar o formulário em seu site usando um código de incorporação HTML. Você receberá um alerta ou notificação e poderá gerenciar as respostas no back-end da ferramenta.

É grátis para 10 usuários. Se sua empresa precisar de mais assentos, você pode ter acesso por US$ 14,99/mês.

3. JotformName: Melhor e-mail para construtor de vários formulários

Se você espera precisar de mais de um formulário, o Jotform é uma ótima escolha. Ele oferece várias opções para incorporar formulários em seu site: JavaScript, iFrame ou todo o código-fonte do formulário. Você também tem a opção de criar um lightbox ou um formulário pop-up.

O Jotform é gratuito com sua marca. O preço começa em $ 24/mês se você quiser um formulário sem marca d’água.

Confira mais construtores de formulários aqui.

Método 4: Criar um formulário de envio de e-mail usando um plug-in

Se você estiver executando um site WordPress, temos boas notícias: você tem uma infinidade de plugins de criação de formulários disponíveis para você, a maioria dos quais são gratuitos. Todas essas ferramentas enviarão um e-mail ao receber um envio.

1. Plug-in de formulário da HubSpot: Melhor para Geração de Leads

Se você planeja usar seu formulário como uma ferramenta de geração de leads, recomendamos usar o plug-in de formulário da HubSpot. Ele é vinculado diretamente à sua conta da HubSpot, permitindo que você a use em conjunto com o HubSpot CRM, Marketing Hub, Sales Hub e muito mais.

2. WPForms: Melhor para incorporar em qualquer lugar

O WPForms é um construtor de formulários de arrastar e soltar que permite configurá-lo para enviar um e-mail ao receber um envio. Você também pode incorporar o formulário em qualquer lugar do site, incluindo a barra lateral e o rodapé.

3. ARForms: Melhor para Adaptabilidade

O ARForms permite que você receba notificações por e-mail com base nas condições definidas, mas também pode receber notificações por e-mail para todos os envios. Você também pode integrá-lo a outras ferramentas em sua pilha de tecnologia, incluindo HubSpot, PayPal e Google Sheets.

A importância dos formulários HTML que enviam e-mails

Se você deseja converter mais visitantes em leads, coletar informações para sua equipe de vendas ou criar defensores leais da marca, os formulários são essenciais para uma estratégia de entrada.

Se você não tiver um formulário que envie e-mails, poderá estar perdendo mais leads, mais conversões e clientes engajados.

Comece a nivelar seus formulários hoje.

Nota do editor: esta postagem foi publicada originalmente em dezembro de 2019 e foi atualizada para maior abrangência.