HTML - Links de E-mail

Criando Links de E-mail

Para criar links de e-mail em HTML, use a tag <a> com o atributo mailto:. O atributo mailto: define o endereço de e-mail para onde o link enviará uma mensagem.

Para definir o endereço de e-mail, adicione-o após o atributo mailto: na tag <a>.

<a href="mailto:exemplo@exemplo.com">Enviar E-mail</a>

Você também pode adicionar um assunto para o e-mail. Para isso, adicione subject= seguido do texto do assunto após o endereço de e-mail.

<a href="mailto:exemplo@exemplo.com?subject=Consulta">Enviar E-mail</a>

Para preencher previamente o corpo da mensagem do e-mail, use o parâmetro body=. Adicione body= seguido do texto da mensagem após o endereço de e-mail ou o assunto.

<a href="mailto:exemplo@exemplo.com?subject=Consulta&body=Prezado Senhor/Senhora,">Enviar E-mail</a>

Ao definir vários destinatários para o e-mail, separe cada endereço de e-mail com uma vírgula.

<a href="mailto:exemplo1@exemplo.com,exemplo2@exemplo.com">Enviar E-mail</a>

Você também pode adicionar destinatários em cópia (CC) e cópia oculta (CCO) no link de e-mail. Para adicionar destinatários em CC, use o parâmetro cc= seguido dos endereços de e-mail. Para CCO, use o parâmetro bcc=.

<a href="mailto:exemplo@exemplo.com?cc=destinatariocopia@exemplo.com&bcc=destinatariocopiaoculta@exemplo.com">Enviar E-mail</a>

Usando esses métodos, você pode criar links de e-mail clicáveis que permitem aos usuários enviar e-mails facilmente a partir da sua página web.

Formatando Links de Email

Você pode estilizar links de email usando CSS para mudar sua aparência e destacá-los em sua página web.

Para mudar a cor de um link de email, use a propriedade color no seu CSS. Defina a propriedade color com o valor de cor desejado.

<style>
  a[href^="mailto:"] {
    color: blue;
  }
</style>

Por padrão, links de email não são sublinhados. Para adicionar um sublinhado aos links de email, use a propriedade text-decoration no seu CSS. Defina a propriedade text-decoration como underline.

<style>
  a[href^="mailto:"] {
    text-decoration: underline;
  }
</style>

Você também pode aplicar efeitos de hover aos links de email para mudar sua aparência quando o usuário passar o mouse sobre eles. Use a pseudo-classe :hover no seu CSS para definir os estilos de hover.

<style>
  a[href^="mailto:"]:hover {
    color: red;
    text-decoration: none;
  }
</style>

Ao usar essas técnicas de CSS, você pode formatar seus links de email para combinar com o estilo da sua página web e torná-los mais visíveis para os usuários.

Solução de problemas

Ao trabalhar com links de e-mail, você pode encontrar alguns problemas comuns. Aqui estão algumas dicas para ajudar você a resolver esses problemas:

Um dos problemas mais comuns com links de e-mail é a sintaxe incorreta. Certifique-se de que você usou a sintaxe correta para o atributo mailto: na tag <a>. Verifique se o endereço de e-mail está escrito corretamente e se não há espaços ou caracteres extras no link.

<a href="mailto:example@example.com">Enviar e-mail</a>

Outro problema que pode surgir é a configuração do cliente de e-mail no dispositivo do usuário. Alguns clientes de e-mail podem não estar configurados para lidar corretamente com links de e-mail. Nesses casos, o link de e-mail pode não abrir o cliente de e-mail do usuário ou pode resultar em uma mensagem de erro. Para ajudar os usuários, você pode fornecer instruções sobre como configurar o cliente de e-mail para lidar corretamente com links de e-mail.

Se os links de e-mail não estiverem funcionando como esperado, é uma boa ideia fornecer métodos alternativos de contato em sua página da web. Isso pode incluir exibir seu endereço de e-mail como texto simples, fornecer um formulário de contato ou listar outras maneiras de entrar em contato, como um número de telefone ou perfis de redes sociais. Ao oferecer métodos alternativos de contato, você dá aos usuários outras opções para entrar em contato com você caso o link de e-mail não funcione para eles.

<p>Você também pode nos contatar em:</p>
<ul>
  <li>E-mail: example@example.com</li>
  <li>Telefone: 123-456-7890</li>
  <li>Formulário de contato: <a href="/contato">Fale conosco</a></li>
</ul>