How do I call wp_mail from HTML?

Question

This is meant to be up in the next week or so, but I am having a lot of trouble getting the site to send emails to an address specified in an input box.

I need to use wp_mail as I need to be able to pass php variables (email, body AND attachment) to an email.

I have set up the form correctly as far as I can see, but after searching around a bit I found out that using JQuery (AJAX specifically) was the best/only way to do this, but I have no idea how that all works.

I am hoping someone here can explain this to me so I can get this working as quickly as possible.

In my shortcode, this is added to the page(ignore the script function, failed attempt):

<div class="downloadHolder">
            <h3>Download</h3>
            <p style="margin-bottom: 20px;">Please note: FTB files can only be used if you have Free The Blobs on Android or iOS.</p>
            <a href="<?php echo $intro;?>" download="<?php echo basename($intro) ?>" class="demoBtn">Download for PC</a>
            <!--<a href="#" class="demoBtn">Demo</a>--><br>
            <input type="text" name="emailValue" placeholder="Email Address" class="emailInput" style="text-align: center;">
            <br><span>(We do NOT collect email addresses.)</span><br><br>
            <button onclick="echoSendMail()" class="downloadBtn" style="width: 100% !important;">Email for Mobile</button>
        </div>
        <script>
            function echoHello(){
                alert("<?PHP emailSend(); ?>");
            }
</script>

And later in that same php file, I have this function($intro is the url to an uploaded file (the attachment)):

function emailSend(){
    $to = $_GET['emailValue'];
    $subject = 'Download for'.basename($intro);
    $msg = 'Your download for'.basename($intro).'is attached to this email.';
    $headers = 'From: My Name <myname@mydomain.com>' . "\r\n";
    $mail_attachment = array(get_post_meta($post -> ID, $key = 'podcast_file', true));
    wp_mail($to, $subject, $msg, $headers, $mail_attachment);
}

Answer 1

First the way to do this is with a form using the post method, it is slightly easier to understand:

<!-- form with AJAX action and iframe target -->
<form method="post" action="<?php echo admin_url('admin-ajax.php'); ?>" target="emailsendframe">
<!-- AJAX action field to trigger function-->
<input type="hidden" name="action" value="download_email_send">
<!-- Post ID field -->
<input type="hidden" name="intro" value="<?php echo basename($intro); ?>">
<input type="hidden" name="postId" value="<?php echo $post->ID; ?>">
<input type="submit" class="downloadBtn" value="Download">
</form>
<!-- iframe for submitting to -->
<iframe name="emailsendframe" id="emailsendframe" src="javascript:void(0);" style="display:none;"></iframe>

Of course you can do the same in a javascript function with get, but you would need to add an id to the email input element so you can add it on easily... (The caveat being if you have multiple download buttons on the same page this is not going to work, as id needs to be unique you would need to add more code to make it so.)

<!-- note id attribute is added -->
<input type="text" name="emailValue" id="emailValue" placeholder="Email Address" class="emailInput" style="text-align: center;">
<!-- button can stay as you have it -->
<button onclick="emailsend();" class="downloadBtn">Download</button>
<!-- get method AJAX email send script -->
<script>function emailsend() {
    emailvalue = document.getElementById('emailValue').value;
    email = encodeURIComponent(emailvalue);
    intro = encodeURIComponent('<?php echo basename($intro); ?>');
    downloadurl = '<?php admin_url('admin-ajax.php'); ?>?action=download_email_send&postId=<?php echo $post->ID; ?>&emailValue='+email+'&intro='+intro;
    document.getElementById('emailsendframe').src = downloadurl;
}</script>
<!-- iframe for submitting to -->
<iframe name="emailsendframe" id="emailsendframe" src="javascript:void(0);" style="display:none;"></iframe>

Then in your theme's function.php (or a plugin or mu-plugins folder) add the corresponding AJAX function by appending the action query value to wp_ajax_ (for logged in users) and/or wp_ajax_nopriv_ (anonymous users) actions in WordPress:

// AJAX trigger for download_email_send action
add_action('wp_ajax_download_email_send','download_email_send');
add_action('wp_ajax_nopriv_download_email_send','download_email_send');

// note $_REQUEST will work with $_POST or $_GET methods
function download_email_send() {
    $to = $_REQUEST['emailValue'];

    // preferably add some email address format validation here
    // $validate = some_email_validate_function($to);
    // if ($validated) {$message = 'Please check your email for typos.';}
    // else {
        $post_id = $_REQUEST['postID'];

        // ! you would need to redefine $intro here !
        $subject = 'Download for '.$_REQUEST['intro'];
        $msg = 'Your download for '.$_REQUEST['intro'].' is attached to this email.';
        $headers = 'From: My Name <myname@mydomain.com>' . "\r\n";
        $mail_attachment = array(get_post_meta($post_id, 'podcast_file', true));
        $send = wp_mail($to, $subject, $msg, $headers, $mail_attachment);

        if ($send) {$message = 'Success! Check you email address.';}
        else {$message = 'Error: Mail sending failed.';}
    // }

    // alert the user to the result
    echo "<script>alert('".$message."');</script>";
    exit;
}