Adding Email Link to Web Page

This tutorial will demonstrate adding email links to a web page that will let a user send an email right from the link on the webpage.

Adding an email link to a web page is a simple process. An email link on a web page looks the same as a link to another web page, but instead of going somewhere when the user clicks on it, the users default email application is opened with the email address already entered. The visitor simply has to type in a message and click the send button.

Another difference between links to other web pages and and email link is the use of the mailto command in conjunction with the email address of the person who is to receive the email.

Let's Add an Email Link to a Web Page

For this exercise, we'll eturn to our page for the cleaning company.

We're going to put an email link at the bottom of the page so that when a visitor clicks on the link, their default email application will open making it very easy to send and email.

Let's start by inserting a horizontal rule.

Below the horizontal rule, I'll insert an envelope icon as a sort of visual cue for visitors, then add some text to use for the link. I added the term "email us" and then selected the text.

With the text selected, I select the Insert menu and then choose Email Link.

The Email Link dialog appears.

The text I selected is already entered in the Text box. I enter the destination email address for users. This is the address where the email message will be sent.

Then click OK and the link is added. Behind the scense, Dreamweaver add the code to create the mailto link that looks like this:

<a href="mailto:support@grimeaway.com">Email Us</a>

Note that once an email link has been added, it's easy to change it. We'll look at that in more detail later, but if you select the link and look at the Properties Panel, you can see that the destination email address can be easily changed in the Link box.

The link in this case is "mailto:support@grimeaway.com".

Editing the Email Link

Note that you can edit the email link in the properties panel.

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Adding an Email Link in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!