Pre-fill email with form data

Question

I am looking to have an HTML form that, using only JS/jQuery (no PHP), takes data from a "subject" and "message" field, and sends an email. I do not want the server to send the email, as HTML and JS are client-side, not server-side. Again, no PHP.

However, I do want it to open the users mail client but have the subject and body pre-filled with the form data, and the to field prefilled with my email address. Essentially, I need a more advanced mailto:[email protected].

Here is my contact form so far:

<h2>Send a message</h2>
<form id="sendmsg">
    <div class="field">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" value="" />
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea name="body" id="body" rows="6"></textarea>
    </div>
    <ul class="actions">
        <li><input type="submit" id="submit" value="Submit" /></li>
    </ul>
</form>

I have tried several attempts such as this (in jQuery):

<script>
    $(document).ready(function() {
        $('#submit').click(function() {
            $('#sendmsg').attr('action', 'mailto:[email protected]?subject=' + $('#subject').val() + '&body=' + $('#body').val());
            $('#sendmsg').submit();
        });
    });
</script>

Help is appreciated, thanks!

Answer 1

You can just have a normal <a> link with an href which you keep updated with the contents of the subject and body. When the user clicks on it, the user's default mail client is opened with the email with the "To", "Subject" and body filled in with the contents of your inputs. Note that the subject and body need to be encoded with encodeURIComponent(). If you have a different email address, that may also need to be encoded.

Due to the way Stack Overflow encapsulates snippets for security reasons, the "Send email" button does not work in following snippet. It does work on a normal page. You can try it in this JSFiddle.

$(document).ready(function() {
    //Save references to elements. Don't do DOM walks in event handlers when not needed.
    var $sendEmailEl = $('#send-email');
    var $subjectEl = $('#subject');
    var $bodyEl = $('#body');
    function updateEmailLink() {
        $sendEmailEl.attr('href', 'mailto:[email protected]?' +
            'subject=' + encodeURIComponent($subjectEl.val()) +
            '&body=' + encodeURIComponent($bodyEl.val()));
        //console.log($sendEmailEl.attr('href'));
    }
    $('#subject,#body').on('input', updateEmailLink);
    updateEmailLink();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Send a message</h2>
<div id="sendmsg">
    <div class="field">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" value="" />
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea name="body" id="body" rows="6"></textarea>
    </div>
    <ul class="actions">
        <li><a id="send-email" href=""><button>Send email</button></a> &lt;--- This doesn't work from within a snippet, but does work on a page.</li>
    </ul>
</div>

Answer 2

Try this.Its simple

$(document).ready(function(){
          $('#submit').click(function(e) {
            e.preventDefault();
            mail_url = 'mailto:[email protected]?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
            window.location = mail_url
        });
});