Introduction
Most of the web sites provide forms to its users, forms like contact, comments or forum posts etc. These forms can be different types like HTML or flash or flexi etc. Behind creating the forms we have do lot of work for example, validate the form entries on both browser and server end etc. This tutorial addresses them all and I tried my best to combine all the required things and explain them.
In this tutorial we walk thru a series of steps as follows:
• Creating HTML email forms (client side validation)
• Creating FLASH based email forms
• Validating the email fields and email content on the server with PHP
• Sending mail using PHP
HTML email forms
Creating HTML forms is very simple. All we need is form tag and the corresponding field’s tags of the form, for example,
-
<form name="email_form" onsubmit=”return validate_form();” method="post" action="sendmail.php">
-
-
Name: <br>
-
<input type="text" name="Name">
-
-
Email:<br>
-
<input type="text" name="Email">
-
-
Comments or Questions:<br>
-
<textarea name="Comments" rows="5" cols="40"></textarea>
-
-
<input type="submit" name="Submit" value="Submit">
-
-
<input type="reset" name="Reset" value="Clear Form">
-
-
</form>
The above HTML code creates a form with name, email and comments fields in it and provides a submit button and reset button. Submit button when pressed it submits the form values to the script or path which is mentioned in the action parameter of the form, in our case it is sendmail.php. The form values are POSTED to the script (sendmail.php) because; we mentioned method as “post”.Simple right!
You might have observed “ onsubmit=”return validate_form();” “ in the form tag. What is this for? In order to explain that, first we will try to answer this question: “Suppose if the user presses submit button with out entering values in any field, than? …”
So, I think we need a kind validation at the client / browser end also. Below the simple JavaScript code which explains the client validation:
-
<script language="javascript">
-
-
function validate_form()
-
{
-
if(isEmpty(document.email_form.name,"Please Enter Name")==false)
-
return false;
-
-
if(IsEmailValid(frm.email,"Please Enter The Valid Email")== false)
-
return false;
-
-
if(isEmpty(document.email_form. Comments,” Please Enter Comments or questions")==false)
-
return false;
-
-
}
-
-
function isEmpty(str,name)
-
{
-
var retval=true;
-
var count=0;
-
if (str.value=="")
-
{
-
alert(name);
-
str.focus();
-
retval=false;
-
}
-
else
-
{
-
for(i=0;i<str.value.length;i++)
-
{
-
if(str.value.charAt(i)==" ")
-
count++;
-
}
-
if (count==str.value.length)
-
{
-
alert(name);
-
str.focus();
-
retval=false;
-
}
-
}
-
return retval;
-
}
-
-
function IsEmailValid(str,name)
-
{
-
var retval=true;
-
var AtSym=str.value.indexOf(’@');
-
var Period=str.value.lastIndexOf(’.');
-
var Space=str.value.indexOf(’ ‘);
-
var Length=str.value.length-1;
-
var index = str.value.indexOf(’@');
-
var substr = str.value.substring(index+1);
-
var index2 = substr.indexOf(’@');
-
var count=0;
-
-
if (str.value=="")
-
{
-
alert("Please enter Email");
-
str.focus();
-
retval=false;
-
}
-
else
-
{
-
for(i=0;i<str.value.length;i++)
-
{
-
if(str.value.charAt(i)==" ")
-
count++;
-
}
-
if (count==str.value.length)
-
{
-
alert("Please enter Email");
-
str.focus();
-
retval=false;
-
}
-
else if((AtSym<1)||(str.value.charAt(0)==’_')||(str.value.charAt(Length)=="_")|| //’@’ can’t be in first position
-
(str.value.indexOf("_")==AtSym+1)||(str.value.charAt(AtSym-1)=="_")||
-
(Period<=AtSym+1)|| //Must be atleast one valid char between ‘@’ and ‘.’
-
(Period==Length)|| //Must be atleast one valid char after ‘.’
-
((Space>0) && (Space!=Length))||
-
(index2 != -1)) //No empty spaces permitted
-
{
-
alert(name);
-
str.focus();
-
retval=false;
-
}
-
}
-
return retval;
-
}
-
-
</script>
-
Most of the above java script code is self explanatory. IsEmailvalid function you may feel complex but, it just try verifying whether the email address.
Now, we have done with HTML forms, the other part of the tutorial is creating email forms using the flash.
FLASH based email forms
Creating email forms in Flash is pretty easy (for the most part). The thing to remember is that (in general) the server-side script (here, is the php script) which processes the data you send doesn’t know or care where the data came from, it just knows what it has to do once it gets it.
Following are the steps to create a FLASH form and invoke the php script (in our case sendmail.php) with form values as follows:
Steps to Create Flash Form
- The Flash form consists of 2 basic parts. One part is the group of text fields that make up the form. These are actually contained within a movieclip aptly named “form.” Secondly, you have the send button. This will be the button that activates the code that sends the form information to the PHP file. At that point, Flash’s job is done. It’s then up to the PHP script to make sure the email gets sent.
- Start off by making the appropriate form fields. Make sure these are input fields and not static or dynamic text fields include as many as you want. Each will be sent to the PHP file where they can then be sorted. This example uses 3 (email, name and comments).
- Assign each text field a var value. This is NOT an instance name. The var field allows you to associate a variable with the given text field Because loadVariables is being used to transmit the information, this is needed to make the value of these text fields easily recognized as variables to that command. This example uses name, email, and body for field variable names.
- Once you have created and named each field, select them all and create a new movieclip out of them. This will be the form movieclip. Give it the instance name form when you’re done.
- Next, create a button. This will serve as the send button. This will exist not within the form, but in the same place as the form. It’s on this button that the loadVariables script will be added. That script is as follows: form.loadVariables(”sendmail.php”, “POST”);
(The above submission of form can also be performed as follows:getURL (”sendmail.php”, “”, “POST”);) - This calls loadVariables through the form movieclip sending all variables saved in that movieclip to email.php using the POST method. Because all the text fields in form have variables associated with them, this effectively sends all information filled out in those fields to the email PHP page. From that PHP page, the sent information can be retrieved using each field’s var name.
Validating the email fields and content on the server with PHP
This is bit boring stuff but, it is most necessary and important step. We cannot trust the user entries, sometimes he may left the form values blank or he gives wrong email id etc.
Remember the values submitted to the php script from the email forms can retrived by their fields name for example, if want “name”, then we retrieve it like $_POST[“name”].
Now, we will take a look validation php script:
-
-
<?php
-
{
-
$stremail=$_POST["email"];
-
-
if(!$result){
-
echo "Enter a valid E-mail Address";
-
DisplayForm();
-
}
-
else{
-
echo "Invalid E-mail Address";
-
$stremail="";
-
DisplayForm();
-
}
-
}
-
else
-
{
-
echo "Invalid E-mail Address";
-
$stremail="";
-
DisplayForm();
-
-
}
-
{
-
echo "Please Enter comments or questions";
-
$stremail="";
-
DisplayForm();
-
-
}
-
{
-
echo "Please Enter name";
-
$stremail="";
-
DisplayForm();
-
-
}
-
-
?>
-
Empty is php function, which returns true if the value is empty. Epreg function looks the email value, that whether the email value has the @, dot (.) etc…
Sending the mail using PHP
Sending the emails using the PHP mail () function is simple, as follows:
-
-
<?PHP
-
mail($_POST[“email”],”This is the subject”, “HI “ . $_POST[“name”] . “\r\n” . $_POST[“comments”]);
-
?>
-
Just a single line of code, how simple it is, right!
There is some advanced way of sending mails in php like using the PEAR package etc. if you are interested you can look at them.
http://www.highonmicrosoft.com/how-to-send-attachments-with-email-using-php.html
Hi, this is Shiva Kumar. You can call me Shiva. I'm a developer like you, with 7 Years of experience on different technologies. Earlier I used to write articles for Computers Today. Now I started this web site to help each other ( or ) atleast contribute some thing from my end. I'm always a student, if you need any articles or help which is not there in this web site, please