mail form

source: http://www.thegoldenmean.com

Page Five: Refinements

In addition to the basics covered in the previous pages, this page covers two user interface refinements you might want to consider.

Wake up the button

The first User Interface refinement is to dim the submit button until all fields have content in them, and then to “wake up” the button when that condition is met.

This is all done with ActionScript: you don’t need to add anything to the library.

Add the following to the beginning of the code in the “logic” layer:

/*-- INITALIZE ENVIRONMENT
  start off with submit button dimmed*/
  
submit_mc._alpha = 40;

/*-- KEY LISTENER
Now we create a Listener Object which pays attention to the keyboard
and checks the state of the four input fields. The moment every text
field has at least something entered in it, the submit button "wakes up"
(this is strictly a visual cue - the button can be clicked at any time).
The fields could all have nonsense in them - this just checks to see that
SOMETHING exists in all four fields.*/

//create listener for Key Object

formCheck = new Object();
formCheck.onKeyUp = function() {
   if (name_txt.text != '' &&
         email_txt.text != '' &&
         subject_txt.text != '' &&
         message_txt.text != '') {
      //clear any alert messages
      alert_txt.text = '';
      //enable the submit button
      submit_mc._alpha = 100;
   } else {
         //remain disabled until all fields have content
         submit_mc._alpha = 40;
      }
}

//add this new listener
Key.addListener(formCheck);

When the movie loads, the submit_mc graphic is instructed to display at a reduced opacity: 40% in this case. It is in effect “dimmed”. A new object (“formCheck”) is created and assigned as a listener to the Key object. This new object’s task it is to check all the fields for content every time a key is released. If on one of these events “formCheck” finds that there is in fact something (even one text character) in every field, it tells the submit_mc movie clip to display at full opacity. That’s all it does!

Text Field Formatting

The second User Interface refinement is a highlighting effect when an input field is active. Placing the cursor in a field (or tabbing from one to another) causes the appearance of the text field border and background to change, making it easier for the user to know where they are in the form.

We want a border and a background color for each of the four input fields (but not the alert field, since there is no user interactivity there). The approach Sephiroth uses is hard to improve upon. The following code creates six new variables and assigns hex color values to each:

/*-- FORMAT TEXT FIELDS
The next block of code deals with formatting the input
text fields. Styles are defined for the normal state and
the focus state. Next a for-in loop loops through the fields
passed to it and apply the normal formatting.*/

/*#######SET STYLES FOR TEXT FIELDS#######*/

//define styles for both normal and focussed
//set hex values here that work with your site's colors

normal_border = 0x7A7777;
focus_border = 0xFA8D00;

normal_background = 0xECECE6;
focus_background = 0xE9E3E3;

normal_color = 0x776D6C;
focus_color = 0x000000;

Since we want to selectively apply the styling, we add the fields which will receive styling to a new array:

//create an array containing the fields we wish to have styles applied to

inputs=[name_txt, email_txt, subject_txt, message_txt];

An extremely efficient method for applying the “normal state” styling to each element in the array is with a for-in loop:

/*
a "for in" loop now iterates through each element in the "inputs" array
and applies our "normal" formatting to each input text field
*/

for( var elem in inputs) {
   inputs[elem].border = true;
   inputs[elem].borderColor = normal_border;
   inputs[elem].background = true;
   inputs[elem].backgroundColor = normal_background;
   inputs[elem].textColor = normal_color;
}

Flash’s TextField object doesn’t have a built in mechanism to swap styles on focus. We have to extend the TextField object by means of two prototypes:

/*Now we address the highlighting that occurs when a text field
gains focus. We will use prototypes for this since it isn't
built into Flash:

-- SET AND KILL FOCUS METHODS --*/

TextField.prototype.onSetFocus = function() {
   this.borderColor = focus_border;
   this.backgroundColor = focus_background;
   this.textColor = focus_color;
}

TextField.prototype.onKillFocus = function() {
   this.borderColor = normal_border;
   this.backgroundColor = normal_background;
   this.textColor = normal_color;
}

Finally: start the movie with the first input field already selected:

//Be nice to your user by focussing the first field when the movie loads
Selection.setFocus(name_txt);

Project Files

That wraps it up for this tutorial. I have project files available for download here: Flash MX version and Flash MX 2004 version. Don’t forget to modify the PHP file with your email address! Compile the .fla into a .swf and publish the movie. Be sure to put the .swf, the html file and the PHP script in the same directory on your server unless you modify the path to the script in your Flash file.

I hope you can find some creative way to apply this to your own web site. This tutorial demonstrates how to make it work. What it looks like is entirely up to you! And keep in mind it doesn’t have to be a whole page to itself. If you go in for the “precious” microscopic type style, this could easily occupy a small portion of a page, or be tucked into a floating panel. I recently saw an inspirational example of a mail module beautifully integrated with the overall site design at 24-7media. Have fun with email, and good luck.

Below, find a discussion of how to track down proplems with your contact form. Page Six concludes the tutorial with a discussion of how to expand your form, enabling it to send additional text input

Oh no — It doesn’t work …

Sigh. It happens. I have struggled with some frustrating situations getting this to work with readers. The first issue to resolve is whether the problem lies with the Flash movie or the PHP script. Following are two debugging scripts to try to narrow down where the problem lies.

First a down and dirty html form you can use to bypass Flash and just test the PHP. Copy the code below into a text editor and save the resulting file into the same directory on your web server as the processEmail.php script. Open this debug file (which you might name something like “email_debug.html”) in a web browser (make sure you are doing this over http, not just looking at it locally from your hard drive), enter data in the fields and click the “send it!” button. If all goes well you will see a new web page which will contain the text “result=passed”. If all goes really well you will also get the email shortly! If these things do happen as described, then the problem can be narrowed down to the Flash movie. In that case, I would begin by making sure the path to the PHP script which you coded into Flash actually is the correct path.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Mail Form Test</title>
</head>
<body>
<form action="processEmail.php" method="post">
<p>name: <input type="text" name="name" size="25" /></p>
<p>your email: <input type="text" name="email" size="50" /></p>
<p>subject: <input type="text" name="subject" size="50" /></p>
<p>message: <textarea name="message" rows="5" cols="40">
</textarea></p>
<p><input type="submit" name="submit" value="send it!" /></p>
</form>
</body>
</html>

If these things do not happen, the problem might not be with the Flash movie but rather the PHP script. Your email address might be of a form the validation function is not configured to recognize or your ISP’s policies might be blocking the “dialog” the validation script attempts to engage in. You might begin by verifying from your ISP that they do in fact support PHP. Assuming that they do, here’s a variation of the PHP that eliminates the validation function. As before, copy the followiing code into a new document and save as “processEmail.php ” (taking care to protect your original file of the same name!). Upload this new document to your web server space in the same directory as the .swf and give it a try. You will have to check your in-box to see if the email went through, because that’s the only feedback you will get now. If this version works you might have to live wthout the validation function.

<?php

//create short variable names
$name=$_POST['name'];
$email=$_POST['email'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$name=trim($name);
$email=trim($email);
$subject=StripSlashes($subject);
$message=StripSlashes($message);
//modify the next line with your own email address
$toaddress='yourAddress@yourDomain.com';


mail($toaddress,$subject,$message,"From: $name <$email>");
//clear the variables
$name='';
$email='';
$subject='';
$message='';
echo "response=passed";
	
?>

I hope you never need to use these alternate scripts, but if you find the Flash/PHP mailer doesn’t work, knowing how to pinpoint the source of the problem can save hours of frustration.

divider ornament

--top--

Thanks for visiting.