How to create an AJAX contact form

How to Create an AJAX Contact Form using HTML, CSS, jQuery and PHP.
What is AJAX? Ajax stands for Asynchronous JavaScript and XML. AJAX is the technique to build dynamic and fast web applications. You can exchange the data with a server, and updating specific parts of a web page without reloading the page.

What is the use of AJAX for creating a web form?

Generally page will refresh while submiting the form. The form page will redirect to php action page to send results to mail. You can send form values to mail without refreshing the page.

What we are going to do

1. HTML form
2. PHP action page
3. Form validation amd AJAX request - Simple validation using HTML5

Create a HTML file and include jQuery library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Add this below form in HTML file

<div class="wrapper">

      <form class="contactform" action="" method="POST" name="contactform" id="contactform">

        <div class="errorwrap">

          <div class="error">Error!</div>

          <div class="success">Submitted!</div>

        </div>

        <div class="input-fields">

          <label>First Name: </label>

          <input class="text" type="text" name="firstname" id="firstname" required />

        </div>

        <div class="input-fields">

          <label>Last Name: </label>

            <input class="text" type="text" name="lastname" id="lastname" required />

        </div>

        <div class="input-fields">

          <label>Email: </label>

            <input class="text" type="email" name="email" id="email" required />

        </div>

        <div class="input-fields">

          <label>Phone No: </label>

            <input class="text" type="text" name="phoneno" id="phoneno" required />

        </div>

        <div class="input-fields">

          <label>Company: </label>

            <input class="text" type="text" name="company" id="company" required />

        </div>

        

        <div class="buttons">

          <input type="submit" value="Submit" />

        </div>

      </form>

    </div>

Create a CSS and JS file, Add below code abd include each file in HTML page.

CSS:

body{
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 13px;
	color: #555;
}

*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.wrapper {
	max-width: 450px;
	padding: 20px;
	margin: 20px auto;
	border: 1px solid #DDD;
	background: #FAFAFA;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.input-fields{
	margin: 10px 0; 
}

.error,
.success{
	display:none;
	padding: 10px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid #FA9191;
	background: #FFE7E7;
	color: #D04A4A;
	margin: 5px 0;
}

.success{
	border: 1px solid #8CE279;
	background: #D5FFCC;
	color: #38AB1F;
}

.contactform{
	overflow: hidden;
}

.contactform .input-fields{
	overflow: hidden;
}

.contactform label{
	float: left;
	width: 40%;
	padding: 10px 0;
}

input.text{
	float: left;
	width: 60%;
	padding: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #DDD;
}

.buttons{
	padding-left: 40%;
}

input[type="submit"]{
	color: #FFF;
	outline: none;
	cursor: pointer;
	padding: 10px 15px;
	display: inline-block;
	border: 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-color: #0096FE #1A76BC #34567A;
	background-color: #0080FF;
	background-image: -moz-linear-gradient(top, #00b9ff, #0080ff);
	background-image: -webkit-linear-gradient(top, #00B9FF, #0080FF);
	background-image: -o-linear-gradient(top, #00b9ff, #0080ff);
	background-image: linear-gradient(to bottom, #00B9FF, #0080FF);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00B9FF), to(#0080FF));
}

jQuery:

$(function() {
    
  $('#contactform').on('submit',function(e) {

    $.ajax({
      url:'action.php',
      data:$(this).serialize(),
      type:'POST',
      success:function(data){
        console.log(data);
        $(".success").show().fadeOut(5000);
      },
      error:function(data){ $(".error").show().fadeOut(5000); }
      });
    e.preventDefault();
  });
  
});

PHP:

Create a PHP file and below code, Save file with 'action.php' file name. We are sending AJAX request with this file name so file name should be same.

<?php
    $firstname    =    $_POST['firstname'];

    $lastname   =    $_POST['lastname'];

    $email        =    $_POST['email'];

    $phoneno    =    $_POST['phoneno'];

    $company    =    $_POST['company'];

    

    $to = 'mail@shanidkv.com';

    $subject = 'Contact Form';

    $msg = "First Name: $firstname\nLast Name: $lastname\nEmail: $email\nPhone No: $phoneno\nCompany: $company";

    mail($to, $firstname, $msg);
?>