Tutorial: Formulário de contato no Dreamweaver
Vamos desenvolver um simples formulário de contato, bem simples mesmo, porém, de extrema funcionalidade em nosso site um formulário de contato.
Publicado em: 18 de dezembro de 2008 | Leituras: 34.569 |
Canal: DreamWeaver |
Autor: Marciano Dias
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.
Vamos apenas acrescentar o código abaixo:
Note que as strings estão com os nomes dos campos. Se caso você errar alguma delas, o e-mail chegará em branco. Note também que em seuemail@dominio.com você devera colocar o seu email.
Ao copiar os script, pode ser que você tenha algum problema. Recomendo que você faça o download do formulário que fiz, no download vem um formulário pronto, e vem o código que usei como exemplos aqui.
Para funcionar você deverá ter uma hospedagem que suporte e-mails. Geralmente apenas servidores pagos funcionam. Alguns gratuitos funcionam também, porem não são tão bons, pelo menos os que já testei não são.
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.
Vamos apenas acrescentar o código abaixo:
<?
$nome = $_POST['nome" rel="nofollow" target="_blank">;
$email = $_POST['email" rel="nofollow" target="_blank">;
$assunto = $_POST['assunto" rel="nofollow" target="_blank">;
$menssagem = $_POST['mensagem" rel="nofollow" target="_blank">;
global $email;
mail ("contato.marcianodias@gmail.com","$assunto",
"Nome: $nome
Email: $email
Assunto: $assunto
Mensagem: $mensagem",
"From: $email"
);
echo "<p align=center>Sua mensagem foi enviada com sucesso, $nome!</p>";
echo "<p align=center>Em breve entraremos em contato</p>";
?>Note que as strings estão com os nomes dos campos. Se caso você errar alguma delas, o e-mail chegará em branco. Note também que em seuemail@dominio.com você devera colocar o seu email.
Ao copiar os script, pode ser que você tenha algum problema. Recomendo que você faça o download do formulário que fiz, no download vem um formulário pronto, e vem o código que usei como exemplos aqui.
Para funcionar você deverá ter uma hospedagem que suporte e-mails. Geralmente apenas servidores pagos funcionam. Alguns gratuitos funcionam também, porem não são tão bons, pelo menos os que já testei não são.
Resposta em até 24 horas! (grátis)Dúvidas?
Últimas perguntas:
| Ajuda? | Por: Juliano Oliveira | |
| ONDE EU ENCONTRO O DOW LOAD Q VC MENCIONOU NAO ACHEI O CODIG | Por: Carlosgomes | |
| aonde eu insiro o php ? | Por: Carlosgomes | |
| olá | Por: Bruno | |
| Limitar ( Textarea e quebra de linha ) | Por: Ton | |
Autor da matéria
Últimas matérias escritas pelo autor:
|
Marciano Dias |
Últimas matérias escritas pelo autor:
06/08 - Criar Backup dos drivers do Windows 7
04/08 - Como criar e restaurar um ponto de res...
06/06 - Tutorial sobre o Virtual Box
04/06 - PHP: Formulário de contato com validaç...
28/05 - Limpando o Recent Items do Fireworks, ...
09/05 - Tutorial Corel Draw: Desenhando a Logo...
05/05 - Corel Draw: A Ferramenta B-Spline - Fa...
25/01 - Estudos revelam que a senha mais usada...
19/01 - Boot do Windows 7 no Pendrive
08/01 - Disco de Recuperação do Windows 7
06/01 - Virtualização: Como criar HD virtual n...
14/12 - Configurando o Evolution para enviar e...
25/12 - Tutorial: Criar álbum de fotos no drea...
18/12 - Tutorial: Formulário de contato no Dre...
04/08 - Como criar e restaurar um ponto de res...
06/06 - Tutorial sobre o Virtual Box
04/06 - PHP: Formulário de contato com validaç...
28/05 - Limpando o Recent Items do Fireworks, ...
09/05 - Tutorial Corel Draw: Desenhando a Logo...
05/05 - Corel Draw: A Ferramenta B-Spline - Fa...
25/01 - Estudos revelam que a senha mais usada...
19/01 - Boot do Windows 7 no Pendrive
08/01 - Disco de Recuperação do Windows 7
06/01 - Virtualização: Como criar HD virtual n...
14/12 - Configurando o Evolution para enviar e...
25/12 - Tutorial: Criar álbum de fotos no drea...
18/12 - Tutorial: Formulário de contato no Dre...
Matérias relacionadas
Últimas matérias
Últimas notícias







Limpando o Recent Items do Fireworks, Flash e Dreamweaver
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao Linux