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   lt form method  post  action  mailto email com subject subject amp message message  gt    where subject and message are values fetched from a form

User · Answer

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  lt form gt  s action   But here s a working example   HTML  with Bootstrap styles     lt p gt  lt input id  subject  type  text  placeholder  type your subject here       class  form-control  gt  lt  p gt   lt p gt  lt input id  message  type  text  placeholder  type your message here       class  form-control  gt  lt  p gt   lt p gt  lt a id  mail-link  class  btn btn-primary  gt Create email lt  a gt  lt  p gt    JavaScript  with jQuery     lt script type  text javascript  gt      function loadEvents             var mailString          function updateMailString                 mailString     subject     encodeURIComponent     subject   val                        amp body     encodeURIComponent     message   val                     mail-link   attr  href     mailto person email com    mailString                          subject    focusout function     updateMailString                     message    focusout function     updateMailString                updateMailString           lt  script gt    Notes    The  lt form gt  element with associated action attribute is not used  The  lt input gt  element of type button is also not used     lt a gt  styled as a button  here using Bootstrap  replaces  lt input type  button  gt  focusout   with updateMailString   is necessary because the  lt a gt  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 amp OSX  Chrome Win amp OSX  IE Win  Safari OSX amp iOS  Opera OSX E-mail clients  Outlook Win  Mail app OSX amp 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

User · Answer

You can use an anchor to attempt to open the user s default mail client  prepopulated  with mailto   but you cannot send the actual email   Apparently it is possible to do this with a form action as well  but browser support is varied and unreliable  so I do not suggest it   HTML cannot send mail  you need to use a server side language like php  which is another topic  There are plently of good resources on how to do this here on SO or elsewhere on the internet   If you are using php  I see SwiftMailer suggested quite a bit

User · Answer

user544079  Even though it is very old and irrelevant now  I am replying to help people like me   it should be like this    lt form method  post  action  mailto  emailID subject  MySubject  amp message   MyMessageText  gt    Here   emailID    MySubject    MyMessageText are variables which you assign from a FORM or a DATABASE Table or just you can assign values in your code itself  Alternatively you can put the code like this  normally it is not used     lt form method  post  action  mailto admin website com subject New Registration Alert  amp message  New Registration requires your approval  gt

User · Answer

You can use mailto  here is the HTML code    lt a href  mailto EMAILADDRESS  gt    Replace EMAILADDRESS with your email

User · Answer

This method doesn t seem to work in my browser  and looking around indicates that the whole subject of specifying headers to a mailto link action is sparsely supported  but maybe this can help     HTML    lt form id  fr1  gt       lt input type  text  id  tb1    gt       lt input type  text  id  tb2    gt       lt input type  button  id  bt1  value  click    gt   lt  form gt    JavaScript  with jQuery      document  ready function             bt1   click function                 fr1   attr  action                           mailto test test com subject                                tb1   val       amp body         tb2   val                 fr1   submit                  Notice what I m doing here   The form itself has no action associated with it   And the submit button isn t really a submit type  it s just a button type   Using JavaScript  I m binding to that button s click event  setting the form s action attribute  and then submitting the form   It s working in so much as it submits the form to a mailto action  my default mail program pops up and opens a new message to the specified address   but for me  Safari  Mail app  it s not actually specifying the Subject or Body in the resulting message   HTML isn t really a very good medium for doing this  as I m sure others are pointing out while I type this   It s possible that this may work in some browsers and or some mail clients   However  it s really not even a safe assumption anymore that users will have a fat mail client these days   I can t remember the last time I opened mine   HTML s mailto is a bit of legacy functionality and  these days  it s really just as well that you perform the mail action on the server-side if possible

User · Answer

lt form action  mailto someone example com  method  post                enctype  text plain  gt   Name  lt br gt   lt input type  text  name  name  gt  lt br gt   E-mail  lt br gt   lt input type  text  name  mail  gt  lt br gt  Comment  lt br gt   lt input type  text  name  comment  size  50  gt  lt br gt  lt br gt   lt input type  submit  value  Send  gt   lt input type  reset  value  Reset  gt

User · Answer

You can not directly send an email with a HTML form  You can however send the form to your web server and then generate the email with a server side program written in e g  PHP   The other solution is to create a link as you did with the  mailto    This will open the local email program from the user  And he she can then send the pre-populated email   When you decided how you wanted to do it you can ask another  more specific  question on this site   Or you can search for a solution somewhere on the internet

User · Answer

I couldn t ever find an answer that really satisfied the original question  so I put together a simple free service  PostMail  that allows you to make a standard HTTP POST request to send an email  When you sign up  it provides you with code that you can copy  amp  paste into your website  In this case  you can simply use a form post   HTML    lt form action  https   postmail invotes com send      method  post  id  email form  gt        lt input type  text  name  subject  placeholder  Subject    gt       lt textarea name  text  placeholder  Message  gt  lt  textarea gt       lt  -- replace value with your access token -- gt       lt input type  hidden  name  access token  value   your access token     gt        lt input type  hidden  name  success url        value    message Email Successfully Sent 21 amp isError 0    gt       lt input type  hidden  name  error url        value    message Email could not be sent  amp isError 1    gt        lt input id  submit form  type  submit  value  Send    gt   lt  form gt    Again  in full disclosure  I created this service because I could not find a suitable answer

[html] html button to send email

Examples related to html

Examples related to forms

Examples related to email