Create an email form in flex with php

The following code demonstrates how to build an email form that supports some validation and that send the email by using a php script.

View DemoDownload Source

1. First we create a form that contains fields for the user to fill :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

	<mx:Panel height="401" width="400" layout="absolute" title="Contact us">
		<mx:Form x="9" y="10" width="360">
			<mx:FormItem label="Name :">
				<mx:TextInput id="senderName"/>
			</mx:FormItem>
			<mx:FormItem label="Email :">
				<mx:TextInput id="senderEmail"/>
			</mx:FormItem>
			<mx:FormItem label="Subject :">
				<mx:TextInput id="emailSubject"/>
			</mx:FormItem>
			<mx:FormItem label="Message :">
				<mx:TextArea id="emailMessage" height="132" width="213"/>
			</mx:FormItem>
		</mx:Form>
		
		<mx:Button label="Send"  x="138" y="274"/>
		<mx:Label id="resultLabel" x="212" y="276"/>
	</mx:Panel>
</mx:Application>

2. To send the email we use the following php script :

<?php
	$senderName = $_POST['senderName'];
	$senderEmail =  $_POST['senderEmail'];
	$sendToEmail = "yourmail@riacodes.com";
	$subject = $_POST['emailSubject'];
	$emailMessage = $_POST['emailMessage'];
	
	$recipient = "$sendToEmail";
	
	$headers = "From: $senderEmail ";
	$message = "From: $senderName, \nEmail Address: $senderEmail\nSubject: $subject\n\nMessage: $emailMessage";
	$message = stripslashes($message);
	
	mail($recipient, $subject, $message, $headers)
?>

Replace the value of the variable $sendToEmail with your mail.

3. This php script will be called by putting its url inside an HTTPService.

<mx:HTTPService id="emailService" url="php/mail.php" method="POST" 
resultFormat="xml" useProxy="false"/>

4. Next we add some validation to check the fields that the user has filled. To do so we use the EmailValidator and StringValidator :

<mx:EmailValidator id="mailValidator"
	source="{senderEmail}" property="text" 
	requiredFieldError="Enter your email" required="true" />
<mx:StringValidator id="nameValidator"  
	source="{senderName}" property="text" 
	requiredFieldError="Enter your name" required="true"/>
<mx:StringValidator id="emailValidator"  
	source="{emailMessage}" property="text" 
	requiredFieldError="Enter your message" required="true"/>

5. Now we add a function when the send button is clicked.

<mx:Button label="Send" click="sendMail()" x="138" y="274"/>

The function needs to check if the validation criteria are fullfilled. If it is OK, we get the value of fields and we call the send method of the HTTPService to call the php script to which we pass parameters.
If validation is not Ok, we display an error.

private function sendMail():void{
	var _senderName:String = senderName.text;
	var _senderEmail:String = senderEmail.text;
	var _emailMessage:String = emailMessage.text;
	var _emailSubject:String = emailSubject.text;
	       
	var evValidMail:ValidationResultEvent = mailValidator.validate();
	var evValidName:ValidationResultEvent = nameValidator.validate();
	var evValidMessage : ValidationResultEvent = mailValidator.validate();
			
	if (evValidMail.type == ValidationResultEvent.VALID 
	   && evValidName.type == ValidationResultEvent.VALID
	   && evValidMessage.type == ValidationResultEvent.VALID){
	   emailService.send({senderName: _senderName, senderEmail:_senderEmail, 
           emailSubject:_emailSubject, emailMessage: _emailMessage});
	}
	else{
		resultLabel.text="There are Form errors";
		resultLabel.setStyle("styleName", "invalid");
	}
}

Note that the names of the parameters that we give (senderName, senderEmail, emailSubject, emailMessage) are those that we call in the php script. Example: $_POST[‘senderName’];

6. Finally we call the emailResult function when the HTTPService triggers a result event.

<mx:HTTPService id="emailService" url="php/mail.php" 
method="POST" resultFormat="xml"  useProxy="false"
result="emailResult()"/>

The emailResult function display a message to the user that his mail has been sent and clear the form.

 private function emailResult():void{
     Alert.show("Thank you for your submission ");
     clearForm();
}
		
private function clearForm():void{
     resultLabel.text="";
     emailSubject.text="";
     emailMessage.text="";
}

