Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer

Posted 12:46 pm by muni & filed under CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP, Twitter Bootstrap.

This tutorial about creation of Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer. In this tutorial I am going to explain step by step how I have created Smart Invoice System Version 3 Single Page Sales Promotion Application.

I have divided this tutorial into two part

Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer
Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer Part-2

Smart Invoice System Version 3 Promotion Page Demo

Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer

Step 1: Create index.html File and add Basic HTML Markup in it:

First create new project named “promtion-page” in your htdocs/www folder. Then create index.html file and add the following basic HTML markup in it.

	
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Smart Invoice System V3</title>

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/sweetalert/sweetalert.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div id="loader" width="160">

	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12">

			</div>
		</div>
	</div>

	<script src="js/jquery-1.12.3.js"></script>
	<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/sweetalert/sweetalert.min.js"></script>
	<script src="js/script.js"></script>
</body>

</html>

Download PHP, jQuery, Ajax Sales Promotion Page Application Script
Instant Download This Script

Step 2: Create Sales Promotion HTML Form

Create HTML form to get name and email from the user. With name and email of the user, you may send your product updates to user.


<div id="main" style="display:none">
	<div class="inner-container">
		<div class="header-main">
			<h1 class="main-title text-center">Smart Invoice System V3</h1>
		</div>
		<div class="main-content">
			<div class="top-text">
				<h2 class="post-title">Get launch updates (V3) straight to your inbox.</h2>
				<p>Smart Invoice System V3 completely rewritten using CakePHP 3 with great UI and lot more features are added. To get latest updates and offers to your inbox by hitting sign up button below.</p>
				<hr>
			</div>
			<div class="email-from">
				<form id="emailForm">
					<div class="form-group">
						<label for="userName">Name</label>
						<input type="text" class="form-control" name="userName" id="userName" placeholder="Your Name">
						<span class="help-block"></span>
					</div>
					<div class="form-group">
						<label for="userEmail">Email address</label>
						<input type="email" class="form-control" name="userEmail" id="userEmail" placeholder="Your Email Address">
						<span class="help-block"></span>
					</div>
					<button id="sendMailBtn" data-loading-text="Please Wait..." type="button" class="btn btn-success form-control">Sign Up</button>
				</form>
			</div>
		</div>
	</div>
</div>

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Step 3: Style HTML Promtion Form

Create style.css file and include that in your index.html file. Now copy paste the following css in your style.css file.


