Contact us form using Flex and Javascript HTML:

Its easy to create a quick contact form using Flex, Javascript and HTML

see the example code below

form.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundGradientColors="[#FFFFFF,#FFFFFF]"
defaultButton="{submitButton}"
creationComplete="creationCompleteHandler();"
>
<mx:Script>
<![CDATA[
import mx.validators.Validator;
import mx.events.ValidationResultEvent;
import mx.controls.Alert;

[Bindable]
public var formIsValid:Boolean = false;

[Bindable]
public var formIsEmpty:Boolean = true;

// Holds a reference to the currently focussed
// control on the form.
private var focussedFormControl:DisplayObject;

// Validate the form
private function validateForm(event:Event):void
{
// Save a reference to the currently focussed form control
// so that the isValid() helper method can notify only
// the currently focussed form control and not affect
// any of the other form controls.
focussedFormControl = event.target as DisplayObject;

// Mark the form as valid to start with
formIsValid = true;

// Check if form is empty
formIsEmpty = (nameInput.text == "" &&
emailInput.text == "" && phoneInput.text == "");

// Run each validator in turn, using the isValid()
// helper method and update the value of formIsValid
// accordingly.
validate(nameValidator);
validate(phoneValidator);
validate(emailValidator);
}

// Helper method. Performs validation
//on a passed Validator instance.
// Validator is the base class of all Flex validation classes so
// you can pass any validation class to this method.
private function validate(validator:Validator):Boolean
{
// Get a reference to the component that is the
// source of the validator.
var validatorSource:DisplayObject = validator.source as DisplayObject;

// Suppress events if the current control being validated is not
// the currently focussed control on the form. This stops the user
// from receiving visual validation cues on other form controls.
var suppressEvents:Boolean = (validatorSource != focussedFormControl);

// Carry out validation. Returns a ValidationResultEvent.
// Passing null for the first parameter makes the validator
// use the property defined in the property tag of the
// <mx:Validator> tag.
var event:ValidationResultEvent = validator.validate(null, suppressEvents);

// Check if validation passed and return a boolean value accordingly.
var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);

// Update the formIsValid flag
formIsValid = formIsValid && currentControlIsValid;

return currentControlIsValid;
}

// Event handler: Gets called when all child components
// have been created.
private function creationCompleteHandler():void
{
// Set the focus on the first field so
// user does not have to mouse over to it.
// Note that the user still has to click on the
// Flex application to give it focus. This is
// a currently limitation in Flex.
resetFocus();
}

// Submit form if everything is valid.
private function submitForm():void
{
var result:uint = ExternalInterface.call("sendMail", nameInput.text, phoneInput.text,emailInput.text);

}

// Clear the form and reset validation.
private function clearFormHandler():void
{
// Clear all input fields.
nameInput.text = "";
phoneInput.text = "";
emailInput.text = "";

// Clear validation error messages.
nameInput.errorString = "";
phoneInput.errorString = "";
emailInput.errorString = "";

// Flag that the form is now clear
formIsEmpty = true;

// Set the focus on the first field so
// user does not have to mouse over to it.
submitButton.enabled = false;
resetFocus();
}

// Helper method. Sets the focus on the first field so
// user does not have to mouse over to it.
private function resetFocus():void
{
focusManager.setFocus(nameInput);
}
]]>
</mx:Script>

<!--
Validators
-->

<!-- Name must be longer than 2 characters long -->
<mx:StringValidator
id="nameValidator"
source="{nameInput}"
property="text"
minLength="2"
/>

<!-- Validate phone number -->
<mx:PhoneNumberValidator
id="phoneValidator"
source="{phoneInput}" property="text"
/>

<!-- Validate email -->
<mx:EmailValidator
id="emailValidator"
source="{emailInput}" property="text"
/>

<!--
User interface
-->
<mx:Panel title="Contact us form">
<mx:Form>
<mx:FormItem label="Name:">
<mx:TextInput
id="nameInput"
change="validateForm(event);"
/>
</mx:FormItem>
<mx:FormItem label="Phone: ">
<mx:TextInput
id="phoneInput"
change="validateForm(event);"
/>
</mx:FormItem>
<mx:FormItem label="Email: ">
<mx:TextInput
id="emailInput"
change="validateForm(event);"
/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="center">
<mx:Button
id="submitButton"
label="Submit"
enabled="{formIsValid}"
click="submitForm()"

/>
<mx:Button
label="Clear form"
enabled="{!formIsEmpty}"
click="clearFormHandler();"
/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>

HTML and Javascript Wrapper

<html lang="en">
<head>
<script language="JavaScript">
function sendMail(name , phone , email) {
var daReferrer = document.referrer;
var errorMsg = "here here here is the error error error error";
var subject = "Thank you";
var body_message = "%0D%0D%0D%0DThank you for submitting name "+name+" and phone "+phone;
var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message;
win = window.open(mailto_link,'emailWindow');
if (win && win.open &&!win.closed)
win.close();
}
</script>
</head>
<body scroll="no">
<embed src="form.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="form" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</body>
</html>