1

há dias venho procurando um bom tutorial, explicando do começo, meio e fim para a criação de um form com envio (PHP e JS), porém sem dar reload na página e também onde apresente uma msg (div), em verde se o e-mail foi enviado corretamente e em vermelho, caso não tenha ido ou faltado alguma informação obrigatória no form.

Agradeço desde já.

0

1 Resposta 1

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .