I recently received an email from a visitor how he could put a clickable email address on his web page using the Dreamweaver web editor. Such an email address, when clicked by someone viewing the page, will open up that person's email software.
Those using my main Dreamweaver Tutorial series may have noticed that instead of teaching how to put an email address on a website, I describe how to put a feedback form.
There are a few reasons for this, and you may want to browse through these reasons before committing yourself to putting your email address online.
As I mentioned in the article "Should I Display an Email Address on My Site or Use a Contact Form?", any email address displayed on a website at all automatically attracts spam. Spammers use automated computer programs (sometimes called "email harvesters") to scour the web for email addresses. Any email address displayed on your site will automatically be collected by them and sold.
This is not to say that feedback forms don't attract spam either. Anyone who has an existing website with a form will immediately disabuse you of that notion. However, if you use a feedback form and find that you are plagued by spam from that form, it's still possible to use something called a CAPTCHA test to reduce the spam. More details on how to do this can be found in the tutorial How to Add a CAPTCHA Test to Your Feedback Form Script: Reducing Spam in Your Contact Form.
Back when I first started out on the Internet, the only way I could access my email was using an email program which I had to install into my computer. Nowadays, many people don't even realise there's such a thing as an email program, since they use free web mail services exclusively when they need to send or receive email.
If your visitors don't use an installed program to manage their email, the "clickable" email address that I teach below will not work as expected (for them). That is, when they click the email link, chances are that the default email program on their computer (which they probably have never seen before in their lives) will unexpectedly start up. And they won't know what to do with it. Equally bad, on some systems, their browser may issue a scary message telling them that the web page wants to start a program on their computer (the email program). If you don't know what I mean, click the following (dummy) email link not-real-address@example.com to see what happens.
Note that the result of clicking the link varies from operating system to operating system and browser to browser, even varying between different versions of those software, so don't think that your experience is normative for all people. For example, some browsers allow users to configure to it to use their web mail for such links (if they wish). For those who don't use a browser that allows it, but nonetheless use web mail for their email, they should (theoretically) just cut and paste your email address from the page to their web mail. Unfortunately, when an email address is made into a clickable link, some people may assume that it leads to your contact form and click it instead, with the results you've just experienced.
There are other things to consider as well when deciding whether to put an email address on your site, or a web form, or both. Please read Should I Display an Email Address on My Site or Use a Contact Form? if you haven't already made up your mind. If you run a business, I personally believe that you should do both (place both an email address and a contact form online), but you should of course make your own decision.
Since there are, in some cases, good reasons to put an email address on your website, the rest of the article will provide a step by step guide for inserting that address in a clickable form into your web page.
This article requires the commercial Dreamweaver web editor. (Note that you do NOT need to get Dreamweaver just to insert an email address. I'm sure all web editors support this, albeit in different ways. However, since the person asking me this question was using Dreamweaver, this article describes the procedure for using Dreamweaver to accomplish the task.)
Please also note that I have only tested the procedure using Dreamweaver CS4. I think it should also work the same way in the other versions of Dreamweaver, since this is a very straightforward procedure.
I will assume that you already have an existing web page with an email address that you want to make into a link. You should also know how to do basic things with Dreamweaver, like create a web page. If this is not true, please start with the main Dreamweaver tutorial. If you don't even have a website, and are just reading this article to get the feel of things, it's best to start at the very beginning, with How to Start / Create Your Own Website: The Beginner's A-Z Guide.
Start up Dreamweaver and open up your web page.
Go to the part of your web page where you have typed your email address and select the address. For example, if you have typed
not-real-address@example.com on your page, drag your mouse over the entire text to
select it.
At the bottom of your Dreamweaver window, in the PROPERTIES panel, look at the "Link" field. If you can't see a link field in the panel, click the "HTML" button on the leftmost portion of the PROPERTIES panel. (Yes, the word "HTML" there is actually a button even though it doesn't look like one.) The "Link" field should be currently blank.
Type mailto:not-real-address@example.com into that field, replacing not-real-address@example.com with your
email address. To make sure that this is clear, let me say this another way. Type your email address into the link field, but prefix
your email address with "mailto:" (without the quotes). There should be no spaces between "mailto:" and your email address.
Once again, note carefully that I said prefix it with "mailto:". There are NO double slashes ("//"). None. It's just the "mailto" word followed by a colon (":"), followed immediately by your email address. And there are no spaces between those characters either.
Hit the ENTER key when you've finished entering your email address. Your email address in your web page will now appear underlined. It will be clickable in your actual web page once you publish it and test it in a browser.
Save your page and publish it.
Alternative method: if you cannot find the PROPERTIES panel, do the following instead. (Ignore this paragraph if you've successfully followed the above step-by-step guide.) Select the email address in your web page and click the "Insert" menu. Click the "Hyperlink" item in the menu that appears. A dialog box should appear asking you for details of the link. The text you selected earlier should appear in the "Text" field. Enter the email address in the format described above (with the "mailto:" prefix) into the "Link" field, and click "OK".
Although I have provided the procedure for making the email address clickable, in response to a user request,
I personally don't think it's necessary or useful to make it into a link. If you want to put your email address on your
site, just type it in plain text, like so: not-real-address@example.com. If you like, you can put
it in a different font face, like I did, or you can just leave it as it is.
Putting the unadorned email address on the page makes it easier for people who use web mail to copy and paste your email address into another browser tab (or window). Some browsers make it difficult for people to drag and copy text that are part of links. The plain (unlinked) email address also avoids the problem of people who may click the link, thinking it will lead them to a feedback form, and ending up with the irritation of an email program starting up on their computer.
Having said that, like most things in web design, there's no hard and fast rule to the matter. Whichever method you choose, you now have the necessary knowledge to implement it.
This article can be found at https://www.thesitewizard.com/dreamweaver/clickable-email-address.shtml
Copyright © 2009-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Put a Clickable Email Address on Your Web Page Using Dreamweaver
