Formulário em sites estáticos

Quem disse que você não pode? Agora seu site estático poderá enviar emails tambem.

A problemática todo mundo já conhece, em sites estáticos não é possivel enviar emails pelo motivo de não ter uma linguagem backend para processar a informação.
Errado: Você sempre pode, basta tercerizar a tarefa para outro servidor. :)

A dica de hoje vai para o formspree. Um serviço gratuito onde você pode jogar a responsabilidade processar o formulário e encaminhar os emails para você. A parte melhor é que você não precisa nem se registrar, não precisa pagar, é só usar.

Com apenas poucos passos você consegue facilmente fazer funcionar em seu site. ç

Construindo o formulário

  1. Crie um formulário semelhante ao abaixo (Troque [email protected] pelo email que irá receber os contatos):
    1
    2
    3
    4
    
    <form action="https://formspree.io/[email protected]"
                                      method="POST">
        <input type="submit" value="Send">
    </form>
    
  2. Dentro do formulário você poderá incluir quantos input, select e textarea quiser, desde que possua o atributo name. Caso contrário os dados do campo não irá funcionar corretamente.
    Veja nosso exemplo abaixo.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    <form action="https://formspree.io/[email protected]"
                                      method="POST">
        <div class="form-group">
            <label for="nome">Nome:</label>
            <input type="text" name="nome" id="nome" class="form-control">
        </div>
        <div class="form-group">
            <label for="_replyto">Email:</label>
            <input type="email" id="_replyto" name="_replyto" class="form-control">
        </div>
        <div class="form-group">
            <label for="_subject">Assunto:</label>
            <select name="_subject" id="_subject">
                <option>Testar email</option>
                <option>Ver se funciona</option>
                <option>Pedido de ajuda</option>
            </select>
        </div>
        <div class="form-group">
            <label for="mensagem">Mensagem:</label>
            <textarea name="mensagem" id="mensagem" cols="30" rows="10" class="form-control"></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-default">Enviar</button>
        </div>
    </form>
    
  3. Envie um email de teste, no primeiro envio irá aparecer uma tela semelhante a tela abaixo:

    formspree - confirme seu email

  4. Vá até seu email e clique em Confirm Form para ativar o serviço

    formspree - email de confirmação

  5. Se tudo estiver certo deverá aparecer uma mensagem igual a mensagem abaixo:

    formspree - email confirmado

  6. Faça um novo teste. Se tudo estiver configurado corretamente você deverá ver a mensagem abaixo:

    formspree - formulário enviado

  7. Verifique seu email. Você deverá receber o email com as informações preenchidas.

Configurações avançadas

Como falado anteriormente, você pode criar qualquer campo que quiser, mas o sistema aceita alguns campos por padrão os quais tomam certos comportamentos na hora do envio.
Nenhum deles é obrigatório, mas recomendo a implementação de todos.

_replyto

Nesse campo deve conter o email pessoa que estará te enviando email.

<input type="text" name="_replyto" placeholder="Digite seu email" />

_next

Esse campo recomendo deixar como campo oculto, ele deve conter o endereço da sua página de agradecimento.

<input type="hidden" name="_next" value="https://sounoob/com.br/contato/obrigado" />

_subject

Nesse campo deve conter o assunto do email, pode deixar oculto ou livre para o usuário escolher. Fica a seu critério.

<input type="hidden" name="_subject" value="Novo contato do site" />

_cc

Esse campo deve estar oculto, o sistema usará o valor dele para enviar uma cópia de cada contato.
Nesse campo você poderá passar multiplos emails, basta colocar uma virgula separando cada email

<input type="hidden" name="_cc" value="[email protected],[email protected]" />

_gotcha

Esse campo irá reduzir os spans que você eventualmente pode receber.
Basta copiar e colar do jeito que está abaixo

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

É de graça mesmo? Possui limitações?

Sim, o serviço é gratuito, mas possui algumas limitações. Uma delas é 1000 envios por mês, o que para a maioria das pessoas é algo relativamente tranquilo.

Agora é a vez de vocês

Qual solução vocês utilizam para fazer funcionar o formulário de contato em seu site?
Já conheciam o formspree?
Conhecem outra solução melhor?