Iniciando a campanha que comentei no tópico de ontem, o que tenho pra compartilhar por aqui hoje é algo bem bestinha mas que descobri recentemente e achei interessante compartilhar.
Tou desenvolvendo um site estático (sem interação com banco de dados) para um amigo meu, da escolinha de educação infantil que ele tem. Inclusive é um dos meus projetos paralelos que resolvi tocar pra frente nessa quarentena e tá quase no final. Mas esse exemplo vale pra qualquer site estático, como o site de uma clínica médica, clínica de psicologia, academia, etc.
Mas algo bem comum em sites institucionais como o site de uma escolinha infantil é a parte de "Fale Conosco", na qual há um formulário para a pessoa inserir alguns dados pessoais como nome, e-mail e uma mensagem e o dono do empreendimento conseguir receber essa mensagem e entrar em contato com a pessoa caso seja necessário.
Ao chegar nessa parte do desenvolvimento fiquei me perguntando como fazer com que um site estático, só com HTML, CSS e JavaScript no lado do cliente poderia enviar uma mensagem para um email cadastrado sem um servidor por trás, sem uma linguagem de programação pegando essa mensagem e enviando para o email.
Bem, decidi que usar um servidor por trás só pra mandar um email não era opção porque eu teria que subir o site em outro serviço diferente de onde o site tá no ar agora, que é o GitHub pages, que só faz o deploy de páginas estáticas, e também porque era "too much" usar uma linguagem de programação só pra mandar um email.
Pesquisei e vi que existem diversas opções disponíveis. Umas mais complicadas, que incluem usar um servidor por trás, e outras mais simples.
A mais simples que achei foi usando o serviço do FormSpree (
Custom Forms with No Server Code | Formspree)
O negócio é simples demais. Basta criar uma conta, dentro dele criar um "new form", inserir o nome do formulário
Criando o form agora, ele vai mostrar uma página mostrando o endpoint que você irá inserir dentro do atributo action na tag form no HTML (e quem não sabe nada de form, tudo bem, tem tópico aqui no site sobre a parte básica deles:
1.3 - Web - Criando formulários - Tecnologia - Bastter.com), e ainda sugere uma formatação básica para o form:
<form
action="Custom Forms with No Server Code | Formspreexnqzwqav"
method="POST"
>
<label>
Your email:
<input type="text" name="_replyto">
</label>
<label>
Your message:
<textarea name="message"></textarea>
</label>
<!-- your other form fields go here -->
<button type="submit">Send</button>
</form>
O código acima vai gerar um form assim:
Que tá bem horroroso mas falta estilizar com CSS.
O que o formspree pede é apenas que cada input tenha um atributo "name", que na hora que alguém mandar algum contato lá pelo site você receberá um email assim:
E pra quem acha que é importante ter um banco de dados das mensagens, o formspree também faz isso, armazenando as mensagens que já foram enviadas anteriormente:
Agora sempre que alguém mandar um recado no seu site você receberá um email e poderá ler as mensagens facilmente e entrar em contato com o cliente caso seja necessário. E tudo isso sem um servidor por trás, sem um banco de dados, que muitas vezes não é necessário e até barateia a hospedagem do site, já que hoje em dia temos opções de hospedagem gratuita de sites estáticos como a que estou usando, o GitHub pages.
O serviço do formspree é gratuito para até 50 interações do formulário por mês. Como no meu caso acho que não acontecem mais de 50 interações por mês ele já quebra o galho. Se forem mais de 50 interações dá pra usar mas o serviço pago deles. Se fosse esse meu caso eu procuraria outra alternativa para não deixar o produto mais caro para o cliente.
Enfim, era só uma dica que achei interessante e que me salvou de forma bem simples e gratuita para entregar esse site para meu amigo de forma funcional.
