Building a Flash Contact Form with PHP and AS3

Adobe Flash has offered countless benefits for web developers over the years. With the latest release of Adobe CS5 we have seen a huge step forward in the Flash development environment. Not only does the release include additional tools, menus, and commands, but the ActionScript panel has been upgraded as well.

Building a Flash Contact Form with PHP and AS3


In this tutorial we'll be going over some of the key aspects to developing in ActionScript 3. As a simple example we will be constructing a contact form designed with server-side code written in PHP. This will connect into Flash to process and physically send our mail.

If you have questions about the code feel free to share them in the comments below. This tutorial assumes at least a basic understanding of programming topics such as functions or variables. However if you don't know much about development don't feel discouraged. Odds are good you'll be able to pick up the code and move with things regardless of your past experience.

Building the Flash UI

Since the release of Flash CS3 Adobe has created some very useful interface modules. These are tools and libraries which contain pre-made text boxes, label fields, scrollbars, and many other important items.

The purpose here isn't to get too caught up in the details of graphics and design. You can find all of the modules you'll need within the components menu. In CS5 this is found at Window -> Components or shortcut keys CTRL+F7.

The most common elements will be textfields and textareas. These are input data fields which can receive user input and pass the variables into our backend code. Examples of these could include the sender's name, response e-mail address, subject, etc. You would also want to look at some of the options for buttons as you'll need a component to handle the form submission.

Flash Components Menu

If you're still interested in further customizations with AS3 components check out the Adobe support documents on file. It's a digital reference containing all of the supported components for Flash projects and how they tie into AS3.

Diving into ActionScript 3.0

One you've got a simple UX placement it's a mild stepping stone into coding our AS code. If you're struggling on the graphical aspects check out my demo project files for inspiration.

If you can't see the timeline window at the top of your project workspace enable this at Window -> Timeline. This gives you an overview of the movie file layers and animations. Create a new layer either above or beneath your graphics and name this actions. Here we will store all of our ActionScript code so we know exactly where to look for any changes.

Flash Timeline Preview

It is also recommended to lock a layer once you're done working on it. You can still write Actions into a locked layer, so it's always a good idea to lock your actions layer on the off chance you accidentally place a graphic or component. Separation of project items into layers will make your life as a developer ten times easier!

const SENDING:String = "Sending";
const SENT_SUCCESS:String = "Successful";
const SENT_FAILED:String  = "Unsuccessful";
var tmr:Timer;

Above we have some initial variable declarations to help with functions later on. If you're not seeing any AS code check the bottom panel for a tab titled "Actions" and ensure you're selecting the actions layer in your timeline. If you are troubled finding the actions panel you can access this via Window -> Actions or shortcut F9.

The keyword const stands for constant and is another form of variable which can't be overwritten or changed during the program's runtime. These will store our messages to relay upon failure or success of sending the mail.

Building our Functions Library

After the initial app variables are set we can see many of our functions pre-written. These will be used throughout the process to clear and update user input or share information between scripts.

function resetTextFields():void {
	name_txt.text 	 = "";
	email_txt.text 	 = "";
	message_txt.text = "";
}

function resetContactForm():void {
	submit_btn.enabled  = true;
	feedback_mc.visible = false;
	clearErrors();
}

function validateEmail(str:String):Boolean {
	var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
	var result:Object = pattern.exec(str);
	if(result == null) {
		return false;
	}
	return true;
}

resetTextFields() and resetContactForm() are similar ideas for functions which will be called at different times. Each has a return value of void meaning we don't expect any response from the function call.

As you can imagine, these would come in handy after a user has successfully passed in all the data we need and been given clearance to mail. Much of the internal code is used to clear form values and edit the current state of stage components.

After this we have one more function which validates e-mail address based on a Regex phrase. This is short for Regular Expression and provides a base for checking against string terms. It's a much more advanced programming concept, so don't be too concerned about this if you don't understand the logic.

