Use <div> 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:[email protected]");
}

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:[email protected]';
    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?

Bronwynbronx

Is there any reason for using a <div> and not a block <a>? Are you able to change the markup/CSS? – Jeopardous

I'm not able to fully customize the button if I use the <a> tag, that's why I resorted to <div> – Bronwynbronx

I'm confused, what do you mean customize? You can style a <a> just like you can style a <div>, providing you display it as a block – Jeopardous

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. – Bronwynbronx

Maybe it would be easier if you could post your markup, then we could see what your doing wrong – Jeopardous

Listen to @Aurovrata. His answer is more professional. Otherwise I'll really have problems with spam. – Flighty

Answer 1

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

HTML

<a class="mailto" href="mailto:[email protected]">Mail</a>

CSS

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

Jeopardous

Answer 2

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

<script>
function sendEmail() 
{
    window.location = "mailto:[email protected]";
}
</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:[email protected]?subject=Me&body=Hello!'>EMAIL</a>

Ineligible

Good answer. I prefer window.open(mailto:[email protected]) though...as this will not take the user away from your app, but will still launch the email client. – Abwatt

Did you test this, @skidadon? It doesn't take you away from the app/site. It just launches the client – Conn

Does not take user away from site, on Chrome and Safari at least. – Medieval

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. – Blynn

how to pass formatted email body message.. Like i want to use <bold> tag. – Sequestration

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:[email protected]?subject=Me&body=Hello!'>EMAIL</a> – Ineligible

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. – Communistic

Answer 3

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:[email protected]';">Send E-Mail</div>

Samantha

Answer 4

This worked for me:

<script>
function sendEmail() 
{
    window.location.assign("mailto:[email protected]");
}
</script>
<div onclick="sendEmail();">Send e-mail</div>

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

Wedekind

Answer 5

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.

Wellhead

Answer 6

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

<div onclick="doMail();">


function doMail() {

    var email ="[email protected]";
    location.href = "mailto:"+email;
}

Tirado

Answer 7

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

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

Soma

Answer 8

Try this :

<div class="button" href="javascript: void(0)" onclick="location.href='mailto:[email protected]';">Click to Send email</div>

Peterman

Hi, why do you think this will work? :) Edit your post and explain please – Spirillum