Flash Contact Form
one of the assignments in one of our Flash courses is to create a Flash contact form. This post will review the Flash file students are given to use as a starting point. This form will only consist of a first name and email text box as the rest of the form is the assignment.
This form will be built to make it very easy to re-use and very easy to work with. We will use way more frames and layers than required.
Start by creating a new movie clip and place that movie clip on your stage. Then inside that movie clip create the following frame and layer structure:
Some of your frames won’t be grey like the above image as there is nothing in them. In frame one add the following items on their matching frame, ie the “First Name:” and first name text box go in the name layer, etc… The button needs the instance name submit_btn and the text boxes need the instance names first_tb, email_tb and error_tb.
On frame eleven (loading) of the message layer put the text “loading”. On frame twenty-one (complete) put the text “complete” as well as a back button to go back to the form with the instance name complete_btn. And finally on frame thirty-one (error) put the text “error” as well as a back button to go back to the form with the instance name error_btn.
On frame twenty-one (complete) of the actions layer put the following code:
complete_btn.addEventListener(MouseEvent.CLICK,completeClickHandler);
function completeClickHandler(eventData:MouseEvent) :void {
gotoAndStop("form");
}
And on frame thirty-one (error) of the actions layer put the following code:
error_btn.addEventListener(MouseEvent.CLICK,errorClickHandler);
function errorClickHandler(eventData:MouseEvent) :void {
gotoAndStop("form");
}
Now select frame one on the actions layer and this is here the bulk of our code will go. First we need to create the submitClickHandler and execute that function on a click event:
submit_btn.addEventListener(MouseEvent.CLICK,submitClickHandler);
function submitClickHandler(evt:MouseEvent){
}
Once someone presses submit we need to validate the data in the two text boxes, for this example we are just going to validate the two text boxes for blanks, then send the form data to an external PHP script to be emailed.
Inside the submitClickHandler function place the following validation code:
if(first_tb.text == "") {
error_tb.text = "Please enter your name";
}else if(email_tb.text == ""){
error_tb.text = "Please enter your email address";
}else{
}
If the name or email is blank we place an error message in the error text box and then give the user another chance to fill out the form. Once the form data passes all validation we then execute the code in the else part of the if statement.
First we clear out any previous errors that may have been displayed:
error_tb.text = "";
Next we create a URL Variables object and place all the form data into that object:
var myVariables:URLVariables = new URLVariables();
myVariables.firstData = first_tb.text;
myVariables.emailData = email_tb.text;
Then we create a URL Request object and a URL Loader object to post our URL Variables to a PHP file. The PHP file is called submit.php and is displayed at the end of this post.
var myRequest:URLRequest = new URLRequest();
myRequest.url = "http://domain.com/folder/submit.php";
myRequest.method = URLRequestMethod.POST;
myRequest.data = myVariables;
var myLoader:URLLoader = new URLLoader();
myLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
We also need to execute the completeHandler function when the loader has a complete event. The completeHandler function will be defined below.
myLoader.addEventListener(Event.COMPLETE, completeHandler);
Next we laod the request. Upon a successful looad we go to the loading frame and upon an unsuccessful load we go to the error form.
try{
myLoader.load(myRequest);
gotoAndStop("loading");
}catch (error:Error) {
gotoAndStop("error");
}
Lastly we create the completeHandler function which runs once the response is returned from our PHP script. This function displays the complete message on the complete frame and traces the returnMessage variable which was created by the PHP script. This serves no practical use in this example but it makes gives us an example of how to have PHP send information back to Flash.
function completeHandler(eventData:Event):void{
trace(eventData.target.data.returnMessage);
gotoAndStop("complete");
}
And after that we have a stop action.
stop();
Here is the submit.php file that Flash posts the form data to:
<?php
echo 'returnMessage=Your data has been sent to '.$_POST['emailData'].'!!';
$message = 'Your Flash contact form has been filled out:'.chr(13);
foreach( $_POST as $key => $value )
{
$message .= $key.': '.$value.chr( 13 );
}
mail( 'email@address.com', 'Form Submission', $message );
?>
This PHP simply regurgitates all post data into a message and sends it to an email address.