javascript - Pre-fill email with form data - Stack Overflow

admin管理员组

文章数量:1353584

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!

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!

• javascript
• jquery
• html
• email
• html-email

Share Improve this question Follow edited Sep 16, 2017 at 23:12 user4775991 asked Sep 16, 2017 at 19:19 user4775991user4775991 12722 silver badges1414 bronze badges 2

• You can't with javascript only, you need to think security too! i guess you need to use a service like Gmail,Mailchimp.. with a Api Key then you can easily send a email without php & client interaction, – Kate Commented Sep 16, 2017 at 19:56
• @Kate Yes you can. See Makyen's answer, which I marked as correct. – user4775991 Commented Sep 17, 2017 at 16:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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

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.

本文标签： javascriptPrefill email with form dataStack Overflow