Olá a pessoal,
Esse tutorial espero que ajude muitas pessoas, pois tenho visto muito essa dúvida no fórum!
Vamos criar um formulário básico de contato para um site, como o exemplo abaixo:
Pré-Requisitos
Objetivo
Criar um formulário de contato através do Dreamweaver junto com o PHP.
Conteúdo
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).
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).
E 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″> ;
Campo Email = < input name=”email” type=”text” id=”email” size=”33″> ;
Campo Assunto = < input name=”assunto” type=”text” id=”assunto” size=”33″> ;
Campo Mensagem = < input name=”mensagem” type=”text” id=”mensagem” size=”33″> ;
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″ cellpadding=”2″ cellspacing=”2″ bordercolor=”#666666″>
<tr>
<td colspan=”2″ bordercolor=”#FFFFFF” bgcolor=”#0099CC”><h3 class=”style1″>Formulário MX Studio </h3></td>
</tr>
<tr>
<td width=”25%” align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Seu nome:</span></td>
<td bordercolor=”#FFFFFF”><input name=”nome” type=”text” id=”nome” size=”33″></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Seu email:</span></td>
<td bordercolor=”#FFFFFF”><input name=”email” type=”text” id=”email” size=”33″></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF” class=”style14″>Assunto:</td>
<td bordercolor=”#FFFFFF”><input name=”assunto” type=”text” id=”assunto” size=”33″ /></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Mensagem:</span></td>
<td bordercolor=”#FFFFFF”><textarea name=”mensagem” cols=”30″ rows=”5″ 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>
Pronto! Seu formulário está pronto!
Lembre-se! O lugar que você está hospedando o seu site tem que dar suporte ao PHP.
CONSIDERAÇÕES FINAIS
Espero que tenha tirado a dúvida do pessoal em relação a isso. É um formulário simples, mas acho que supre a necessidade de uma maioria!
No comments:
Post a Comment