Automatically Send Event-Triggered Email From Web Page

When a site visitor does something in particular, an email can be sent automatically.

Examples: A specific link is clicked on. The page is scrolled. The page is viewed for longer than a specific amount of time.

Ajax causes the email to be sent.

JavaScript by itself can not send email. But it can be used to code an Ajax engine that sends the specifics to a PHP or Perl script on the server. The server side script then sends the email.

This article provides the code for a PHP script to send email and the code for an Ajax engine.

Email is sent silently. The site visitor sees nothing to indicate an email is being sent.

The PHP Script to Send Email

Here is the code for the PHP script. Customization notes follow.

<?php
/* 
   Email Sender
   Version 1.0
   March 19, 2012

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/
 //////////////////////////////
// Two places to customize. //

$AddressToEmailTo = "will.bontrager@gmail.com";

$SubjectOfEmail = "Notice from web page";

 // End of customization //
//////////////////////////
$content = 'This email sent from script ' . $_SERVER['PHP_SELF'] . "\n\nData received:\n\n";
if( isset($_GET['IP']) ) { $_GET['IP '] = $_SERVER['REMOTE_ADDR']; }
else { $_GET['IP'] = $_SERVER['REMOTE_ADDR']; }
ksort($_GET);
foreach( $_GET as $k => $v ) { $content .= "\t$k = $v\n"; }
mail($AddressToEmailTo,$SubjectOfEmail,$content,"From: $AddressToEmailTo");
?>

The PHP script has two places to customize. The places are marked in the script.

The email address to send the email to. Verify it is a valid address.
The subject line for the email.

Save the PHP script as EmailSender.php or other preferred name. The .php file name extension is required.

Upload the PHP script to the server and make a note of its URL. (The URL will be used in the JavaScript composing the Ajax engine.

The Ajax Engine

Here is the JavaScript code for the Ajax engine. Customization notes follow.

<script type="text/javascript"><!--
/* 
   Email Engine for Sending Email via Server Side Script
   Version 1.0
   March 19, 2012

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

/////////////////////////////////////////////
// One place to customize.
//
// Specify the URL of the emailing script.

var URLofEmailingScript = "http://127.0.0.1:8888/DEV/AJAX/AutoEmail/EmailSender.php";

// End of customization section.
/////////////////////////////////////////////

URLofEmailingScript = URLofEmailingScript.replace(/^https?:\/\/[^\/]*/i,"");

function GetServerRequestObject() {
var http;
if (window.XMLHttpRequest) {
   try { http = new XMLHttpRequest(); }
   catch(e) {}
   } 
else if (window.ActiveXObject) {
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(e) {}
      }
   }
else {
   alert('Unable to connect with the server.');
   return false;
   }
return http;
}

function SendAnEmail(message) {
var http = GetServerRequestObject();
if( ! http ) { alert('Unable to open http connection'); return true; }
var url = URLofEmailingScript + "?" + escape("Page with link") + "=" + escape(document.URL);
if( message.length ) { url += "&Message=" + escape(message); }
http.onreadystatechange = function() {};
http.open("GET",url,true);
http.send("");
return true;
}
//--></script>

The Ajax engine JavaScript code has one place that needs to be customized, marked in the script. Specify the URL of the PHP emailing script installed in the first step.

Paste the Ajax engine code into the web page where it will be used. Or import the code into the web page from an external file.

How To Cause Email To Be Sent

Now that the PHP script is on the server and the Ajax JavaScript is on the web page, the last step is to get an email sent when a certain event happens.

Different things need to be done to send email for different events. I'll describe a few here.

Send Email On Click

The easiest implementation is to use the onclick attribute to send an email when the site user clicks on something. Like a link. Or a picture. Here are examples:

<a 
   href="javascript:alert('thank you')" 
   onclick="return SendAnEmail('The special link was clicked')">
Link Silently Sends Email
</a>

<img 
   src="//www.willmaster.com/images/wmlogo_icon.gif"
   width="50" height="50" alt="Willmaster logo"
   onclick="SendAnEmail('The image was clicked')">

A message to be sent along with the email may be specified as the SendAnEmail() function parameter. In the above examples, the parameters are 'The special link was clicked' and 'The image was clicked', respectively.

Notice that the A tag link's onclick attribute contains the return statement. The return statement is necessary for onclick attributes in A tag links. For other elements, the return statement is unnecessary.

Send Email when Page is Scrolled

Some kind of regulator needs to be implemented for using a scroll as the event to send an email. Without the regulator, dozens or even hundreds of emails may be sent while a site user scrolls a page.

Here is code to cause an email to be sent when the page is scrolled, with a regulator to send only one email for any one page view.

<script type="text/javascript">
var Scroll_Has_Mailed = false;
function SendScrolledEmail() {
if(!Scroll_Has_Mailed) {
   Scroll_Has_Mailed = true;
   SendAnEmail("Page was scrolled");
   }
}
window.onscroll = SendScrolledEmail;
</script>

The SendAnEmail() function parameter "Page was scrolled" may be changed to whatever is suitable for your implementation.

Paste the code into a web page that also contains the Ajax engine. An email will be sent when a site visitor first scrolls the page.

Send Email when Page is Viewed a Long Time

Here is the code to silently send an email when the page is viewed for longer than a specific amount of time.

<script type="text/javascript">
var ViewedMinutes = 5; // number of minutes to wait before sending email.
setTimeout( "SendAnEmail('Page viewed long time')",  parseInt(ViewedMinutes*60*1000) );
</script>

The number of minutes to wait before sending email can be customized. The number of minutes may be specified as a decimal number – 1.5 for 1½ minutes or 0.25 for 15 seconds, as examples.

The SendAnEmail() function parameter 'Page viewed long time' may be changed to whatever is suitable for your implementation.

Paste the code into a web page that also contains the Ajax engine. An email will be sent when a site visitor leaves the page open for more than the specified number of minutes.

Overview

To silently send an email from a web page, use a JavaScript Ajax engine on the web page. JavaScript by itself can not silently send email. Therefore, Ajax tells a PHP script on the server to go ahead and send it.

To cause an email to be sent upon the occurrence of a certain event, the Ajax engine is told, in essence, "now is the time to send the email" when the event happens. This article has three different examples of how to do that, one each for three separate events.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.