Ponhamos o seguinte form, simples, que envia um email ao email introduzido e dá um retorno simples no form dizendo "Obrigado".
HTML:
<form action="">
<label for="email">Escreva por favor o seu email</label>
<input type="text" name="email" />
<button type="submit">Enviar</button>
<div id="avisos"></div>
</form>
Aqui tens um form, um input e um botão com o tipo submit
que quando pressionado dispara o evento submit
da form que o JavaScript vai usar/interceptar.
JavaScript:
var form = document.querySelector('form');
function validar(email) {
email = email.split(' ').join(''); // retirar espaços vazios
if (!email) return false; // caso email esteja vazio
if (!email.match(/\S+@\S+\.\S+/)) return false; // verificação generalista
return true;
}
function enviar(email, info) {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
info.innerHTML = ajax.responseText;
}
}
ajax.open('POST', 'http://seusite.com/enviar.php', true);
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ajax.send('email=' + email);
}
form.addEventListener('submit', function (e) {
e.preventDefault();
var avisos = document.getElementById('avisos');
var email = this.querySelector('input[name="email"]');
var ok = validar(email.value);
if (ok) return enviar(email.value, avisos);
else return avisos.innerHTML = 'O email não está bem preenchido';
});
Aqui tens 3 partes diferentes. O form.addEventListener
intercepta o evento submit
e pára-o com e.preventDefault();
para a página não ter um refresh.
Depois envia o email para uma função validar
que retorna um Booleano para sabermos se o email estava ok ou se tinha problemas. Se tido estiver OK manda para a função que faz o pedido ajax. Caso contrário dá erro ao utilizador.
Por final é enviado o email para o servidor. Se quiseres usar este script tens de usar o teu dominio/url aqui. Eu testei agora este código no meu servidor e tudo funcionou bem.
PHP:
<?php
$email = $_POST['email'];
// fazer mais verificações e adicionar à base de dados aqui...
$to = $email;
$subject = 'Newsletter';
$message = 'Obrigado!';
$headers = 'From: [email protected]' . "\r\n" .
'Reply-To: [email protected]' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$ok = mail($to, $subject, $message, $headers);
if ($ok) echo $message;
else echo 'Houver um problema com o envio de email...';
?>
Por fim no PHP, bem simples o exemplo, envia um email para o email que foi recebido e retorna para o JavaScript Obrigado!
que vai ser colocado na página para o utilizador saber que está tudo bem.
Conclusão:
A tua pergunta é bam ampla e eu deixo uma resposta que funciona mas que toca somente ao de leve nos passos que tens de dar. Podes ainda ler mais aqui no SOpt sobre como verificar emails em PHP, a função mail do PHP, login e senhas, como evitar refresh da página, etc etc... Dá uma olhada ao código e se tiveres problemas sugiro que faças uma pergunta à parte, sobre o problema específivo. Aí será possível responder com mais detalhe.