<

Avoiding "mailto" and how to capture a web enquiry

Published on
19,665 Points
6,865 Views
8 Endorsements
Last Modified:
Awarded
Rob
I'm an enthusiastic Web Solutions Provider that designs and creates a website YOU want for you and your customers

1. Why are you using mailto?

I was prompted to write this as I'm still seeing people using the mailto protocol in their web forms and I'm going to explain why it's not necessary and could be doing you and your business more harm than good.

2. Background on why mailto has been used

The "mailto" protocol started out being an easy way for the visitors of your site to get in contact via email with the click of a button, reducing the margin of error with copy and paste as the user's default email client would automatically open.  The "To:" field and optionally the "subject" and "body" fields could also be set so all the user needed to do was add any personal message and click send.  The "mailto" protocol then started to be used in forms for capturing data and the resulting email would have all the relevant fields populated as well as including an attachment with all the form data.  This "feature" has since stopped working in Outlook 2010.  Other email clients I've seen put the contents of the form as an URL encoded string in the body of the email.

3. What's going wrong?

So this is where I see the process failing, especially from a business point of view wanting to capture the data for a better understanding of their client base.  As a user, seeing this kind of information confuses me.  I see an attachment POSTDATA.ATT and don't know what it is so I delete it.  I also may not like the subject and think my one will get more attention.  As for sending the email, again it's at the discretion of the user who may decide to just delete the email as "it's all too hard".

From the business' point of view we've lost the ability to capture the information and asking the user again will just appear incompetent.

The other issue to the business is the increased risk of spam when an email address is made public.  "Spam bots" are looking for more email addresses to send junk to and love websites that haven't hidden their contact details.

4. So what can we do about it?

I hear you say "You're wanting to just show one or two contacts with phone numbers and email addresses!".  Yes, there are tools out there that will hide the email and phone numbers until you satisfy that you're human but I prefer what I'm about to show you below as it gives you the flexibility to filter emails to the relevant people as they come in, with the one advantage of being able to change the email address without having to change the webpage.

It is a more professional approach to display a "feedback/enquiry" form where the user can select the nature of their enquiry.  It simplifies the process for them and you know you'll get the relevant data.  Depending on what type of enquiry the user selects will determine where the email is sent.  Confirmation emails can also be sent to the user as a way of confirming that their enquiry is being dealt with.  To improve this process further you could extend the example below to create an enquiry ticket so the user has a reference to quote when replying on email.

In my experience the contacts you're showing on the site aren't necessarily the people that want to get the email nor the one that would reply.  And let's be honest, most of us are lazy when it comes to contacting through a website and will send an email to the first one we can find in the hope of reaching someone.

So why not make it easy for them and have a form in your Contact Us section of your site.  Make use of distribution lists such as admin@mydomain or sales@mydomain to remove those problems when someone is on leave or quits.

5. The Code

I'm going to show you below how easy it is to capture data on a website and send information via email using your own server (or via 3rd party as shown here my padas)

For this example, I'll use PHP.  I'm going provide an introduction and outline the basics involved, HOWEVER it is vital to explore the following topics and how they will affect your implementation. Failing to do so can have unexpected results as well as being a security risk.  They are outside the scope of this article
+ Cross Site Scripting (XSS) - Preventing Cross Site Scripting (XSS)
+ SQL Injection - PHP - Prevent SQL Injection
+ Data Validation on both the client (javascript) and server (PHP in this instance) - Client side input validation with Javascript
5 Steps to Securing Your Web Application

Keeping it simple we have two files, contact.html and feedback.php.  Both should be in the root directory of your domain ie http://mydomain.com/contact.html and http://mydomain.com/feedback.php.

contact.html shows a basic form with a few options.  The "name" and "value" attribute of each HTML element in the form is what is sent to your PHP script.

contact.html:
<form action="feedback.php" method="post" id="myform" name="myform">
        <label for="myname">Name</label><input type="text" value="" size="30" maxlength="100" name="myname" id="myname" /><br /><br />

	<label for="myemail">Email</label> <input type="text" value="" size="30" maxlength="100" name="myemail" id="myemail" /><br /><br />

	<input type="radio" id="rd1" name="myradio[]" value="1" /><label for="rd1">First radio</label>
	<input type="radio" id="rd2" name="myradio[]" value="2" checked="checked" /><label for="rd2">Second radio</label>

