wp_mail script with jQuery post

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?

Read More

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....
this.submit();

});

Related posts

Leave a Reply

2 comments

  1. 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.

  2. 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(){
        check_ajax_referer('my_email_ajax_nonce');
        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';
            die();
        }
        echo 'error';
        die();
    }
    

    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.