Formulários HTML5 funcionais sem PHP nem JS
Já faz um certo tempo que escrevi sobre o magnífico serviço de hospedagem (gratuita) da plataforma Netlify onde para fazer o deploy de uma aplicação web, basta arrastar o diretório do projeto para dentro da plataforma e, em questão de segundos, o site é atualizado automaticamente (isso quando não está integrado ao GitHub, mas isso é assunto para um próximo artigo). Tudo isso com direito a certificado SSL e domínio personalizado.
Inclusive, meu site pessoal e o site da Code Prestige estão ambos hospedados nele.
Ainda não conhece o Netlify Drop? Então confira este artigo!
Mas apesar de todas as facilidades da plataforma, muita gente me procurou para peguntar se o serviço suportava PHP, afinal grande parte dos sites possuem algum formulário de contato/cadastro que usam o método mail() do PHP pra jogar o conteúdo do formulário direto em um e-mail e então enviá-lo. Por padrão, o Netlify realmente não oferece este serviço, NO ENTANTO, há uma funcionalidade disponível que consegue nos ajudar com essa demanda.
Neste artigo vamos entender como funcionam os formulários “automágicos” do Netlify que não usam PHP e que podem ser usados sem escrevermos uma linha de JavaScript.
Versão em Vídeo
Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!
Formulários Auto Gerenciáveis — Criando o Formulário
Para entender como esse serviço funciona, vamos partir de um exemplo básico e prático que representa boa parte das situações em que usamos formulários na internet.
Vamos construir um formulário usando o Bootstrap 4. Para tornar as coisas mais objetivas, usarei o próprio código do componente de formulário presente na documentação do Framework.
O seu visual ficará assim:
O código correspondente é este:
Para configurar um formulário que está no nosso site usando o Netlify, basta fazermos duas coisas:
- Inserir o atributo
data-netlify="true"ou apenasnetlifyna tag do formulário - Inserir o atributo
namecom valores diferentes para cada um dos campos do formulário (input)
Com essas alterações, o código ficará assim:
Com o index.html pronto, precisamos colocá-lo dentro de uma pasta para fazer o seu deploy no Netlify (leia o artigo relacionado para entender melhor este processo). Feito isso, acesse o site com o link que a plataforma oferecer.
Com o site aberto, envie uma submissão usando o formulário.
Como não configuramos nenhum tipo de resposta ao envio do formulário (calma, já chegaremos lá), se tudo estiver certo, você verá esta página:
Formulários Auto Gerenciáveis — Visualizando os Envios
Para visualizar os envios realizados no formulário, temos que voltar ao Dashboard do site dentro do Netlify e procurar pela aba Forms — aqui vale mencionar que esta tela fica só disponível para quem criar conta na plataforma. Mas fiquem tranquilos, é seguro e gratuito — Nela, todos os envios são separados por formulário.
Bem legal, né? Mas ainda é possível ir além. Vamos ver como podemos usar um pouco de JavaScript para deixar essa integração mais interessante.
Configurações Avançadas — AJAX e Sweet Alert 2
Quando falamos em usabilidade, geralmente não é muito interessante fazer os nossos usuários ficarem navegando entre páginas, principalmente se tratando do envio de um simples formulário. E se, ao invés disso, apenas mostrarmos uma mensagem de confirmação? Não ficaria mais interessante?
Podemos fazer isso facilmente integrando o nosso formulário com um pouco de JavaScript e a biblioteca Sweet Alert. Esta última é uma biblioteca muito divertida para criamos alertas. Também já escrevi um artigo bem legal sobre o assunto, vale a pena conferir ;)
Ainda não conhece o Sweet Alert para criar alertas com JavaScript? Então confira este artigo!
Primeiramente vamos alterar o comportamento do formulário na submissão dos dados. Para isso, vamos interceptar este envio usando JavaScript (e um pouquinho de jQuery).
$(document).ready(function($) {
const $formulario = $("#formulario"); $formulario.submit(e => {
e.preventDefault(); // você pode aproveitar este espaço para fazer validações no
// formulário!
const $action = $formulario.attr('action');
const $data = $formulario.serialize();
$.post($action, $data).then(() => { // o alerta ficará aqui });
});});
Com isso estamos pegando os dados do formulário e o enviamos via AJAX. Essa abordagem é bem interessante caso você queria fazer qualquer tipo de validação e/ou interceptar a entrada do usuário. Mas partindo do caso onde o usuário fez tudo direitinho, basta usarmos o Sweet Alert para confirmarmos o envio (leia o artigo relacionado para entender melhor este processo).
$(document).ready(function($) {
const $formulario = $("#formulario");$formulario.submit(e => {
e.preventDefault();
const $action = $formulario.attr('action');
const $data = $formulario.serialize();
$.post($action, $data).then(() => {
Swal.fire({
icon: 'success',
title: 'Mensagem Enviada!',
text: 'Muito obrigado!',
footer: '<a href="/">Voltar para home</a>'
});
});
});});
O resultado final fica muito mais legal!
Código-Fonte
A versão final do código está disponível abaixo.
Conclusão
Formulários em sites na internet é tão comum quanto carros em uma estrada, quase sempre há pelo menos um. Para atender aos usuários de sua plataforma, o Netlify nos apresenta os Netlify Forms, uma maneira fácil, segura e prática de inserir e administrar formulários dentro da Dashboard do serviço. Basta inserir as tags solicitadas e sair usando.
Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br • Facebook, Twitter, Youtube
Siga o autor deste artigo nas redes sociais e troque uma ideia! http://www.diegopinho.com.br • Twitter, LinkedIn