<br /><br />

	<input type="checkbox" id="chk1" name="mycheckbox[]" value="1" /><label for="chk1">First checkbox</label>
	<input type="checkbox" id="chk2" name="mycheckbox[]" value="2" checked="checked" /><label for="chk2">Second checkbox</label>

<br /><br />

	<label for="myselect">Type of Enquiry</label>
	<select name="myselect" id="myselect">
		<optgroup label="Sales">
			<option value="1" selected="selected">East Coast</option>
                        <option value="2">South America</option>
                        <option value="3">Asia Pacific</option>
                        <option value="4">Africa</option>
		</optgroup>
		<optgroup label="IT" >
			<option value="5">System Issues</option>
			<option value="6">Webpage Feedback</option>
		</optgroup>
	</select><br /><br />  
   
	<textarea name="mytextarea" id="" rows="3" cols="30">
Text area
	</textarea> <br /><br />
   
	<button id="mysubmit" type="submit">Submit</button>

</form>

Open in new window


Simple PHP script referenced from Matthew Kelly's article on sending email using PHP.

feedback.php
<?php

// include the phpmailer class, which can be found here: http://sourceforge.net/projects/phpmailer
// after downloading, put it in one of the included directories specified by "includes" in the php config
require("class.phpmailer.php");

// parse the form and send the email:

// we have the following sample structure from the submitted form:
/*
POST data
Array
(
    [myname] => my name
    [myemail] => myemail@email.com
    [myradio] => Array
        (
            [0] => 2
        )

    [mycheckbox] => Array
        (
            [0] => 2
        )

    [myselect] => 4
    [mytextarea] => Text area

)

NOTE: Be aware that "mycheckbox" will not be present if no boxes are checked
*/

//How you compose the Subject and body is up to you but as an example:

$subject = "Website Enquiry";
$body = "An enquiry has been sent from " . $_POST['myname'] . " (" . $_POST['myemail'] . ")<br/> Their enquiry is below:<br/>" . $_POST['mytextarea'] . "";

$contacts = array("EC","SA","APAC","AF","SI","WEB");  // in this case it is prefixed to "@mydomain.com"

$mail = new PHPMailer();
$mail->IsSMTP(); // send via SMTP

$my_domain = "mydomain.com";
$my_reply = array("address"=>"noreply" . "@" . $my_domain, "name"=>"no reply");
$smtp_server = "localhost";
$smtp_port = "25";
$smtp_user = "uname";	//username
$smtp_pass = "pword";//password

$mail->Host     = "$smtp_server:$smtp_port"; // SMTP servers
$mail->SMTPAuth = false; // turn on SMTP authentication if required by setting to true

// replace <<uname>> and <<pword>>
$mail->Username = "$smtp_user"; // SMTP username
$mail->Password = "$smtp_password"; // SMTP password

// replace the following within the << ... >>
$mail->From = $my_reply["address"];
$mail->FromName = "My Company";
$mail->AddAddress($contacts[$_POST['myselect']] . "@" . "$my_domain");
$mail->AddAddress($_POST['myemail']);
$mail->AddReplyTo($my_reply["address"],$my_reply["name"]);
$mail->WordWrap = 50; // set word wrap
$mail->IsHTML(true); // send as HTML
$mail->Subject  =  "$subject";
$mail->Body     =  "$body";
$mail->AltBody  =  $mail->Body;

$mail->Send();

?>

Open in new window


I have also used the PEAR implementation but it may or may not be available on your system.

6. Conclusion

As you can see this is certainly more work than a simple anchor tag with "mailto:" however I see it as "short term pain for long term gain".  Keeping hold of mailto is just going to give you pain down the track.

This introduction to sending email without mailto should form the building blocks of any site wanting to effectively capture information from its users.  It gives you flexibility and control over your data, especially when used in conjunction with the referenced articles on security.
8
Comment
Author:Rob
2 Comments
 

Administrative Comment

by:Eric AKA Netminder
tagit,

Two Page Editors have agreed that this article is worthy of EE-Approved.

Congratulations!

ericpete
Page Editor
0
LVL 43

Author Comment

by:Rob
Thanks ericpete! :)
0

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Join & Write a Comment

In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month