Mailto links in html

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Номер видно в тексте ссылки.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще-то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

Получится такой результат:

Дополнительные материалы по теме

Ещё о вёрстке

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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.

If you want to receive the email to more than one address, separate your email addresses with a comma:

a href="mailto:[email protected], [email protected]">Send Email

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:

a href="mailto:[email protected]?subject=Mail from our Website">Send Email

To add CC and BCC to your email, use the «cc» or «bcc» parameter on the href attribute:

a href="mailto:[email protected][email protected], [email protected], &[email protected]&subject=Mail from our Website">Send Email

To add a body text, use the «body» parameter with other parameters:

a href="mailto:[email protected][email protected], [email protected], &[email protected]&subject=Mail from our Website&body=Some body text here">Send Email

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 link

mailto: HTML email link, what is it, how to create, examples and code generator.

What is mailto link

Mailto link is a type of HTML link that activates the default mail client on the computer for sending an e-mail.

The web browser requires a default e-mail client software installed on his computer in order to activate the e-mail client.

If you have Microsoft Outlook, for example as your default mail client, pressing a mailto link will open a new mail window.

How to create mailto link in HTML

The mailto link is written like regular link with extra parameters inside the href attribute:

Parameter	Description
mailto:name@email.com	e-mail recipient address
cc=name@email.com	carbon copy e-mail address
bcc=name@email.com	blind carbon copy e-mail address
subject=subject text	subject of e-mail
body=body text	body of e-mail
?	first parameter delimiter
&	other parameters delimiter

mailto examples

Mail to email address

The code will generate this link:

Pressing the above link will open a new mail window:

Mail to email address with subject

The %20 represents space character.

The code will generate this link:

Pressing the above link will open a new mail window:

Mail to email address with cc, bcc, subject and body

The %20 represents space character.

The code will generate this link:

Pressing the above link will open a new mail window:

How to add spaces in the mail’s subject or body

You can add spaces by writing %20 in the text of the subject or body.

How to add line break in the mail’s body

You can add newline by writing %0D%0A in the text of the body.

How to add multiple email recipients

You can add multiple recipients by writing a comma separator ( , ) between email addresses.

Mailto link code generator

* the mailto link will not work if the user did not define a default mail app in his computer.

See also

Источник

A Complete Guide To HTML Mailto Attribute

It would be difficult to find anyone who works online that hasn’t interacted with the HTML mailto link. When you click on it, this link activates the default email client on a user’s computer to send an email. It is used inside an anchor tag with a href attribute. In this article, we will discuss:

What is a Mailto Link in HTML?

Mailto links are used to redirect the user to an email address instead of a link. When the user clicks on a mailto link, the default email client opens on the user’s computer and suggests sending an email to the address included in the mailto link.

Basics to Advanced — Learn It All!

How to Create Mailto Links in HTML?

You can create an HTML mailto link by using an anchor tag with the href attribute and inserting the “mailto” parameter after it.

The code will generate the following link:

Clicking on the link above will open a new mail window:

If you want to send an email to more than one address, separate your email address with a comma.

Basics to Advanced — Learn It All!

Mailto Parameters

The mailto attribute accepts seven parameters, as described below:

• mailto: This parameter specifies the email address of the recipient.
• cc: This parameter is used to add another email address that will receive the mail’s carbon copy. It is optional.
• bcc: This parameter specifies another email that will receive the blind carbon copy of the mail. It is optional.
• subject: This parameter is used to fill the subject of the mail. It is optional.
• body: This parameter is used to fill the content of the mail. It is optional.
• ?: This parameter is the first parameter delimiter. It is optional.
• @: This holds the other parameter delimiter. It is optional.

Basics to Advanced — Learn It All!

You may be wondering how you can obtain the skills necessary to take advantage of HTML’s immense popularity, and how you can go beyond just learning about the HTML mailto attribute. You can enroll in a comprehensive Full Stack Java Developer course to help you become career-ready upon completion. To learn more, check out our YouTube video that provides a quick introduction to HTML and explains how to write a simple ‘Hello World’ program in HTML.

If you’re an aspiring web and mobile developer, HTML training will broaden your skills and career opportunities. Do you have any questions for us? Please ask them in the comments section, and we’ll have our experts answer them for you.

Basics to Advanced — Learn It All!

Find our Post Graduate Program in Full Stack Web Development Online Bootcamp in top cities:

Name	Date	Place
Post Graduate Program in Full Stack Web Development	Cohort starts on 15th Aug 2023, Weekend batch	Your City	View Details
Post Graduate Program in Full Stack Web Development	Cohort starts on 12th Sep 2023, Weekend batch	Your City	View Details
Post Graduate Program in Full Stack Web Development	Cohort starts on 10th Oct 2023, Weekend batch	Your City	View Details

About the Author

Aryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

Recommended Programs

Post Graduate Program in Full Stack Web Development

Full Stack Java Developer Job Guarantee Program

*Lifetime access to high-quality, self-paced e-learning content.

Источник

Mailto Link – How to Make an HTML Email Link [Example Code]

A mailto link allows users to send emails straight from a website using the user’s default email client. But how do you create a mailto link in HTML?

In this article, I will walk you through how to create a mailto link in HTML using example code.

Basic mailto link Syntax

Here is the basic syntax for the mailto link:

In the browser, the user can click on the link and it will open up their default email client.

In this example, when I click on the link it opens up my Mail app and the email address is already populated in the to field.

Using this method, I would be able to send a quick email and return to the website.

How to add multiple email addresses to the mailto link

You can add multiple email addresses to the mailto link using this syntax:

It is important to separate the multiple email addresses using commas.

When I click on the link in the browser, it will open up the Mail app and populate the email addresses in the to field.

How to add a subject line to the mailto link

Here is some example code that shows you how to add a subject line to the mailto link.

After the email addresses, you need to add an ? to separate the emails and the subject parameter. If you omit that ? , then the subject link will not work.

How to add CC and BCC to the mailto link

This is an example that shows you how to add CC (carbon copy) and BCC (blind carbon copy) recipients to the mailto link.

After the email addresses, you need to add a ? to separate the emails and the CC parameter. You also need to add an & before the BCC and subject parameters.

How to add the body parameter to the mailto link

This is an example that shows you how to use the body parameter with the mailto link. This lets you add text to the body of your email.

You need to add an & before the body parameter.

Are there downsides to using mailto links?

One of the downsides to using a mailto link is that it does often come across as spam by users. Unfortunately, a lot of spammers will use this option to send emails to users. So just keep that in mind when you’re using it.

Advantages of using mailto links

A good reason to use a mailto link is if you are sending emails to a group of people that you know. If that entire group is using a default email client, then using a mailto link would be a good option over a contact form.

Источник