Ссылка на E-mail или Mailto в HTML
Ссылка на E-mail в HTML делается как обычно: с помощью элемента <a> , только вместо пути, который указывается в качестве значения атрибута href , пишется слово «mailto» и, через двоеточие (:), адрес электронной почты:
Если кликнуть по такой ссылке, то откроется почтовая программа, заданная по умолчанию для обработки ссылок-mailto, в которой, в шаблоне письма, поле Кому будет уже заполнено соответствующим адресом.
Адрес электронной почты указывать необязательно; в этом случае поле Кому останется пустым; однако двоеточие пишется всегда.
Параметры
Помимо простого указания адресата, в ссылках-mailto можно использовать параметры, с помощью которых почтовой программе сообщаются тема и содержание письма, а также кому отправить обычную и скрытую копию.
| Параметр | Значение |
|---|---|
| subject | тема письма |
| body | содержание письма |
| cc | кому отправить обычную копию |
| bcc | кому отправить скрытую копию |
Синтаксис
То есть, сначала указывается слово «mailto»; затем — двоеточие (:); затем — адрес электронной почты (необязательно); затем — вопросительный знак (?); затем — пары «параметр=значение», разделённые амперсандом (&).
Адресов почты можно указывать несколько, разделяя их запятой или пробелом.
Пример
В примере амперсанды (&) заменены на соответствующие мнемоники (&), так как иначе документ не пройдёт валидацию.
Mailto в формах
В качестве обработчика формы, путь к которому указывается в атрибуте action элемента <form> , можно использовать адрес электронной почты. Это делается по аналогии с обычными ссылками на E-mail.
По некоторым причинам пример не работает в браузере Google Chrome.
Вместе с адресом электронной почты после двоеточия можно указывать дополнительную информацию (например, имя получателя); при этом, для корректного определения адреса почты, его лучше заключить в угловые скобки (%3C и %3E) как показано в примере ниже:
How to Create Mailto Links
Mailto links are used to redirect to an email address instead of a web page URL. When a user clicks on the Mailto link, the default email client on the visitor’s computer opens and suggests sending a message to the email address mentioned in the Mailto link.
To create a Mailto link, you need to use the HTML <a> tag with its href attribute, and insert a «mailto:» parameter after it, like the following:
If you want to receive the email to more than one address, separate your email addresses with a comma:
The following fields can be filled out beforehand:
- subject — for the subject line,
- cc — for sending a carbon copy,
- bcc — for sending a blind carbon copy,
- body — for the message’s body text.
If you want to have a subject field, which is already filled out, add the “subject” parameter to the href attribute:
To add CC and BCC to your email, use the «cc» or «bcc» parameter on the href attribute:
To add a body text, use the «body» parameter with other parameters:
Putting all together, we’ll have the following example.
The downside of Mailto links
Using Mailto links is quite easy and helpful, but it also has downsides for many users. Mailto links can lead to appearing in spam. It’s one of the most common ways used by spammers.
Even if you don’t receive many spams, or have a good spam filter, you cannot escape from spam emails. It’s better to use a Mailto form on your website instead of a Mailto link.
HTML mailto Links: A Step-By-Step Guide
The HTML mailto link opens a visitor’s default email client when linked. This type of link makes it quick for a user to contact you over email. You can specify a default subject, CC, BCC, and body with a mailto link.
Sometimes when creating a website for a client, they will want you to include their business information on the site. This often involves adding a way to contact the business on the site.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
Select your interest
First name
Last name
Phone number
By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
Most times, in this modern day and age, this will include an email address or phone number of some sort. In this article, we’ll take a look at how to link an email in your HTML. This will let you make sure that the client’s default email client opens with the business email as the addressee.
HTML mailto Links
A HTML mailto link makes it easy for a user to contact you over email. When a mailto link is clicked, the user’s email client opens. A new email is created which is addressed to the email in the mailto link.
The most common way to link an email in HTML is by using an anchor tag that has a href attribute.
The href will point to the email you would like to send the email to.
Here is the syntax for a basic mailto link:
This link will open up a new, blank email, addressed to you, in the users’ email client. But, we can add more information to our mailto link.
The mailto link accepts the following:
- A user’s email.
- Subject field.
- CC emails.
- BCC emails.
- Default body text.
Let’s take a deeper look at how to use an HTML mailto link.
mailto HTML Example
We are building a “Contact Us” page on our website, and we want a link that makes it easy for users to email us. We can implement this link using the HTML mailto email links feature:
If you would like to add a subject to the email, that can be done as well!
Our mailto link is enclosed in the HTML <a> tag above. We can break up the mailto string into three parts:
- The href keyword: mailto:
- The email: insertemailhere@xyz.com
- The subject: ?subject=Mail from xyz.com
We want to add a bit more information to our email. To do so, we’re going to use some more of the mailto link attributes we discussed in the last section.
In the below example, we’re going to set a target email, a CC, a BCC, a subject, and a body:
The string is broken up as so:
- The href keyword: mailto:
- The email: insertemailhere@xyz.com
- The cc: ?cc=insertanotheremail@xyz.com – you can add multiple CC’s as comma separated values
- The bcc: &bcc=insertsecretemail@xyz.com – you can add multiple BCC’s as comma separated values here as well.
- The subject: &subject=Mail from xyz.com
- The body: &body=Body-goes-here
An email with all this information is created and opened in the users’ default mail client.
Conclusion
The HTML mailto link automatically opens a users’ email client when it is clicked. You can populate a mailto link with information like a subject line, body, or CC. A mailto link must include the address to which the email should be sent.
We took a look at how to add a mailto href to an anchor tag. This link means a user can click on an email on a website and it will open their default email client with prefilled data. If you’re comfortable, I would encourage you how to do the same thing but for phone numbers or Google Map directions!
Do you want to learn more about HTML? We’ve got a How to Learn HTML guide for you. This guide contains expert advice on how to learn HTML. You’ll also find a list of top learning resources to help you advance your knowledge.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
Как вставить почту в html
In this article, we are going through step by step process to create an HTML Mailto and call link. When a user clicks on the mailto link, it opens a default email client in the user’s system. You can make these types of clickable links easily with the anchor tag.
Mailto link: Users can easily contact website owners or anyone with the help of a mailto link. Mailto link redirects the user to the email client and creates the new mail, addressing the email in the mailto link. Furthermore, we can specify the subject and default body text inside the mailto link which saves the time of users.
The following queries and parameters into the mailto link:
- mailto: It accepts the recipient’s email address.
- cc: It is an optional parameter. It accepts another email address that will receive the carbon copy.
- bcc: It is also an optional parameter. It accepts one or more email addresses that will receive the blind carbon copy.
- subject: In this parameter, you can assign a default subject of the mail.
- body: It allows you to set default body text. However, it is optional.
- ?: It is a first parameter delimiter.
- &: It allows you to separate more than one query.
Syntax:
Moreover, users can add default subjects to the mailto link. If users want to add a little bit more information like CC emails, BCC emails, and body text then we can do it easily. We have to add all queries after user email followed by a question mark. If users want to add multiple queries then they can use & operator to separate two queries.