Hoje é Sábado, 4/07/2009
Fórum aqui no site, o que você pensa a respeito? Dê sua opinião, clique aqui Tutorial: Formulário de contato no Dreamweaver
Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?
Publicado em: 18/12/2008
Área: DreamWeaver
Visualizações: 7.928
Comentário(s): 17
RSS feed do site?
Publicado em: 18/12/2008
Área: DreamWeaver
Visualizações: 7.928
Comentário(s): 17
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'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$menssagem = $_POST['mensagem'];
global $email;
mail ("seuemail@dominio.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
?>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.
Autor da matéria
Marciano Dias
Sou um pessoa legal e que gosta de compartilhar os conhecimentos com os outros.
Sou um pessoa legal e que gosta de compartilhar os conhecimentos com os outros.
Todas as matérias de Marciano Dias
Publicidade
Seguir o Oficina da Net
Matérias relacionadas
- Como criar aplicações com PHP sem saber PHP parte 03
Neste artigo iremos aprender a gravar os registros no banco de dados, .
- Como criar aplicações com PHP sem saber PHP parte 02
Conectando o Dreamweaver ao MySQL e exibindo dados. No artigo anterior.
- Como criar aplicações com PHP sem saber PHP parte 01
Série dividida em 10 partes, explicando como criar aplicações com o P.
- Vídeo Aula - Criando Flash Buttons no Dreamweaver
Nesta vídeo aula irei mostrar como se criar botões em flash para seu p.
- Tutorial: Criar álbum de fotos no dreamweaver
Neste tutorial irei mostrar como criar um álbum de fotos no dreamweave.
Destaque
Destaque
Últimas matérias publicadas
Photoshop: Fogo em imagensVeja como simular um efeito de fogo em suas imagens de .
Corel Draw: Texto com efeito 3DNeste exemplo irei passar um efeito de nível intermediá.
Foto estilo dobrada no Corel DrawVeja como dobrar as suas fotos no corel Draw da mesma f.
Pesquisas: Você sabe o que os usuários pensam sobre seu.A tão famosa web 2.0 nos trouxe alguns benefícios dentr.
Informática com olhar sistêmicoO Brasil Em 11º lugar no ranking de números de computad.
Criando Tabelas em Access - Modo DesignNesta vídeo aula aprederemos a criar uma tabela e uma consul.
Cat Shit One Movie TrailerAnimação muito bem feita, vai ser um seriado com 12 capítulo.
Teste a segurança de seu micro-ondasAntes de tudo o alerta: NÃO LIGUE O MICRO - ONDAS em nenhum .
Qualidade: Queen - A Kind Of MagicA kind Of magic from Highlander movie.
Projeto Natal da MicrosoftO Vídeo mostra a nova tecnologia que será desenvolvida para .
Robson - Publicado em: 18/12/2008 - 13:59
Olá, fiz um formulário como esse usando a função mail, porem aconteceram alguns erros, gostaria de saber se eu devo abrir alguma porta, ou ter algum servidor de e-mail instalado no servidor para conseguir enviar o e-mail?
muito bom seu tutorial, creio que irá ajudar muita gente, valeu.
Jhonata - Publicado em: 19/12/2008 - 12:53
Foi bem explicado.
mas quando eu vou copiar o códido está dando erro e eu estou procurando o link para baixa o formulário mas não estou encontrando.
se der envia para o meu email.
valeu!
Otavio - Publicado em: 08/01/2009 - 15:39
OLa muito explicativo teu tuto, vou tentar fazer...vlw
Leonardo - Publicado em: 22/01/2009 - 12:04
No código faltou " no final como segue exemplo:
<?
$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$menssagem = $_POST['mensagem'];
global $email;
mail ("seuemail@dominio.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"
?>
Pepperpanda - Publicado em: 04/02/2009 - 22:34
Passei o dia pesquisando e após muita "luta", achei este e consegui fazer na boa!
Mas aqui vão algumas dicas:
1º. Faça calmamente, sem pressa, lendo atentamente as instruções do tutorial.
2º. Não copie e cole nenhum dos códigos: o DW troca as aspas e quase sempre vai dar problema e não vai funcionar. No caso do código PHP, digite tudo, exatamente do jeito que o tutorial explica, apenas observando o acréscimo das aspas no final, conforme bem observou o amigo Leonardo logo acima.
Agora só estou tentando resolver o "problema" das mensagens não chegarem acentuadas no meu e-mail; elas chegam com suas acentuações convertidas em caracteres.
Assim que eu descobrir como sanar isto, postarei aqui com certeza! E se alguém souber como resolver isto neste meio tempo, agradeço desde já a ajuda!
Grande abraço a todos!
PepperPanda [Brazil]
:: staff & releaser ::
.:: O Grande Urso Panda for iPod ::.
: http://ograndeursopanda.blogspot.com :
Pepperpanda - Publicado em: 11/02/2009 - 10:28
Olá, Pessoal!
Solucionei o problema de troca de acentuação por caracteres quando recebia o e-mail através do formulário.
Para resolver este problema, basta adicionar uma linha de comando no arquivo PHP, referente ao tipo de "charset" que consta no seu arquivo original em html (no meu caso era o charset=utf-8).
Então, meu arquivo PHP ficou da seguinte maneira:
<code>
<?
$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];
$headers = "Content-type: text/html; charset=utf-8";
global $email;
mail ("e-mail@e-mail.com.br", "$assunto",
"Nome: $nome <br/>
E-mail: $email <br/>
Assunto: $assunto <br/>
Mensagem: $mensagem <br/>
From: $email",
$headers
);
echo "<p align=center>Sua mensagem foi enviada com sucesso, $nome!</p>
<p align=center>Em breve entraremos em contato.</p>"
?>
</code>
Lembrem-se que este "charset=utf-8" deve ser substituido pelo equivalente do seu arquivo PHP gerado no Dreamweaver, que pode ser encontrado na linha de comando <meta ...>, geralmente na linha 4 do seu arquivo.
Espero ter ajudado, pessoal!
Grande abraço a todos!
PepperPanda [Brazil]
:: staff & releaser ::
.:: O Grande Urso Panda for iPod ::.
: http://ograndeursopanda.blogspot.com :
Pepperpanda - Publicado em: 11/02/2009 - 10:30
Ops! Sem querer saiu um comando <code> e </code> sem querer.
Então o correto é:
<?
$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];
$headers = "Content-type: text/html; charset=utf-8";
global $email;
mail ("e-mail@e-mail.com.br", "$assunto",
"Nome: $nome <br/>
E-mail: $email <br/>
Assunto: $assunto <br/>
Mensagem: $mensagem <br/>
From: $email",
$headers
);
echo "<p align=center>Sua mensagem foi enviada com sucesso, $nome!</p>
<p align=center>Em breve entraremos em contato.</p>"
?>
Grande abraço a todos!
PepperPanda [Brazil]
:: staff & releaser ::
.:: O Grande Urso Panda for iPod ::.
: http://ograndeursopanda.blogspot.com :
Daniel - Publicado em: 15/02/2009 - 11:05
Segui o Tutorial e as correções mas ao publicar no UOL HOST apareceu um aviso: esta plataforma não suporta php
Daniel - Publicado em: 15/02/2009 - 11:10
Segui o Tutorial e as correções mas ao publicar no UOL HOST apareceu um aviso:
Aviso!
Esta plataforma ainda não suporta PHP.
Para utilizar PHP solicite a migração para a plataforma Linux.
Daniel - Publicado em: 15/02/2009 - 11:12
O QUE EU DEVO FAZER.
TEM UMA OUTRA LIGUAGEM PARA ENVIAR OS MEUS DADOS DE FORMULARIO?
ALGUÉM PODE ME AJUDAR?
OBRIGADO
Gelso de Lima - Publicado em: 15/04/2009 - 16:27
Olá fiz uma página de um site que estou construindo e nele fiz um formulário igual ao seu.Só que minhas páginas estão todas em php.Esta quase tudo certo só quando recebo os e-mails do formulário em vez de acento vem em caracteres.Gpostaria de uma ajuda.É o primeiro site que estou fazendo e deve ter alguns erros.Não digitei uma linha de código sequer copiei tudo as imagens coloquei direto no DW.vai o código abaixo.Obrigado pela sua atenção.
--
UPDATE: HTML revovido
Rodrigo - Publicado em: 23/04/2009 - 12:16
Parabens pelo tutorial!!!
muito claro e objetivo.
Talita - Publicado em: 29/04/2009 - 18:25
Aonde está o link para o download da pág PHP que ele menciona no TUTORIAL??
O e-mail chegou certo (nome, assunto), mas a mensagem veio em branco... =(
Marina - Publicado em: 05/05/2009 - 17:05
boa tarde..
alguem poderia me ajudar?
estou fazendo meu primeiro site...
e estou com problemas na confecção de formulário de contato para a empresa...
criei tudo conforme as dicas acima...
porém, quando vou lá no intert explorer para testar como ficará o site , clico em [ENVIAR] e ao invéz de enviar um e-mail para o e-mail, cadastrado ele abre uma janela pedindo se eu quero salvar abrir ou cancelar o documento -envia.php
o que estou fazendo de errado???
o fato de o site não estar ainda no ar, interfere em alguma coisa???
abraços
aguardo retorno
Nelson - Publicado em: 31/05/2009 - 11:31
Olá, onde estão os arquivos para download?
Zecarlos - Publicado em: 08/06/2009 - 23:44
digitei este formulario no meu site, só q coloquei em outro arquivo contato.html. o problema é q funcionou td certinho no 1º dia, no dia seguinte tentei mandar email, da mensagem q foi enviado, mas não chega, não consegui + arrumar ja tentei de tudo.se alguem poder me ajudar agradeço.
Ednei - Publicado em: 29/06/2009 - 16:47
boa tarde Marciano, fiz o formulário como segue mais recebo a mensagem em branco aonde errei
fico no aguardo