Я создаю собственную тему, и на своей странице контактов я хочу отправить электронное письмо с использованием AJAX.Проведя некоторые исследования, я нашел способ сделать это.
Во-первых, при отправке формы я провожу некоторые проверки с использованием обычного javascript:
const contactFormSubmit = () => {
const submitButton = document.querySelector('#contact-submit');
console.log(submitButton);
document.addEventListener('click', e => {
if (e.target == submitButton) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
checkForm(name, email, message);
}
})
}
этот код просто сохраняет значение по умолчанию и захватывает входные данные.затем мы отправляем данные в функцию checkForm () для проверки на наличие ошибок.
const checkForm = (name, email, message) => {
if (name && message && email) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
jQuery.ajax({
url: `<?php echo admin_url('admin-ajax.php'); ?>`,
type: "POST",
cache: false,
data:{
action: 'send_email',
name: name,
email: email,
message: message,
},
success:function(res){
alert("Email Sent.");
}
});
printMessage('success', 'Thank you for you email. We will get back to you as soon as we can');
} else {
printMessage('error', 'email is not in the correct form')
}
} else {
printMessage('error', 'Make Sure all fields are filled out')
}
}
, если есть ошибки, она выдаст сообщение об ошибке, отправив его в printMessage.
const printMessage= (outcome, message) => {
if (!messageOn) {
resultMessageContainer = document.createElement('div');
pageContent = document.querySelector('.contact-container');
document.body.insertBefore(resultMessageContainer, pageContent);
} else {
resultMessageContainer.innerHTML = '';
}
if (outcome == 'success') {
resultMessageContainer.innerHTML = `${outcome} ${message}`;
console.log('SUCCESS');
messageOn = true;
} else if (outcome == 'error') {
resultMessageContainer.innerHTML = `${outcome} ${message}`;
console.log('failure');
messageOn = true;
}
}
Если ошибок нет, мы должны сделать запрос ajax на сервер.Тем не мение.при отправке этого запроса ajax я получаю следующую ошибку:
jquery.min.js:4 POST http://elbe.local/contact-us/%3C?php%20echo%20admin_url(%27admin-ajax.php%27);%20?%3E 404 (Not Found)
из ошибки, я могу сказать, что проблема с файлом admin-ajax.php.Мой файл JavaScript находится в отдельном файле, может быть, это как-то связано с этим.
в моем functions.php, эта функция заботится об отправке электронной почты.
add_action( 'wp_ajax_send_email', 'callback_send_email' );
add_action( 'wp_ajax_nopriv_send_email', 'callback_send_email' );
function callback_send_email(){
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$message= $_REQUEST['message'];
$subject = "Contact Form";
$email_body = "The following prospectus has contacted you.<br>".
"Name: $name. <br>".
"Email: $email. <br>".
"Message: $message. <br>";
$to = "naderabouezze93@gmail.com";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: $name <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$mail = mail($to,$subject,$email_body,$headers);
if($mail){
echo "Email Sent Successfully";
}
die();
}
Любые указания относительно того, как сделать эту работу, были бы очень благодарны.Спасибо!