Including an interactive form in the website

An alternative

Before we delve into creating a contact form for the website, let me point out that the easiest way for you to provide a contact link is with a button with this code on it:

on (release) {
    getURL("mailto:yourname@yourdomain.com");
}

which will cause the user's email program to open a new blank email 'Compose' window so they can compose and send you an email. The problem with this method is that not all users have a working email client installed, so a more robust method is to include a form which the user can fill out, which calls a serverside script to actually send the mail and respond to the Flash movie with its results.

Setting up the form

On this page, we'll incorporate a contact form into the site structure we set up previously. The layout of the contact form is shown here:

Make Static Textfields for Labels

Open sitesample2.fla (created on the previous page or available via link under Files at right) and save it as sitesample3.fla. Add two layers above the slideshow button layer -- call one contact text and one contact shading. Make a keyframe in frame 73 (where the "contact" frame label is) in both layers. Use the text tool, with Static Text selected in the properties panel, to make Subject:, Name:, Email:, and Message: fields as in the movie. Use the Align panel (cmd-K, pc:ctrl-K) to line up the left edges and distribute evenly vertically.

Make Input Textfields

Next to those fields, we'll add input text fields, which are textfields that allow a user to type into them. Choose the select tool, click on something other than the static textfields you already created to unselect them, and choose the text tool again. Now choose Input Text in the Properties panel and draw out a textfield next to Subject:. If you need to adjust it, click in it with the Text tool and use the square at the bottom right of the textfield to change its size. (Using the transform tool on textfields is not recommended). When you have completed the input textfield, choose the select tool, and, with the subject input textfield still selected on stage, enter subject_txt into the Instance Name box in the properties panel. This gives you a way to access the contents of the subject input textfield with actionscript.

Repeat the above, creating name_txt, and then do twice more to create email_txt and message_txt. For the latter, make sure you choose multiline in the Properties panel so a user can enter more than one line of text and still see it all.

Put a keyframe at frame 73 in the contact shading layer. With the rectangle tool and whatever fill and stroke you want, draw a rectangle behind each textfield. Otherwise, there will be no indication to the user that there is a textfield to type into.

Create the Send button by duplicating and modifying another button

Right-click on the photos button in the library and choose Duplicate. Enter a new name of Send for the button. You should see a new button in the library called Send. Double-click the button's icon in the library to edit it. Change the text in the button to "Send", and change the stroke and fill colors if you want. As when you edit a graphic or movieclip, you'll see in the upper left corner an indicator that you are inside the button Send, editing it. When you're done, click Scene1 to return to the main movie. Drag a copy of the Send button out of the library into the contact text layer and position it below the message box.

Add a dynamic textfield to display message to the user

A dynamic textfield is one that can be changed by actionscript at runtime, so it's a good way to give users feedback about what to do or what the Flash movie is doing. Working in the contact text layer, choose the text tool once more, select Dynamic Text from the Properties panel, and draw out a one line textfield below the Send button. Choose the select tool and with the new dynamic textfield still selected, type response_txt into the Instance Name in the Properties panel. Put shading behind the textfield in the contact shading layer.

With all of these elements in place, you can make the form active by putting actionscript into a keyframe in frame 73 that gathers the text from each of the input textfields and sends it to a script residing on the same web server where the site is. That script uses information passed from Flash to send an email message to the address specified in the script, and then sends a message back to Flash about whether the operation was successful. Flash can then display an appropriate response message to the user.

Code to make the form functional

The actionscript necessary to retrieve the form data and send it is included here in case you have a Flash website in which a contact form is required and need code to implement it. For further explanation of the LoadVars class, used to send and receive data from the server, see the LoadVars page in the Server Communications section of the site. The same actionscript may be used regardless of the scripting language supported by your web server. If your server does not support PHP, you'll need to use an appropriate mail routine instead of the PHP script provided below.

If this Flash movie were to be placed on a server which supports PHP, the following code could be put in a keyframe in frame 73 of the actions layer:

// This routine can be used with Flash 6 (MX) and above

// create an instance of LoadVars to control communication with
// the serverside script
_lv = new LoadVars();

// define what that instance should do when the successvar variable is
// received from the serverside script
_lv.onLoad = function() {
	if (Number(this.successvar)) {
		response_txt.text = "Thanks -- your message has been sent.";
	} else {
		response_txt.text = "There was a problem sending your message.";
	}
};

// show the cursor in the subject field when the form is displayed
Selection.setFocus("subject_txt");

// set the tab order
subject_txt.tabIndex = 1;
name_txt.tabIndex = 2;
email_txt.tabIndex = 3;
message_txt.tabIndex = 4;

// function that checks to see if the user has entered a name, an email
// address (non blank, includes @), and a message.  If any are missing,
// show an error message.  Otherwise, use _lv to call sendemail.php to
// send the email.
function sendmail() {
	response_txt.text = '';
	var ok = true;
	
	// change the default subject to something else if you want
	if (subject_txt.text == '') _lv.subject = "Message from flash-creations.com";
	else _lv.subject = subject_txt.text;
	
	// is the name field blank?
	if (name_txt.text == '') {
		response_txt.text = "Please enter your name";
		ok = false;
	} else {
		_lv.name = name_txt.text;

		// is the email field blank or not have a "@"?
		if (email_txt.text == '' || email_txt.text.indexOf('@') == -1) {
			response_txt.text = "Please enter your email address";
			ok = false;
		} else {
			_lv.email = email_txt.text;
	
			// is the message field blank?
			if (message_txt.text == '') {
				response_txt.text = "You haven't typed in a message";
				ok = false;
			} else _lv.message = message_txt.text;
		}
	}

	// send the message
	if (ok) {
		response_txt.text = "Sending...";
		// this assumes the sendemail.php script exists in the same
		// directory as the swf, on a web server on which PHP is supported
		_lv.sendAndLoad("sendemail.php", _lv, "POST");
	}
};
  

and this code on the Send button, which calls a function defined in the code above when the button is clicked:

on (release) {
    sendmail();
}

to cause the form contents to be sent to sendemail.php on the server. This is what sendemail.php looks like. If you use it, change yourname@yourdomain.com to the actual email address where you want the form results to be mailed. You might also want to add code to check for valid content before sending (you can find out more about PHP scripting at php.net).