Flash Contact Form Tutorial - 1 / 2

Author: Salman Awan Difficulty Level: Advanced Flash Version: Flash MX 2004 Sources to Download: flash_contact_form.zip Prerequisites: Input Text field, Button, ActionScript, Basic PHP knowledge Introduction: Setting up a flash contact form is important for any business’s flash website, to enable their customers to send queries and orders. In this tutorial we will learn how to create a flash email form using PHP. We can use same tutorial for ASP page instead of PHP. ASP Section in the end will help you do this quickly.

Below is demo of flash mail form that we will create in this tutorial (You won’t be able to send or receive an email in this Demo since it is not configured for your email address).

Setting up Timeline:
Open a blank flash document and create two layers. Select top layer’s first frame and enter this line of code in ActionScript panel.

It creates a variable, that holds php file name which will be used to send email. After these steps Timeline should look like this screenshot.

Setting up Stage:
Now we need to create flash email form’s layout. Select second layer’s first frame. And create three Static text fields, that will serve as labels. Enter text in this order, from top to bottom, in these three fields, “From Name:”, “From Email:” and “Message:”

Also add three more text fields in front of three labels added above, make them Input Text Fields. Also enable “Show border around text” for all three input text fields. Name these three input fields from top to bottom as, from, email and message.

Since only Message field might have multiple lines, so we’ll have to make it a Multiline input field. Red boxes in screenshot below will guide you for these steps.

Add a Dynamic text field that will receive and display any error messages during sending email process. Add it anywhere you like your messages to be displayed. It should be Multiline but without borders. Name this field as status.

We also need to enter two Button symbols, one for clearing the form, and another one for sending email. Label these two buttons as Clear & Submit respectively.

After above setup, flash email form on stage should look like this screenshot.

Adding ActionScripts:
Now we will start adding real magic, starting with Clear button. Click on Clear button to make sure ActionScript panel displays actions for this button. Add below code to ActionScript panel while Clear button is selected.

This will simply add an event to clear button, that whenever it is released, it will clear all input & status fields.

Before we add code to flash email button labeled as Submit, we will write a function in order to separate form validation logic from submit logic. Checks like valid email format & blank fields can be added into this function.

Click first frame of top layer in Timeline, and then add below code under previously added single line of code.

Now we can call this function in Submit button’s on release event, to make sure form input passes all checks before email is sent.

Select Submit button to make sure ActionScript panel displays proper window. Add below code to ActionScript panel while Submit button is selected.

Tip: Detailed comments on what these lines are doing can be found in downloadable source code for this tutorial.

Creating PHP Page:
Once Flash part is done, now we need to create a blank web page and name it mail.php, add following code in it.

Tip: This page won’t be displayed, and variables will be sent in background using POST method, thus no need to work on its looks.

This PHP file will receive variables sent from flash, and compose a simple email using them. Email will be sent using mail method of PHP. You just need to change the $to variable’s value with your own email where you want that email to be received.

Tip: Sometimes emails sent through servers go into your Junk Folder in mail box, do check that if you are not receiving them in Inbox.

Note: For sending an email, we will need an email Server. If you have an hosting package, it will most probably include one already, you just need to place your flash SWF & PHP file on Web Server in same directory, and it will be good to go.

Using ASP Page:
if your server supports ASP rather than PHP, we can use an ASP page for sending emails, otherwise skip this section. Create a blank page with name mail.asp and enter following code in it.

We might need to tell Flash, which file to use. In first frame of top layer, replace

with

Publish and upload HTML, SWF & ASP/PHP files on your web server in same directory. Now you can receive emails at address mentioned inside ASP/PHP file.

Troubleshooting Flash Contact Form:
If you are facing any issues or problems implementing your flash contact form, please go through second tutorial in flash contact form series here.

Exercises:

1. Why this demo does not work on your local system to send email? What is your local system missing to make it work?
   
   
2. In PHP file, what is the difference between $from and $_REQUEST[“from”] ?
   
   
3. Identify the line of Code in flash that sends variables to PHP/ASP file, and line of code in external file that send results back to Flash.
   
   
4. Customize flash file to take sender’s email as input too, and sending it in email.
   
   
5. Customize flash file so that upon successful submission of email, movie goes to and stop on second blank frame  with success message.