How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to

Question

I've been searching all over the internet to find out how to create a mailto share button that opens up a new window in which the user can then type in the email address of his choice to send to. I've an attached a sequential set of images as operational example:

What is the trick to this? Why can't I find any info on how to write such code ....absolutely nowhere on Stack Overflow either!

As of right now this is the code that I have:

 $('.share-page-on-Email').click(function() {
  window.open("mailto:"+emailTo+'?cc='+emailCC+'&subject='+emailSub+'&body='+emailBody, '_self');
   });

View my prototype Email share button at my Code Pen here: https://codepen.io/IDCoder/full/rpdBQJ/

Thanks in advance for your help!

"nothing happens" does not answer what is expected to happen. What is the requirement? — guest271314, Jan 24 '18 at 20:58
I want the result to be the image above, that's the result I want to eventually get. — codebwoy, Jan 24 '18 at 20:59
What do you mean? Is solely creating the form the eventual expected result? Are you not expecting a native system email application to be launched? Have you coded the web-based email application already which handles `mailto:`? What do you expect to occur when the visitor presses "Send"? — guest271314, Jan 24 '18 at 21:00
If you just put in a mailto link as `Send Mail` or `Get Help` it will pop open the user's preferred native mail program with no `To:` address pre-set. If you want what you've pictured, well that's not what a `mailto:` does -- that is a form that you would create yourself and, when it's submitted, create an email on the back-end. Creating and sending an email on the server would depend on what tech stack you're using on the server. — Stephen P, Jan 24 '18 at 21:13
@StephenP, ok thankyou! That's what I need to hear. Thankyou for you time! — codebwoy, Jan 24 '18 at 21:25

score 3 · Answer 1 · answered Jan 24 '18 at 20:56

3

You can use window.location.href like this:

window.location.href = 'mailto:email@domain.com'

answered Jan 24 '18 at 20:56

curv

3,796
4
33
48

where in my code do I put `window.location.href = 'mailto:email@domain.com'` ? – codebwoy Jan 24 '18 at 20:58
1

Wouldn't this open a new browser window, followed by launching the user's native email program? Then you'd have an empty browser window to close. Curious; I haven't tried it. (Just tried it... nope, it just opens the mail client. but then, why this and not a plain `` link?) – Stephen P Jan 24 '18 at 21:14

score 1 · Accepted Answer · answered Jan 24 '18 at 21:37

I recommend never using that mailto: feature as it behaves unpredictably, different on different devices and sometimes fails alltogether. You could create a page just to take the email string then do whatever you want with it server side. Make the popup/popover small like:

<a href="/my-email-collector-page"
   onclick="window.open(this.href,'targetWindow',
                                   'toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=yes,
                                    resizable=yes,
                                    width=200px,
                                    height=120px');
 return false;">email</a>

When I combine this code with the rest of my code on my JavaScript page at CodePen([https://codepen.io/IDCoder/full/rpdBQJ/]), those codes stop working. Why is that? Also, is there a way to, instead of having ` — codebwoy, Jan 25 '18 at 06:33

score 1 · Answer 3 · answered Jan 24 '18 at 21:50

You can use navigator.registerProtocolHandler() to set specific domains to handle specific protocols as demonstrated by @PaulIrish at Getting Gmail to handle all mailto: links with registerProtocolHandler.

.registerProtocolHandler() must be called at the origin where the protocol is to be handled by the web application, else an error occurs.

User agents must throw a "SecurityError" DOMException if the resulting URL record has an origin that differs from the origin specified by the relevant settings object of this NavigatorContentUtils object.

For example, you can navigate to "https ://mail.google.com/mail/#inbox", then at console

navigator.registerProtocolHandler("mailto",
                                  "https://mail.google.com/mail/?extsrc=mailto&url=%s",
                                  "Gmail");

var email = `<a href="mailto:yourbestfriend@example.com?subject=registerProtocolHandler()%20FTW!&amp;body=Check%20out%20what%20I%20learned%20at%20http%3A%2F%2Fupdates.html5rocks.com%2F2012%2F02%2FGetting-Gmail-to-handle-all-mailto-links-with-registerProtocolHandler%0A%0APlus%2C%20flawless%20handling%20of%20the%20subject%20and%20body%20parameters.%20Bonus%20from%20RFC%202368!" target="_blank">this mailto: link</a>`;

document.body.insertAdjacentHTML("beforeend", email);

document.body.querySelector("a[href^=mailto]:nth-last-of-type(1)").click();

which should launch a window having title "Compose Mail", with Subject and Body populated.

To include "cc" you can place

cc=email@domain.com&amp;

within the string following last

&amp;

on the

?subject=

line, see mailto with multiple cc addresses.

Or write the service for your own online email application to achieve the same handling of requests for specific protocols.

How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to

3 Answers3

Linked