Processando um Formulário de Contato com Formspree

Quando iniciei meu primeiro estágio como programador, lá por 2002, uma das primeiras atividades que realizei foi criar e processar um formulário de contato. Naquela época era muito comum implementar esse tipo de funcionalidade usando códigos em ASP e PHP. Lembro ter criado um script que recebia os dados do formulário HTML e usava um servidor SMTP para enviar os dados para um e-mail de contato. Ainda hoje, essa é uma forma utilizada para envio de informações de contato. Outra forma que tenho utilizado nos meus projetos é terceirizar o processamento e envio utilizando o Formspree.

Neste tutorial irei demonstrar como utilizar o Formspree para envio de formulários de contato.

Uma das vantagens do Formspree é a possibilidade de usar o recurso mesmo em sites estáticos. Ou seja, mesmo um site hospedado em um servidor sem o recurso de geração de páginas dinâmicas, como PHP, poderá utilizar do recurso.

Criando uma conta

Registre um e-mail válido em https://formspree.io/register

Register for Formspree

(Registro de usuário)

Após o registro, é necessário validar seu e-mail através do link que o serviço envia a você.

Criando o formulário

O Formspree possibilita enviar os dados do seu formulário apontando pra uma URL que pode ser obtida através do menu FORMS no site do Formspree. Lá você também encontrará alguns snippets de formulários tanto em HTML como AJAX, React entre outros. Abaixo um exemplo em HTML:

<form action="https://formspree.io/xyiuisop" method="POST">
  <input type="text" name="name">
  <input type="email" name="_replyto">
  <input type="submit" value="Send">
</form>

Atributo name

Você precisará adicionar o atributo name a cada input do seu formulário. O valor do atributo será o nome do campo exibido no email enviado pelo Formspree.

<form action="//formspree.io/seuemail@dominio.com" method="POST">
    Nome: <input type="text" name="Nome" />
    Email: <input type="text" name="Email" />
    Mensagem: <input type="text" name="Mensagem" />
    <input type="submit" value="Enviar" />
</form>

Valores especiais para name

Abaixo alguns recursos disponíveis utilizando valores específicos para o atributo name:

  • _next

Este input do tipo oculto pode ser usado para redirecionar o usuário após o envio do formulário. Você pode preenchê-lo com a url de uma página de sucesso, por exemplo.

<input type="hidden" name="_next" value="confirmation.html" />
  • _gotcha

O input _gotcha pode ser utilizado para que o Formspree valide que o formulário foi preenchido por um humano. Scripts automatizados normalmente preenchem todos os inputs de um formulário. Assim, caso o input _gotcha tenha algum valor, o Formspree considera que foi preenchido de forma automatizada e assim não envia o para o seu email.

<input type="text" name="_gotcha" style="display:none" />
  • _replyto

Possibilita utilizar a função de resposta dos programas de email.

<input type="text" name="_replyto"/>
  • _cc

Utilizado para enviar cópias da resposta do formulário para outro email.

<input type="hidden" name="_cc" value="outroemail@dominio.com" />
  • _subject

Utilizado para definir o assunto do e-mail que será enviado. Pode ser aberto para preenchimento pelo usuário:

<input type="text" name="_subject" />

ou pré-definido:

<input type="hidden" name="_subject" value="[Formspree] Contato do formulário" />

O Formspree possui um plano gratuito (com limitações) que é suficiente pra grande parte do público. Também oferece planos pagos que amplia as funcionalidades e limites sendo indicado pra aplicações profissionais.

E você já conhecia esse serviço? Deixe seu comentário e contribua com conteúdo.

Até a próxima!