Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Basics!
You have completed HTML Basics!
Preview
Learn to create "mailto" links that auto-launch a user's default email program with pre-filled 'subject', 'to' and 'from' fields.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Have you ever visited a site or
app where you clicked an email address and
0:00
it auto-launched your default
email program with the subject,
0:04
to and
from address fields already filled out.
0:08
It let you begin composing an email
without first having to copy or
0:11
enter an email address
into the email client.
0:15
Well, that functionality was
created with just a link.
0:17
No fancy scripting or
programming necessary.
0:20
Let me show you.
0:22
So, first, back in index.html,
0:24
I'll place the email address in
the contact section inside <a> tags.
0:27
So to open the default mail program
with the link, you begin the email
0:37
links href value with mailto:
0:42
followed by the email address you
want the email to be sent to.
0:47
In this case it's
coolvrexperience@gmail.com.
0:51
So I'll go ahead and copy it and
paste it right after mailto.
0:54
These types of links are often called
mailto links because the mailto
0:59
command inside the href attribute is
what allows users to send an email
1:04
to the specified address.
1:09
So click to preview the page, and
scroll down, to the Contact email link.
1:11
And that's it, clicking on the link
starts up my default email program, and
1:17
includes the email address,
coolvrexperience@gmail.com,
1:21
in the To field.
1:25
And you're also able to open the mail
program with the Subject field filled out.
1:27
To provide a default subject,
you add a question mark right after
1:33
the email address followed
by the subject parameter,
1:38
an equals sign, and
the subject you want to display.
1:42
Let's display, Hi There.
1:46
Now, most modern email programs
will include the space in
1:50
the subject field by default,
1:55
but it's good practice to
define each space in a subject
1:57
value using %20.
2:02
This is a special character code
known as percent in coding or
2:05
URL in coding, for
explicitly defining spaces.
2:09
So let's give this a save.
2:13
Refresh the browser,
click on the Email, and
2:15
we see, Hi There, as the email subject.
2:20
Go ahead and check out the teacher's
notes to learn more about parameters and
2:22
values from mailto links.
2:27
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up