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, see our HTML Email Lesson for more information on this
unique function. 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!
You may view our finished Flash project or
download our Raw Flash file if you
are having trouble doing it on your own.
Note: If you would like to have the mail send it using the web server's email
service then you will have to use a standard Flash Form and use an
ASP or PHP processing page
to send the email.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
