Como Enviar E-mails de um Site Estático Jekyll

em Ferramentas | Etiquetas: Ferramentas, Development, Jekyll, Email

Sites estáticos, como os gerados pelo Jekyll, não possuem um backend para processar envios de formulário e enviar e-mails diretamente. No entanto, você pode facilmente adicionar essa funcionalidade usando um serviço de terceiros como o Formspree.

Analisando os arquivos do seu projeto, notei que você já utiliza o Formspree em algumas partes do site. Este guia vai detalhar como criar e integrar um formulário de contato simples.

O que é o Formspree?

Formspree é um serviço que atua como um “backend de formulário”. Ele fornece um endpoint (uma URL) para onde você envia os dados do seu formulário HTML. O Formspree recebe esses dados, processa-os e os envia para o seu e-mail, sem que você precise escrever nenhum código de backend.

Passo a Passo para Integrar

1. Crie uma conta no Formspree

Primeiro, acesse formspree.io e crie uma conta gratuita.

2. Crie um novo formulário

  • No painel do Formspree, clique em “+ New form”.
  • Dê um nome ao seu formulário (ex: “Formulário de Contato”).
  • Associe o formulário a um endereço de e-mail para onde as mensagens serão enviadas.
  • O Formspree irá gerar uma URL de endpoint única para o seu formulário. Será algo como https://formspree.io/f/xxxxxxxx.

3. Crie o formulário HTML no seu site Jekyll

Agora, crie o formulário em qualquer página ou post do seu site Jekyll. Você pode criar um arquivo em _includes para reutilizá-lo, como o contact-form.html que já existe no seu projeto.

Aqui está um exemplo de código HTML para um formulário de contato:

<form action="https://formspree.io/f/SUA_URL_AQUI" method="POST">
  <div class="form-group">
    <label for="name">Seu Nome:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Seu E-mail:</label>
    <input type="email" id="email" name="_replyto" required>
  </div>
  <div class="form-group">
    <label for="message">Mensagem:</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Enviar</button>
</form>

Pontos importantes:

  • action: Substitua "https://formspree.io/f/SUA_URL_AQUI" pela URL do endpoint que você criou no Formspree.
  • method="POST": É crucial que o método do formulário seja POST.
  • name attribute: Cada campo (input, textarea) deve ter um atributo name. O Formspree usará esses nomes para estruturar o e-mail que você receberá.
  • name="_replyto": Usar este nome especial para o campo de e-mail permite que você responda diretamente ao e-mail do remetente a partir da sua caixa de entrada.

4. Adicione o formulário à sua página

Se você salvou o código acima em _includes/meu-formulario.html, pode incluí-lo em qualquer página ou post com a seguinte tag do Liquid:

{% include meu-formulario.html %}

5. Teste o envio

Após publicar seu site, envie uma mensagem de teste através do formulário. A primeira vez, você precisará confirmar seu endereço de e-mail no painel do Formspree. Depois disso, todos os envios chegarão diretamente na sua caixa de entrada.

É isso! Com esses passos, qualquer pessoa pode enviar e-mails a partir do seu site estático Jekyll de forma simples e segura.