I am building a custom theme, and on my contact page, I want to send an email using AJAX. By doing some research, I have found a way to accomplish this.
Firstly, on submission of the form, I do some validations using regular 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);
}
})
}
this code simply prevets default and grabs the input data. then we send the data to the checkForm() function to check for any errors.
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')
}
}
if there are errors, it will error out the message by sending it to 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;
}
}
If there are no errors, we should make the ajax request to the back-end. However. in sending this ajax request, I am getting the following error:
jquery.min.js:4 POST http://elbe.local/contact-us/%3C?php%20echo%20admin_url(%27admin-ajax.php%27);%20?%3E 404 (Not Found)
from the error, I can tell that the problem is with the admin-ajax.php file. My javascript file is in a separate file, maybe that has something to do with it.
in my functions.php, this is the function taking care of sending the email.
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();
}
any guidance as to how to make this work would be really appreciated. Thank you!
