Reputation: 3938
I have converted this template into a WordPress theme. Everything works successfully except I can't get the correct url for the AJAX request in the contact_me.js section.
$.ajax({
url: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
I know it has to do with the way the files in WordPress are referenced. I have done similar things when adding js files in the HTML but I am not sure how to handle it in the js file.
EDIT: Maybe I have to add the code from contact_me.php to an ajax callback in functions.php?
EDIT 2 Here is my send_form which doesn't seem to be sending any mails.
function send_feedback(){
// Check for empty fields
if(empty($_POST['email']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$email_address = $_POST['email'];
$message = $_POST['message'];
// Create the email and send the message
$to = '[email protected]'; // Add your email address inbetween the '' replacing [email protected] - This is where the form will send a message to.
$email_subject = "Demo Feedback Form: $email_address";
$email_body = "You have received a new message from your demo feedback form.\n\n"."Here are the details:\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: [email protected]\n"; // This is the email address the generated message will be from. We recommend using something like [email protected].
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
}
add_action('wp_ajax_nopriv_send_feedback', 'send_feedback');
add_action('wp_ajax_send_feedback', 'send_feedback');
Upvotes: 0
Views: 200
Reputation: 3648
add in your header.php
<script>var ajaxURL = '<?php echo esc_js(admin_url('admin-ajax.php'));?>';</script>
add in your url: ajaxURL
in your case
$.ajax({
url: ajaxURL,
type: "POST",
data: {
action: 'send_form',
name: name,
phone: phone,
email: email,
message: message
},
in your functions.php
function send_form(){
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$message = $_POST['message'];
//Do your send mail function etc.
wp_die();
}
add_action('wp_ajax_nopriv_send_form', 'send_form');
add_action('wp_ajax_send_form', 'send_form');
Upvotes: 1