Search code examples
javascripthtmlmessagemailto

How to prevent form fields ending up in the message body when using HTML mailto?


I'm playing around with mailto: and am wondering why the form I'm using to collect the data to be put in the email client fields also ends up in the message body like so:

hello   // test body
msg_address=hello@some.com
msg_comment=hello
msg_cc_message=on 

My form action attribute is set like this:

var form = $(this).closest('form'),
    first = "info",
    last = "some.com"
    mailto = "mailto:"+first+"@"+last+"?",
    subject = "subject=Website enquiry&",
    message = "body="+$('#msg_comment').val(),
    bcc = $('#msg_cc').is(':checked') ? "bcc=" + form.find('#msg_address').val() + "&" : "";

form.attr("action",mailto+bcc+subject+message).submit()

I would like the message body to only contain what's set in message and not the whole form content including form field names.

Question:
Is there any way to prevent the form fields showing up in the message body?

EDIT:
Here is my form:

<form action="" method="post" enctype="text/plain" name="mailer">
    <label for="msg_address" data-i18n="contact.label_email" class="t">Email:</label>
    <input data-role="text" type="text" id="msg_address" name="msg_address" value="" maxlength="100" />

    <label for="msg_comment" data-i18n="contact.label_message" class="t">Your Message:</label>
    <textarea rows="10" cols="20" id="msg_comment" name="msg_comment"></textarea><br />

    <input type="checkbox" name="msg_cc" id="msg_cc" class="t" data-i18n-target="" data-i18n="" />
    <label for="msg_cc" data-i18n="contact.label_cc" data-i18n-target=".ui-btn-text" class="t">CC to Email address provided</label>

    <div data-role="controlgroup" data-type="horizontal" class="mailer_menu">
      <input type="reset" value="Reset" data-i18n="contact.delete" data-i18n-target="" class="t" />
      <input type="button" id="mail_trigger" value="Send" data-i18n="contact.send" class="t" data-iconpos="right" data-i18n-target="" data-theme="b" data-icon="arrow-r" />
    </div>
  </form>

Solution

  • When you submit the form, by definition it will send the input-like (input, textarea, etc...) elements' data to the specified target.

    In the javascript right now you change the action attribute to create a more nicely formatted email template, but the form still has all the inputs in it, so by definition they will be added to the body.

    To prevent this you could put a hidden form into your html, with no input-like elements in it, or even as a self-closed element, and then modify the action and submit that one. Or even create one on the fly.

    In this way you would not have anything in the email you don't want to have. Just take care to cancel the first form's submit.