Como criar um formulário de contacto simples utilizando HTML, CSS e JavaScript
Os formulários de contacto são um componente crucial dos Web sites, permitindo que os utilizadores o contactem com perguntas, comentários ou pedidos.
Neste tutorial, vamos guiá-lo através dos passos necessários para criar um formulário Web fundamental para o seu site. Isto inclui estabelecer o projeto, implementar a validação do formulário e personalizar o seu aspeto, de modo a obter um formulário de contacto totalmente funcional e visualmente apelativo no final das nossas instruções.
Configurar o projeto
Antes de começar a programar, certifique-se de que o seu ambiente de desenvolvimento está configurado. Abra o seu editor de texto preferido ou um dos ambientes de desenvolvimento integrado (IDE) recomendados, como o Visual Studio Code ou o Sublime Text .
Para manter um sentido de organização, recomenda-se que estabeleça uma pasta de projeto dedicada para alojar todos os seus ficheiros HTML e CSS numa localização centralizada. Isto permite-lhe localizar e aceder facilmente a estes documentos, conforme necessário.
Para organizar corretamente o conteúdo da sua página Web, recomenda-se que estabeleça uma estrutura de directórios com pastas distintas para diferentes tipos de recursos. Especificamente, no diretório raiz do seu projeto, crie dois ficheiros separados - um denominado “index.html”, que servirá de ponto de entrada principal para a sua página Web, e outro denominado “style.css”, que contém a folha de estilos que define o aspeto visual do seu site. Além disso, certifique-se de que existe um mecanismo de ligação adequado entre estes dois ficheiros para que o estilo necessário possa ser aplicado ao conteúdo HTML. Para tal, insira um
Criar a estrutura HTML
A componente fundamental de qualquer formulário de contacto reside na sua arquitetura HTML. Para construir os componentes HTML necessários para um formulário de contacto, siga estes passos.
<main>
<h1>Welcome to my Form</h1>
<form id="form">
<div class="input__container">
<label for="name">Name</label>
<!-- The 'required' prop ensures a filled field before submission -->
<input type="text" id="name" name="name" required />
</div>
<div class="input__container">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div class="input__container">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button>Submit</button>
</form>
</main>
O código HTML fornecido gera um componente de formulário, que engloba vários elementos de entrada na sua estrutura, com a intenção de aceitar dados introduzidos pelo utilizador para um formulário de contacto.
Atualmente, o aspeto do nosso formulário de contacto é o seguinte:
Estilizar o formulário de contacto
A utilização de um formulário de contacto atraente e intuitivo pode melhorar significativamente a experiência geral do utilizador. O código CSS fornecido utiliza flexbox, juntamente com atributos de modelo de caixa CSS, como padding e margin, para criar uma apresentação visual apelativa para o formulário de contacto.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Mulish", sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 40rem;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
margin: 0 auto;
height: 45rem;
border-radius: 2rem;
padding: 2rem;
}
h1 {
text-align: center;
font-size: 3rem;
padding: 1rem 2rem;
}
form {
margin: 3rem 0;
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.input__container {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.input__container label { font-size: 1.6rem; }
.input__container input,
textarea {
padding: 1rem 2rem;
border-radius: 5px;
border: 1px solid #555;
resize: none;
}
button {
align-self: flex-start;
padding: 1rem 2rem;
border-radius: 5px;
border: none;
background: #333;
color: #fff;
cursor: pointer;
}
O seu formulário de contacto tem agora o seguinte aspeto:
Implementação da validação de formulários
É crucial garantir que os dados fornecidos pelos utilizadores são exactos e abrangentes. Um método confiável para conseguir isso inclui a utilização de JavaScript no lado do cliente para validar formulários. Para iniciar esse processo, adicione uma tag de script na conclusão do documento HTML, direcionando-a para o elemento de formulário desejado.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Para adicionar um ouvinte de evento para lidar com envios de formulários, você pode utilizar JavaScript ou jQuery da seguinte forma:javascript// Usando vanilla JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {// Lidar com o envio do formulário aqui});// Usando jQuery$(’#myForm’). on(‘submit’, function(e) {e.preventDefault(); // impedir o comportamento padrão de envio de formulários// Tratar o envio de formulários aqui});
form.addEventListener("submit", function (event) { });
Para evitar a atualização automática da página que ocorre quando se envia um formulário e, em vez disso, optar por manter o valor atualmente selecionado no campo “email”, siga estes passos:
form.addEventListener("submit", function (event) {
// Prevent page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
});
Por fim, utilize a utilização de padrões regex para validar o endereço de correio eletrónico introduzido e apresentar uma resposta adequada com base na sua autenticidade.
form.addEventListener("submit", function (event) {
// Preventing page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
// Checking for valid email using a simple regex pattern
const emailPattern = /^[^\s@]\\+@[^\s@]\\+\.[^\s@]\\+$/;
if (!emailPattern.test(email)) {
alert("Wrong email format");
return;
}
// If everything passes, show success message
alert("Form submitted successfully");
});
Esta ação visa evitar erros típicos e garantir que o utilizador fornece apenas informações aceitáveis, assegurando assim a exatidão do processo de submissão.
Teste e Resolução de Problemas do Formulário de Contacto Final
Para que um projeto seja considerado totalmente realizado, deve ser submetido a testes rigorosos que confirmem a sua funcionalidade. Para tal, deve introduzir os dados adequados nos campos do formulário, iniciar a submissão e avaliar se os resultados esperados foram alcançados.
O seu browser não suporta a etiqueta de vídeo.
Personalizar o formulário de contacto
Parabéns por ter criado com sucesso um formulário de contacto fundamental para o seu sítio Web! A sua proficiência na criação de projectos, na construção de estruturas HTML, na conceção de estilos CSS, na implementação de validações de formulários JavaScript e na realização de testes rigorosos é louvável.
Um formulário de contacto bem concebido pode melhorar significativamente a experiência do utilizador, facilitando a comunicação entre os visitantes do sítio e o proprietário do sítio. Recomenda-se vivamente que personalize e alargue as suas capacidades de acordo com as suas necessidades específicas.