{"id":5732,"date":"2010-02-23T13:37:38","date_gmt":"2010-02-23T20:37:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=5732"},"modified":"2021-06-09T09:49:42","modified_gmt":"2021-06-09T16:49:42","slug":"mailto-links","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/html\/mailto-links\/","title":{"rendered":"Mailto Links"},"content":{"rendered":"<h4 class=\"wp-block-heading\" id=\"h-basic\">Basic<\/h4>\n\n\n<p>Open default mail program, create new message with the TO field already filled out.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"mailto:someone@yoursite.com\">Email Us&lt;\/a>  <\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-a-subject\">Adding a subject<\/h4>\n\n\n<p>Open default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter <tt>subject<\/tt> to the href value.<\/p>\n\n\n\n<p>Spaces in the subject will probably work OK, but to be super-extra sure, you can replace spaces with &#8220;%20&#8221;.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"mailto:someone@yoursite.com?subject=Mail from Our Site\">Email Us&lt;\/a>  <\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-cc-and-bcc\">Adding CC and BCC<\/h4>\n\n\n<p>Open default mail program, create new message with the TO, SUBJECT, CC, and BCC field already filled out. Essentially we are adding the parameters <tt>cc<\/tt> and <tt>bcc<\/tt> to the href value.<\/p>\n\n\n\n<p>Also note that you add multiple values to CC and BCC by comma separating them.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&amp;bcc=lastperson@theirsite.com&amp;subject=Big%20News\">Email Us&lt;\/a><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-body-text\">Adding body text<\/h4>\n\n\n<p>Just add the <tt>body<\/tt> parameter into the ever-growing list of parameters we are using.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&amp;bcc=lastperson@theirsite.com&amp;subject=Big%20News&amp;body=Body-goes-here\">Email Us&lt;\/a><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>The following is a demo of different email link usage. The links will not trigger in the embedded demo, but you can <a href=\"https:\/\/cdpn.io\/team\/css-tricks\/debug\/abJjevj\" rel=\"noopener\">see them in action in the full page view<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abJjevj\" src=\"\/\/codepen.io\/anon\/embed\/abJjevj?height=450&amp;theme-id=1&amp;slug-hash=abJjevj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abJjevj\" title=\"CodePen Embed abJjevj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Basic Open default mail program, create new message with the TO field already filled out. Adding a subject Open default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter subject to the href value. Spaces in the subject will probably work OK, but to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3231,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":198601,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","url_meta":{"origin":5732,"position":0},"title":"text-decoration-skip","date":"March 31, 2015","format":false,"excerpt":"The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here's one example: a { text-decoration-skip: ink; } Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":5732,"position":1},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3327,"url":"https:\/\/css-tricks.com\/snippets\/css\/give-clickable-elements-a-pointer-cursor\/","url_meta":{"origin":5732,"position":2},"title":"Give Clickable Elements a Pointer Cursor","date":"August 10, 2009","format":false,"excerpt":"a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class \"pointer\" for applying it to other clickable things as needed.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16278,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/tab-size\/","url_meta":{"origin":5732,"position":3},"title":"tab-size","date":"February 12, 2012","format":false,"excerpt":"The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character. pre { tab-size: 8; \/* default. Pretty big! *\/ tab-size: 2; tab-size: 13px; \/* you can set a width-per-tab also *\/ } Have a play with these range sliders to see\u2026","rel":"","context":"In \"tab-size\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3272,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-default-search-string-on-focus\/","url_meta":{"origin":5732,"position":4},"title":"Clear Default Search String on Focus","date":"August 7, 2009","format":false,"excerpt":"$(\"#s\") .val(\"Search...\") .css(\"color\", \"#ccc\") .focus(function(){ $(this).css(\"color\", \"black\"); if ($(this).val() == \"Search...\") { $(this).val(\"\"); } }) .blur(function(){ $(this).css(\"color\", \"#ccc\"); if ($(this).val() == \"\") { $(this).val(\"Search...\"); } }); Set value of field to \"Search...\" When field comes into focus, set color to black. If value is default, remove it. When field goes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5785,"url":"https:\/\/css-tricks.com\/snippets\/html\/set-iphone-bookmark-icon\/","url_meta":{"origin":5732,"position":5},"title":"Set iPhone Bookmark Icon","date":"March 1, 2010","format":false,"excerpt":"Place this in your <head> section, and set the href attribute to an image to a 57px x 57px PNG file. To prevent the iPhone from adding it's own gloss:","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5732"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5732"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5732\/revisions"}],"predecessor-version":[{"id":342297,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5732\/revisions\/342297"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3231"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5732"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}