To follow along with this tutorial, download the file. It contains the file, file, the contactForm.fla and the contactForm.php script. Without changing anything, this package will give you a basic Contact Form that you can set up in a few minutes. To get you going right away, we'll look at the two ways to use these files, before we dive into how to rearrange them to do anything extra that you need them to.

Here is what we will be building:


First, we'll look at a standalone example. You will be using the contactForm.fla, the and the files. Please note: Both examples assume that you have all the files in the same folder.


The contactForm.fla is empty. (It is made in CS4, but you can create one in CS3 pretty easily.) There is nothing on the stage, but have a look in the library. There you will find a Button component and a TextArea component. The List, TextInput and UIScrollBar are also there, but they come as part of the TextArea. To get components into the library, simply drag them from the Components panel straight into the library. Now they are available for use in our class files. Also notice under Properties that the Document Class is The only other thing to note is that the example fla is 530 pixels wide by 460 pixels high. The form, as it is laid out in the class, requires a minimum space of 490 pixels wide by 440 pixels high. This sizing of this fla will give you a 20 pixel margin on the left and the right, with a 10 pixel margin on the top and the bottom.

Open up the file and you will see that it is very simple. First we import all the display classes like so:
[AS]import flash.display.*;[/AS]
Next, we declare a new variable called cf to act as our contact form.
private var cf:ContactForm;

Now we create an instance of cf and set it's x and y properties to give the margins we discussed above. If you need your flash movie to be wider, say 800 pixels, then change the fla to that width and then, to keep the contact form centered, simply adjust your x value using the formula: (width - 490)/2. So 800 - 490 = 310. 310/2 = 155. So x is now 155.
There are three parameters to pass to the class. The first is the Subject Line of the email the contact form will send, the second is the email address that you want to send the form to and the third is the name of the person or company you want to send the form to.
[AS]cf = new ContactForm("Site Visitors Comments", "", "Xty Digital Design");
cf.x = 20;
cf.y = 10;

And that is all you need to do. Publish the movie and weave the html code into your html contact page. Upload that contact page, the contactForm.swf and the contactForm.php file to your web server and you're good to go. You don't need to make any changes to the contactForm.php file since you have passed the parameters it requires in the ContactForm itself.

Using it in an existing Flash Movie

The second method of using this is nearly the same, but you won't be using the contactForm.fla or the file. Instead, you will declare the cf variable and create an instance of it in whatever flash movie you want to add the contact form to. As long as the file is in the same folder as the rest of your movie, you won't need to import the class. You will need to set up the x and y properties to fit in with your existing movie, and make sure that you have the Button and TextArea components in your fla's library, but that is the only difference.

But what if you need to collect extra information that is not part of the core Contact Form? That's what we will take a look at next.