quinta-feira, 9 de fevereiro de 2012

0 Tutorial: Formulário de Contato

 Meus macarons do McCafé *-*

Ooi meninas! Vocês já viram que na página ‘ Contato ‘ , eu tenho uma Cbox, e um formulário de contato? Então , hoje eu vou postar como fazer um formulário igual aquele ! No próximo post talvez , eu poste uns cabeçalhos , ok? Haha . Clique em Continue Lendo , para ver o tutorial .
Primeiro créditos a esse blog . ;) Agora vamos lá , você já deve estar com a página criada , caso não esteja , Páginas > Nova página > Criar página em branco , feito isso , com o editor da página aberto , clique em ' Editar HTML ' ou ' HTML ' .
Agora você clica em 'Opções' e edita o que tem que ser editado, o meu está editado assim : ' não permitir, ocultar existentes ' , ' mostrar HTML literalmente ' , ' usar tag ' .
Você edita o seu do jeito que preferir ok? O que eu mostrei acima , é só um 'exemplo' .
É só colar o código abaixo, e mudar o que está em vermelho , ok?

<script language="javascript">

    function verifica(){
        if ((document.FormContato.nome.value == "") || (document.FormContato.email.value == "") || (document.FormContato.mensagem.value == "")){
            alert("Preencha os campos marcados com '*'");
            return false;
        }
        else
            return true;
    }
</script>
<br />
<form action="http://www.ferramentasblog.com.br/templates/formmail.php" method="post" name="FormContato" onsubmit="return verifica();">
<input name="receber" type="hidden" value="SEUEMAIL@AQUI.COM" />
<br />
<div style="border-bottom: 1px dotted #3A6DA1;">
<span style="font-size: 18px; font-weight: bold;">Contato:</span><br />
Preencha os campos abaixo para entrar em contato comigo !<br />
Não esqueça do seu e-mail no final da mensagem, para eu poder te responder. Seu e-mail não será repassado nem nada.<br />
<span style="font-size: 12px;">Os campos marcados com "</span><span style="color: #6fa8dc; font-size: 12px;"><b>*</b></span><span style="font-size: 12px;">" são obrigatórios.</span></div>
<table border="0" style="width: 450px;">
  <tbody>
<tr>
    <td><b>Nome<span style="color: #3d85c6;">*</span>:</b><br />
<input maxlength="50" name="nome" size="50" type="text" /><br />
<i><span style="font-size: 10px;">máximo de 50 caracteres</span></i></td>
  </tr>
<tr>
    <td height="60" valign="bottom"><b>E-mail para contato<span style="color: #3d85c6;">*</span>:</b><br />
<input maxlength="200" name="email" size="50" type="text" /><br />
<i><span style="font-size: 10px;">máximo de 200 caracteres</span></i></td></tr>
<tr><td height="80" valign="bottom"><b>Assunto:</b><br />
<input maxlength="100" name="assunto" size="50" type="text" /><br />
<i><span style="font-size: 10px;">máximo de 100 caracteres</span></i></td>
  </tr>
<tr>
    <td height="210" valign="bottom"><b>Mensagem<span style="color: #3d85c6;">*</span>:</b><br />
<textarea cols="50" name="mensagem" rows="10"></textarea><br />
<div align="right">
<i><span style="font-size: 10px;">Criado por <a href="http://www.ferramentasblog.com/">[ FerramentasBlog.com ]</a></span></i></div>
</td>
  </tr>
</tbody></table>
<div style="border-top: 1px dotted #3A6DA1;">
<b>Obrigada pela mensagem ! *-*</b><br />
Agora, basta clicar em "Enviar" para enviar a sua mensagem..<br />
<br />
<input name="enviar" type="submit" value="Enviar" /></div>
</form>
O que está em vermelho , é o que você muda , as cores , mude de acordo com o seu blog, se ele é verde e rosa , coloque verde e rosa nos ' * ' se quiser. Mas Ana , pq as palavras estão em vermelho? Pois , você pode mudar o que está escrito, no meu formulário, por exemplo, eu que escrevi tudo. 
Meninas , deu pra ver que eu sou horrível explicando, não é mesmo? Pois é , trágico ... Mas espero que vocês tenham entendido e gostado . Caso dê errado algo , ou você queira outro , clique aqui . Beijos *o* 

0 comentários: