I'm havingo some trouble with a contact form I'm working on. I'm using ajax to submit it and I've noticed that from localhost and from the production server, the test messages I've sent will not be delivered. I'm not sure if it's a network delay or if this is caused because I'm using wordpress nonces.
Here is the code, I'm verifying the nonce like a normal post request without ajax, no error is logged but no message will be sent. Please help me.
HTML:
<form method="POST" action="<?php echo esc_url(admin_url('admin-ajax.php')); ?>" id="message-form">
<div class="form-row mb-3">
<div class="col-sm-12 col-md-6 col-lg-6">
<input type="text" class="form-control" id="" name="fname" placeholder="<?php _e('Nome'); ?>" required />
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<input type="text" class="form-control" id="" name="lname" placeholder="<?php _e('Cognome'); ?>" required />
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<input type="text" class="form-control" id="" name="phone" placeholder="<?php _e('Numero'); ?>" required />
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<input type="email" class="form-control" id="" name="email" placeholder="<?php _e('Email'); ?>" required />
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<input type="text" class="form-control" id="" name="subject" placeholder="<?php _e('Oggetto'); ?>" required />
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<textarea class="form-control" name="message" placeholder="<?php _e('Messaggio'); ?>" required></textarea>
</div>
</div>
<input type="hidden" name="action" value="send_message">
<?php wp_nonce_field('send_message', 'message_hash'); ?>
<a href="#" class="section-link hide" id="submit-form"><?php _e('Invia'); ?></a>
</form>
JS:
$('#submit-form').on('click', function(e){
e.preventDefault();
var data = $('#message-form').serialize();
$.ajax({
type: 'POST',
url: wpcf.ajaxurl,
data: data,
success: function(response){
$('#message-notice').css({'display':'block'});
$('#message-form')[0].reset();
setTimeout(function(){
$('#message-notice').css({'display':'none'});
}, 3000);
console.log('Done!');
}
});
});
PHP:
/**
* Form contatti front-end
*/
function submit_contact_form()
{
if( !isset($_POST['message_hash']) || !wp_verify_nonce( $_POST['message_hash'], 'submit_message' ) ){
echo 'Errore';
exit;
}
// Customer contacts and message
$email = sanitize_email($_POST['email']);
$fname = sanitize_text_field($_POST['fname']);
$lname = sanitize_text_field($_POST['lname']);
$phone = sanitize_text_field($_POST['phone']);
$subject = sanitize_text_field($_POST['subject']);
$message = "Hai ricevuto un nuovo messaggio da: $fname $lname \n";
$message .= "Puoi contattare l'utente utilizzando il numero: $phone \n";
$message .= "Testo del messaggio: \n";
$message .= sanitize_textarea_field($_POST['message']);
// send ticket
$to = '[email protected]';
$headers[] = "From: $fname $lname <$email>";
wp_mail( $to, $subject, $message, $headers );
}
add_action( 'wp_ajax_send_message', 'submit_contact_form' );
add_action( 'wp_ajax_nopriv_send_message', 'submit_contact_form' );
NB: I've localized the script in function files in this way, I'm not sure if this can be a problem, but I have already localized the ajax url for a dashboard widget and it will not work but on other website it's working well:
function _res(){
wp_enqueue_style('style', get_template_directory_uri().'/style.min.css');
wp_register_script('main', get_template_directory_uri().'/assets/js/main.js', array('jquery'), null );
$localize = array(
'ajaxurl' => admin_url('admin-ajax.php'),
);
wp_localize_script('main', 'wpcf', $localize);
wp_enqueue_script('main');
}
add_action('wp_enqueue_scripts', '_res');