{"id":66508,"date":"2024-01-19T11:39:39","date_gmt":"2024-01-19T14:39:39","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=66508&preview=true&preview_id=66508"},"modified":"2024-01-25T05:41:04","modified_gmt":"2024-01-25T08:41:04","slug":"formularios-de-sites-estaticos","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/","title":{"rendered":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos"},"content":{"rendered":"

Os sites variam em termos de design, finalidade e complexidade, mas geralmente s\u00e3o est\u00e1ticos ou din\u00e2micos. Os sites est\u00e1ticos<\/a> s\u00e3o pr\u00e9-renderizados e apresentam o mesmo conte\u00fado a todos os visitantes. Sua estrutura simples significa que, em geral, s\u00e3o f\u00e1ceis de gerenciar e t\u00eam tempos de carregamento r\u00e1pidos. Por outro lado, os sites din\u00e2micos geram conte\u00fado em tempo real usando linguagens de programa\u00e7\u00e3o<\/a> no lado do servidor.<\/p>\n

Sites est\u00e1ticos, por padr\u00e3o, n\u00e3o oferecem suporte a elementos interativos, como formul\u00e1rios. Isso acontece porque formul\u00e1rios necessitam de funcionalidades de processamento do lado do servidor, como o armazenamento de dados. Contudo, a aus\u00eancia de suporte para formul\u00e1rios n\u00e3o \u00e9 o ideal. Formul\u00e1rios s\u00e3o importantes canais de comunica\u00e7\u00e3o com os usu\u00e1rios, permitindo a coleta de feedbacks valiosos atrav\u00e9s de sugest\u00f5es ou consultas. Essas informa\u00e7\u00f5es s\u00e3o essenciais para aprimorar a experi\u00eancia do usu\u00e1rio, possibilitando a personaliza\u00e7\u00e3o do conte\u00fado.<\/p>\n

Este guia o conduzir\u00e1 pelos passos de cria\u00e7\u00e3o de um formul\u00e1rio para o seu site est\u00e1tico, adicionando um servi\u00e7o de gerenciamento de formul\u00e1rios e implantando seu site com a ajuda do servi\u00e7o de Hospedagem de Site Est\u00e1tico da Kinsta<\/a>.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Escolha um servi\u00e7o de gerenciamento de formul\u00e1rios<\/h2>\n

Um servi\u00e7o de gerenciamento de formul\u00e1rios atua como um intermedi\u00e1rio que coleta e processa dados de formul\u00e1rios em sites est\u00e1ticos. Esses servi\u00e7os oferecem a infraestrutura de servidor necess\u00e1ria para gerenciar os envios de formul\u00e1rios. Eles melhoram a funcionalidade e a interatividade dos seus sites, preservando as vantagens de um site est\u00e1tico.<\/p>\n

Quando um usu\u00e1rio preenche e envia um formul\u00e1rio, os dados v\u00e3o para o endpoint do servi\u00e7o de gerenciamento de formul\u00e1rios. Esse servi\u00e7o ent\u00e3o processa as informa\u00e7\u00f5es, assegura o armazenamento seguro e envia notifica\u00e7\u00f5es para os destinat\u00e1rios escolhidos.<\/p>\n

H\u00e1 muitos servi\u00e7os de formul\u00e1rios dispon\u00edveis. Vamos explorar os mais populares.<\/p>\n

1. Formspree<\/h3>\n

O Formspree<\/a> \u00e9 um servi\u00e7o de gerenciamento de formul\u00e1rios f\u00e1cil de usar que simplifica a adi\u00e7\u00e3o de formul\u00e1rios e o gerenciamento de envios de formul\u00e1rios em sites est\u00e1ticos. Ele oferece um plano gratuito com recursos b\u00e1sicos, como 50 envios de formul\u00e1rios por m\u00eas, e planos pagos com funcionalidades mais avan\u00e7adas, incluindo listagem segura e prote\u00e7\u00e3o contra spam.<\/p>\n

2. Formbucket<\/h3>\n

O FormBucket<\/a> oferece uma maneira conveniente de coletar e gerenciar envios de formul\u00e1rios, salvando em “buckets”, cada um com uma URL exclusiva. Voc\u00ea pode definir campos e regras de valida\u00e7\u00e3o para formul\u00e1rios que se alinham com a marca do seu site na p\u00e1gina do painel de controle de f\u00e1cil utiliza\u00e7\u00e3o do Formbucket.<\/p>\n

3. Getform<\/h3>\n

O Getform<\/a> \u00e9 uma plataforma de backend de formul\u00e1rios que oferece uma maneira simples e segura de lidar com envios de formul\u00e1rios. O Getform oferece uma interface de usu\u00e1rio intuitiva para gerenciar envios de formul\u00e1rios, notifica\u00e7\u00f5es por e-mail e integra\u00e7\u00f5es com servi\u00e7os populares como Slack e Google Sheets.<\/p>\n

Compara\u00e7\u00e3o dos servi\u00e7os do Formspree, Formbucket e Getform<\/h3>\n

Para facilitar a compara\u00e7\u00e3o, abaixo est\u00e1 uma tabela que compara os tr\u00eas servi\u00e7os acima e seus principais recursos:<\/p>\n\n\n\n\n\n\n\n\n\n
Recurso<\/strong><\/td>\nFormspree<\/strong><\/td>\nFormbucket<\/strong><\/td>\nGetform<\/strong><\/td>\n<\/tr>\n
Pre\u00e7os<\/strong><\/td>\nUm plano gratuito e planos pagos com pre\u00e7os de acordo com o uso e o armazenamento<\/td>\nUma avalia\u00e7\u00e3o gratuita de 14 dias e planos pagos com pre\u00e7os de acordo com o uso e o armazenamento<\/td>\nUm plano gratuito e planos pagos com pre\u00e7os de acordo com o uso e o armazenamento<\/td>\n<\/tr>\n
N\u00famero de envios de formul\u00e1rios inclu\u00eddos<\/strong><\/td>\nVaria de acordo com o plano de pre\u00e7os selecionado<\/td>\nVaria de acordo com o plano de pre\u00e7os selecionado<\/td>\nVaria de acordo com o plano de pre\u00e7os selecionado<\/td>\n<\/tr>\n
Marca personalizada<\/strong><\/td>\nSim<\/td>\nSim<\/td>\nSim<\/td>\n<\/tr>\n
Prote\u00e7\u00e3o contra spam<\/strong><\/td>\nSim<\/td>\nSim<\/td>\nSim<\/td>\n<\/tr>\n
Upload de arquivos<\/strong><\/td>\nSim, com um plano pago<\/td>\nN\u00e3o<\/td>\nSim<\/td>\n<\/tr>\n
Integra\u00e7\u00f5es de terceiros<\/strong><\/td>\nZapier, webhooks, Google Sheets, MailChimp e muito mais<\/td>\nWebhooks<\/td>\nZapier, Slack, Google<\/span> Sheets, Airtable, Mailchimp, Twilio e muito mais<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Ao escolher um servi\u00e7o de gerenciamento de formul\u00e1rios, voc\u00ea deve considerar a facilidade de integra\u00e7\u00e3o, os recursos e as funcionalidades desejados, o pre\u00e7o e a compatibilidade com sua plataforma de hospedagem. Avalie os requisitos espec\u00edficos do seu formul\u00e1rio e compare cada servi\u00e7o de gerenciamento de formul\u00e1rios para encontrar o mais adequado \u00e0s suas necessidades.<\/p>\n

Configure o servi\u00e7o de gerenciamento de formul\u00e1rios com o Getform<\/h2>\n

O uso de um servi\u00e7o de processamento de formul\u00e1rios, como o Getform, pode simplificar significativamente o gerenciamento de envios de formul\u00e1rios em seu site. Quando um usu\u00e1rio envia um formul\u00e1rio, o Getform assume o processo, eliminando a necessidade de uma API de backend para processar e armazenar esses envios.<\/p>\n

Essa integra\u00e7\u00e3o perfeita permite que voc\u00ea gerencie todas as respostas com efici\u00eancia em uma caixa de entrada de mensagens dedicada. Para come\u00e7ar, certifique-se de que voc\u00ea tenha um conhecimento b\u00e1sico de HTML<\/a>, CSS<\/a> e JavaScript<\/a> e siga estas etapas:<\/p>\n

    \n
  1. Registre-se<\/a> em uma conta do Getform.<\/li>\n
  2. Navegue at\u00e9 o painel de controle da sua conta Getform e clique no bot\u00e3o + Create<\/strong>.<\/li>\n
  3. Na caixa de di\u00e1logo que aparece, certifique-se de que o Form\u00a0<\/strong>esteja selecionado. Forne\u00e7a um nome do endpoint descritivo e selecione o fuso hor\u00e1rio apropriado. Em seguida, clique em Create<\/strong>.\n
    \"A
    A caixa de di\u00e1logo de cria\u00e7\u00e3o de URL de endpoint para submiss\u00e3o de formul\u00e1rios do Getform.<\/figcaption><\/figure>\n

    O Getform gerar\u00e1 uma URL de endpoint de envio de formul\u00e1rio, que voc\u00ea deve adicionar ao atributo action<\/code> do elemento do formul\u00e1rio.<\/li>\n<\/ol>\n

    Crie seu formul\u00e1rio com HTML e CSS<\/h3>\n

    Agora que voc\u00ea configurou o servi\u00e7o de tratamento de formul\u00e1rios, pode usar HTML<\/a>, CSS<\/a> e JavaScript<\/a> para criar o formul\u00e1rio.<\/p>\n

      \n
    1. Em seu terminal, crie uma pasta de projeto chamada forms<\/strong> e altere o diret\u00f3rio atual para o diret\u00f3rio do projeto:\n
      mkdir forms\ncd forms<\/code><\/pre>\n<\/li>\n
    2. Adicione os seguintes arquivos de projeto:\n
      #unix-based systems\ntouch index.html styles.css script.js \n\n#windows\necho. > index.html & echo. > styles.css & echo. > script.js<\/code><\/pre>\n<\/li>\n
    3. Em seguida, crie um formul\u00e1rio HTML. Para os fins deste guia, o c\u00f3digo fornecido abaixo ajudar\u00e1 voc\u00ea a criar um formul\u00e1rio que inclua campos de entrada para um nome e um endere\u00e7o de e-mail, uma \u00e1rea de texto para mensagens e um bot\u00e3o de envio. Voc\u00ea pode adicionar esse c\u00f3digo ao seu arquivo index.html<\/strong>:\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Contact Form<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1 class=\"form-title\">Contact Us<\/h1>\n        <form class=\"contact-form\" name=\"contactForm\" action=\"<Getform URL>\" method=\"POST\">\n            <div class=\"input-group\">\n                <label for=\"name\" class=\"form-label\">Name:<\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" class=\"form-input\" required>\n\n                <label for=\"email\" class=\"form-label\">Email:<\/label>\n                <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" required>\n\n                <label for=\"message\" class=\"form-label\">Message:<\/label>\n                <textarea id=\"message\" name=\"message\" class=\"form-textarea\" rows=\"4\" required>\n                <\/textarea>\n            <\/div>\n\n            <div class=\"form-control\">\n                <button type=\"submit\" id=\"submitBtn\" class=\"form-submit\">Submit<\/button>\n            <\/div>  \n        <\/form>\n    <\/div>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/li>\n
    4. Navegue at\u00e9 o painel do Getform e copie a URL do endpoint. Em seguida, cole essa URL no atributo action<\/code> dentro da tag de abertura do formul\u00e1rio no c\u00f3digo HTML.<\/li>\n
    5. Por fim, sinta-se \u00e0 vontade para adicionar estilos CSS no arquivo styles.css<\/strong> para personalizar o design e a apar\u00eancia do formul\u00e1rio.<\/li>\n<\/ol>\n
      Implemente a valida\u00e7\u00e3o de dados com JavaScript<\/h2>\n
      A valida\u00e7\u00e3o de dados verifica se a entrada do usu\u00e1rio atende a crit\u00e9rios espec\u00edficos e regras de valida\u00e7\u00e3o antes de process\u00e1-la ou armazen\u00e1-la.<\/p>\n
      A valida\u00e7\u00e3o de dados ajuda a evitar o envio de dados incorretos ou mal-intencionados, fornece aos usu\u00e1rios feedback imediato sobre erros de entrada e garante que somente os dados v\u00e1lidos sejam processados posteriormente. Ela desempenha um papel fundamental na manuten\u00e7\u00e3o da integridade e da precis\u00e3o dos dados.<\/p>\n
      H\u00e1 v\u00e1rias maneiras de implementar a valida\u00e7\u00e3o de dados, incluindo o uso de JavaScript<\/a> para executar a valida\u00e7\u00e3o do lado do cliente, a valida\u00e7\u00e3o do lado do servidor ou uma combina\u00e7\u00e3o de ambas as abordagens. Para este guia, vamos implementar a valida\u00e7\u00e3o do lado do cliente para o formul\u00e1rio de contato a fim de garantir que os usu\u00e1rios n\u00e3o enviem campos vazios e que o e-mail fornecido esteja no formato correto.<\/p>\n
        \n
      1. Primeiro, defina a fun\u00e7\u00e3o de valida\u00e7\u00e3o adicionando o seguinte c\u00f3digo ao arquivo script.js<\/strong>:\n
        function validateForm() {\n    const name = document.getElementById('name').value;\n    const email = document.getElementById('email').value;\n    const message = document.getElementById('message').value;\n    if (name.trim() === '' || message.trim() === '') {\n        alert('Please fill out all fields.');\n        return false;\n    }\n    const emailRegex = \/^[^s@]+@[^s@]+.[^s@]+$\/;\n    if (!emailRegex.test(email)) {\n        alert('Please enter a valid email address.');\n        return false;\n    }\n    return true;\n}<\/code><\/pre>\n
        A fun\u00e7\u00e3o validateForm()<\/code> tem duas finalidades: primeiro, ela verifica se os campos nome e mensagem est\u00e3o vazios e, em seguida, valida o campo e-mail usando uma express\u00e3o regular e verifica se o endere\u00e7o de e-mail est\u00e1 em um formato v\u00e1lido.<\/p>\n
        Se os campos estiverem vazios ou o formato do e-mail for inv\u00e1lido, a fun\u00e7\u00e3o ser\u00e1 acionada e exibir\u00e1 uma mensagem de alerta. Por outro lado, se todos os campos do formul\u00e1rio passarem por essas verifica\u00e7\u00f5es de valida\u00e7\u00e3o, a fun\u00e7\u00e3o retornar\u00e1 verdadeiro e o formul\u00e1rio ser\u00e1 enviado.<\/p>\n
        Voc\u00ea tamb\u00e9m pode adicionar outras regras de valida\u00e7\u00e3o para garantir a precis\u00e3o e a integridade dos dados enviados. Por exemplo, voc\u00ea pode verificar o tamanho das entradas do usu\u00e1rio ou impedir que os usu\u00e1rios enviem determinados caracteres na mensagem, ajudando a evitar poss\u00edveis vulnerabilidades de seguran\u00e7a, como ataques de inje\u00e7\u00e3o.<\/li>\n
      2. Em seguida, chame a fun\u00e7\u00e3o acima para ativar a valida\u00e7\u00e3o usando um callback do ouvinte de eventos click<\/code>. Esse callback aciona a fun\u00e7\u00e3o sempre que um usu\u00e1rio clica no bot\u00e3o submit<\/strong>. Para chamar a fun\u00e7\u00e3o, adicione o seguinte c\u00f3digo ao seu arquivo script.js<\/strong>:\n
        document.addEventListener('DOMContentLoaded', function () {\n\tconst submitButton = document.getElementById('submitBtn');\n\n\tif (submitButton) {\n\t\tsubmitButton.addEventListener('click', function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tif (validateForm()) {\n\t\t\t\tdocument.forms['contactForm'].submit();\n\t\t\t\tresetFormAfterSubmission();\n\t\t\t}\n\t\t\treturn false;\n\t\t});\n\t}\n});\n\nfunction resetFormAfterSubmission() {\n\tsetTimeout(function () {\n\t\tconst contactForm = document.forms['contactForm'];\n\t\tcontactForm.reset();\n\t}, 500);\n}<\/code><\/pre>\n
        Observe que a fun\u00e7\u00e3o preventDefault()<\/code> est\u00e1 inclu\u00edda no c\u00f3digo para impedir a a\u00e7\u00e3o padr\u00e3o de envio de formul\u00e1rio. Dessa forma, voc\u00ea pode validar o formul\u00e1rio antes de enviar as informa\u00e7\u00f5es para o Getform.<\/p>\n
        Al\u00e9m disso, ap\u00f3s a valida\u00e7\u00e3o e o envio bem-sucedidos, a fun\u00e7\u00e3o resetFormAfterSubmission()<\/code> \u00e9 acionada, redefinindo o formul\u00e1rio ap\u00f3s um atraso de meio segundo para permitir mais envios.<\/li>\n<\/ol>\n
        Implante seu site est\u00e1tico com a Kinsta<\/h2>\n
        A Kinsta oferece uma solu\u00e7\u00e3o de hospedagem gerenciada, permitindo que voc\u00ea hospede diferentes projetos e bancos de dados da web. Com seu plano gratuito, voc\u00ea pode hospedar at\u00e9 100 sites est\u00e1ticos diretamente do GitHub<\/a>, GitLab<\/a> ou Bitbucket<\/a>.<\/p>\n
        Para implantar seu site est\u00e1tico com a Kinsta, primeiro, envie seus c\u00f3digos para o provedor Git de sua prefer\u00eancia. Em seguida, siga estas etapas:<\/p>\n
          \n
        1. Fa\u00e7a login<\/a> no painel MyKinsta.<\/li>\n
        2. No painel, clique no menu suspenso Adicionar servi\u00e7o<\/strong> e selecione Site est\u00e1tico<\/strong>.<\/li>\n
        3. Se voc\u00ea estiver hospedando um projeto pela primeira vez com a Kinsta, selecione e ative seu provedor de servi\u00e7os Git preferido.<\/li>\n
        4. Selecione o reposit\u00f3rio do seu projeto.<\/li>\n
        5. Selecione a branch a ser implantada e forne\u00e7a um nome de site exclusivo.<\/li>\n
        6. Especifique o caminho raiz do diret\u00f3rio de publica\u00e7\u00e3o que cont\u00e9m os arquivos HTML e os ativos para implanta\u00e7\u00e3o, adicionando um ponto.<\/li>\n
        7. Por fim, clique em Criar site<\/strong>.<\/li>\n<\/ol>\n
          Em alguns segundos, o MyKinsta implantar\u00e1 seu site.<\/p>\n
          Para integrar perfeitamente o formul\u00e1rio em um site existente, copie e cole o HTML do formul\u00e1rio diretamente na se\u00e7\u00e3o desejada do site. Certifique-se de incluir as propriedades CSS associadas e o c\u00f3digo JavaScript para garantir um estilo e uma funcionalidade consistentes.<\/p>\n
          Como alternativa, uma vez que j\u00e1 implantou o formul\u00e1rio separadamente, voc\u00ea pode fornecer aos usu\u00e1rios a URL, como um hiperlink ou um bot\u00e3o, no qual eles podem clicar para acessar o formul\u00e1rio.<\/p>\n
          Para verificar se o site est\u00e1 funcionando corretamente, acesse a URL<\/a> fornecida do site. Preencha os campos do formul\u00e1rio conforme solicitado para assegurar que ele est\u00e1 funcionando como deveria. Verifique se o formul\u00e1rio valida corretamente as informa\u00e7\u00f5es inseridas pelo usu\u00e1rio, mostra alertas de erro quando necess\u00e1rio e envia com sucesso os dados v\u00e1lidos para serem processados posteriormente.<\/p>\n
          Depois de enviar o formul\u00e1rio, o Getform redirecionar\u00e1 voc\u00ea para uma p\u00e1gina de confirma\u00e7\u00e3o ou de agradecimento, indicando que o envio foi bem-sucedido.<\/p>\n
          \"P\u00e1gina
          P\u00e1gina de confirma\u00e7\u00e3o de envio de formul\u00e1rio do Getform.<\/figcaption><\/figure>\n
          Para revisar as respostas do formul\u00e1rio, navegue at\u00e9 o painel do Getform e visualize os envios na caixa de entrada de mensagens fornecida.<\/p>\n
          Resumo<\/h2>\n
          Agora que voc\u00ea implementou o formul\u00e1rio com sucesso, existem in\u00fameras oportunidades para personaliz\u00e1-lo. Por exemplo, voc\u00ea pode aprimorar o design e a funcionalidade do formul\u00e1rio estilizando ainda mais com CSS ou com a linguagem de pr\u00e9-processador de sua prefer\u00eancia e implementando t\u00e9cnicas avan\u00e7adas de valida\u00e7\u00e3o.<\/p>\n
          Al\u00e9m do servi\u00e7o de Hospedagem de Sites Est\u00e1ticos, a Kinsta tamb\u00e9m oferece um servi\u00e7o de Hospedagem de Aplicativos<\/a>, projetado para aplicativos mais din\u00e2micos, como aplicativos web que precisam de processamento no lado do servidor, intera\u00e7\u00f5es com bancos de dados e outras funcionalidades complexas.<\/p>\n
          Com acesso a ambos os servi\u00e7os, os usu\u00e1rios obt\u00eam uma solu\u00e7\u00e3o de hospedagem abrangente para gerenciar uma s\u00e9rie de projetos web em um \u00fanico ecossistema, desde sites est\u00e1ticos simples at\u00e9 aplicativos complexos.<\/p>\n
          Agora voc\u00ea pode transformar seu site est\u00e1tico em uma experi\u00eancia din\u00e2mica com servi\u00e7os de manipula\u00e7\u00e3o de formul\u00e1rios.Qual servi\u00e7o voc\u00ea prefere ou tem experi\u00eancia? Compartilhe conosco nos coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
          Os sites variam em termos de design, finalidade e complexidade, mas geralmente s\u00e3o est\u00e1ticos ou din\u00e2micos. Os sites est\u00e1ticos s\u00e3o pr\u00e9-renderizados e apresentam o mesmo conte\u00fado …<\/p>\n","protected":false},"author":199,"featured_media":66509,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1018],"class_list":["post-66508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-ferramentas-desenvolvimento-web"],"yoast_head":"\nComo Implementar Formul\u00e1rios em Sites Est\u00e1ticos - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos\" \/>\n<meta property=\"og:description\" content=\"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T14:39:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-25T08:41:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos\",\"datePublished\":\"2024-01-19T14:39:39+00:00\",\"dateModified\":\"2024-01-25T08:41:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\"},\"wordCount\":2200,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\",\"name\":\"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"datePublished\":\"2024-01-19T14:39:39+00:00\",\"dateModified\":\"2024-01-25T08:41:04+00:00\",\"description\":\"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos - Kinsta\u00ae","description":"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos","og_description":"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.","og_url":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-01-19T14:39:39+00:00","article_modified_time":"2024-01-25T08:41:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos","datePublished":"2024-01-19T14:39:39+00:00","dateModified":"2024-01-25T08:41:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/"},"wordCount":2200,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/","url":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/","name":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","datePublished":"2024-01-19T14:39:39+00:00","dateModified":"2024-01-25T08:41:04+00:00","description":"Transforme seu site est\u00e1tico em uma experi\u00eancia de usu\u00e1rio din\u00e2mica hoje mesmo usando um servi\u00e7o de entrega de formul\u00e1rios, seguindo este guia passo a passo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/formularios-de-sites-estaticos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Como Implementar Formul\u00e1rios em Sites Est\u00e1ticos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=66508"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66508\/revisions"}],"predecessor-version":[{"id":66551,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66508\/revisions\/66551"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66508\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/66509"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=66508"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=66508"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=66508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}