7. To finish we add some css to make the app more appealing. (The image for the background was taken from interfacelift.com/wallpaper_beta/details/1879/bellows.html)
The final code is beneath:

MXML code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Style source="css/style.css"/>

<mx:Script>
	<![CDATA[
		import mx.events.ValidationResultEvent;
		import mx.controls.Alert;
		
		private function sendMail():void{
			var _senderName:String = senderName.text;
	        var _senderEmail:String = senderEmail.text;
	        var _emailMessage:String = emailMessage.text;
	        var _emailSubject:String = emailSubject.text;
	       
			var evValidMail:ValidationResultEvent = mailValidator.validate();
			var evValidName:ValidationResultEvent = nameValidator.validate();
			var evValidMessage : ValidationResultEvent = mailValidator.validate();
			
			if (evValidMail.type == ValidationResultEvent.VALID 
			&& evValidName.type == ValidationResultEvent.VALID
			&& evValidMessage.type == ValidationResultEvent.VALID){
				emailService.send({senderName: _senderName, senderEmail:_senderEmail, emailSubject:_emailSubject, emailMessage: _emailMessage});
			}
			else{
				resultLabel.text="There are Form errors";
				resultLabel.setStyle("styleName", "invalid");
			}
		}
		
		private function emailResult():void{
            Alert.show("Thank you for your submission ");
            clearForm();
		}
		
		private function clearForm():void{
			resultLabel.text="";
			emailSubject.text="";
			emailMessage.text="";
		}
		  
		
	]]>
</mx:Script>

	<mx:HTTPService id="emailService" url="php/mail.php" method="POST" resultFormat="xml" result="emailResult()" useProxy="false"/>
	<mx:EmailValidator id="mailValidator"
		source="{senderEmail}" property="text" 
		requiredFieldError="Enter your email" required="true" />
	<mx:StringValidator id="nameValidator"  
		source="{senderName}" property="text" 
		requiredFieldError="Enter your name" required="true"/>
	<mx:StringValidator id="emailValidator"  
		source="{emailMessage}" property="text" 
		requiredFieldError="Enter your message" required="true"/>
	
	<mx:Panel height="401" width="400" layout="absolute" title="Contact us">
		<mx:Form x="9" y="10" width="360">
			<mx:FormItem label="Name :">
				<mx:TextInput id="senderName"/>
			</mx:FormItem>
			<mx:FormItem label="Email :">
				<mx:TextInput id="senderEmail"/>
			</mx:FormItem>
			<mx:FormItem label="Subject :">
				<mx:TextInput id="emailSubject"/>
			</mx:FormItem>
			<mx:FormItem label="Message :">
				<mx:TextArea id="emailMessage" height="132" width="213"/>
			</mx:FormItem>
		</mx:Form>
		
		<mx:Button label="Send" click="sendMail()" x="138" y="274"/>
		<mx:Label id="resultLabel" x="212" y="276"/>
	</mx:Panel>

</mx:Application>

PHP code

<?php
	$senderName = $_POST['senderName'];
	$senderEmail =  $_POST['senderEmail'];
	$sendToEmail = "yourmail@riacodes.com";
	$subject = $_POST['emailSubject'];
	$emailMessage = $_POST['emailMessage'];
	
	$recipient = "$sendToEmail";
	
	$headers = "From: $senderEmail ";
	$message = "From: $senderName, \nEmail Address: $senderEmail\nSubject: $subject\n\nMessage: $emailMessage";
	$message = stripslashes($message);
	
	mail($recipient, $subject, $message, $headers)
?>

CSS code

Application
{
	font-family: 				arial;
	font-size: 					11;
	color: 						#333333;
	background-gradient-alphas: 0, 0;
	background-color: 			#666666;
	theme-color: 				#333333;
	font-weight:				normal;
	background-image:			Embed("assets/background.jpg");
	background-size:			"100%";
}

.invalid{
	color:#990000;
}

59 thoughts on “Create an email form in flex with php

  1. Pingback: Os 45 tutoriais de Adobe Flex mais procurados | Galaxyz do Brasil

  2. Pingback: Adding the send email function on a form. » free icons download

  3. Pingback: VĂ¡rios tutoriais de Adobe Flex

Leave a Reply

Your email address will not be published. Required fields are marked *