Flash Email Form

Creating an email form in Flash is very similar to creating one with pure HTML. The command to be used is mailto,. A great deal of different Macromedia Flash elements will be used in this lesson, so don't try to rush through this lesson if you're new to Macromedia Flash.

Note: This tutorial opens the user's default email program with the To, Subject, and Body fields pre-populated, just as the HTML version of the mailto function would.

Creating Static Text

We want to gather three things from the user to send this email. So let's create static text fields for the following items:

• To - The email address destination for this email
• Subject - The subject of the email
• Body - The text body of the email

To create a static text field select the Text Tool from the Tools window and left click on the Stage. Choose the following from the Properties window:

• Text Type: Static Text
• Font: "_sans"
• Font Size: 14

Near the top left of the Stage create a new Static Text Field and type "To:"

Create two more static text fields for "Subject:" and "Body:" like we have below.

To align the three text boxes in a pleasing manner, choose the arrow tool from the Tools window and drag a box completely around the three fields to select them. From the Modify menu choose Modify < Align < Right and Modify < Align < Distribute Heights. You should now have something like this:

Creating Input Fields

Now we need to place three input fields to the right of our static text. Select the Text Tool from the Tools window and choose "Input Text" and enable "Show Border Around Text" in the Properties window.

Drag an input field next to "To": and "Subject:".

Create Body Input

The Body input is going to be slightly different, as we want it to be multiple lines, scrollable, and a reasonable size for the user's email message.
Select the text tool and enable Show Border Around Text and select Multiline from the Line Type drop down menu in the Properties window.

Using the Text Tool, drag a large box to the right of "Body" as we have below:

Once again we are going to manipulate the alignment of our Flash Text by selecting our new text inputs and going to the menu Modify < Align < Left. Your inputs should now look like this:

Adding a Scrollbar

The user may fill the Body text box with text and we want them to be able to scroll up and down to see what they have written. To add scrolling to your large Body text input open up the Components window from Window < Components. Expand the user interface directory and scroll down until you see the UIScrollBar.

Left click and drag the ScrollBar from the Components Window onto the right inside section of Body. Your text box should now look like this:

Naming our Inputs' Variables

We have all the input fields we need to send an email, now all we need to name our inputs using Variables so that we can use the information the user inputs into our fields. Using the arrow tool select the To input field. Within the Properties window type in "to" as the Variable name like we have below:

Repeat this step for the Subject field using "subject" as the variable and the Body textbox using "body" as the variable.
That's all the user input stuff completed! Now all we need to do is make a send button and we're done.

Send Button

You can make any type of button you wish, but we will be using one of the built in buttons that comes with Flash Studio 8 for this example. To insert a pre-made button go to the menu and select Window < Common Libraries < Buttons which will bring up a common buttons library.

Open the "buttons bar" folder, a collection of bar shaped buttoned. Drag the "bar god" button to the stage as we have done.

Adding Functionality to the Button

Now that we have our form looking just the way we want it, select the button with the arrow tool. We need to add a Flash Action so that this button will actually send email properly. Open the Actions Window and navigate to Actions < Browser/Network < getURL. Double click getUrl to create the new action.


Fill in the following information for the URL field:

• "mailto:" + to + "?subject=" +subject+ "&body=" + body

and check the Expression checkbox for URL.

Sending an Email

To test out your email form go to Control < Test Movie. If everything is working properly your default email program (mine was Outlook Express) should popup with all the forms filled in for the user and all they need to do is click send!

Posted in: Flash