Skip to content

Criando Formulário de envio de e-mail

Criando Formulário de envio de e-mail

Nosso formulário de envio de e-mail se divide em 2 páginas, o formulário principal e a página em PHP que é a página que realmente envia os e-mails.

A princípio vamos começar pelo formulário, ele tem como função captar as informações a serem enviadas para o e-mail.

Para isso iremos usar o Dreamweaver um programa de edição de códigos voltados para web. Basta0 iniciar o programa e selecionar a opção “HTML”

criando-formulario-de-envio-de-e-mail2

A partir dai vamos na aba “code” onde podemos digitar o código da página.

criando-formulario-de-envio-de-e-mail3

Vamos utilizar as seguinte tag abaixo:

<table> </table>

<form></form>

<input />

<textarea></textarea>

A tag <table> é responsável por começarmos uma tabela. Esta tabela nós deixamos com borda 0 ou seja ela não é vista pelo usuário. O atributo cellpadding é definido como “5” para que exista uma margem interna, facilitando a visualização. Também definimos cellspacing como 0 para evitar margens externas às células, e alinhamos a tabela ao centro.

Criaremos  uma tabela de 2 coluna por 6 linhas, e depois nas 4 linhas do meio nós iremos dividir em 2 colunas, portanto o código completo da nossa tabela fica da seguinte forma:

<table width="500" cellpadding="5" cellspacing="0" border="0" align="center">
<tr>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">&nbsp;</td>
</tr>
</table>

Depois da tag <table>, adicionamos uma “TR”, que é uma linha da tabela, e dentro dessa linha colocamos a tag “TH”, indicando o cabeçalho desta tabela.

Onde encontramos escrito &nbsp; é onde realmente podemos colocar nosso campos e nossos textos.

Os campos onde os dados são inseridos são chamados de input e textarea. A diferença entre os dois tipos é que no textarea podemos digitar várias linhas.

O código para nossos inputs é o seguinte (neste caso, para o campo nome):

<input type="text" name="nome" size="40" />

E o código para nosso textarea é o seguinte:

<textarea name="nome" cols="30" rows="5"></textarea>

Note que em todos os campos existe o atributo name. Ele é o responsável pela identificação do campo que será enviado para o PHP fazer o envio, tornando-se indispensável.

Nos inputs, type se refere ao tipo de dado inserido no form como não pedimos nenhum campo do tipo senha ou algo parecido vamos deixar todos como text, porém podemos deixar no lugar de text como password e então o campo realmente adquire características de um campo senha, como não mostrar os dados.

O atributo size indica o tamanho que este campo apresenta em relação ao quantidade de caracteres que podem ser inseridos. O mesmo vale para cols.

Já o atributo rows indica o número de linhas visíveis no textarea.

O campo input pode ser copiado mais 2 vezes: uma para e-mail outra para assunto. Porém não se esqueça de mudar os respectivos nomes.

Para que o formulário funcione o que falta é o form propriamente dito, o <form> fica antes da tabela, sendo assim engloba toda a tabela, e o comando </form> fica depois do fim da tabela pois ele delimita a área a ser enviada.

<form action="envia.php" method="post"></form>

No formulário, temos os atributos action e method.

Action representa o arquivo para o qual vamos enviar os dados (este ainda será criado). Ele será o responsável pelo envio do e-mail. Por fim temos o method, ele representa o método pelo qual as informações serão enviadas: get ou post. No nosso caso, post.

Tendo em vista que já criamos praticamente o form completo vamos agora colocar os botões que irão ser os responsáveis por apagar as informações nos campos e o botão responsável pelo envio.

<input type="submit" value="Enviar" /> <input type="reset" value="Limpar" />

O mais importante aqui é o “type”: ele realmente define o tipo do botão podendo ser o de enviar e o de limpar os campos. E nós os colocamos no fim de nossa tabela. Até agora nosso código está assim:

<form action="envia.php" method="post">
<table width="500" cellpadding="5" cellspacing="0" border="0" align="center">
<tr>
<th colspan="2">Formulário de Email</th>
</tr>
<tr>
<td align="right"><strong>Nome:</strong></td>
<td><input type="text" name="nome" size="40" /></td>
</tr>
<tr>
<td align="right"><strong>E-mail:</strong></td>
<td><input type="text" name="email" size="40" /></td>
</tr>
<tr>
<td align="right"><strong>Assunto:</strong></td>
<td><input type="text" name="assunto" size="40" /></td>
</tr>
<tr>
<td align="right"><strong>Mensagem:</strong></td>
<td><textarea name="nome" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Enviar" /> <input type="reset" value="Limpar" /></td>
</tr>
</table>
</form>

O PHP

Depois de criado o formulário HTML nós precisamos criar o php que é o responsável pelo envio das informações para o e-mail, para criarmos nosso formulário vamos começar um novo arquivo chamado enviar.php pelo Dreamweaver:

criando-formulario-de-envio-de-e-mail7

Para começar uma página php precisamos iniciar a página com uma tag <?php e finalizar a página com um ?>  segue o mesmo princípio do <body> </body> de uma página HTML padrão:

<?php
$hoje_tmp = getdate();
$nome = $_POST["nome"]; //trata a variável nome
$email = $_POST["email"]; //trata a variável e-mail
$assunto = $_POST["assunto"]; //trata a variável assunto
$mensagem = $_POST["mensagem"]; //trata a variável mensagem
$enviou = mail("seu_e-mail@vem.aqui", // aqui você coloca o seu e-mail
"$assunto",
"Nome: $nome
E-mail: $email
Assunto: $assunto
Mensagem: $mensagem",
"From: $email <$nome>");
if ($enviou){
    header('location: contato1.html');
} else {
    header('location: contato2.html');
}
 
?>

Esta é a programação por trás de nossa página php, a página tem o nome de falar.php não podemos nos esquecer disso, pois nós criamos com este nome .

Dentro desta programação podemos ver os seguinte código $nome = $_POST[“nome ”]; dentro do PHP isso quer dizer o seguinte a variável nome é igual ao post (método que usamos pra enviar as informações da outra página) e dentro das aspas temos o nome da variável que criamos no formulário, isso se aplica aos 4 campos. Por fim tempo o envio do e-mail, e onde esta o exemplo seu_e-mail@vem.aqui colocamos o e-mail que deseja receber as informações. Depois disso as informações que o sistema pegou ele insere nesta na ordem em que eles aparecem em vermelho na programação podendo ser alterados.

Logo depois do envido das informações temos uma condição o conhecido if (se), ele representa a seguinte função “se a variável $enviou for verdadeira vamos para a página contato1.html else (senão) nós iremos para a página contato2.html.

Confira um exemplo funcionado.

DICA: Você pode incrementar seu formulário, utilizando validação dos campos com jQuery e adicionando máscaras jQuery.

No comment yet, add your voice below!


Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *