Create flash Contact form using php and actionscript 2 - with validation and confirmation

Upon learning flash, you as many others will wonder how to acomplish one specific task - that is to create a contact form that will send e-mails. This is a complete tutorial in which i will explain how to acomplish that. This process may appear long, but it is very simple to understand.

Also note that after completing this tutorial, you will know how to pass values from flash to php

First, you may also check the form which i created for this tutorial. This form will ask you to input your name, your e-mail, a subject and your message. If you don’t enter any of those fields, you will be prompted to fill them. When you click send, the form will move on the next frame, where the confirmation message lays.

So, here is the form - This one will send message to the e-mail that you are going to enter, most notably yours.

What are we going to create?

1. A flash contact form using ActionScript 2
2. Validation for the form
3. Confirmation message for the form.
4. PHP file which will be used to ‘collect’ the values from the form and send e-mail.

What do we need?

1. Adobe Flash CS2, CS3 or CS4
2. Server with PHP, which has the mail function enabled
3. A mail client to send the e-mail (If you have XAMPP installed, u need Mercury configured)

However, if you preffer to test it online, you can use a free hosting package at UltraWebsiteHosting to upload the files and test the form from there. You can use up to 100MB, which is more than good for testing your sites. (Remember to get free domain name from http://6x.to/ unless you want to access the host trough IP address)

Step #1

Open your Adobe Flash software and create a new document (remember to choose ActionScript 2).

First, we need to create 3 things. That is:

• Input text fields ( Which are used to get the user’s input)
• Dynamic text fields ( Which are used to point the user what to enter, and to prompt a message if nothing is entered)
• A simple button to send our form

Please reffer to this image, so things will get clearer for you:

You can create those text fields just like you create normal text, you will just have to switch it to be dynamic or input field, instead of static.

Check this image (It may look a bit different to you, depending on which CS version you use, i am using CS4):

Now, after they are created, we must asign instance names to all those fields. You can see the instance name (nameDynamic) assigned to the dynamic field in the above image - that’s where you are going to write the instance names.

For example, for the dynamic fields i am using myfieldnameDynamic and for the input fields i am using the_fieldName ( the_ as a prefix ).

Basically, for each dynamic field, we place input field right next to it. In the dynamic fields we write ” Your Name: ” , “Your e-Mail” , “Message” … anything, depends how many we need. Right next to them we place the input fields, where we don’t write anything - it is the user who is supposed to write. Reffer to the first image of this post and you can see what am i talking about.

Before we proceed with the ActionScript, don’t forget to create the button for send, you can model it per your needs, or if you are just following this tutorial to learn, create a basic rectangle, convert it to movie-clip and give him an instance name.

Now create a new layer and place him above every other. Add a key-frame on it and press F9 to open actionscript. Here is an image:

The frame highlighted with blue is the one we need to create. Now hit F9 to open ActionScript, and type in this:

Code explanation:

First, with the stop(); function, we are calling all actions to stop. We use that to stop the moving of the frames, because we are using a second frame where the confirmation message is located.

Then, we are creating 2 variables - the sendLoad which we are using to get the values from the user’s input, so we can later call the sendAndLoad AS2 function to order the php file to receive the values via the second variable - that is receiveLoad

Later on, we use the instance name we gave to the send button ( sendBtn in my case ) to assign the onRelease event, so we can create our whole function.

Within the function, at first hand we are getting the values from the fields ( sendLoad.YourInputFieldName = YourInputFieldName.text; ). After we are done with that, we continue with if and else if statements, to check if there is any input typed in the input fields. If there is not, we prompt the user to give some input into the field, by changing the color and message of the dynamic field. If you are confused, reffer to the Flash Contact form used at the begining of this post, try pressing the SEND button without entering any value.

Finally, when all fields are verified for values, we proceed with the else statement, and give the following order sendLoad.sendAndLoad (”mail.php” , receiveLoad); - We are sending the values to the php file named mail.php so it can use them to send a mail. The last line reffers to gotoAndPlay(2), which means that after user input is verified and the e-mail is sent, the animation will take us to the second frame of the current stage - where the confirmation message is located. Try sending yourself an e-mail using the flash form at the very beggining of this post.

We are done with the flash and actionscript part. Let’s continue.

The php file

Very simple and easy. Name the php file Mail.php (it’s the name i used, you can use ur own name for the php file, but change the name in the actionscript too). Here is the code i used:

<?php
$userEmail = $_POST['the_email'];
$to = $userEmail . ", another@email.com";
$subject = $_POST['the_subject'];
$message = "Name: ".$_POST['the_name'];
$message .= "\n".$_POST['the_message'];
mail ($to, $subject,$message);
?>

Code explanation:

The first variable - $to , reffers to where the e-mail is going to be sent. You can use more addresses, separated by coma, example ( youradres@live.com , yourfriendsaddress@live.com , yourClientsAddress@live.com etc). Feel free to delete the $_POST['the-email'], that reffers to the users input which i used in the form of this post, so it will send e-mail to you. Enter the e-mails like strings, e.g “the@email.com”; and not like - the@email.com

The second variable $subject - we are assigning the e-mail subject, by getting the value from the input file with instance name the_subject using the php function $_POST['the_subject'] - whenever u want to get some input fields value, u get it by inserting the input’s instance name in the square braces.

The third variable $message is the body of the e-mail message. You can one line, or add more strings to the message like i am ussing on the line bellow it ( $message .= ) The code is self explanatory. Just a note, we use the “n” to add a break line in the body of the e-mail.

Last line is the php mail function, where we assign the variables $to, $subject and $message in an array.

In order this to work, you must place the FLASH / SWF file and the PHP file in same directory.

That’s it. Now try doing it yourself. If you have some questions, post a comment bellow.

You may also find a good use of the source files i used here, which are located at the following URL:Download Here!