Como Implementar Formulários em Sites Estáticos

Os sites variam em termos de design, finalidade e complexidade, mas geralmente são estáticos ou dinâmicos. Os sites estáticos são pré-renderizados e apresentam o mesmo conteúdo a todos os visitantes. Sua estrutura simples significa que, em geral, são fáceis de gerenciar e têm tempos de carregamento rápidos. Por outro lado, os sites dinâmicos geram conteúdo em tempo real usando linguagens de programação no lado do servidor.

Sites estáticos, por padrão, não oferecem suporte a elementos interativos, como formulários. Isso acontece porque formulários necessitam de funcionalidades de processamento do lado do servidor, como o armazenamento de dados. Contudo, a ausência de suporte para formulários não é o ideal. Formulários são importantes canais de comunicação com os usuários, permitindo a coleta de feedbacks valiosos através de sugestões ou consultas. Essas informações são essenciais para aprimorar a experiência do usuário, possibilitando a personalização do conteúdo.

Este guia o conduzirá pelos passos de criação de um formulário para o seu site estático, adicionando um serviço de gerenciamento de formulários e implantando seu site com a ajuda do serviço de Hospedagem de Site Estático da Kinsta.

Escolha um serviço de gerenciamento de formulários

Um serviço de gerenciamento de formulários atua como um intermediário que coleta e processa dados de formulários em sites estáticos. Esses serviços oferecem a infraestrutura de servidor necessária para gerenciar os envios de formulários. Eles melhoram a funcionalidade e a interatividade dos seus sites, preservando as vantagens de um site estático.

Quando um usuário preenche e envia um formulário, os dados vão para o endpoint do serviço de gerenciamento de formulários. Esse serviço então processa as informações, assegura o armazenamento seguro e envia notificações para os destinatários escolhidos.

Há muitos serviços de formulários disponíveis. Vamos explorar os mais populares.

1. Formspree

O Formspree é um serviço de gerenciamento de formulários fácil de usar que simplifica a adição de formulários e o gerenciamento de envios de formulários em sites estáticos. Ele oferece um plano gratuito com recursos básicos, como 50 envios de formulários por mês, e planos pagos com funcionalidades mais avançadas, incluindo listagem segura e proteção contra spam.

2. Formbucket

O FormBucket oferece uma maneira conveniente de coletar e gerenciar envios de formulários, salvando em “buckets”, cada um com uma URL exclusiva. Você pode definir campos e regras de validação para formulários que se alinham com a marca do seu site na página do painel de controle de fácil utilização do Formbucket.

3. Getform

O Getform é uma plataforma de backend de formulários que oferece uma maneira simples e segura de lidar com envios de formulários. O Getform oferece uma interface de usuário intuitiva para gerenciar envios de formulários, notificações por e-mail e integrações com serviços populares como Slack e Google Sheets.

Comparação dos serviços do Formspree, Formbucket e Getform

Para facilitar a comparação, abaixo está uma tabela que compara os três serviços acima e seus principais recursos:

Ao escolher um serviço de gerenciamento de formulários, você deve considerar a facilidade de integração, os recursos e as funcionalidades desejados, o preço e a compatibilidade com sua plataforma de hospedagem. Avalie os requisitos específicos do seu formulário e compare cada serviço de gerenciamento de formulários para encontrar o mais adequado às suas necessidades.

Configure o serviço de gerenciamento de formulários com o Getform

O uso de um serviço de processamento de formulários, como o Getform, pode simplificar significativamente o gerenciamento de envios de formulários em seu site. Quando um usuário envia um formulário, o Getform assume o processo, eliminando a necessidade de uma API de backend para processar e armazenar esses envios.

Essa integração perfeita permite que você gerencie todas as respostas com eficiência em uma caixa de entrada de mensagens dedicada. Para começar, certifique-se de que você tenha um conhecimento básico de HTML, CSS e JavaScript e siga estas etapas:

1. Registre-se em uma conta do Getform.
2. Navegue até o painel de controle da sua conta Getform e clique no botão + Create.
3. Na caixa de diálogo que aparece, certifique-se de que o Form esteja selecionado. Forneça um nome do endpoint descritivo e selecione o fuso horário apropriado. Em seguida, clique em Create.

   

   O Getform gerará uma URL de endpoint de envio de formulário, que você deve adicionar ao atributo action do elemento do formulário.

Crie seu formulário com HTML e CSS

Agora que você configurou o serviço de tratamento de formulários, pode usar HTML, CSS e JavaScript para criar o formulário.

1. Em seu terminal, crie uma pasta de projeto chamada forms e altere o diretório atual para o diretório do projeto:

   mkdir forms
   cd forms

2. Adicione os seguintes arquivos de projeto:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. Em seguida, crie um formulário HTML. Para os fins deste guia, o código fornecido abaixo ajudará você a criar um formulário que inclua campos de entrada para um nome e um endereço de e-mail, uma área de texto para mensagens e um botão de envio. Você pode adicionar esse código ao seu arquivo index.html:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Navegue até o painel do Getform e copie a URL do endpoint. Em seguida, cole essa URL no atributo action dentro da tag de abertura do formulário no código HTML.
5. Por fim, sinta-se à vontade para adicionar estilos CSS no arquivo styles.css para personalizar o design e a aparência do formulário.

Implemente a validação de dados com JavaScript

A validação de dados verifica se a entrada do usuário atende a critérios específicos e regras de validação antes de processá-la ou armazená-la.

