I need to send an email from a page when a form is submitted.

I thought I'd use jQuery post but I'm not really sure where to start. Would I use wp_mail()? And if so how could it be called?

Sorry if that seems vague. Just trying to send an email to the client before a form posts its data to another site;

$('#donationForm').submit(function() {

// send email to client before moving onto worldpay payment form

//  send data to worldpay....


2 Answers 2


Basically, you can use JavaScript to post to a WordPress function, then the WordPress function can invoke wp_mail() to send the message.

A great place to start would be the useful AJAX in Plugins article on the Codex. It walks you through all the steps required to add your JavaScript on the front-end, your PHP on the back-end, and everything you need to do to tie the two together.


First add your email processing function and hook it to wp_ajax hooks like this using your functions.php:

// if you want only logged in users to access this function use this hook
add_action('wp_ajax_mail_before_submit', 'mycustomtheme_send_mail_before_submit');

// if you want none logged in users to access this function use this hook
add_action('wp_ajax_nopriv_mail_before_submit', 'mycustomtheme_send_mail_before_submit');

// if you want both logged in and anonymous users to get the emails, use both hooks above

function mycustomtheme_send_mail_before_submit(){
    if ( isset($_POST['action']) && $_POST['action'] == "mail_before_submit" ){

    //send email  wp_mail( $to, $subject, $message, $headers, $attachments ); ex:
        wp_mail($_POST['toemail'],'this is the email subject line','email message body');
        echo 'email sent';
    echo 'error';

Then inside an your theme's js file create the AJAX call like this:

jQuery('#donationForm').submit(function() {

// send email to client before moving onto worldpay payment form
var data = {
    action: 'mail_before_submit',
    toemail: $('#myemailfield').val(), // change this to the email field on your form
    _ajax_nonce: $('#my_email_ajax_nonce').data('nonce'),
jQuery.post(window.location.origin + "/wp-admin/admin-ajax.php", data, function(response) {
    console.log('Got this from the server: ' + response);


Now add the nonce to your footer.php since it needs to be generated via PHP:

<span id="my_email_ajax_nonce" data-nonce="<?php echo wp_create_nonce( 'my_email_ajax_nonce' ); ?>"></span>
<?php wp_footer(); ?>

And you should be set.

  • thanks! got this working but had to remove '_ajax_nonce' as was causing error. Is it important? Dc
    – v3nt
    Jun 1, 2011 at 12:18
  • its the right way and bet practice to secure ajax calls.
    – Bainternet
    Jun 1, 2011 at 12:41
  • Thanks this took me a bit, but this was a pretty clear explanation. Much appreciated. Sep 18, 2016 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.