Como criar um formulário de contato HTML5 / CSS3 baseado em Ajax

 
 
  
Seu email foi enviado. Huzzah!
  

  
Erro ao enviar o formulário
  
 
 Nome   
  
 
 O email   
  
 
 mensagem <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Envie-nos um email!  
 
  

Você deve ter notado que há outra bloco condicional diretamente após o formulário inicial. Isso verifica uma variável chamada $ hasError e exibirá uma mensagem de erro após a confirmação. Esse método de fallback é usado somente se o JavaScript estiver desativado no navegador e, portanto, não pode gerar erros dinâmicos.

Todo o caminho podemos encontrar variáveis ​​individuais do PHP sendo verificado. As declarações estão regulando se o formulário já foi enviado com apenas quantidades parciais de dados preenchidos. Esse é outro sistema de fallback que exibe o conteúdo dos campos já preenchidos - um truque interessante para a experiência do usuário adequada!

Logo após a conclusão do nosso formulário, os poucos funções jQuery nós escrevemos. Vamos falar sobre estes primeiro, já que eles são a implementação padrão no pageload. No entanto, se o navegador não aceitar JavaScript, então, por padrão, podemos confiar em nosso código PHP.

Abrindo para jQuery

A maneira mais fácil de começar a falar sobre esse tópico seria mergulhar diretamente. Vou dividir blocos individuais linha por linha para que você possa ver o que o script está realmente verificando.

No entanto, se você se perder apenas revisar os arquivos de código do projeto. Todos os blocos completos são pré-escritos e bem documentados no site da jQuery. Para começar, abrimos nosso código semelhante a qualquer outro:

Se você estiver familiarizado com retornos de chamada você pode notar o postar() função tem um conjunto interno de parâmetros. Callbacks são funções menores que são chamadas sobre a resposta de dados de outra função.

Então, por exemplo, quando nossa jQuery.post () função com sucesso dispara um e-mail que vai chamar sua própria função interna para exibir a animação de deslizamento. Todo esse código pode ser escrito em seu próprio bloco e movido para outro lugar. No entanto, por causa deste tutorial é muito mais fácil escrever o retorno de chamada como uma função inline.

Rompendo nosso PHP

O último obstáculo a mencionar é o lógica por trás do nosso processador PHP. Este é o sistema backend que vai realmente chamar uma função de correio e mande a mensagem. Todo o código usado nos exemplos abaixo pode ser encontrado diretamente no topo da nossa página principal. .php arquivo, antes de qualquer saída HTML.

Existem também alguns estilos internos que atualizam a página. Não há nada especificamente novo aqui, então não entraremos em nenhum dos detalhes. No entanto, o styles.css documento está incluído no código do projeto e contém técnicas rudimentares de CSS3.

 
Para começar, abrimos nossa cláusula PHP e verificamos se o formulário foi submetido. o POSTAR variável “submetido” Na verdade, era um campo de entrada oculto adicionado no final do nosso formulário. É uma maneira útil de verifique se o usuário enviou alguma coisa ainda assim, não desperdiçamos recursos do servidor.
 
Depois disso, temos 3 separados if / else declaração verificando para ver se cada campo de entrada foi preenchido. Eu não vou incluir cada pedaço de lógica aqui, uma vez que são todos de natureza muito repetitiva. No entanto, para dar um breve exemplo, incluí a cláusula de verificação de e-mail abaixo:
 
// precisa de email válido if (trim ($ _ POST ['email']) === ") $ emailError = 'Esqueceu de entrar no seu endereço de e-mail.'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Você digitou um endereço de email inválido.'; $ HasError = true; else $ email = trim ($ _ POST ['email']); 
 
O PHP cortará todo o espaço em branco do valor e verificará se sobrou alguma coisa. Se assim for, nós temos um detalhado Expressão Regular (Regex) para ver se a string de entrada do nosso usuário corresponde a um padrão de e-mail.
 
Você certamente não precisa entender como preg_match () trabalha para construir este script. É uma função útil para determinar regras e requisitos para um tipo bem-sucedido de dados, mas comanda conhecimentos avançados de programação para realmente entender. Neste cenário, estamos garantindo que o usuário insira apenas alguns caracteres, inclui um @ símbolo seguido por 2-4 caracteres representando um Domínio de nível superior.
 
Depois que toda a nossa lógica passa e não retornamos erros, é hora de enviar nossa mensagem! Este código irá definir variáveis ​​individuais para personalizar nossa mensagem de e-mail e configurar alguns cabeçalhos de correio para o processo.
 
// após nenhum erro de falha, vamos enviar um email agora! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Mensagem enviada de'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nome: $ name \ n \ nEmail: $ email \ n \ nComentários: $ comentários"; $ headers = 'De:'. ' <'.$emailTo.'>'. "\ r \ n". 'Responder a: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // define nosso valor de conclusão booleano como TRUE $ emailSent = true;  
 
Se você estava se perguntando como o código iria descobrir seu endereço de e-mail, esta é a parte a ser preenchida. A primeira variável em nosso conjunto é intitulada $ emailTo e deve conter o que endereço de e-mail, que receberá a mensagem.
 
Dentro do nosso $ body variável nós tiramos proveito do \ n delimitador para adicionar novas linhas na mensagem. Isso adiciona pequenos canais para o nome do remetente, endereço de e-mail, seguido por uma pausa para a sua conteúdo da mensagem. É claro que você poderia passar o tempo bonita no monitor, mas essa estrutura funciona bem.
 
Conclusão
 
Isso fecha nosso tutorial para um formulário de contato avançado. Se você gostaria de estilizar seus elementos em relação aos meus, você pode conferir meu exemplo styles.css dentro do código do projeto. No entanto, a página é bem estruturada o suficiente para que você possa criar seu próprio visual e se sentir muito facilmente.
 
Sinta-se à vontade para baixar o código-fonte e examinar o que eu fiz um pouco mais de perto. É bom seguir um tutorial, mas ter acesso direto à origem do projeto pode ser inestimável. Eu também incluí uma breve folha de estilo para facilitar as personalizações, obrigado pela sua visão!