Docs executáveis de HTML: Link mailto

Q: Como criar um link de e-mail no HTML?

Use um link cujo href começa com mailto: seguido do endereço: hello@example.com . Clicar nele abre uma nova mensagem no app de e-mail padrão do leitor.

Q: Como colocar um assunto num link mailto?

Adicione como parâmetro depois de ?: mailto:hello@example.com?subject=Order%20question. Codifique os espaços como %20 e junte mais parâmetros com &, por exemplo ?subject=Hi&body=Hello.

Q: Como enviar um link mailto para vários destinatários?

Separe os endereços com vírgulas: mailto:ana@example.com,bob@example.com. Use os parâmetros cc= e bcc= para cópias: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Como deixar um número de telefone clicável no HTML?

Use um link tel: com o número no formato internacional: +1 555 123 4567 . No celular ele inicia uma ligação; no computador abre o app de chamadas instalado, se houver algum.

Como criar um link de e-mail

Comece o href do link com mailto: e o endereço. Clicar nele abre uma nova mensagem para esse endereço no app de e-mail do leitor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

A prévia não abre outros apps: ao clicar em um desses links ali, ela mostra o endereço que o link abriria. Numa página real, o primeiro abre um novo e-mail e o segundo inicia uma ligação no celular.

Use o próprio endereço como texto do link. Um leitor sem app de e-mail configurado (comum em computadores que usam webmail no navegador) ainda consegue copiá-lo, e um link que diz só "Mande um e-mail" o deixa sem saída.

Assunto, corpo, cc e bcc

Um link mailto pode preencher mais partes da mensagem. Adicione parâmetros depois de um ? e junte-os com &, como numa query string de URL:

Parâmetro	Preenche	Exemplo
`subject`	A linha de assunto	`?subject=Order%20question`
`body`	O texto da mensagem	`&body=Hi%20there`
`cc`	Destinatários em cópia	`&cc=sales@example.com`
`bcc`	Destinatários em cópia oculta	`&bcc=log@example.com`

Vários destinatários vão na parte do endereço, separados por vírgulas: mailto:ana@example.com,bob@example.com.

Os valores precisam ser codificados para URL: um espaço é %20, uma quebra de linha é %0D%0A, & é %26 e ? é %3F. O script deste exemplo decodifica cada link para você ver o que o app de e-mail recebe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

O assunto Order #123 precisa ser escrito Order%20%23123: um # solto encerraria a URL ali, e o corpo se perderia. Também não use + para espaços. Num link mailto, + é um sinal de mais literal, e muitos apps de e-mail o mostram assim.

Montando um link mailto com JavaScript

Codificar à mão é fácil de errar. encodeURIComponent faz isso por você. Digite nos campos e o link abaixo é atualizado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent transforma & em %26 e uma quebra de linha em %0A; o replace troca as quebras de linha pelo par %0D%0A que o e-mail espera. Deixe a parte do endereço como foi digitada: @ e , são permitidos ali sem codificação.

Links de telefone com tel: e sms:

tel: cria um link para ligar com um clique. Escreva o número com o código do país e sem espaços no href; o texto visível pode ter a formatação que você quiser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 funciona de qualquer país. Um número local como tel:02079460958 só funciona para quem liga de dentro daquele país.
Hífens são permitidos como separadores (tel:+1-555-123-4567); espaços não fazem parte do formato, então deixe-os fora do href.
sms: abre o app de mensagens. Adicionar uma mensagem com ?body= funciona em muitos apps, mas o suporte varia, então não conte com isso.
No computador, tel: abre um app de chamadas se houver um instalado (como FaceTime ou um softphone), e não faz nada caso contrário.

O Safari no iPhone transforma números de telefone em texto comum em links por conta própria. Se isso atrapalhar algo como um número de pedido, desative com <meta name="format-detection" content="telephone=no">.

Spam e endereços de e-mail

Um endereço num link mailto pode ser lido por qualquer robô que baixe a página. Truques como escrever hello [at] example [dot] com ou montar o endereço com JavaScript barram alguns coletores simples, mas também dificultam o uso do link. Um formulário de contato, explicado em formulários HTML, tira o endereço da página por completo. Para a maioria dos sites, um bom filtro de spam na caixa de entrada é a resposta mais simples.

Evite <form action="mailto:...">. Depende do app de e-mail do leitor, envia os campos codificados para URL e difíceis de ler, e não dá nenhuma confirmação de que algo foi enviado.

Erros comuns

Esquecer o mailto:. href="hello@example.com" é um link relativo para uma página com o nome do endereço.
Espaços ou # sem codificar no assunto ou no corpo. Codifique os valores com %20, %23 ou encodeURIComponent.
Usar + para espaços. Ele aparece como sinal de mais.
Um segundo ? em vez de &. Só o primeiro parâmetro vem depois de ?; os outros são unidos com &.
"Mande um e-mail" como único texto, o que deixa quem usa webmail sem nada para copiar.
Números de telefone locais em tel:. Inclua o código do país.

Perguntas frequentes

Como criar um link de e-mail no HTML?

Use um link cujo href começa com mailto: seguido do endereço: <a href="mailto:hello@example.com">hello@example.com</a>. Clicar nele abre uma nova mensagem no app de e-mail padrão do leitor.

Como colocar um assunto num link mailto?

Adicione como parâmetro depois de ?: mailto:hello@example.com?subject=Order%20question. Codifique os espaços como %20 e junte mais parâmetros com &, por exemplo ?subject=Hi&body=Hello.

Como enviar um link mailto para vários destinatários?

Separe os endereços com vírgulas: mailto:ana@example.com,bob@example.com. Use os parâmetros cc= e bcc= para cópias: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Como deixar um número de telefone clicável no HTML?

Use um link tel: com o número no formato internacional: <a href="tel:+15551234567">+1 555 123 4567</a>. No celular ele inicia uma ligação; no computador abre o app de chamadas instalado, se houver algum.

Por que meu link mailto não faz nada?

O link só entrega o endereço ao app de e-mail padrão. Se o leitor não tem nenhum configurado, o que é comum em computadores que usam webmail, nada de útil acontece. Mostre o endereço como texto do link para que ele possa ser copiado.

Conceitos relacionados