Mailto HTML Links | CSS HTML

Some Related Posts:-

Basic

Open default mail program, create new message with the TO field already filled out.

<a href="https://css-tricks.com/snippets/html/mailto-links/mailto:[email protected]">Email Us</a>  

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.

See also  Google Inspired 4-Dot Loading Indicators In Pure CSS

Spaces in the subject will probably work OK, but to be super-extra sure, you can replace spaces with “%20”.

<a href="https://css-tricks.com/snippets/html/mailto-links/mailto:[email protected]?subject=Mail from Our Site">Email Us</a>  

Adding CC and BCC

Open default mail program, create new message with the TO, SUBJECT, CC, and BCC field already filled out. Essentially we are adding the parameters cc and bcc to the href value.

Also note that you add multiple values to CC and BCC by comma separating them.

<a href="https://css-tricks.com/snippets/html/mailto-links/mailto:[email protected][email protected], [email protected], [email protected]&[email protected]&subject=Big%20News">Email Us</a>

Adding body text

Just add the body parameter into the ever-growing list of parameters we are using.

<a href="https://css-tricks.com/snippets/html/mailto-links/mailto:[email protected][email protected], [email protected], [email protected]&[email protected]&subject=Big%20News&body=Body-goes-here">Email Us</a>

Demo

The following is a demo of different email link usage. The links will not trigger in the embedded demo, but you can see them in action in the full page view.

See also  CSS Extension To Fix Bootstrap Table In Card Issue

Leave a Reply

Your email address will not be published. Required fields are marked *