Galera, to com um entrave! To precisando enviar os dados de um formulário html por e-mail e estou usando o PHP pro server-side. Para enviar os dados do formulário para o PHP estou usando o Ajax (que tenho mais familiaridade com JS do que com PHP) e nele tenho duas funções que são ativas caso tenha sucesso e outra com erro. Eu já consigo ativar a função mail() no PHP porém a mensagem não chega com as variáveis que coloquei no PHP para enviar. Uso o Ajax para não haver o refresh da página e conseguir manipular as funções. Existe algum forma de fazer o 'no-refresh' e ativar as funções que preciso direto no PHP (criei um modal para a msg de sucesso e erro) ou devo fazer alguma alteração no meu código?
PHP
<?php
//Variáveis
$assunto = $_POST['assunto'];
$nome = $_POST['nome'];
$email = $_POST['email'];
$mensagem = $_POST['mensagem'];
$to = "afa00.papa@gmail.com";
$from = "afa00.papa@gmail.com";
//Headers config
$headers = "Content-Type:text/html; charset=UTF-8\n";
$headers .= "From: afaferz.ml <contato@afaferz.ml>\n";
$headers .= "X-Sender: <contato@afaferz.ml>\n";
$headers .= "X-Mailer: PHP v".phpversion()."\n";
$headers .= "X-IP: ".$_SERVER['REMOTE_ADDR']."\n";
$headers .= "Return-Path: <contato@afaferz.ml>\n";
$headers .= "MIME-Version: 1.0\n";
//Conteúdo e-mail
$subject = "Formulário Currículo - afaferz";
$templateHTML = '<table style="margin-top: 3em; margin-bottom: 3em; font-family: "Times New Roman", Times, serif;" align="left" border="0" cellpadding="0" cellspacing="0" width="600" height="auto">
<tr>
<td style="padding: .75em">
<span style="font-size: 1.25em; font-weight: bold; text-transform: uppercase;">Nome:</span>
<span style="margin-left: .5em; font-size: 1.25em">'.$nome.'</span>
</td>
</tr>
<tr>
<td style="padding: .75em">
<span style="font-size: 1.25em; font-weight: bold; text-transform: uppercase;">Email:</span>
<span style="margin-left: .5em; font-size: 1.25em">'.$email.'</span>
</td>
</tr>
<tr>
<td style="padding: .75em">
<span style="font-size: 1.25em; font-weight: bold; text-transform: uppercase;">Assunto:</span>
<span style="margin-left: .5em; font-size: 1.25em">'.$assunto.'</span>
</td>
</tr>
<tr>
<td style="padding: .75em">
<span style="font-size: 1.25em; font-weight: bold; text-transform: uppercase;">Mensagem:</span><br>
<span style="display:block; padding-top: .75em; font-size: 1.25em">'.$mensagem.'</span>
</td>
</tr>
</table>';
$body = $templateHTML;
mail($to, $subject, $body, $headers);
?>
JS
function animarSucesso(){
const ok = document.querySelector('.ok');
tituloModal.textContent = 'Enviado';
tituloMensagem.textContent = 'Obrigado pelo contato :D';
modal.style.display = 'block';
modalConteudo.classList.add('sucess');
setTimeout(()=>{
loading.style.display = 'none'
ok.style.display = 'block'
}, 1000);
return;
};
function animarErro(){
const x = document.querySelector('.x');
tituloModal.textContent = 'Erro ao enviar';
tituloMensagem.textContent = 'Tente novamente por favor :(';
modal.style.display = 'block';
modalConteudo.classList.add('error');
loading.style.display = 'none'
setTimeout(()=>{
x.style.display = 'block'
}, 1000);
return;
};
//Enviar formulário AJAX
const formulario = document.querySelector('[name="formularioOndeEstou"]');
const botaoFormulario = document.querySelector('[name="enviar"]')
jQuery(document).ready(function(){
jQuery(formulario).submit(function(e){
e.preventDefault();
var assunto = $('[name="option-selected"]');
var nome = $('[name="nome"]');
var email = $('[name="email"]');
var mensagem = $('[name="mensagem"]');
var urlData =
"&assunto=" + assunto
+ "&nome=" + nome
+ "&email=" + email
+ "&mensagem=" + mensagem;
jQuery.ajax({
async: true,
type: "POST",
url: "./assets/php/sendEmail.php",
dataType: "html",
data: urlData,
success: function(data)
{
animarSucesso();
formulario.reset();
setTimeout(()=>{
modal.style.display = 'none';
}, 2000)
},
error: function()
{
animarErro();
formulario.reset();
setTimeout(()=>{
modal.style.display = 'none';
}, 2000)
}
});
return false;
});
});