html button to send email

Question

How do I send an email with specified initial values for the headers subject and message from a button in html, such as this

Answer 1

As David notes, his suggestion does not actually fulfill the OP's request, which was an email with subject and message. It doesn't work because most, maybe all, combinations of browsers plus e-mail clients do not accept the subject and body attributes of the mailto: URI when supplied as a

's action.

But here's a working example:

HTML (with Bootstrap styles):

Create email

JavaScript (with jQuery):

Notes:

• The element with associated action attribute is not used.
• The element of type button is also not used.
  • styled as a button (here using Bootstrap) replaces
  • focusout() with updateMailString() is necessary because the tag's href attribute does not automatically update when the input fields' values change.
  • updateMailString() is also called when document is loaded in case the input fields are prepopulated.
• Also encodeURIComponent() is used to get characters such as the quotation mark (") across to Outlook.

In this approach, the mailto: URI is supplied (with subject and body attributes) in an a element's href tag. This works in all combinations of browsers and e-mail clients I have tested, which are recent (2015) versions of:

• Browsers: Firefox/Win&OSX, Chrome/Win&OSX, IE/Win, Safari/OSX&iOS, Opera/OSX
• E-mail clients: Outlook/Win, Mail.app/OSX&iOS, Sparrow/OSX

Bonus tip: In my use cases, I add some contextual text to the e-mail body. More often than not, I want that text to contain line breaks. %0D%0A (carriage return and linefeed) works in my tests.