Contact Form Tutorial Using Html and PHP

We will teach you in this tutorial that how to create simple contact form. This form you can use anywhere you want. We will show you that how to contact your email with contact form so that when the user wants to send you a message. It's very easy. Let's start tutorial. For this mailing system server side language is must with that we can not send and receive email. All the information goes through the server, so we will be using PHP as server side language.

First create a PHP file that will display your contact form, name it index.php. Then create another PHP file and name it contact.php; this is where it will take the information the user entered and send it to an email of your choice.

So in the index.php, we'll set up the form:

<form method="post" action="contact.php" id="comm_form">
 
   <fieldset>
 
   <label for="name">Name : </label>
 
   <input type="text" name="name" id="name" class="required" minlength="2" />
 
 
 
   <div class="push_down">
 
   <label for="email">E-Mail : </label>
 
   <input type="text" name="email" id="email" class="required email" />
 
   </div>
 
 
                        
   <div class="push_down">
 
   <label for="subject">Subject : </label>
 
   <input type="text" name="subject" id="subject" />
 
   </div>
 
 
   <div class="push_down">
 
   <textarea name="message" id="message" rows="8" cols="66" class="required"></textarea>   
 
   </div>
 
 
   <input type="submit" id="button" name="submit" value="Submit"/>
 
                                
   </fieldset>
 
</form>

So we create a <form> and set its method to POST and its action is "contact.php" because that is where we will actually do the email setup and sending. Then we create a <fieldset>, and what this basically does is group all our next elements together so it looks neater and more like a contact form.

Our first label is "name", and this is where the user enters their name. You don't want to receive an email without a name, so that is why we set our class to required and so now if the user doesn't enter a name before they click submit, they'll receive an error. The ID of the elements is important, so remember that the ID for our label name, is name.

Then we create another label called email, and this is where the user will enter their own email. You also don't want to receive an email without a returning email, so we set our class to required email. The ID for this label is email. Then we enclose all of this within a div of class "push_down", which will basically just push down this label to give some space between the other labels around it. In the CSS file: .push_down { padding-top: 10px; } This spacing should be suitable enough.

We do the same for Subject as we did for Email, except we don't any requirements in its class because the subject of an email isn't really of high importance.

Then we add a <textarea> and this is where the user will create their message. We set the ID to message, its rows to 8 and its columns to 66, and then we also set the class to "required" because you can't get an email without any sort of actual message (disregarding attachments). Finally add an input type of submit and give it an ID of button. This will be our submit button that the user presses.

Now that we have the HTML part setup, we need to allow Javascript to validate our forms in the fields we marked as required. So add the jQuery AND jQuery Validate Libraries.

 

<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>     
   
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>   
          

Then to allow validation of the required fields write:

<script type="text/javascript">
 

 
$(document).ready(function(){
 

 
$("#comm_form").validate(); /* this is the ID you gave to your form */
 

 
});
 

 
</script>                           

 

This is how your form should look like. Now the form, jQuery validation, and minor CSS are setup, let's setup the contact.php file.

In the contact.php file, our PHP syntax will have to be within <?php and ?>, just like any other PHP file. So the first thing we'll do is get the user's name, setup where the email is being sent to, and what the subject is. These are the three things you must first enter when sending an email through any email client: yahoo, gmail, etc. So we'll set it up the same way.

 

  

$Email_from = $_POST['email'];     /* we set our variable $Email_from to equal whatever information was in the form with the ID of 'email' (this was the user's own email) */ 
   
$Email_to = "yourname@webmaster.com";  /* this is where you enter YOUR OWN email. It's where the email will be sent to when the user presses submit */  
   
$Subject = $_POST['subject'];         /* we declare a variable for the email's subject */         


 

$Message = trim(stripslashes($_POST['message']));     /* this is the actual message now. This is what the user entered in the textarea in the form. */       

  
/* email body text. we set it to be blank, then we set it to say "Message: users message will go here."       
  
$Body = ""; 
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
 
                                                                                                                                                                                                        
/* send email */
$send = mail($EmailTo, $Subject, $Body, "From: <$Email_from>");

/* if it's successful */
if ($send) {
print " <meta http-equiv=\"refresh\" content=\"0;URL=index.php\"> ";  /* it will reload the index page if the sending was successful */ 
}

 

And that's all it takes to setup a contact form! You can now style the form in the HTML page however you would like. All the necessary components of setting up a contact form were all covered here though. I hope this was helpful!