How to Create a Contact Page in Flash

Getting Started

By reading this guide we assume you know a little about Flash and also a little bit about Action Script. I shall be using Flash CS4 to show you how to create a a contact page in Flash and prior exposure to Flash and Action script is very important if you wish to be able to design and publish this Flash contact form.

To get started you will simply launch your Flash application and create a new file. Pull up the components panel (CTRL+7). Make sure the Movie Clip Time-line is showing and you have your output window close by. Doing this in Developer mode (selected at the top of the Flash Window) will suit just fine.

Putting the Pieces Together

Drag and drop all the required components for your Flash form such as Buttons, TextInputs, TextAreas and whatever you need from the components panel into your scene. Place all these in a single layer and give the layer an appropriate name.

After arranging your components on your page, you can choose a way to display errors after validation. I chose to use a Big red “X” placed beside each field and given appropriate names. Place these in a new layer called Errors.

Create a third layer and call it messages. This layer will hold the status messages such as “Sending, Please wait…”, “Form submission failure” and “Form submission success”. These are created as static text with distinct color. I have used black, red and green. You can also use Bitmaps, shapes or anything that your imagination can come up with.

Finally have a fourth layer to hold the action script that controls the submission of the form content. In my case it is called actions. My setup is therefore as seen in the image on the left.

How To Handle the Form Data

At the end of this tutorial I will be providing the Flash file with all the Action Script code and components. Here are a few important things to remember though:

• You need to appropriately validate your fields such as email fields, phone numbers and so on. If the condition you are validating fails then the script displays the Big Red “X” and does not allow the user to submit the form. The form is cleared to send data when all validation passes.

• You need to disable the send button once triggered to prevent the user from double submitting the Flash contact form. While this is happening a message needs to be displayed to keep the user informed of what the Flash script is doing. In this case, whether its is sending, whether it has successfully sent and whether there has been a failure. probably network based or something of the sort. Once the process is complete, the submit button needs to be re enabled to allow another form to be submitted. And at this time all error messages or status messages must be cleared.

Conclusion

Once the Flash form data has been received at the server, the server needs to process the data. I have provided a file called process_form.php as a starting point for those on PHP compatible servers. For the rest of the details and working example code, you can download the Flash contact page source code here which has the details on how to create a contact page in Flash.

You can also find out how to add a CAPTCHA to a HTML contact page as well as creating the HTML source for Guest book, which is quite similar to a contact page.