Formulário De E-mail

ta ai meu amigo mais de qualquer maneira vc vai precisar de um arquivo de resposta em php ou em outra linguagem

- Primeiramente, devemos criar um formulário com os campos necessários.
Esse formulário pode ter quantos campos quiser, mas somente os que precisam ser validados, que terão o código que faz a validação.

 - Criando o formulário. Neste caso iremos criar um formulário com apenas alguns campos. São eles:

  Nome, Email, Assunto e Mensagem.

  

- Código do formulário. Abaixo segue o um código qualquer de um formulário que usaremos para aprender a função:



<body>
<div align="center">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td height="12"><font color="#FFFFFF" size="1">_</font></td>
    </tr>
    <tr> 
      <td height="19" valign="top"> <form action="http://www.site.com.br/formmail.php" method="POST" name="formulario" id="formulario" onSubmit="return ValidaFormulario();">
          <div align="center">
            <input type="hidden" name="redirect" value="http://www.site.com.br/obrigado.htm">
            <input type="hidden" name="recipient" value="e-mail@site.com.br">
          </div>
          <div align="center"> 
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="157">
              <tr> 
                <td width="39%" height="25" align="center"><div align="right"><font size="2" face="verdana"> 
                    Nome:&nbsp; </font></div></td>
                <td width="61%" align="center"><div align="left"><font size="2" face="verdana"> 
                    <input name="Nome" type="text" id="Nome" size="24" onSubmit="return ValidaFormulario();">
                    </font></div></td>
              </tr>
              <tr> 
                <td height="25" align="center"><div align="right"><font size="2" face="verdana">E-Mail:&nbsp; 
                    </font></div></td>
                <td height="25" align="center"><div align="left"><font size="2" face="verdana"> 
                    <input name="Email" type="text" id="Email" size="24" onSubmit="return ValidaFormulario();">
                    </font></div></td>
              </tr>
              <tr> 
                <td height="25" align="center"><div align="right"><font size="2" face="verdana"> 
                    Assunto:&nbsp; </font></div></td>
                <td height="25" align="center"><div align="left"><font size="2" face="verdana"> 
                    <input name="Assunto" type="text" id="Assunto" size="24" onSubmit="return ValidaFormulario();">
                    </font></div></td>
              </tr>
              <tr> 
                <td height="81" align="center" valign="top"> <p align="right"><font size="2" face="verdana">Mensagem:&nbsp; 
                    </font></p></td>
                <td height="81" align="center" valign="middle"><div align="left"><font size="2" face="verdana"> 
                    <textarea name="Mensagem" cols="24" rows="4" id="Mensagem" onSubmit="return ValidaFormulario();"></textarea>
                    </font></div></td>
              </tr>
              <center>
                <tr> 
                  <td height="1" colspan="2" align="center"> <div align="left"><font size="2" face="verdana"> 
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                      <input name="submit" type="submit" value="Enviar" onSubmit="return ValidaFormulario();">
                      &nbsp;&nbsp; 
                      <input name="reset" type="reset" value="Limpar" onSubmit="return ValidaFormulario();">
                      </font></div></td>
                </tr>
              </center>
            </table>
          </div>
        </form></td>
    </tr>
    <tr> 
      <td height="19" valign="top">
<div align="center"></div></td>
    </tr>
  </table>
</div>
</body>




Comentando:[

 - No código do formulario acima percebemos que a função ( onSubmit="return ValidaFormulario();" ) foi inserida em todos os campos.

 Pois é, essa é a função que é responsável por fazer uma conexão com o código que realiza a validação. O campo só é validado se nele estiver presente esta função. Como no código acima.
 Já em relação ao nome (ValidaFormulario), ele pode ser qualquer outro, porém deve ser igual ao do outro código que viremos em breve que faz a validação. Mas tome cuidado em alterá-lo, procure evitar espaços, acentos ou caracteres especiais, para que a função funcione corretamente.
 Tudo bem. Essa parte está terminada, agora será necessário criar o código que faz a validação dos campos que estão com o código que aprendemos acima.
 

 - Criando o código responsável pela validação do formulário.

 Dentro das tags <head></head> de seu site, coloque o código abaixo:
 
 

<script> // tag JavaScript   -   ### OBS ### - Todas essas explicações que estão escritas após ( // ) não são necessárias para o funcionamento do código, são apenas para explicação do código.

	// // Função de validação do formulário
  function ValidaFormulario () {

	// Função de validação do formulário - Nome
  if (document.formulario.Nome.value==""){ // O nome formulario se refere ao nome de seu formulario, caso queira alterar, basta mudar o nome de seu formulário e mudar todas as palavras desta tag com este nome.
  alert("Digite o seu Nome"); // Mensagem que será exibida quando o campo não for preenchido 
  document.formulario.Nome.focus(); // O nome Nome se refere ao nome do campo do seu formulário, caso queira alterar, basta mudar o nome do respectivo campo as palavras desta tag correspondentes ao nome do campo.
	return false;
	}
   // Função de validação do formulário - Email
  if (document.formulario.Email.value==""){ // O nome formulario se refere ao nome de seu formulario, caso queira alterar, basta mudar o nome de seu formulário e mudar todas as palavras desta tag com este nome.
  alert("Digite o seu Email"); // Mensagem que será exibida quando o campo não for preenchido
  document.formulario.Email.focus(); // O nome Nome se refere ao nome do campo do seu formulário, caso queira alterar, basta mudar o nome do respectivo campo as palavras desta tag correspondentes ao nome do campo.
	return false;
	}
   // Função de validação do formulário - Assunto
  if (document.formulario.Assunto.value==""){ // O nome formulario se refere ao nome de seu formulario, caso queira alterar, basta mudar o nome de seu formulário e mudar todas as palavras desta tag com este nome.
  alert("Digite um Assunto"); // Mensagem que será exibida quando o campo não for preenchido
  document.formulario.Assunto.focus(); // O nome Nome se refere ao nome do campo do seu formulário, caso queira alterar, basta mudar o nome do respectivo campo as palavras desta tag correspondentes ao nome do campo.
  return false;
	}
   // Função de validação do formulário - Mensagem
  if (document.formulario.Mensagem.value==""){ // O nome formulario se refere ao nome de seu formulario, caso queira alterar, basta mudar o nome de seu formulário e mudar todas as palavras desta tag com este nome.
  alert("Digite uma Mensagem"); // Mensagem que será exibida quando o campo não for preenchido
  document.formulario.Mensagem.focus(); // O nome Nome se refere ao nome do campo do seu formulário, caso queira alterar, basta mudar o nome do respectivo campo as palavras desta tag correspondentes ao nome do campo.  
  
  return false;
	}
	
	return true;
}
// -->

</script>
 



- Prontinho! Dentro do código está tudo explicado. Todas as funções. 

Está terminado a Validação do Formulário.

Agora caso queira adicionar a validação em mais algum campo, basta colocar a função ( onSubmit="return ValidaFormulario();" ) no campo desejado, como mostrado no decorrer do tutorial, o restante é só seguir a seqüência do código.
#1 paico

#2 juniorjtb

#3 Chrico

#4 Alex Hiroshi

#5 bitubas

#6 Chrico

#7 Alex Hiroshi

#8 Chrico

1 user(s) are reading this topic

Formulário De E-mail

1 user(s) are reading this topic

Entrar
