Recipe 13.18. A Feedback Form

One of the most frequent information requests from Flash developers is how to create a form that gathers user feedback and then submits it to a server-side script, which then emails that information to a specified email address. In this short program, you will create a Flash form that does just that using the FormController component along with a combo box, text input, text area, and button form control. For the server-side script, you'll find several predefined scripts provided in the .zip file that contains the files accompanying the Flash Cookbook. You can find the Flash 8 Cookbook components at http://www.rightactionscript/fcb. One file is a PHP script named sendEmail.php. The other is a ColdFusion script named sendEmail.cfm. Select the script that your server supports and copy it to a directory that is accessible from the Web.

To build the application, complete the following steps:

1. Open a new Flash document and save it to your local disk as FeedbackForm.fla.

2. Open the Components panel, and locate the UI Components folder.

3. Drag an instance of the ComboBox component from the Components panel to the stage on the main timeline. Name the component instance ccbTo using the Property inspector.

4. With the combo box selected on the stage, open the Component Inspector panel and double-click on the Values column for the labels parameter. The combo box should allow the user to select from a list of departments such as Support, Sales, and Webmaster. When you've added the label values, click OK to close the Values dialog box.

5. Double-click on the values column for the data parameter in the Component Inspector panel. Each label needs to have a corresponding data value, so if you added three labels, you should also add three data values. The data values should be valid email addresses. If you happen to have multiple email addresses you can check, you may want to use those emails for testing purposes. If you have only one email address that you can check, use that same email address for each data value. When you've added the data values, click OK to close the Values dialog box.

6. Drag an instance of the TextInput component from the Components panel to the stage on the main timeline, arranging it just below the combo box instance. Assign the text input the instance name ctiEmail. The text input will be the field the user will use to input her return email address.

7. Use the Property inspector to set the text input's width to 200 pixels so that the instance will be able to accommodate even long email addresses without a part being cut off visibly.

8. Drag an instance of the TextArea component from the Components panel to the stage on the main timeline, assigning it an instance name of ctaComments.

9. Use the Property Inspector to set the dimensions of the text area to 200 x 200 so that the user can type in a decent amount of text before it scrolls.

10. Drag an instance of the Button component from the Components panel to the stage on the main timeline, assigning it an instance name of cbtSubmit.

11. With the button selected, open the Component Inspector panel and change the label parameter value to Send.

12. Drag an instance of the FormController component from the Components panel to the stage on the main timeline.

13. With the FormController instance selected, open the Component Inspector panel and double-click on the Values column for the elements parameter.

14. In the Values dialog box click on the plus-sign button to add a new entry. Assign values of ccbTo for the InstanceName and toAddress for FieldName.

15. Add another entry using the plus-sign button, and assign the values of ctiEmail for the InstanceName and fromAddress for FieldName.

16. Add another entry using the plus-sign button, and assign the values of ctaComments for the InstanceName and message for FieldName.

17. Add another entry using the plus-sign button, and assign the value of subject for InstanceName and Message from Flash Form for Value. Set the Type to Hidden.

18. Click OK in the Values dialog box.

19. In the Component Inspector panel, set the submitButton parameter to cbtSubmit.

20. Set the url parameter to the URL at which the PHP or ColdFusion script can be located.

21. Test the movie.

You should be able to fill out the form and click on the submit button. The data should be sent to the server-side script, and an email should be sent.