Simple Contact Form In PHP With Ajax Validation

By : PHPErrorCode October 2, 2017 507 Views php,html,ajax

In this post we will be going learn how to created a simple Contact form using Ajax jQuery and PHP with validation. in this is used to send contact form information to the back end without page refresh.simple contact forms work just fine, but you can make them nicer by using AJAX to submit the form data in the background.

A common feature of many websites is a contact form, we will be create PHP contact form using bootstrap framework in html. When you click on "Submit" button it will run ajax post form request and check validation and display status message. Please take a look at the below three filr

  1. index.php
  2. ajax.php
  3. Process.php

File 1: HTML Contact Form

In index file we will include jquery bootstrap and ajex.js file then make proper reate a basic HTML Contact form layout.

<!DOCTYPE html>
<html>
<head>
  <title>simple contact form in php with ajax validation</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body class="container">
  <div class="col-md-5">
    <h1 class="text-center">simple contact form in php with ajax validation</h1>
    <form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
      <div class="form-group">
        <div class="controls">
          <input type="text" id="name" class="form-control" placeholder="Name">
          <span class="name text-danger"></span>
        </div>
      </div>
      <div class="form-group">
        <div class="controls">
          <input type="email" class="email form-control" id="email" placeholder="Email" >
          <span class="email text-danger"></span>
        </div>
      </div>
      <div class="form-group">
        <div class="controls">
          <input type="text" id="msg_subject" class="form-control" placeholder="Subject" >
          <span class="subject text-danger"></span>
        </div>
      </div>
      <div class="form-group">
        <div class="controls">
          <textarea id="message" rows="4" placeholder="Massage" class="form-control"></textarea>
          <span class="message text-danger"></span>
        </div>  
      </div>
      <button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Submit</button>
    </form>
  </div>
</body>
</html>

File 2: jQuery AJAX file

This jQuery code validates contact form input and sends AJAX post request to a PHP page (Process.php) on successful validation. In get all input fild on contact form and sends it as the parameters to the second PHP page.

$(document).ready(function() {

    $('#submit').click(function(e){
        e.preventDefault();

        var name = $("#name").val();
        var email = $("#email").val();
        var subject = $("#msg_subject").val();
        var message = $("#message").val();

        $.ajax({
            type: "POST",
            url: "Process.php",
            dataType: "json",
            data: {name:name, email:email, subject:subject, message:message},
            success : function(data){
                if (data.code == "200")
                {
                    alert("Success: " +data.msg);
                } 
                else 
                {
                    $('.name').html('<p>'+data.msg['name']+'</p>');
                    $('.email').html('<p>'+data.msg['email']+'</p>');
                    $('.subject').html('<p>'+data.msg['subject']+'</p>');
                    $('.message').html('<p>'+data.msg['message']+'</p>');
                }
            }
        });
    });
});

File 3: PHP Script: Process.php

Below script check contact form Validating

<?php

//NAME
if (empty($_POST["name"])) 
{
    $data['name'] = "*Name is required";
} 
else 
{
    $name = $_POST["name"];
    $data['name'] ="";
}

//EMAIL
if (empty($_POST["email"])) 
{
    $data['email'] = "*Email is required";
} 
else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) 
{
    $data['email'] = "Invalid email format";
}
else 
{
    $email = $_POST["email"];
    $data['email'] ="";
}

//MSG SUBJECT
if (empty($_POST["subject"])) 
{
    $data['subject'] = "*Subject is required";
} 
else 
{
    $subject = $_POST["subject"];
    $data['subject'] ="";
}

//MESSAGE
if (empty($_POST["message"])) 
{
    $data['message'] = "*Message is required";
} 
else 
{
    $message = $_POST["message"];
    $data['message'] ="";
}

if(empty($data['name']) and empty($data['email']) and empty($data['subject']) and empty($data['message']))
{
	$msg = "Name: ".$name.", Email: ".$email.", Subject: ".$subject.", Message:".$message;
	echo json_encode(['code'=>200, 'msg'=>$msg]);
	exit;
}
else
{
    echo json_encode(['code'=>404, 'msg'=>$data]);
}

?>

Send Email localhost Or Online Server Using PHP script Look here this link :- Send Email Example