.sweet-alert,body{font-family:Lato,sans-serif}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Regular.ttf)}body{background-color:#f0f3f4;color:#333;margin:0;min-height:100vh;position:relative;font-size:15px;padding:5%}#loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(../img/rings.svg) 50% 50% no-repeat #34495E;background-size:100px}#main,.inner-container{position:relative;margin:0 auto}@media only screen and (max-width:768px){body{font-size:15px;padding:5% 3%}}@media only screen and (device-width:768px){body{font-size:15px;padding:15% 3%}}@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){body{font-size:15px;padding:20% 3%}}@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){body{font-size:15px;padding:15% 3%}}@media (min-width:320px) and (max-width:732px){body{background:url(../img/bg-732.jpg) center center no-repeat fixed #fff;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}}@media (min-width:733px) and (max-width:1023px){body{background:url(../img/bg-1024.jpg) center center no-repeat fixed #fff;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}}@media (min-width:1024px) and (max-width:1360px){body{background:url(../img/bg-1360.jpg) center center no-repeat fixed #fff;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}}@media (min-width:1361px) and (max-width:1920px){body{background:url(../img/bg-1920.jpg) center center no-repeat fixed #fff;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}}@media (min-width:1921px){body{background:url(../img/bg-lg.jpg) center center no-repeat fixed #fff;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}}.ads{padding-bottom:10px;padding-top:10px}#main{max-width:575px}.inner-container{display:block;width:100%;background:#fff;z-index:100}.header-main,.main-content{width:100%;display:inline-block}.header-main{padding:5% 10%;background:#F3F5F8}.main-title{font-size:24px}.main-content{padding:3% 10% 10%}.btn,.form-control,.input-group-addon{border-radius:0}.btn-success,.panel-success{background-color:#27c24c!important;border-color:#27c24c!important;color:#fff!important}

Following CSS style will set the bacground images for different resolution.


/************ Background Image **********/

@media (min-width: 320px) and (max-width: 732px) {
     body{
		background: url(../img/bg-732.jpg) no-repeat center center fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-color: #fff;
	}
}

@media (min-width: 733px) and (max-width: 1023px) {
     body{
		background: url(../img/bg-1024.jpg) no-repeat center center fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-color: #fff;
	}
}

@media (min-width: 1024px) and (max-width: 1360px) {
     body{
		background: url(../img/bg-1360.jpg) no-repeat center center fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-color: #fff;
	}
}

@media (min-width: 1361px) and (max-width: 1920px) {
     body{
		background: url(../img/bg-1920.jpg) no-repeat center center fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-color: #fff;
	}
}

@media (min-width: 1921px) {
     body{
		background: url(../img/bg-lg.jpg) no-repeat center center fixed; 
	  	-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-color: #fff;
	}
}
/************ Background Image **********/

Following CSS style will align the HTML promtion form to the center of the page with proper padding for different resolutions


@media only screen and (max-width:768px) {
    body {
        font-size: 15px;
        padding: 5% 3%;
    }
}


@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
	body {
        font-size: 15px;
        padding: 15% 3%;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
	body {
        font-size: 15px;
        padding: 20% 3%;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
	body {
        font-size: 15px;
        padding: 15% 3%;
    }
}
.ads{
	padding-bottom: 10px;
	padding-top: 10px;
}

#main {
    max-width: 575px;
    margin: 0 auto;
    position: relative;
}
.inner-container{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    z-index: 100;
}
.header-main{
    display: inline-block;
    width: 100%;
    padding: 5% 10% 5% 10%;
    background: #F3F5F8;
}
.main-title{
    font-size:24px;
}
.main-content{
    width: 100%;
    display: inline-block;
    padding: 3% 10% 10% 10%;
}
.form-control, .input-group-addon, .btn{
    border-radius: 0px;
}
.btn-success, .panel-success {
    background-color: #27c24c !important;
    border-color: #27c24c !important;
    color: #fff !important;
}
.sweet-alert{
   font-family: 'Lato', sans-serif;
}

Step 4: Next validate Sales Promotion Form using jQuery Vlidate Plugin

First download and include jQuery Vlidate Plugin from the following link or directly give CDN link, after jQuery plugin. Like this


<script src="js/jquery-1.12.3.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

Next create script.js file and copy and paste the following scripts within the jQuery ready function.


jQuery.validator.setDefaults({
	errorPlacement : function(error, element) {
		element.removeClass('has-success').addClass('has-error');
	}
});
$('#emailForm').validate( {
	submitHandler : function(form) {
		return false;
	},
	rules : {
		userEmail:{
			required: true,
			email: true
		},
		userName:{
			required : true,
			minlength : 3,
			maxlength : 50
		}
	},
	messages : {
		userEmail:{
			required : "Please enter your Email"
		},
		userName:{
			required : "Please enter your name"
		}
	},
	errorPlacement : function(error, element) {
		$(element).closest('div.form-group').find('.help-block').html(error.html());
	},
	highlight : function(element) {
		$(element).closest('div.form-group').removeClass('has-success').addClass('has-error');
	},
	unhighlight: function(element, errorClass, validClass) {
		 $(element).closest('div.form-group').removeClass('has-error').addClass('has-success');
		 $(element).closest('div.form-group').find('.help-block').html('');
	}
});

Where $(‘#emailForm’).validate(); ’emailForm’ — is ‘id’ of the HTML form that we want to validate.

This jQuery validate plugin will validate the given input elements based on the name of input element. So I am validating name and email fields using their name attributes ( userEmail & userName ) respectively.

Next in the rules section of the validate option, we are defining rules for the validation. In the messages section, we are giving custom messages for the validation rules we are defined in the rules section.


submitHandler : function(form) {
	return false;
}

After user has entered their name and email, We are not allowing the HTML form to submit normal way of HTML form submission. We are passing all user entered details to PHP (Backend) via jQuery Ajax. Here in the submitHandler() function we are returning false, that will prevent the HMTL form from submitted normal way.

Step 5: Post User Data to PHP (Backend) Via jQuery Ajax

Here when user cliclking the ‘Sign Up’ button, I am checking whether user has entered all the details correctly based on the rules we have defined using jQuery validate plugin. If something fails, then we are showing validation messages to the users. After user has entered the correct details, We are posting user enter details to the ajax.php file (Backend).


$(document).on('click', '#sendMailBtn', function(e){
	e.preventDefault();
	if( $('#emailForm').valid() ) {
		var sendMailBtn = $('#sendMailBtn');
		sendMailBtn.button('loading');
		$.ajax({
			url: 'ajax.php',
			method: 'post',
			dataType: 'json',
			data : { data: JSON.stringify($('#emailForm').serializeObject()) },
			success: function( response ){
				sendMailBtn.button('reset');
				$('input').val('');
				showSuccessMessage();
			},
			error: function( response ) {
				sendMailBtn.button('reset');
				if( response.status === 400 || response.status === 403 || response.status === 500 ) {
					showWarningMessage(response.responseJSON.message);
				} else {
					showWarningMessage();
				}
			}
		});
	}

	return false;
});

Please continue Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer part-2, where I am explaining about How to send an email using PHPMailer, PHP error handling and also giving proper response to the jQuery Ajax request using PHP http status code.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Access Now Instantly

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Single Page Sales Promotion Application Using PHP, jQuery, Ajax and PHPMailer

Step 1: Create index.html File and add Basic HTML Markup in it:

Step 2: Create Sales Promotion HTML Form

Step 3: Style HTML Promtion Form

Step 4: Next validate Sales Promotion Form using jQuery Vlidate Plugin

Step 5: Post User Data to PHP (Backend) Via jQuery Ajax

Like this:

Related

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Search Our Blog !!!

43,000+ Awesome Subscribers Can't Go Wrong !!!

Subscribe to our email list and get access to 100+ Demo scripts for FREE !

Download Premium Only Scripts & 80+ Demo scripts Instantly at
just 1.95 USD per month

Upgrade to our paid plan at just $ 1 per month

Get Free Email Updates, Scripts & Other Useful Resources to your Email

Get Instant Script Download Access!

Step 1: Create index.html File and add Basic HTML Markup in it:

Step 2: Create Sales Promotion HTML Form

Step 3: Style HTML Promtion Form

Step 4: Next validate Sales Promotion Form using jQuery Vlidate Plugin

Step 5: Post User Data to PHP (Backend) Via jQuery Ajax

Share this:

Like this:

Related

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. (We don't send spam) Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Search Our Blog !!!

43,000+ Awesome Subscribers Can't Go Wrong !!!

Subscribe to our email list and get access to 100+ Demo scripts for FREE !

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month

Upgrade to our paid plan at just $ 1 per month

Get Free Email Updates, Scripts & Other Useful Resources to your Email

Get Instant Script Download Access!

Join 10,000+ Happy Subscribers on feedburner. (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Download Premium Only Scripts & 80+ Demo scripts Instantly at
just 1.95 USD per month