Os sítios Web variam em termos de conceção, finalidade e complexidade, mas são geralmente classificados como estáticos ou dinâmicos. Os sítios Web estáticos são pré-renderizados e fornecem o mesmo conteúdo a todos os visitantes. Têm uma estrutura simples, são normalmente fáceis de gerir e carregam rapidamente. Por outro lado, os sítios Web dinâmicos utilizam linguagens de programação do lado do servidor para gerar conteúdos em tempo real.

Os sítios Web estáticos não suportam normalmente o tratamento de elementos interactivos, como formulários, diretamente no sítio, uma vez que tais operações requerem um servidor para armazenar e processar os dados. Mas aqui está o senão: os formulários são uma ponte importante entre os utilizadores e nós. Através dos formulários, podemos obter sugestões ou questões valiosas dos nossos utilizadores, para que possamos otimizar o conteúdo do nosso sítio Web com base nesse feedback e proporcionar uma melhor experiência aos nossos utilizadores. No entanto, os sítios Web estáticos não podem realizar esta tarefa diretamente, pelo que podemos melhorar a experiência do utilizador personalizando o nosso conteúdo.

Selecione o serviço de processamento de formulários

Os serviços de processamento de formulários são terceiros que recolhem e processam dados de formulários para sítios Web estáticos. Fornecem a infraestrutura do lado do servidor necessária para processar os envios de formulários, melhorando a funcionalidade e a interatividade de um sítio Web, mantendo simultaneamente as vantagens de um sítio Web estático.

Quando um utilizador submete um formulário, os dados são enviados para o ponto de extremidade do serviço de processamento de formulários. Em seguida, o serviço processa os dados, armazena-os de forma segura e envia uma notificação para o destinatário adequado. Existem muitos serviços de processamento de formulários. Vejamos alguns dos serviços de processamento de formulários mais populares.

1) Formspree

Formspree é um serviço de processamento de formulários fácil de utilizar que simplifica o processo de adição de formulários e de gestão de envios de formulários em sítios estáticos. Está disponível numa versão gratuita com caraterísticas básicas, como 50 envios de formulários por mês, e numa versão paga com caraterísticas mais avançadas, incluindo listas seguras e proteção contra spam.

2) Formbucket

FormBucket A Mention fornece uma maneira conveniente de coletar e gerenciar envios de formulários, salvando formulários em "buckets", cada um com um URL exclusivo. Pode utilizar a página de painel de controlo fácil de utilizar do Formbucket para definir campos de formulário e definir regras de validação para alinhar com a marca do seu site.

3. obter formulário

Obter formulário Getform é uma plataforma de back-end de formulários que fornece uma forma simples e segura de lidar com envios de formulários. Getform fornece uma interface de utilizador intuitiva para gerir envios de formulários, notificações por e-mail e integração com serviços populares como o Slack e o Google Sheets.

Configurar serviços de processamento de formulários com Getform

A gestão dos envios de formulários no seu sítio Web pode ser muito simplificada através da utilização de um serviço de processamento de formulários como o Getform. Quando um utilizador submete um formulário, o Getform assume todo o processo, eliminando a necessidade de uma API de backend para processar e armazenar estas submissões.

Com esta integração perfeita, pode gerir eficazmente todas as respostas numa caixa de entrada de mensagens dedicada. Para começar, certifique-se de que verifica aHTML,CSSresponder com cânticosJavaScriptTenha um conhecimento básico e siga os passos abaixo:

1. inscrição Conta Getform.
2. Aceda ao painel de controlo da sua conta Getform e clique no botão+ Criado Botão.
3. Na caixa de diálogo que aparece, certifique-se de que a opção "Formulários" . Forneça um nome descritivo para o ponto final e selecione o fuso horário adequado. Em seguida, clique em"Criar".

Getform irá gerar o URL do ponto de extremidade de envio do formulário, que deve ser adicionado ao atributo action do elemento do formulário.

Criar formulários com HTML e CSS

Depois de ter configurado os seus serviços de processamento de formulários, pode criar formulários utilizando HTML, CSS e JavaScript.

