Tutoriais para Designers

Vamos desenvolver um simples formulário de contato, bem simples mesmo, porém, de extrema funcionalidade em nosso site um formulário de contato.

Neste formulário que iremos desenvolver terá apenas 4 campos; NOME, EMAIL, ASSUNTO e MENSAGEM, e possuirá apenas 2 arquivos, sendo eles o formulário.html e o envia.php. O formulário.html terá os campos que será preenchidos, enquanto o envia.php fará a validação dos campos preenchidos, isso através da função mail.

Para o tutorial não ficar tanto quanto complexo, mostrarei apenas como funcionam os campos do formulário e a validação do e-mail, ou seja, o quesito beleza não será nosso alvo, até porque você mesmo pode personalizar seu formulário, bastando apenas entender no mínimo HTML.

Base de conhecimento para acompanhar este tutorial:
-Saber HTML.

Abra o dreamweaver e crie um novo documento HTML. Em seguida salve-o como formulario.html



Clique na aba FORMS, em seguida clique em FORM.
O form é o responsável por enviar os campos preenchido para o validador, que no caso é envia.php.



O Pontilhado vermelho que você está vendo é o form.

1-Form.
2-Em ACTION digite envia.php.



Note que digitei nome, em seguida inseri um TEXTFIELD. Faça o mesmo.

Depois de inserir o TEXTFIELD, clique sobre ele.

Veja:



No inspetor de propriedades irá aparece algumas configurações para o textfield. No momento, o que nos interessa é apenas o campo textfield. Nomeie o textfiel para nome, para o campo nome. Recomendável que você digite tudo maiúsculo.

Agora faça você mesmo o mesmo processo que fizermos anteriormente. Crie o campo EMAIL e ASSUNTO e nomeie o textfield com email para email, e assunto para assunto.

Resultado:



Seu formulário deverá ficar assim, caso você esteja acompanhando o tutorial passo a passo.

Agora vamos criar um TEXTAREA. O TEXTAREA será o campo onde é possível que a pessoa digite seu texto.



Clique em TEXTAREA.

Resultado:



Lembrando que você deve nomear o campo textarea como mensagem.

Veja:



Para completar o formulário.html, está falando o botão para enviar os dados preenchido para o envia.php.



Clique em Button para adicionar um botão para nosso formulário.

Resutado:



Isso é fácil, você já deveria saber. O único segredo é nomear os campos no inspetor de propriedades. Pois estes nomes é que farão com que o envia.php saiba que os campos foram preenchido. Se você nomear errado, tanto no formulario.html, quanto envia.php, haverá erro e o email chegará em branco.

Feche o formulário.html.

Agora vamos criar um novo documento em PHP. Este se chamará envia.php.

Deixe o envia.php no modo código.