ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Computer Programming Tutorials

Contact Form in PHP using jQuery AJAX

Updated on May 11, 2014

Hi Friends,

Now we are going to design a HTML contact form use PHP and iQuery. PHP with jQuery AJAX delivers you high end user friendly method to send HTML contact form. In this process we are going to use two files,

  1. contactForm.html
  2. formProcess.php

1) contactForm.html
This file contains the form to be processed and the jQuery AJAX function call to execute the PHP file. Thus follows the example code for contactForm.html

<html>

<!--Beginning of head tag -->
<head>
<!--Including source to Execute jQuery AJAX -->
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<!-- Executable jQuery AJAX Code -->
<script>
 $(document).ready(function(){
 $('#submitted').click(function(){
 $.post("processForm.php", $("#contact-form").serialize(), function(response) {
 $('#success').html(response);
 }); return false; }); }); 
 </script>
</head>
<!-- End of head tag -->

<!-- Beginning of body tag -->
<body>
<form id="contact-form" method="post" name="form">

<p>
<label for="contactName">Name</label><br />
<input type="text" name="contactName" id="contactName" value="" placeholder="Name*" required/>
</p>

<p>
<label for="contactNumber">Contact Number</label><br />
<input type="tel" name="contactNumber" id="contactNumber" value="" placeholder="Contact Number*" required/>
</p>

<p>
<label for="email">E-mail</label><br />
<input type="email" name="email" id="email" value="" placeholder="Email Adress*" required/>
</p>

<p>
<label for="subject">Subject</label><br />
<input type="text" name="subject" id="subject" value="" placeholder="Subject*" required/>
</p>

<p>
<label for="commentsText">Message</label><br />
<textarea required requiredField radius" name="message" cols="10" rows="10" placeholder="Message" required="required"></textarea>
</p>

<p>
<input  class="buttons radius send" value="Send !" id="submitted" type="submit"></input >
</p>

<!-- Area to display Result -->
<h2 id="success"></h2>

</form>
</body>
<!-- End of body -->

</head>

Once the submit button in the form is clicked, it call jQuery AJAX function and start to execute formProcess.php

2) formProcess.php

This PHP file is used to get the form fields and send mail using PHP mail function.

<?php

// Contact subject
$subject =$_POST["subject"]; 

// Compiling Message Body
$message="\nName: ".$_POST["contactName"]."\nEmail: ".$_POST["email"]."\nPhone: ".$_POST["contactNumber"]."\nSubject: ".$_POST["subject"]."\nComment: ".$_POST["message"];


// Getting Senders mail to add in Header
$mail_from=$_POST["email"]; 

// Compiling Mail Header
$header="from:". $_POST["contactName"]. "<".$mail_from.">";

// Your email address (to which the mail to be sent)
$to ='test@example.com';

// Checking for Mandatory Fields(checking whether required fields are empty) 
if (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) && ($_POST["contactName"]!="") && ($_POST["message"]!="") && ($subject!="")&&($_POST['contactNumber']!=''))
{
// PHP Mail Send Function
mail($to,$subject,$message,$header);
// Success Message After sending Mail
echo "We've received your contact information, Will get back to you soon";
}
// Error Message if Required Fields are Empty
else {
echo "Fill out Required Fileds.<br /> Try again\n";
}
?>

When formProcess.php file is called, it stars to execute php script in the server but it's hidden from user. The result is displayed in the given HTML area, here it's

<!-- Area to display Result -->
<h2 id="success"></h2>

By this way you can develop user friendly HTML contact form.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.