Recipe 7.9. Send Visitor Messages to Your Mobile Phone

Problem

You need to receive urgent messages from your web site on your mobile phone.

Solution

Create a simple email form that, combined with a JavaScript character counter, sends SMS messages from your web site to your mobile phone.

Discussion

Short Message Service (SMS) allows mobile phone users on nearly all major carriers to send and receive short alphanumeric messages. Also called texting, the practice is wildly popular in Europe and Asia and with younger cell phone users in the United States. Originally created for the GSM cell networks of Europe in the early 1990s, SMS traffic has grown from 250 billion messages sent in 2000 to more than 500 billion sent in 2004.

The SMS protocol can communicate with external systems, including email, which means that you can set up an emergency contact form on your web site that your customers, patients, or even boss can use to quickly send you important messages. Figure 7-10 shows a form I created to send SMS messages to my cell phone. Like other cell phone accounts, mine has an email address associated with it, which is my ten-digit mobile number @mobile.mycingular.com. My account also has a 160-character limit on SMS messages, so I've added some JavaScript to count characters as the visitor types his message, as well as a warning message that appears when the message is over the limit.

The JavaScript function smsLimiter takes three parameters: the name of the textarea field where the SMS message will be typed, the name of a read-only input field that counts down the number of characters remaining, and the maximum number of characters allowed in the message field:

 function smsLimiter(message,counter,max) {     var strTemp = "";     var strCharCounter = 0;     for (var i = 0; i < message.value.length; i++)     {         var strChar = message.value.substring(i, i + 1);         if (strChar == '\n')         {             strTemp += strChar;             strCharCounter = 1;          }         else         {             strTemp += strChar;              strCharCounter ++;         }     }     counter.value = max - strTemp.length; }

Figure 7-10. A form that generates an SMS message counts down the character limit as the sender types to prevent the message from exceeding the limits of the recipient's mobile phone plan

The code for the form looks like this:

 <form action="sms.php" method="post"> <fieldset> <legend>&#x260E; Send an SMS Email</legend>  <h3>Name</h3>   <input name="name" type="text" value="" size="20" maxlength="20">  <h3>Message</h3>   <textarea name="smsmsg" cols="35" rows="6" onKeyUp="smsLimiter(this.form.smsmsg,this.form.remaining,160);"></textarea>   <p><strong>Characters Remaining:</strong> <input name="remaining" type="text" value="160" size="5" maxlength="5" readonly>;</p>   <input name="remLines" type="hidden" value="10"/>  <h3>Callback Number</h3>   <input name="callback" type="text" value="" size="12" maxlength="12"><br/>   <input name="Send" type="Submit" value="Send" onClick = "if (this.form.remaining.value < '0'){alert('Your message is too long. Please make it shorter.');return false;};"/><input name="f" type="hidden" value="send"> </fieldset> </form>

I used PHP's built-in email() function to send the message, but any CGI capable of sending an email, such as formmail, will work.

The elements in the form have special attributes that work with the JavaScript function to keep messages under my carrier's SMS limit. The onKeyUp event handler calls the smsLimiter function from the textarea element. The input element named remaining counts down the characters remaining from an initial value of 160 (see Figure 7-11). Because this form field is read-only, the user cannot change its value.

Figure 7-11. The Characters Remaining field counts down as the message is typed into the field above it

If the message exceeds the limit, the onClick event handler in the code for the form's submit button displays a warning message (see Figure 7-12). The message can't be sent until the character limit is less than 160.

Problem

Solution

Discussion

Figure 7-10. A form that generates an SMS message counts down the character limit as the sender types to prevent the message from exceeding the limits of the recipient's mobile phone plan

Figure 7-11. The Characters Remaining field counts down as the message is typed into the field above it

See Also

Figure 7-12. A message too long for my mobile service to handle prompts a warning message