Formulário de Contato com PHP+Dreamweaver

30 de abr. de 2010


Objetivo
Criar um formulário de contato através do Dreamweaver junto com o PHP.



1- Vamos criar os campos do nosso formulário.
Crie um novo documento no Dreamweaver (ctrl+n) e salve (ctrl+s) como form.html.
Insira um formulário (Insert > Form > Form).
Agora insira o campo que receberá o Nome (Insert > Form > Text Field).



2- Insira mais dois campos Text Field para o E-mail e o Assunto.
Agora vamos inserir o campo de mensagem que será do tipo textarea (Insert > Form > Textarea).



3- por fim, o botão submit (Insert > Form > Button ) que irá enviar o formulário para seu e-mail.

Na tag do formulário mude algumas propriedades como no exemplo abaixo:

< form action=”formulario.php” method=”post” name=”form_mxstudio” id=”form_mxstudio”>
1. ACTION = nome do arquivo que será chamado ao submeter o formulário;
2. METHOD = POST;
3. NAME = Dê um nome ao seu formulario;
4. ID = Dê um nome ao ID.

Agora vamos dar nome aos campos. Selecione cada campo e dê um nome a ele.

Campo Nome = < input name=”nome” type=”text” id=”nome” size=”33&#8243;> ;
Campo Email = < input name=”email” type=”text” id=”email” size=”33&#8243;> ;
Campo Assunto = < input name=”assunto” type=”text” id=”assunto” size=”33&#8243;> ;
Campo Mensagem = < input name=”mensagem” type=”text” id=”mensagem” size=”33&#8243;> ;

Seu código HTML deve ficar mais ou menos como abaixo:

<html>
<head>
<title>Formulário - MX Studio</title>
</head>
<body>
<form action=”formulario.php” method=”post” name=”form_mxstudio” id=”form_mxstudio” onsubmit=”return validar();”>
<table width=”35%” border=”1&#8243; cellpadding=”2&#8243; cellspacing=”2&#8243; bordercolor=”#666666&#8243;>
<tr>
<td colspan=”2&#8243; bordercolor=”#FFFFFF” bgcolor=”#0099CC”><h3 class=”style1&#8243;>Formulário MX Studio </h3></td>
</tr>
<tr>
<td width=”25%” align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14&#8243;>Seu nome:</span></td>
<td bordercolor=”#FFFFFF”><input name=”nome” type=”text” id=”nome” size=”33&#8243;></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14&#8243;>Seu email:</span></td>
<td bordercolor=”#FFFFFF”><input name=”email” type=”text” id=”email” size=”33&#8243;></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF” class=”style14&#8243;>Assunto:</td>
<td bordercolor=”#FFFFFF”><input name=”assunto” type=”text” id=”assunto” size=”33&#8243; /></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14&#8243;>Mensagem:</span></td>
<td bordercolor=”#FFFFFF”><textarea name=”mensagem” cols=”30&#8243; rows=”5&#8243; id=”mensagem”></textarea></td>
</tr>
<tr>
<td bordercolor=”#FFFFFF”> </td>
<td align=”right” bordercolor=”#FFFFFF”><input name=”enviar” type=”submit” id=”enviar” value=”enviar”></td>
</tr>
</table>
</form>
</body>
</html>

Agora vamos criar o arquivo que irá enviar esse formulário para seu email.
Não é necessário um conhecimento mais avançado em php para entender o código.
Lembre-se que estamos usando o método POST para enviar o formulário. Para que você possa entender como está vindo os dados do seu formulário, crie um novo documento e salve como formulario.php e digite o seguinte:

<?php print ‘<pre>’; print_r($_POST); print ‘</pre>’; ?>

Salve esse arquivo e abra o arquivo form.html preencha seu formulário e dê um Submit.
Deve ter aparecido algo do tipo:


Array (
[nome] => Gisele
[email] => gisele@gisele.com.br
[assunto] => Teste
[mensagem] => Testando formulário MX Studio
[enviar] => enviar
)Repare que os registros estão vindo em uma array, vamos juntar os dados para enviar para o email.
Código php:

<?php

/*A variável $mensagem recebe os dados da array. Repare que estamos concatenando de acordo com o formato que
queremos receber no email. O n é uma quebra de linha. */
$mensagem = “Nome: “.$_POST[’nome’].” n”;
$mensagem .= “Email: “.$_POST[’email’].” n”;
$mensagem .= “Email: “.$_POST[’assunto’].” n”;
$mensagem .= “Descrição:”. $_POST[’mensagem’];
/*
Função Mail:
Primeiro parâmetro: Coloque o email que vai receber os dados do formulário;
Segundo parâmetro: Coloque o titulo do email;
Terceiro parâmetro: Os dados do formulário.
*/
mail(”seu-email@provedor.com.br”, “Formulário - MX Studio”, $mensagem);

/*
Mensagem que será impressa na tela após o envio do formulário.
*/
echo ‘<h1>Enviado com Sucesso!</h1>’;
echo ‘<h1>Em breve entraremos em contato.</h1>’;
?>

Para quem quer colocar uma validação de campos obrigatórios no seu formulário, faça o seguinte:

<script language=javascript>
function validar() {
var valido = false;

with(document.form_mxstudio) {
if (nome.value.length == 0){
valido = false;
nome.focus();
alert (’Campo nome obrigatório.’);

}else if(email.value.length == 0) {
valido = false;
email.focus();
alert (’Campo email obrigatório.’);

}else if(assunto.value.length == 0) {
valido = false;
assunto.focus();
alert (’Campo assunto obrigatório.’);

}else if(mensagem.value.length == 0) {
valido = false;
mensagem.focus();
alert (’Campo mensagem obrigatório.’);

}else {
valido = true;
submit();
}
return valido;
}
}
</script>

Seu formulário está pronto!
Lembre-se! O lugar que você está hospedando o seu site tem que dar suporte ao PHP.

site de origem : http://meustutoriais.com.br



0 comentários:

Postar um comentário

 
top tutoriais | Design by Carlos Eduardo ©2010