- How to write in ‘mailto’ body link to current page
- 4 Answers 4
- Как использовать ссылки mailto: и tel:
- mailto:
- Что произойдёт, если кликнуть на ссылку с mailto
- Как стилизовать mailto
- tel:
- Что произойдёт, если кликнуть на ссылку с tel
- Как стилизовать
- Дополнительные материалы по теме
- Ещё о вёрстке
- How to pass an URL in mailto’s body
- 4 Answers 4
- How to make Insert HTML code in mailto body?
- mailto body HTML table
- How to pass the HTML formatted body in mailto?
How to write in ‘mailto’ body link to current page
Javascript could do this for you. By using the «document.location.href». Or, if you are using .php you can do it even easier. Can you use php? let me know and I can make an example for you!
4 Answers 4
This is the pure javascript solution:
This might cause the page to change. Return false to prevent that. . + window.location;return false;»> .
This opens the email client in the current window itself. Any way I can make it open in a new tab? Thanks.
With Javascript, you utf-8-percent-encode the subject and body hfvalues using encodeURIComponent() on a UTF-8 page.
Email link to this page
If you’re doing this server-side, you can just build the mailto link and emit it as the href attribute value. Then, you won’t need JS at all.
I assume ASP has some URI encoding functions that work like encodeURIComponent().
You can also view the source of my mailto URI composer page as another example.
For the < and >that I encase the URI in, in the JS code above, see «Appendix C. Delimiting a URI in Context» of RFC3986 for why.
Also, instead of window.location.href, you can use window.location or document.location.href or document.location. I normally use «document.location».
For why you use a Javascript URI instead of an onclick attribute, see this answer.
Also note that in the JS URI in the code above, I wrapped the code in an anonymous function. That’s not necessary in this case because the function doesn’t return anything that would change the document when you click. But, it’s to just do it all the time for good measure.
See my Javascript URI compose to help with creating javascript URIs.
Как использовать ссылки 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 pass an URL in mailto’s body
I need to send an URL of my site in the body so the mail recipient can click on that to join my site. However currently mail client renders the mail like this:
The URL is truncated on the & symbol, thus the whole process of joining failed. How can I pass the URL like http://www.example.com/foo.php?this=a&join=abc&user454 in mailto body? My current HTML is the following:
4 Answers 4
You need to encode the URL. This URL Decoder/Encoder tool will do the trick. The following seems to work:
I would URL encode the link you are using, so it would be:
You can type javascript:alert(escape(«YOUR URL»)); in the address box of a browser and get the URL made safe for a mailto link. For example, type the following inside the address box of a browser and press Enter.
javascript:alert(escape("http://www.example.com/foo.php?this=a"));
You will get a message box that will display.
http%3A//www.example.com/foo.php%3Fthis%3Da
Opera and Mozilla-based browsers allow you to copy the displayed content from the alert box.
You could improve it by typing
javascript:alert("mailto:MyEmailAddress@Example.com?subject=My Subject&body="+escape("http://www.example.com/foo.php?this=a"));
so that you get the subject and body included in the link. Other improvements could be using a From name and line breaks using %0a.
javascript:alert("mailto:Just Me ?subject=My Subject&body=This is the link:%250a"+escape("http://www.example.com/foo.php?this=a"));
How to make Insert HTML code in mailto body?
Answer: Document Section 2 of RFC 2368 says that the body the field is supposed to be in text/plain format, so you can’t insert/add HTML code.
However, even if you use plain text it’s possible that some modern mail clients would render a URL as a clickable link anyway, though.
mailto body HTML table
Here is example code but it seems like the table is inserted as plain text.
[email protected]?subject=tester&body=test test
">Email with table
How to pass the HTML formatted body in mailto?
Use %0D%0A for a line break in your body. Here is a example code:-
[email protected]?subject=Suggestions&body=name:%0D%0Aemail:"> Send Email
Do comment if you have any doubts and suggestions on this topic.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version