PHP contact form with Email full tutorial

How about create a contact form for your  website from scratch? I know there  are alot of free php contact forms out there but would’nt it be great to create one yourself. I guess that’s what developers do. I broke the whole process in three simple steps to make it easy to follow. So let’s jump in.

Creating the html form : first we need to create the the contact form using simple html code. It is basic html so i dont need to go in details. We can also style a form using CSS. I have already coded the html and css code for the form it is givin below.

form.html: 

<html>
<head>
<title>Contact Form</title>
<link href=”form_styles.css” media=”all” rel=”stylesheet” />
<script src=”jquery.js”></script>
<script src=”form_scripts.js”></script>
</head>
<body>
<table>
<tbody>

<tr >
<td colspan=”2″><h1 id=”form_title” >Contact Us</h1></td>
<tr>

<tr>
<td><span>Name : </span></td>
<td><input type=”textbox” id=”name” placeholder=”Your Name” /></td>
</tr>

<tr>
<td><span>Email : </span></td>
<td><input type=”email” id=”email” placeholder=”Your Email” /></td>
</tr>

<tr>
<td><span>Message : </span></td>
<td><textarea rows=”8″ cols=”50″ id=”message” placeholder=”Your Message”></textarea></td>
</tr>

<tr>
<td colspan=”2″><input type=”button” onclick=”postToServer()” id=”sendButton” value=”Send Message” /></td>
</tr>

</tbody>
</table>
</body>
</html>

form_styles.css:

Form Validation  and Send to the Server :  When the user clicks “send Message” button we need to validate the information entered by the user with simple jquery code. The example of this validation can be  email format checking and checking if all the textboxes are filled. After validation we need to send that  data to the server and that’s where ajax comes in. We will make an ajax request to the  server and send the information along with this request. At the server side we will handle the the request using php. The jquery code for form validation and ajax request are given below.

form_scripts.js: 

 

Submit conact form: After the contact form data has been validated and the ajax request has been made we need to send an email to the admin of the website as well as  to the  user for this we will use PEAR Email API in php which is free. But you can use php mail() function as well. Below is the code :

Send_Mail.php:

 

All the code is tested in Firefox , Chrome , Opera and Safari. You can downoad the source files by clicking the button below.
Download Source

20 thoughts on “PHP contact form with Email full tutorial

  1. booksopelri.science

    Luckily, we can use PHP to store initial values. When doing so, the form inputs will not be reset if the form is submitted with errors. Instead, it sets the initial value to whatever text the user inputted before submitting the form.

    Reply
    1. Danyal Fayyaz Post author

      Of course we can. But here i am using ajax to post to another php file instead refreshing the page. Anyway thanks for stopping by and dropping a comment 🙂 .

      Reply
  2. eebest8

    “I all the time used to read paragraph in news papers but now as I am a user of web thus from now I am using net for posts, thanks to web.”

    Reply

Leave a Reply

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

CommentLuv badge