HTML Mailto: enviando e-mails com HTML

Nesta documentação de HTML falaremos sobre o protocolo mailto, que nos permite executar aplicações de envio de e-mail de dentro de uma página HTML.

Mailto

O protocolo mailto é utilizado no HTML junto da propriedade href da tag <a>, para definir um link de e-mail. Esse link não abre uma URL, mas sim o aplicativo de e-mail padrão do dispositivo.

Quando o link é aberto, o campo para do e-mail é automaticamente preenchido com o valor definido no mailto.

Importante: O funcionamento do mailto depende que uma aplicação capaz de lidar com e-mails (Outlook, Thunderbird etc.), esteja instalada no dispositivo, uma vez que seu objetivo é abrir a aplicação de e-mail padrão. Se um software de e-mail não estiver instalado, o link com mailto não funcionará.

Mailto: na prática

Veja no Código 1 como um código com mailto é escrito na prática.

<a href="mailto:email@provedor.com.br?subject=Assunto do email&cc=copia@provedor.com.br&bcc=copiaoculta@provedor.com.br&body=Conteúdo do email que será preenchido automaticamente">Enviar email</a>
Código 1. Exemplo de uma textarea

Note que ao clicar no link, o aplicativo padrão de e-mail do seu dispositivo será aberto e os dados definidos no mailto serão automaticamente preenchidos.

Mailto: sintaxe

O mailto é um protocolo, e deve ser usado dentro do href de um link, como mostra o Código 2.

<a href="mailto:email@provedor.com.br">Enviar e-mail</a>
Código 2. Sintaxe

Também é possível passar parâmetros para o mail to para preencher quatro informações:

Dessa forma, é possível permitir que ao clicar no link uma mensagem pronta seja carregada. Os parâmetros são passados como vemos no Código 3.

<a href="mailto:email@provedor.com.br?subject=Assunto do email&cc=copia@provedor.com.br&bcc=copiaoculta@provedor.com.br&body=Conteúdo do email que será preenchido automaticamente">Enviar email</a>
Código 3. Passagem de parâmetros

Também é possível enviar e-mail para múltiplas contas, nesse caso, os parâmetros ficariam como no Código 4.

<a href="mailto:email@provedor.com.br, email2@provedor.com.br,?subject=Assunto do email&cc=copia@provedor.com.br&bcc=copiaoculta@provedor.com.br&body=Conteúdo do e-mail que será preenchido automaticamente">Enviar e-mail</a>
Código 4. Passagem de parâmetros para múltiplas contas

Note que para isso separamos os dois e-mails com uma , (vírgula) e adicionamos uma outra antes da passagem dos parâmetros.

Também é possível definir múltiplos e-mails da mesma forma para os parâmetros cc e bcc, como mostra o Código 5.

<a href="mailto:email@provedor.com.br, email2@provedor.com.br,?subject=Assunto do email&cc=copia@provedor.com.br, copia2@provedor.com.br&bcc=copiaoculta@provedor.com.br, copiaoculta2@provedor.com.br&body=Conteúdo do email que será preenchido automaticamente">Enviar e-mail</a>
Código 5. Definindo múltiplos e-mails

Sempre que quiser adicionar mais de um e-mail em algum dos parâmetros, cada e-mail deve ser separado por uma vírgula.

Artigos relacionados