Como criar um formulário de contato em HTML?

O formulário é um dos meios mais comuns de garantir interação na Web, seja para contato ou coleta de outros dados como cadastro, por exemplo. Esses dados na maioria das vezes, são enviados para um servidor para serem processados, porém a página pode interceptá-lo também para uso próprio.

Um formulário HTML é feito com um ou mais widgets (Aplicações rápidas de interface gráfica). Esses widgets podem ser caixas, botões, componentes de entrada de texto, caixas de seleção, menus de seleção, botões de múltipla escolha etc. Lembrando que é preciso configurar o servidor para receber os dados do formulário, essa é principal diferença de um formulário HTML e outro arquivo qualquer em HTML.

Formulário de contato

No wireframe do seu site deve constar o layout e as principais informações que precisam ser coletadas em seu formulário. P.S: Lembre-se de deixa-lo o mais simples e curto possível, para que o usuário não desista de preenche-lo no meio do caminho, ok? Essa dica serve para todo tipo de formulário!

Imagem apenas ilustrativa.

Conforme o exemplo que coloquei acima o formulário conterá três campos de texto e um botão. Pedimos ao usuário o nome, o e-mail e a mensagem que deseja enviar. Quanto ao botão, realizará “a mágica” de enviar seus dados para um servidor.

Colocando a mão na massa

Para construir o formulário de contato, vamos usar os seguintes elementos HTML: <form>, <label>, <input>, <textarea>, e <button>.

O elemento <form>

Todos os formulários HTML começam com um <form> elemento como este:

Esta tag que inicia um formulário é um elemento de contêiner como um elemento <div> ou <p>, mas também suporta alguns atributos específicos para configurar a forma como o formulário se comporta.

Todos os atributos são de sua escolha, porém você deve colocar pelo menos o action atributo e o method atributo. OK?

• O atributo action define a localização de destino (URL) para onde os dados coletados do formulário devem ser enviados. A URL pode ser informada de modo absoluto ou relativa, por exemplo, <form action="http://site.com"> ou <form action="pasta/pagina"> (link diferente no servidor). Mas se a ideia for enviar os dados para a mesma página do formulário, basta usar a tag <form> sem o atributoaction. O atributo method define qual método HTTP para enviar os dados (pode ser “get” ou “post”).

Os elementos <label>, <input> e <textarea>

Esse formulário de contato é bem simples e contém três campos de texto, cada um com um rótulo. Os campos de entrada para o nome e e-mail serão campos de texto básico de linha única, porém o de e-mail com validação de e-mail e o de mensagem será um campo de texto multilinha básico.

Em termos de código HTML, seria mais ou menos assim para implementar os widgets de formulário:

Percebeu que usamos <div> para separar cada bloco ou campo de entrada de dado, não esqueça disso! O elemento<label> é uma maneira formal de vincular um rótulo a um widget de formulário. Este atributo faz referência ao id do widget correspondente isso permite ao usuário clicar no rótulo para ativar o widget correspondente.

No elemento <input> , um dos atributos mais importantes é o type porque define a forma como ele se comporta. Isso pode mudar radicalmente o elemento, então tome cuidado!

No exemplo de formulário acima, o valor “text” para a primeira entrada é o valor padrão para este atributo. Representa um campo de texto básico de uma linha que aceita qualquer tipo de entrada de texto.

Para a segunda entrada, usamos o valor email que define um campo de texto de linha única porém este só aceita um endereço de e-mail( com @ e .com).

Já no último de texto, valor transforma um campo de texto básico em um tipo de campo “inteligente” que executará algumas verificações nos dados digitados pelo usuário. Porém, isso já é assunto para outro artigo, validação de formulário!

Por último, mas não menos importante, observe a sintaxe <input> vs. <textarea>. Esta é uma das estranhezas do HTML. A tag <input> por ser um elemento vazio, não precisa de fechamento. Já o <textarea> precisa porque “não é um elemento vazio”, então você precisa fechá-la. Isso tem um impacto em uma característica específica de formulários HTML: a forma como você define o valor padrão. Para definir o valor padrão de um elemento <input>, você deve usar o atributo value.

O <button> elemento

Nosso formulário está quase pronto falta só adicionar um botão para o usuário enviar seus dados depois de preencher o formulário. Isso é feito simplesmente usando o elemento <button>. Veja como é simples adicionar:

Você verá que o elemento <button> também aceita um atributo type — este aceita um dos três valores: submit, reset ou button.

• Com o botão “submit” se envia os dados do formulário para a página web definida pelo action atributo do formulário.
• Clicando no botão reset redefine todos os widgets do formulário para seu valor padrão imediatamente. Do ponto de vista UX, isso não é considerado uma boa prática.
• E se clicar no botão button, ele envia o form da mesma forma que o submit! Isso parece bobo, mas é incrivelmente útil para criar botões personalizados com JavaScript, que também não vale falar aqui.

Estilo básico de formulários

Agora se você fez tudo certo até aqui concluiu com exito a parte de HTML, mas ao salvar e atualizar seu navegador vai perceber que ele não está nada agradável aos olhos, então vamos adicionar a tag <style>no head de nosso HTML, e vamos dar uma melhorada com CSS. Estou mandando em código único para não ficar muito longo o artigo, mas está todo comentado, então siga o passo-a passo,ok?

Enviando dados de formulário para o seu servidor web

Já está acabando, como foi dito antes, na maioria das vezes um Formulário HTML é uma maneira conveniente de pedir ao usuário dados e enviá-lo para um servidor.

O elemento <form>irá definir onde e como enviar os dados de acordo com os atributos action e method, lembra? Mas não é o suficiente. Precisamos nomear os dados no lado do navegador, informar ao navegador qual nome dar para cada peça de dados, e também no lado do servidor, ele permite que o servidor manipule cada peça de dados pelo nome, pra num dar confusão, entendeu?

Para nomear os dados em um formulário, você precisa usar o atributo <name> em cada widget de formulário que vai coletar um dado específico, como já fizemos, lembra? O formulário enviará 3 dados denominadas “ nome_usuario”, “ email_usuario” e “ texto_usuario”. Esses dados serão enviados para o URL “ /formulario-contato” usando o método HTTP POST .

Do lado do servidor, o script na URL “ /formulario-contato” receberá os dados como uma lista de 3 itens de chave/valor incorporados na solicitação HTTP. A maneira como esse script vai lidar com os dados depende de você. Cada linguagem do lado do servidor (PHP, Python, Ruby, Java, C #, etc.) possui seu próprio mecanismo. P.S: Se você não conhece ainda nenhuma linguagem de back-end, aconselho começar por python, pois é considerada simples, curta e muito eficiente.

Resumo

Trouxe nesse artigo o básico para se fazer o primeiro formulário de contato para adicionar a um site, foi bem introdutório, aconselho mergulhar nos tipos diversos de formulários, a treinar estilos diferentes no CSS, e compreender como seus dados trafegam do Navegador para o Servidor. Espero ter ajudado e bons estudos!