Formulário de contato elegante e dinamico

Olá caros visitantes,hoje faremos um Formulário de contato elegante e dinâmico.

Elegante porque você poderá fazer do formato que desejar, dinâmico porque faremos em PHP com toda a sua praticidade, robustez e objetos.

O Formulário de contato elegante e dinâmico

Formulário de contato elegante e dinâmico

Este é o nosso formulário de contato, o bom de tudo é que você pode mudar a imagem de fundo conforme desejar.

Para isto vai bastar trocar a imagem localizada no diretório chamado img e  que vai conter tudo que precisarmos de imagem.

Elegante não é? Você vai ver o dinamismo dele funcionando AQUI onde vai enviar um email para um lugar fictício para um email fictício mas que vai ter toda a funcionalidade e que bastará você alterar 1 texto para ele enviar para o seu email.

O tom azul do botão também vamos deixar do jeito que você poderá trocar para qualquer cor que desejar, sabendo apenas sobre as paletas de cores HTML e talvez um pouco de RGBA para alguns itens.

 

O CÓDIGO HTML

Formulário de contato – Explicando

A nossa base para tudo é que um arquivo HTML precisa ser aberto a tag html, a tag head (cabeçalho) e a tag title (título), até ai tudo bem, entre as tags title nos inserimos um título que aparecerá como título da aba aberta no navegador de quem estive editando. Eu coloquei como Teste de Formulário, portanto altere para o que você achar que ficará mais interessante e que tenha a ver com sua marca. Após decidir o título nós fechamos a tag title e vamos abrir uma tag para abrir o layout (“modelo”) CSS para o site, indicando o caminho dele, o tipo e que tipo de arquivos abrir dele. Logo em seguida nós fechamos a tag head (cabeçalho) do site.

Trocando em miúdos este é o código que comentei:

O arquivo estilo.css contém tudo relacionado a cores, fontes, imagens, etc.

Agora que nosso formulário começou a tomar forma, vamos dar um “corpo” para ele?

Abrimos a tag body (corpo) ao nosso pequeno “site” onde abrigará nosso formulário de contato.

Imagine que a tag body é um escritório, nesse escritório para caber mais computadores, colocamos divisórias para criar subsalas dentro dessas divisórias.

O que vamos fazer é abrir a sala e colocar divisórias nela que tem documentos, textos e caixas que são importantes para o funcionamento do escritório em geral, para isso usamos o seguinte código:

Para completar, vamos abrir mais uma divisória dentro deste escritório contendo documentos específicos, classificaremos estes documentos como formulários, daremos uma identificação para ele com o nome form1, o método de busca e de inserção de documentos novos neste formulário é postagem e toda vez que houver uma alteração nós enviamos ele com a ação mail.php, veja bem:

Agora para fazer as nossas divisórias ser funcionais, precisamos colocar documentos dentro de cada local específico, daremos classes e essas classes vão ter tipos diferentes de entrada e saida.

Iniciamos com uma classe nomeada de “nome” e diremos que a parte do formulário conterá uma linha onde a pessoa deverá escrever o nome dela, o documento só será aprovado se a pessoa escrever o nome e aceitará apenas letras.

A mesma coisa com o email da pessoa, porém agora ela será obrigada a colocar o email e este email deverá ser válido (com um sinal de arroba @).

O próximo campo é o campo de texto, onde a pessoa expressará o que ela deseja ao enviar o formulário para nosso departamento:

Por via de esclarecimento, defini que pode ter até 6 linhas e terá no máximo 300 palavras.

E para resumir, a saída das divisórias, tem um pequeno local onde envia para todos os departamentos as informações, com uma pequena divisória chamada submit, onde ENVIA tudo:

E então fechamos todas as divisórias, o escritório (body) e o arquivo html.

E agora temos nosso formulário completo funcionando. 😀

Agora vamos ao “processador” dos arquivos? Sim, temos um arquivo chamado mail.php que processa todas as informações e a partir dela, envia para a “gerência” o que a pessoa preencheu no formulário, no caso o email é a gerência que recebe tudo, você precisa alterar o campo de email para que você seja o gerente e receba os dados dos formulários preenchidos em seu website.

Formulário de contato precisa ser elegante, dinamico mas também precisa ser simples e o php torna as coisas bastante simples na hora de receber isto, lembre-se que um formulário de contato com a função mail precisa ter em seu servidor php a função mail marcada como ativa (esta função é marcada como ativa por padrão mas não custa verificar caso tenha problemas). Para se esclarecer sobre a função mail veja aqui: FUNÇÃO MAIL EM PHP

Abrimos a tag do PHP, criamos 3 variáveis para pegar via método de postagem o nome, email e texto digitados.

Logo em seguida enviamos o email para

contendo o Nome, Email e Texto que a pessoal enviou.

Após envio com sucesso aparece por 3 segundos a mensagem “sua mensagem foi enviada com sucessso! e então vai para o site google.com.br que você pode alterar como desejar.

 

Então é isso pessoal, espero que tenha ajudado e espero que vocês gostem.

Quanto às dúvidas que com certeza surgirão, usem os comentários.

Forte abraço