Korveld/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Ping</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <style>
            #loader{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form id="pingForm">
                <div class="form-group">
                    <input type="text" placeholder="Full Name" id="fullname" name="fullname"/>
                </div>
                <div class="form-group">
                    <input type="email" placeholder="Email Address" id="email" name="email"/>
                </div>
                <div class="form-group">
                    <input type="number" placeholder="Mobile Number" id="mobile" name="mobile">
                </div>
                <div class="form-group">
                    <select name="category" id="category">
                        <option value="" selected disabled>Choose Category</option>
                        <option value="Dance">Dancing</option>
                        <option value="Music">Music</option>
                        <option value="Painting">Paints and Arts & Crafts</option>
                        <option value="Magic">Street Magic</option>
                    </select>
                </div>
                <div class="form-group">
                    <textarea placeholder="Message" id="message" name="message"/></textarea>
                </div>
                <button type="submit">SEND <img id="loader" src="https://res.cloudinary.com/sivadass/image/upload/v1498134389/icons/loader.gif" alt="loading"></button>
            </form>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

## main.js
$(document).ready(function() {
    $('#pingForm').validate({
        rules: {
            fullname: "required",
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true,
                number: true
            },
            category: "required"
        },
        errorElement: "span" ,
        messages: {
            fullname: "Please enter your sweet name",
            email: "Please enter valid email address",
            mobile: "Please enter your mobile number",
            category: "Please choose category"
        },
        submitHandler: function(form) {
            var dataparam = $('#pingForm').serialize();

            $.ajax({
                type: 'POST',
                async: true,
                url: 'process.php',
                data: dataparam,
                datatype: 'json',
                cache: true,
                global: false,
                beforeSend: function() {
                    $('#loader').show();
                },
                success: function(data) {
                    if(data == 'success'){
                        console.log(data);
                    } else {
                        $('.no-config').show();
                        console.log(data);
                    }

                },
                complete: function() {
                    $('#loader').hide();
                }
            });
        }
    });
});

## process.php
<?php
require 'mailer/PHPMailerAutoload.php';

$mail = new PHPMailer;

// Form Data
$fullname = $_REQUEST['fullname'] ;
$email = $_REQUEST['email'] ;
$mobile = $_REQUEST['mobile'];
$category = $_REQUEST['category'] ;
$message = $_REQUEST['message'] ;

$mailbody = 'New Lead Enquiry' . PHP_EOL . PHP_EOL .
            'Name: ' . $fullname . '' . PHP_EOL .
            'Mobile:' . $mobile . '' . PHP_EOL .
            'Interested In: ' . $category . '' . PHP_EOL .
            'Message: ' . $message . '' . PHP_EOL;

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'tricksmob.tk@gmail.com'; // SMTP username
$mail->Password = '33110055'; // SMTP password
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587; // TCP port to connect to

$mail->setFrom('admin@domain.com', 'WebMaster'); // Admin ID
$mail->addAddress('owner@domain.com', 'Business Owner'); // Business Owner ID
$mail->addReplyTo($email, $fullname); // Form Submitter's ID

$mail->isHTML(false); // Set email format to HTML

$mail->Subject = 'New Lead Enquiry';
$mail->Body    = $mailbody;

if(!$mail->send()) {
    echo 'Message could not be sent.';
    echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
    echo 'Message has been sent';
}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Ping</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<style>
	#loader{
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<form id="pingForm">
	<div class="form-group">
	<input type="text" placeholder="Full Name" id="fullname" name="fullname"/>
	</div>
	<div class="form-group">
	<input type="email" placeholder="Email Address" id="email" name="email"/>
	</div>
	<div class="form-group">
	<input type="number" placeholder="Mobile Number" id="mobile" name="mobile">
	</div>
	<div class="form-group">
	<select name="category" id="category">
	<option value="" selected disabled>Choose Category</option>
	<option value="Dance">Dancing</option>
	<option value="Music">Music</option>
	<option value="Painting">Paints and Arts & Crafts</option>
	<option value="Magic">Street Magic</option>
	</select>
	</div>
	<div class="form-group">
	<textarea placeholder="Message" id="message" name="message"/></textarea>
	</div>
	<button type="submit">SEND <img id="loader" src="https://res.cloudinary.com/sivadass/image/upload/v1498134389/icons/loader.gif" alt="loading"></button>
	</form>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	$(document).ready(function() {
	$('#pingForm').validate({
	rules: {
	fullname: "required",
	email: {
	required: true,
	email: true
	},
	mobile: {
	required: true,
	number: true
	},
	category: "required"
	},
	errorElement: "span" ,
	messages: {
	fullname: "Please enter your sweet name",
	email: "Please enter valid email address",
	mobile: "Please enter your mobile number",
	category: "Please choose category"
	},
	submitHandler: function(form) {
	var dataparam = $('#pingForm').serialize();

	$.ajax({
	type: 'POST',
	async: true,
	url: 'process.php',
	data: dataparam,
	datatype: 'json',
	cache: true,
	global: false,
	beforeSend: function() {
	$('#loader').show();
	},
	success: function(data) {
	if(data == 'success'){
	console.log(data);
	} else {
	$('.no-config').show();
	console.log(data);
	}

	},
	complete: function() {
	$('#loader').hide();
	}
	});
	}
	});
	});
	<?php
	require 'mailer/PHPMailerAutoload.php';

	$mail = new PHPMailer;

	// Form Data
	$fullname = $_REQUEST['fullname'] ;
	$email = $_REQUEST['email'] ;
	$mobile = $_REQUEST['mobile'];
	$category = $_REQUEST['category'] ;
	$message = $_REQUEST['message'] ;

	$mailbody = 'New Lead Enquiry' . PHP_EOL . PHP_EOL .
	'Name: ' . $fullname . '' . PHP_EOL .
	'Mobile:' . $mobile . '' . PHP_EOL .
	'Interested In: ' . $category . '' . PHP_EOL .
	'Message: ' . $message . '' . PHP_EOL;

	$mail->isSMTP(); // Set mailer to use SMTP
	$mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
	$mail->SMTPAuth = true; // Enable SMTP authentication
	$mail->Username = 'tricksmob.tk@gmail.com'; // SMTP username
	$mail->Password = '33110055'; // SMTP password
	$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
	$mail->Port = 587; // TCP port to connect to

	$mail->setFrom('admin@domain.com', 'WebMaster'); // Admin ID
	$mail->addAddress('owner@domain.com', 'Business Owner'); // Business Owner ID
	$mail->addReplyTo($email, $fullname); // Form Submitter's ID

	$mail->isHTML(false); // Set email format to HTML

	$mail->Subject = 'New Lead Enquiry';
	$mail->Body = $mailbody;

	if(!$mail->send()) {
	echo 'Message could not be sent.';
	echo 'Mailer Error: ' . $mail->ErrorInfo;
	} else {
	echo 'Message has been sent';
	}