Program: SWiSHmax
Build Date: 2005.08.15+
Adding Input Text
Let's start by creating our input fields first ...
Add a single-line Input text field and name it userName. Then, select the Target option. Right-click on this text object in the Outline panel and copy it (or CTRL+C). Paste it (CTRL+V) and position it below the userName field. Change its name to userEmail.
Next, add a multi-line text object to be used for a comment field and name it userMessage (again, be sure to select the Target option). You can make the text field taller by opening the Dimension options and changing the number of lines (you may need to disable the 'Auto-size height' option.
You can customize these form fields if you'd like. On the Text panel, in the Advanced options, you can enable a black border and white background. You can also restrict the number of characters you want to allow the user to type.
What are these fields for anyway ?!
The next thing we should probably do, is add some Static text next to these input fields to let the user know what they're supposed to be typing (i.e., "Name: ", "Email: ", "Comments: ").
Adding Buttons
Now, let's create our buttons. We'll make two standard buttons: Submit, and Reset. There is a button tutorial in the SWiSHmax help files; however, here are the basics ... Add a Static text object and type in "Submit". If you want, draw a rectangle underneath it to make it look more like a button (or better yet, use the Beveled button AutoShape). Select all parts that are meant to be included with this button (CTRL+Click to highlight multiple objects). Use the Modify menu and select Grouping -> Group as Button. On the Button panel, name this button Submit. You can then animated it by adding separate Over, Down, and Hit states (and changing the color of the text/button inside each state).
Okay, that was easy enough .. now, repeat that process and create a button labeled "Reset".
Recording and Sending the Typed Information
After the user has typed in their name, email, and message ... what do we do with that information ? First, we need to get that information out of those input text fields and create variables.
Select the 'Submit' button and open the Script panel. Then, paste in the following script (in Expert mode):
on(release) {
Name = userName.text;
Email = userEmail.text;
Message = userMessage.text;
} |
That script creates three variables (Name, Email, and Message) using whatever was typed into those input text fields. We need to create these variables so that we can send them to our PHP/ASP script. Now that we have these variables, we simply post them to our PHP/ASP file and let it do the rest of the work! Add the following line of code beneath the "Message = userMessage.text" line (image below shows Guided Mode to help illustrate the options used):
loadVariables("contact.php",'POST');
Basically ... we take the text entered into the input fields, create variables for each one, then use the loadVariables action to POST those variables to our external script (PHP/ASP, etc.). That's really all there is to it ... unless of course you want to do something a bit more fancy, like adding form field validation (Part 2 of this tutorial).
The Reset Button
This one is simple, just use the Reset button to clear out the text fields:
on (release) {
userName.text = "";
userEmail.text = "";
userMessage.text = "";
} |
Is that it ?! Uh ... wait a sec ... so, we posted those variables ... well what happens now ??
Obviously we'll need some sort of external script to process that variable data - since the Flash player does not have it's own SMTP (email) server built in. The external script (again, PHP/ASP, etc.) actually takes that variable data, processes it, and communicates with the web server to send it through email. I've included a basic PHP contact script with this tutorial (in the .zip download), but unfortunately I can't get in to an in-depth tutorial about how/why it works ... I can, however, recommend several excellent PHP tutorial websites that can probably answer any questions you have:
http://www.phpfreaks.com/
http://www.w3schools.com/php/default.asp
http://www.phpbuilder.com/
Here is a basic PHP email script:
<?php
$name = $HTTP_POST_VARS['Name'];
$email = $HTTP_POST_VARS['Email'];
$message = $HTTP_POST_VARS['Message'];
$message = stripslashes($message);
$sendTo = "your_email@address.com";
$subject = "Message from Contact Form";
$msg_body = "Name: $name\n";
$msg_body .= "E-Mail: $email\n";
$msg_body .= "Comments: $message\n";
$header_info = "From: ".$name." <".$email.">";
mail($sendTo, $subject, $msg_body, $header_info);
?> |
In a nutshell ... the variables from your contact form were sent via POST to this PHP script. Those variables are retrieved and redefined as $name, $email, and $message (PHP's method of declaring variables). It strips out slashes (automatically added by PHP when someone types an apostrophe or quotes), creates the message body (the part that is actually displayed in the email received), adds header information, and sends it using the mail() function!
You'll need to open that PHP file and edit the $sendTo = "your_email@address.com"; and, $subject = "Message from Contact Form"; (put it your own email address and message subject). You can simply open the file in Windows Notepad and edit it (no need for a PHP editor).
In order for this to work, your web server (host) will need to have PHP enabled. You also need to make sure that you upload the contact.php script to the same location as your .HTML file (unless you change the path used in the loadVariables() function).
|