1) No terminal, crie um ficheiro com o nomeformasda pasta do projeto e altere o diretório atual para o diretório do projeto:mkdir formulários

mkdir forms
cd formulários

2) Adicione os seguintes ficheiros de projeto:

1TP5Sistemas baseados em Tunix
toque em index.html styles.css script.js

1TP5Janelas
echo. > index.html & echo. > styles.css & echo. > script.js

3) Em seguida, crie um formulário HTML. Neste guia, o código fornecido abaixo ajudá-lo-á a criar um formulário que inclui caixas de introdução de nome e endereço de correio eletrónico, uma área de texto de mensagem e um botão de envio. Este código pode ser adicionado ao seu index.html Documentação:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de contacto</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contacte-nos</h1>
        <form class="contact-form" name="contactForm" action="/pt/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">O seu nome.</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Envie um e-mail.</label>
                <input type="email" id="email" name="email" class="form-input" required>

                <label for="message" class="form-label">Mensagem.</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">Submeter</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="pt"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>

4) Navegue até ao painel Getform e copie o URL do ponto final, depois cole este URL no atributo action dentro da etiqueta de abertura do formulário no código HTML.
5) Por fim, adicione estilos CSS ao ficheiro styles.css para personalizar o design e o aspeto do formulário.

Validação de dados com JavaScript

A validação de dados verifica se os dados introduzidos pelo utilizador cumprem critérios específicos e regras de validação antes de serem processados ou armazenados. A validação de dados ajuda a evitar a apresentação de dados incorrectos ou maliciosos, fornece aos utilizadores um feedback imediato sobre os erros de introdução e garante que apenas os dados válidos continuam a ser processados. Desempenha um papel vital na manutenção da integridade e exatidão dos dados.

Existem várias maneiras de implementar a validação de dados, incluindo a validação do lado do cliente usando JavaScript, a validação do lado do servidor ou uma combinação dos dois. Neste artigo, vamos implementar a validação do lado do cliente para o formulário de contacto para garantir que o utilizador não submete campos vazios e que o e-mail fornecido está formatado corretamente.

1) Em primeiro lugar, adicione o seguinte código ao ficheiroscript.js para definir a função de validação:

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() faz duas coisas: primeiro, verifica se os campos nome e mensagem estão vazios e, em seguida, valida o campo e-mail utilizando uma expressão regular e verifica se o endereço de e-mail está num formato válido.

Se os campos estiverem vazios ou se o formato do correio eletrónico for inválido, a função é activada e apresenta uma mensagem de alerta. Por outro lado, se todos os campos do formulário passarem estas verificações de validação, a função devolve verdadeiro e o formulário é submetido.

Podem ser acrescentadas regras de validação adicionais para garantir a exatidão e a integridade dos dados apresentados. Por exemplo, o comprimento da entrada do utilizador pode ser validado ou os utilizadores podem ser impedidos de submeter determinados caracteres nas mensagens, ajudando assim a evitar potenciais violações de segurança (como ataques de injeção).

2) Em seguida, chame a função acima para ativar a validação utilizando a chamada de retorno do ouvinte do evento de clique. Sempre que o utilizador clicar no botãoapresentar (um relatório, etc.)O retorno de chamada acciona a função sempre que o botão é premido. Para chamar a função, adicione o script.js Adicione o seguinte código ao ficheiro:

document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');

se (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault(); if (submitButton) { submitButton.addEventListener('click', function (event) { event.preventDefault(); }
Se (validateForm()) {
document.forms['contactForm'].submit();
reinicieFormAfterSubmission();
}
return false.
}); }
}
}).

função resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset(); }, 500);; function resetFormAfterSubmission()
}, 500);
}

注意，代码中包含 preventDefault() 函数，用于阻止默认表单提交操作。这样，你就可以在向 Getform 提交信息之前验证表单。

在成功验证和提交后，会触发 resetFormAfterSubmission() 函数，在半秒延迟后重置表单，以便允许更多提交。

resumos

现在，已经成功实施了表单，有无数机会可以对其进行自定义。例如，可以使用 CSS 或你喜欢的预处理器语言进一步设计表单样式，并实施高级验证技术，从而增强表单的设计和功能。