Link to Email2:31 with Guil Hernandez
Learn to create "mailto" links that auto-launch a user's default email program with pre-filled 'subject', 'to' and 'from' fields.
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 and 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 firstname.lastname@example.org. 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, email@example.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 and 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 percent sign 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 up