A validação de dados ajuda a evitar o envio de dados incorretos ou mal-intencionados, fornece aos usuários feedback imediato sobre erros de entrada e garante que somente os dados válidos sejam processados posteriormente. Ela desempenha um papel fundamental na manutenção da integridade e da precisão dos dados.

Há várias maneiras de implementar a validação de dados, incluindo o uso de JavaScript para executar a validação do lado do cliente, a validação do lado do servidor ou uma combinação de ambas as abordagens. Para este guia, vamos implementar a validação do lado do cliente para o formulário de contato a fim de garantir que os usuários não enviem campos vazios e que o e-mail fornecido esteja no formato correto.

1. Primeiro, defina a função de validação adicionando o seguinte código ao arquivo script.js:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   A função validateForm() tem duas finalidades: primeiro, ela verifica se os campos nome e mensagem estão vazios e, em seguida, valida o campo e-mail usando uma expressão regular e verifica se o endereço de e-mail está em um formato válido.

   Se os campos estiverem vazios ou o formato do e-mail for inválido, a função será acionada e exibirá uma mensagem de alerta. Por outro lado, se todos os campos do formulário passarem por essas verificações de validação, a função retornará verdadeiro e o formulário será enviado.

   Você também pode adicionar outras regras de validação para garantir a precisão e a integridade dos dados enviados. Por exemplo, você pode verificar o tamanho das entradas do usuário ou impedir que os usuários enviem determinados caracteres na mensagem, ajudando a evitar possíveis vulnerabilidades de segurança, como ataques de injeção.

2. Em seguida, chame a função acima para ativar a validação usando um callback do ouvinte de eventos click. Esse callback aciona a função sempre que um usuário clica no botão submit. Para chamar a função, adicione o seguinte código ao seu arquivo script.js:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Observe que a função preventDefault() está incluída no código para impedir a ação padrão de envio de formulário. Dessa forma, você pode validar o formulário antes de enviar as informações para o Getform.

   Além disso, após a validação e o envio bem-sucedidos, a função resetFormAfterSubmission() é acionada, redefinindo o formulário após um atraso de meio segundo para permitir mais envios.

Implante seu site estático com a Kinsta

A Kinsta oferece uma solução de hospedagem gerenciada, permitindo que você hospede diferentes projetos e bancos de dados da web. Com seu plano gratuito, você pode hospedar até 100 sites estáticos diretamente do GitHub, GitLab ou Bitbucket.

Para implantar seu site estático com a Kinsta, primeiro, envie seus códigos para o provedor Git de sua preferência. Em seguida, siga estas etapas:

1. Faça login no painel MyKinsta.
2. No painel, clique no menu suspenso Adicionar serviço e selecione Site estático.
3. Se você estiver hospedando um projeto pela primeira vez com a Kinsta, selecione e ative seu provedor de serviços Git preferido.
4. Selecione o repositório do seu projeto.
5. Selecione a branch a ser implantada e forneça um nome de site exclusivo.
6. Especifique o caminho raiz do diretório de publicação que contém os arquivos HTML e os ativos para implantação, adicionando um ponto.
7. Por fim, clique em Criar site.

Em alguns segundos, o MyKinsta implantará seu site.

Para integrar perfeitamente o formulário em um site existente, copie e cole o HTML do formulário diretamente na seção desejada do site. Certifique-se de incluir as propriedades CSS associadas e o código JavaScript para garantir um estilo e uma funcionalidade consistentes.

Como alternativa, uma vez que já implantou o formulário separadamente, você pode fornecer aos usuários a URL, como um hiperlink ou um botão, no qual eles podem clicar para acessar o formulário.

Para verificar se o site está funcionando corretamente, acesse a URL fornecida do site. Preencha os campos do formulário conforme solicitado para assegurar que ele está funcionando como deveria. Verifique se o formulário valida corretamente as informações inseridas pelo usuário, mostra alertas de erro quando necessário e envia com sucesso os dados válidos para serem processados posteriormente.

Depois de enviar o formulário, o Getform redirecionará você para uma página de confirmação ou de agradecimento, indicando que o envio foi bem-sucedido.

Para revisar as respostas do formulário, navegue até o painel do Getform e visualize os envios na caixa de entrada de mensagens fornecida.

Resumo

Agora que você implementou o formulário com sucesso, existem inúmeras oportunidades para personalizá-lo. Por exemplo, você pode aprimorar o design e a funcionalidade do formulário estilizando ainda mais com CSS ou com a linguagem de pré-processador de sua preferência e implementando técnicas avançadas de validação.

Além do serviço de Hospedagem de Sites Estáticos, a Kinsta também oferece um serviço de Hospedagem de Aplicativos, projetado para aplicativos mais dinâmicos, como aplicativos web que precisam de processamento no lado do servidor, interações com bancos de dados e outras funcionalidades complexas.

Com acesso a ambos os serviços, os usuários obtêm uma solução de hospedagem abrangente para gerenciar uma série de projetos web em um único ecossistema, desde sites estáticos simples até aplicativos complexos.

Agora você pode transformar seu site estático em uma experiência dinâmica com serviços de manipulação de formulários.Qual serviço você prefere ou tem experiência? Compartilhe conosco nos comentários abaixo.

Jeremy Holcombe Kinsta

Editor de Conteúdo & Marketing na Kinsta, Desenvolvedor Web WordPress e Escritor de Conteúdo. Fora do universo WordPress, eu curto praia, golfe e filmes. Também enfrento problemas de gente alta ;).

• LinkedIn