CODEWITHSUNDEEP
javascriptjqueryhtmlemailhtml-email
user4775991
user4775991

Reputation: 127

Pre-fill email with form data

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!

Upvotes: 4

Views: 4307

Answers (3)

Makyen
Makyen

Reputation: 33296

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>

Upvotes: 8

krishna raikar
krishna raikar

Reputation: 2675

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
        });
});

Upvotes: 1

arbuthnott
arbuthnott

Reputation: 3819

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:[email protected]?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.

Upvotes: 0

Related Questions