Foi-se o tempo em que para criar um formulário de contato no seu website você precisava utilizar linguagens como php e javascript.

Depois de sofrer algumas vezes tentando criar formulários sendo uma desenvolvedora de front-end que não tem muito conhecimento de backend, encontrei um serviço que mudou minha vida para melhor: o formspree <3

O formspree é uma ferramenta open source criada pela comunidade e é surpreendentemente simples de utilizar! Basta conectar a URL do formspree no seu formulário e eles encaminham as respostas que você receber para o seu e-mail. Sem PHP, sem JavaScript e sem sequer signup. Encontrei a ferramenta ideal para criar websites estáticos. E o melhor: é grátis enquanto você receber até 1000 respostas por mês \o/

Passo 1 - Crie o código HTML do seu formulário e estilize o CSS como quiser.

Você pode copiar do exemplo deles:

<form action="https://formspree.io/your@email.com"
      method="POST">
    <input type="text" name="nome">
    <input type="email" name="_replyto">
    <input type="submit" value="Enviar">
</form>

Passo 2 - Configure seu formulário para conectar com seu e-mail

Substitua o atributo action do seu form pelo seu e-mail:

action="https://formspree.io/seu@email.com"

<form action="https://formspree.io/seu@email.com"
      method="POST">
    <input type="text" name="nome">
    <input type="email" name="_replyto">
    <input type="submit" value="Enviar">
</form>

Passo 3 - Adicione um atributo "name" para todos os campos do seu formulário

Verifique se todos os elementos <input>, <select> e <textarea> do seu formulário possuem o atributo name para que você possa receber todos os dados que foram preenchidos.

Passo 4 - Envie uma vez o formulário e confirme seu e-mail

Publique seu site na habemus (para que o formspree funcione, seu site deve estar online em um servidor), acesse seu site e envier (submit) o formulário uma primeira vez.

A primeira resposta mostrará uma mensagem e enviará um e-mail para que você confirme seu endereço.

Mensagem de confirmação do email no formspree

Mensagem de confirmação do e-mail que surge após o primeiro envio de uma resposta ao formulário.

Se você possuir várias urls para o mesmo formulário, você deverá confirmar seu e-mail mais vezes (uma vez para cada url diferente).

Passo 5 - Tudo pronto, receba os e-mails

A partir da confirmação, sempre que alguém enviar uma nova mensagem através do seu formulário, o formspree te enviará um e-mail com as respostas.

Mensagem de confirmação do email no formspree

Mensagem de e-mail confirmado. A partir dessa confirmação, todas as respostas ao formulário serão enviadas para o e-mail.

Funcionalidades extra

Se fosse só por isso, o formspree já seria incrível, mas ele ainda possui configurações um pouco mais avançadas que possibilitam funcionalidades muito úteis! Essas configurações especiais devem ser incluídas no atributo "name" dos inputs. Veja os exemplos:

_replyto or email

Este valor é utilizado para o campo de destinatário do seu e-mail quando você responde à mensagem recebida. Dessa forma você pode responder à pessoa que respondeu ao formulário diretamente do e-mail que o formspree te envia com a mensagem dela.

_next

Depois de responder ao formulário, o usuário visualiza esta página de confirmação padrão do formspree.

Página de confirmação padrão

Página de confirmação padrão após responder ao formulário.

Você pode definir uma url alternativa para esta página de confirmação.

<input type="hidden" name="_next" value="projeto/obrigada.html" />

_subject

Valor utilizado para o assunto do e-mail que o formspree enviará com cada resposta ao formulário.

<input type="hidden" name="_subject" value="New submission!" />

_cc

Este valor é utilizado para o campo cc ("com cópia") do e-mail. Assim, você pode enviar uma cópia de cada resposta para outros e-mails.

<input type="hidden" name="_cc" value="another@email.com" />

Se você quiser enviar cc para vários e-mails, coloque a lista de e-mails, separando por vírgulas.

<input type="hidden" name="_cc" value="outro@email.com,aindaoutro@email.com" />

_format

Este valor permite a você adicionar texto aos e-mails com as respostas. Geralmente é utilizado para indicar versões do seu website.

<input type="hidden" name="_format" value="plain" />

_gotcha

Este campo é uma "pegadinha" para evitar spam por respostas automáticas. Se um valor for fornecido pelo usuário, o envio será ignorado. Para isso, o input deve ser escondido com CSS.

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

O formspree ainda possibilita a você fazer o formulário via Ajax, mas isso é assunto para um próximo post :)

Este tutorial foi construído com base no site oficial do formspree.