O que é Netlify?
Netlify é uma plataforma da web que permite implementar facilmente novos projetos da web com fluxos de trabalho fáceis de configurar. Isso inclui a implantação de um site estático, funções lambda e, como falaremos aqui, formulários personalizados.
Seu serviço de formulário funciona como parte do pipeline de construção e implantação. Quando incluímos um formulário com um atributo específico em nossa página, o Netlify irá reconhecer esse formulário e configurá-lo para funcionar.
O que vamos construir?
Vamos construir um formulário de contato que permitirá que as pessoas lhe enviem uma nota através do seu site.
O formulário em si será bastante simples. Como um formulário de contato padrão, pediremos o nome de alguém, endereço de e-mail e uma mensagem.
Vamos construir isso usando HTML simples para demonstrar como funciona e, em seguida, construir com Next.js para criar um formulário em um aplicativo React.
Quanto custa isso?
Os formulários Netlify são gratuitos para começar. Este nível gratuito é limitado a 100 envios de formulários por site por mês, portanto, se você permanecer abaixo dele, será sempre gratuito.
Dito isso, se você exceder o envio de 100 formulários em qualquer site específico, o primeiro nível custará US $ 19 + no momento em que este documento for escrito. Você pode verificar o planos de preços mais recentes no site da Netlify.
Para começar, vamos criar um formulário básico com HTML puro. É uma vitória rápida para demonstrar como isso funciona.
Etapa 1: Criação de um formulário HTML
Para o nosso formulário, podemos realmente usar o que quisermos. Os formulários de contato podem ser tão simples como um endereço de e-mail e um campo de mensagem ou podem incluir uma variedade de opções para ajudar uma empresa a responder a perguntas específicas.
Vamos começar com algo simples. Vamos criar um formulário que pede o nome de alguém, endereço de e-mail e uma mensagem.
Para começar, crie um novo arquivo HTML na raiz do seu projeto. Este arquivo HTML deve incluir a estrutura básica de um documento HTML. Dentro do corpo, vamos adicionar nosso novo formulário:
<form name="contact" method="POST" data-netlify="true"> <p> <label for="name">Name</label> <input type="text" id="name" name="name" /> </p> <p> <label for="email">Email</label> <input type="text" id="email" name="email" /> </p> <p> <label for="message">Message</label> <textarea id="message" name="message"></textarea> </p> <p> <button type="submit">Send</button> </p> </form>No snippet acima, somos:
- Criação de um novo formulário
- O formulário tem um atributo de nome, um método e um
data-netlifyatributo definido paratrue - Criação de 3 campos de formulário com rótulos, cada um identificado com um atributo de nome
- Criação de um botão para enviar o formulário
O que mais queremos notar é o data-netlify atributo e a forma name. Quando o Netlify ler o site, ele verá esses campos e os usará para transformar seu formulário em um formulário que funcione ativamente.
Também adicionarei um pouco de CSS para tornar os rótulos um pouco mais consistentes. Você pode opcionalmente adicionar isso ao <head> do documento:
<style> body { font-family: sans-serif; } label { display: block; margin-bottom: .2em; }</style>E neste ponto, devemos ter um formulário básico!
Agora você vai querer colocar este formulário no GitHub ou em seu provedor Git com suporte da Netlify favorito e estaremos prontos para a próxima etapa.
Etapa 2: Configurando um novo formulário com Netlify
Uma vez que nosso formulário é enviado ao nosso provedor Git, podemos sincronizá-lo com o Netlify.
Primeiro crie uma conta ou use uma conta existente com Netlify e clique no Novo site do Git botão.
Aqui, selecione o provedor Git que você usou. estou a usar GitHub no meu exemplo.
Depois de selecionar seu provedor Git, ele solicitará que você autorize o acesso para que o Netlify possa encontrar seu repositório Git.
Depois de conectar sua conta com sucesso, você deverá ver agora uma lista dos repositórios aos quais forneceu acesso. Encontre o repositório ao qual você adicionou seu formulário e selecione-o.
Se você estiver me acompanhando, nosso formulário é HTML puro, ou seja, não deve haver etapas de construção ou nenhum diretório especial em que seja publicado. Mas sinta-se à vontade para ajustar essas configurações se você fez algo diferente.
Agora clique Implantar site o que abrirá uma nova página no Netlify e em nenhum momento seu site será implantado com sucesso.
Por fim, clique no URL na parte superior do painel do projeto Netlify que termina em netlify.app. Depois de carregado, você verá seu formulário!
Etapa 3: visualizar os envios de formulários
Agora que temos nosso formulário, queremos ver as respostas.
Para começar, adicione algumas informações ao seu formulário e clique em enviar.
Depois de enviar, você notará que é levado a uma página do Netlify que informa que o formulário foi enviado com sucesso.
Agora você pode voltar para o painel do projeto Netlify e rolar um pouco para baixo, onde agora você pode ver uma caixa com Envios de formulários recentes bem como seu novo envio.
Parte 2: Adicionando um formulário Netlify personalizado a um aplicativo Next.js React
Se o formulário for viver por si só e não fazer parte de um site maior, há muitas vantagens em deixar o formulário como HTML puro. Mas, frequentemente, queremos que nosso formulário de contato faça parte de nosso site ou aplicativo.
Aqui, veremos como adicionar um formulário a um Next.js aplicativo.
Nota: nossa demonstração de uso de Next.js é um aplicativo renderizado estaticamente. Se você estiver carregando o lado do cliente do formulário, o que significa que o HTML subjacente não inclui o formulário, verifique as notas no final desta página para obter mais informações sobre as soluções.
Etapa 0: Criando um aplicativo Next.js
Para começar, precisamos de um aplicativo. Vamos usar Next.js, pois podemos facilmente criar um novo aplicativo do zero.
Para fazer isso, você pode navegar até onde deseja criar o aplicativo e executar:
yarn create next-app [project-name]# ornpx create-next-app [project-name]Vou nomear meu projeto my-nextjs-netlify-form.
Depois que o Next.js terminar de instalar as dependências, ele fornecerá instruções para navegar até o diretório do projeto e iniciar o servidor de desenvolvimento.
E depois de correr yarn dev ou npm run dev, você deve estar pronto para usar seu aplicativo Next.js:
Etapa 1: Adicionar um formulário HTML a um aplicativo Next.js.
Nossa Etapa 1 será muito semelhante à Parte 1.
Dentro de pages/index.js, queremos encontrar nosso wrapper de grade e usaremos isso para adicionar nosso formulário.
Encontrar <div className={styles.grid}> e substitua todo o bloco pelo seguinte:
<div className={styles.grid}> <div className={styles.card}> <form name="contact" method="POST" data-netlify="true"> <p> <label htmlFor="name">Name</label> <input type="text" id="name" name="name" /> </p> <p> <label htmlFor="email">Email</label> <input type="text" id="email" name="email" /> </p> <p> <label htmlFor="message">Message</label> <textarea id="message" name="message"></textarea> </p> <p> <button type="submit">Send</button> </p> </form> </div></div>Aqui está o que estamos fazendo:
- Estamos aproveitando a grade existente do Next.js
- Também estamos aproveitando o cartão existente que incluiremos nosso formulário em
- Dentro do cartão, estamos colando exatamente o mesmo formulário HTML da Parte 1
Se recarregarmos a página, agora podemos ver nosso formulário dentro de um cartão, assim:
Agora, antes de prosseguirmos, queremos fazer 2 coisas.
Primeiro, porque estamos criando este formulário em um aplicativo JavaScript, Netlify recomenda que adicionamos uma entrada oculta com nosso nome de formulário.
Dentro do nosso formulário, adicione a seguinte entrada na parte superior do elemento do formulário:
<input type="hidden" name="form-name" value="contact" />Certifique-se de que o valor dessa entrada seja igual ao nome do seu formulário.
Em segundo lugar, como o cartão que estamos reutilizando se destina a uma lista de links, Next.js inclui alguns efeitos de foco. Isso torna o uso do formulário confuso, então vamos remover aqueles
Remova o seguinte de styles/Home.module.css:
.card:hover,.card:focus,.card:active { color: #0070f3; border-color: #0070f3;}Para obter uma etapa extra de bônus, atualizarei o título da minha página para “Contate-me” e removerei a descrição. Sinta-se à vontade para fazer o que quiser.
E quando estiver pronto, como antes, adicione-o como um novo repositório ao GitHub ou ao seu provedor Git favorito.
Etapa 2: Configurar e implantar seu aplicativo Next.js para Netlify
A implantação de nosso aplicativo no Netlify será muito semelhante, mas antes de chegarmos lá, precisamos configurar nosso aplicativo Next.js para poder exportar na construção.
Em nosso aplicativo Next.js, dentro do package.json arquivo, queremos atualizar o build script para:
"build": "next build && next export",Agora, quando você executa o build script, ele irá compilar o aplicativo em HTML, CSS e JS estático dentro do out diretório. Isso nos permitirá implantá-lo no Netlify. Você pode até mesmo tentar localmente em sua máquina, se desejar.
Com essa mudança, comprometa-a e envie-a ao seu provedor Git.
Em seguida, a implantação do aplicativo será semelhante à Parte 1. A única diferença é porque temos um aplicativo Next.js, precisamos adicionar nossas etapas de construção.
Para começar, queremos conectar nosso provedor Git como na Parte 1.
Assim que chegarmos à página Deploy Settings, queremos configurar nosso comando Build e nosso diretório Publish.
Nosso Comando de construção será yarn build ou npm run build dependendo de qual gerenciador de pacotes você usou e o Publicar diretório será out.
Depois disso, clique Implantar site, e ele começará como antes.
Assim que a implantação for concluída, estaremos prontos para abrir o aplicativo.
E assim que abrirmos nosso aplicativo, podemos testar nosso formulário preenchendo-o e clicando em enviar.
Semelhante a antes, vamos pousar em uma página de sucesso do Netlify. Mas se voltarmos e olharmos dentro de nosso painel do Netlify, veremos nosso envio!
Bônus: mantenha as pessoas em seu site com uma mensagem de sucesso
Outro recurso interessante com os formulários do Netlify é que ele permite que você configure o seu formulário para manter as pessoas no seu site, configurando o formulário diretamente na página.
Você tem muitas opções aqui, seja redirecionar alguém para uma nova página ou configurar mensagens na página de onde foi enviado.
Para esta demonstração, vamos configurar um parâmetro de URL que podemos detectar para mostrar uma mensagem de sucesso se vermos esse parâmetro.
Para fazer isso, em seu formulário HTML, adicione o seguinte atributo:
action="/?success=true"Isso dirá ao Netlify que queremos permanecer na página inicial (já que temos apenas uma página), mas aplicar o parâmetro de URL para que possamos detectá-lo em nosso aplicativo.
Em seguida, podemos usar o useState e useEffect ganchos para ver este parâmetro e atualizar a página.
Na parte superior do arquivo, vamos importar estes ganchos:
import { useState, useEffect } from 'react';Dentro de nosso componente Home na parte superior, vamos adicionar nosso estado:
const [success, setSuccess] = useState(false);E para detectar o parâmetro de URL, podemos usar o useEffect gancho:
useEffect(() => { if ( window.location.search.includes('success=true') ) { setSuccess(true); }}, []);Nota: esta é uma maneira simples de obter este resultado para a demonstração. Se você tiver um aplicativo mais complicado, convém nomear o parâmetro com algo mais lógico e analisar corretamente os parâmetros de URL para o valor.
O que isso está fazendo é que quando o componente renderizar, ele irá disparar useEffect gancho, verificando os parâmetros no URL e procurando success=true. Se encontrar, ele atualizará nosso success variável de estado para true!
A seguir, sob o título da nossa página (<h1>), vamos adicionar o seguinte snippet:
{success && ( <p style={{ color: 'green'}}> Successfully submitted form! </p>)}Aqui estamos olhando para ver se success é verdadeiro e, se for, incluímos uma linha de texto informando que o formulário foi enviado com sucesso.
Embora não seja possível enviar seu formulário localmente, você pode testar isso visitando seu aplicativo executado localmente com o ?success=true Parâmetro de URL como:
http://localhost:3000/?success=true
Finalmente, você pode enviar essas mudanças para o seu provedor Git e o Netlify irá reconstruir automaticamente o seu site.
E quando terminar, você pode enviar seu formulário como antes e ver a mensagem de sucesso.
E veja que nosso formulário ainda está sendo enviado!
Formulários Netlify e código do lado do cliente
Uma coisa a ser observada com a solução da Netlify é que isso só funciona “simplesmente” para páginas HTML estáticas.
Se a sua página usa JavaScript para gerenciar o conteúdo dessa página, como não adicionar um formulário antes de a página carregar, você precisará verificar a documentação do Netlify sobre como fazer isso funcionar com um atributo de formulário adicional.
Netlify também dá um exemplo de como você pode envie seu formulário dinamicamente com JavaScript para que você possa criar uma experiência personalizada em seu aplicativo.
O que mais você pode fazer?
Configurando fluxos de trabalho avançados com outras ferramentas
O Netlify permite a integração com outras ferramentas para permitir que você organize os envios de formulários. Notavelmente, Netlify funciona com Zapier, o que significa que você pode aceitar os envios recebidos e fazer o que quiser com eles.
https://docs.netlify.com/forms/notifications/
Prevenção de spam com reCAPTCHA
O spam também é uma coisa real. Você não quer que sua caixa de entrada seja inundada com spam, então você pode aproveitar as vantagens do campo Honeypot integrado do Netlify ou eles orientam você sobre como adicionar o reCAPTCHA 2.
https://docs.netlify.com/forms/spam-filters/