if(passChecks) {
		submit_btn.enabled  = false;
		feedback_mc.visible = true;
		feedback_mc.gotoAndStop(SENDING);

		var urlVars:URLVariables = new URLVariables();
		var urlReq:URLRequest 	 = new URLRequest("send_email.php");
		var ldr:URLLoader 	 	 = new URLLoader();

		urlVars.name 	= name_txt.text;
		urlVars.email 	= email_txt.text;
		urlVars.message = message_txt.text;
		urlReq.data 	= urlVars;
		urlReq.method 	= URLRequestMethod.POST;
		ldr.addEventListener(Event.COMPLETE, serverFeedback);
		ldr.load(urlReq);
	}

Our main function is named submitForm() and expects a single parameter. This is coded as a mouse event, which in our case would be specifically targeted at pushing the submit button. Once called the function pulls all data from the form and checks to ensure nothing is empty.

After a short period of logic we come to an if statement which only runs if there are no errors set. This will load a new URLRequest variable targeting our PHP script. In my project directory this is named send_email.php and is stored in the same location as my Flash movie.

Flash Professional CS5 Startpage

Please note in order to actually send any mail you will need to move all files into a server running PHP. This could be powered locally through WAMP or MAMP, or alternatively hosted elsewhere on a remote Linux box.

Towards the bottom of our if clause we see a new event listener. This will complete once the URL which we've requested has been loaded into memory and will call a function named serverFeedback(). We can see the code for this below.

function serverFeedback(evt:Event):void {
	var ldr:URLLoader = evt.target as URLLoader;
	var urlVars:URLVariables = new URLVariables(ldr.data);

	if(urlVars.result == SENT_SUCCESS) {
		feedback_mc.gotoAndStop(SENT_SUCCESS);
		resetTextFields();
	} else if(urlVars.result == SENT_FAILED) {
		feedback_mc.gotoAndStop(SENT_FAILED);
	}
}

The server results are actually fairly simple to understand. After taking our event item (which in this case is the freshly loaded send_email.php) and storing it as a URLLoader object we can pull all the variables which we return.

This will be the key into accessing all of our PHP server-side project code. We then run into a short if/else clause checking if the server has returned successful or failed results. Either way we offer a value for the function to pass back to our application and update the user on what's happening.

Now that we have looked into all of our AS functions it's a good time to jump into our PHP code to see where everything lines up. All of these variables will be accessed upon the click of a submit button on your page. This can be added through an EventListener such as below:

submit_btn.addEventListener(MouseEvent.CLICK, submitForm); 

Breaking Down PHP

Surprisingly the PHP side of things handles everything is a very elegant way. Since we've already cleared error handling in our AS code above, PHP just needs the content and information about where to send things.

Below is what you'll find at the very top of send_email.php which should house our initial settings. These data sets can be used to hold information regarding who receives the e-mail message, and possible mail headers.

$emailTo = "noreply@googlemail.com";
$name = $_POST["name"];
$emailFrom = $_POST["email"];
$message = $_POST["message"];
$subject = "New Message from Yourwebsite!";

The only variable you need to edit here is $emailTo which contains the address where our message will be sent. In addition, if you'd like to customize the $subject it's only a string passed into our mail() function below.

PHP Wall Graffiti

All of the $_POST[] variables are the information passed in through Flash. The system elegantly accesses all data shared through a 3rd party application behind-the-scenes through POST. In this way you're protected against hackers attempting to penetrate and bypass your security.

Below is the final function from our PHP file. It's enclosed inside an if clause which checks for unique POST variables to access. After this we construct a short message held inside a $body variable and build e-mail headers inside a $header var.

Also note the if/else clause towards the end of our logic. The first statement passes in our mail() function which will return TRUE upon success and FALSE on failure. If everything goes as planned we respond back to flash with a string value Successful.

You can also download all the files for this tutorial.

Conclusion

Much of the code here can seem difficult to grasp if you're not frequently building in ActionScript. Check out the demo source code if you're looking for information to clear up any bugs or issues in building the form.

If you are noticing the e-mails will not send, ensure you are running both the Flash .SWF file and your send_email.php inside a server environment. PHP must be able to access specific .dll files to run the mail() function properly. To export your .fla file into a movie check File -> Export -> Export Movie... (or shortcut CTRL+ALT+SHIFT+S).

With the simplicity of building dynamic contact forms in Flash CS5 it's no wonder these applications have spread like wildfire. If you have an interest in customizing your own form for a personal or client website I recommend DesignMoo's UI Elements library for some further inspiration.