Use
as a button and trigger a mailto when it is clicked

Question

I'm creating a custom button on my webpage which actually is a <div>, I want to trigger a mailto when the button is clicked. What is the best way out?

I've tried calling a javascript function using-onClick that looks like this -

function foo(){
    window.open("mailto:xyz@abc.com");
}

But that opens a new tab in Chrome first, and then asks for the relevant app to send out the email. This experience is different from what we generally get when we simply do a <a href=mailto:.....> in HTML.

I can also create a new document element in the JS function, and simulate a click like this -

function sendEmail() {
    var mail = 'mailto:contact@test.com';
    var a = document.createElement('a');
    a.href = mail;
    a.click();
};

But i'm not too sure if that's the right way! Anyone has a better solution?

Is there any reason for using a `
` and not a block ``? Are you able to change the markup/CSS? — George, Oct 28 '13 at 16:19
I'm not able to fully customize the button if I use the tag, that's why I resorted to — divyanshm, Oct 28 '13 at 16:54
I'm confused, what do you mean customize? You can style a `` just like you can style a `
`, providing you display it as a block — George, Oct 28 '13 at 16:55
Do you have a link or a fiddle that I could refer to? My button has an image too, and yes, the page consists of multiple floating elements so I cannot use the block display. — divyanshm, Oct 28 '13 at 17:03
Maybe it would be easier if *you* could post your markup, then we could see what your doing wrong — George, Oct 28 '13 at 17:50
Listen to @Aurovrata. His answer is more professional. Otherwise I'll really have problems with spam. — ilyas Jumadurdyew, Feb 01 '20 at 13:55

Tony · Answer 1 · 2021-11-10T21:43:03.463

63

Try this, and tell me if works. (If not, I will delete answer.)

<script>
function sendEmail() 
{
    window.location = "mailto:xyz@yourapplicationdomain.com";
}
</script>
<div onclick="sendEmail();">Send e-mail</div>

It is possible to pass the parameters subject and body, but I think that it is not possible to format the text:

<a href='mailto:xyz@yourapplicationdomain.com?subject=Me&body=Hello!'>EMAIL</a>

edited Nov 10 '21 at 21:43

answered Oct 28 '13 at 16:22

Tony

16,527
15
80
134

13

Good answer. I prefer window.open(mailto:xyz@abc.com) though...as this will not take the user away from your app, but will still launch the email client. – skidadon Oct 13 '14 at 04:55
2

Did you test this, @skidadon? It doesn't take you away from the app/site. It just launches the client – Seth Oct 29 '14 at 23:47
Does not take user away from site, on Chrome and Safari at least. – Locutus Oct 22 '20 at 16:08
Getting taken away from the site, and whether or not a external client is opened instead, is based on how the user's email client is configured. If the user doesn't have an external email client configured, then you will be directed away from the site. – Ajezior Sep 02 '21 at 15:33
how to pass formatted email body message.. Like i want to use tag. – Yash Nov 10 '21 at 12:36
It is possible to pass the parameters subject and body, but I think that it is not possible to format the text: EMAIL – Tony Nov 10 '21 at 21:39
Can confirm. If the e-mail client is a tab in your browser, it will redirect away from your app onto the e-mail website. Therefore, it's only safe to avoid it with `window.open`, as was previously pointed out correctly. – Akito Aug 30 '22 at 09:55

score 29 · Answer 2 · answered Sep 01 '15 at 15:32

29

Extremely late to the party I know, but what about combining these answers into something simpler and more practical:

<div class="button" onclick="location.href='mailto:xyz@abc.com';">Send E-Mail</div>

answered Sep 01 '15 at 15:32

Chris Kempen

9,491
5
40
52

George · Accepted Answer · 2014-07-03T15:52:49.977

27

Use an anchor tag but change the display property to block:

HTML

<a class="mailto" href="mailto:contact@test.com">Mail</a>

CSS

.mailto{
  display:block;
  width:100px;
  height:20px;
}

edited Jul 03 '14 at 15:52

answered Oct 28 '13 at 16:52

George

36,413
9
66
103

score 9 · Answer 4 · answered Mar 12 '19 at 09:25

9

This worked for me:

<script>
function sendEmail() 
{
    window.location.assign("mailto:xyz@abc.com");
}
</script>
<div onclick="sendEmail();">Send e-mail</div>

@Tony has used the same approach just assign has been added.

answered Mar 12 '19 at 09:25

Rick

1,177
1
19
27

Aurovrata · Answer 5 · 2021-07-09T12:41:47.387

7

In order to obfuscate your email from SPAM bots that scan website for emails, you can do the following,

<div class="button" onclick="location.href='mail'+'to:xyz'+'@'+abc'+'.'+'com';">Send E-Mail</div>

and instead of the 'Send E-Mail' text you can place an image of your actual email address (screenshot) to make it more obvious.

edited Jul 09 '21 at 12:41

answered Feb 01 '20 at 13:53

Aurovrata

2,000
27
45

score 6 · Answer 6 · edited Oct 30 '14 at 00:12

6

Try this function and html. It will open a new email client with.

<div onclick="doMail();">


function doMail() {

    var email ="xyz@abc.com";
    location.href = "mailto:"+email;
}

edited Oct 30 '14 at 00:12

Seth

10,198
10
45
68

answered Jul 03 '14 at 15:46

Yulimar

83
1
9

score 0 · Answer 7 · edited Sep 21 '14 at 16:30

0

<div onclick="mailtoperformingFunction('inner');" id="divbutton">

<script type="text/javascript">
function mailtoperformingFunction()
{
}
</script>

edited Sep 21 '14 at 16:30

Aamir

5,324
2
30
47

answered Oct 28 '13 at 16:23

Vinay Pratap Singh Bhadauria

9,829
3
28
49

score 0 · Answer 8 · answered Jan 24 '19 at 00:48

0

Try this :

<div class="button" href="javascript: void(0)" onclick="location.href='mailto:abc@xyz.com';">Click to Send email</div>

answered Jan 24 '19 at 00:48

Kiran KV

1
1

Hi, why do you think this will work? :) Edit your post and explain please – Ali Jan 24 '19 at 01:07

Use as a button and trigger a mailto when it is clicked

8 Answers8

Use
as a button and trigger a mailto when it is clicked