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:test@test.com .

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:contact@test.com?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:contact@zane.sh?' + '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:contact@zane.sh?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
            window.location = mail_url
        });
});

Answer 3

I think I would avoid using a form. An a tag is what we know will work, so I'd use that (you can still have the form in your html in case it's needed for styling or whatever)

<h2>Send a message</h2>
<form id="sendmsg" onsubmit="return false;">
    <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>
    <a id="hiddenmailer" style="display: none;"></a>
</form>

<script>
    $(document).ready(function() {
        $('#submit').click(function() {
            var mailtotext = "mailto:contact@zane.sh?subject=" + $('#subject').val() + "&body=" + $('#body').val());
            $('a#hiddenmailer').attr('href', mailtotext).click();
        });
    });
</script>

This is probably missing some validation or escaping needed for the subject and body input values, but this is the general idea.