Jquery Mobile contact form with file upload function

After some questions for a file upload function I created this contact form in Jquery Mobile.
Like the normal contact form It contains some basic spam protections and an anti-flooding script.

contact form with upload function

http://www.pietervanos.net/dev/jquerymobile/contactform_upload/

The form validation is done by HTML5 and as an extra protection also in the PHP mailing script.

<!DOCTYPE HTML>
<html> 
<head>
	<title>Example Website</title>  
	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="stylesheet" href="style/pietervanos.css" />
	<link rel="stylesheet" href="style/pietervanos.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript">
		//google analytics//
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-6021558-12']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
</head>
<body>
	<div id="home" data-role="page" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a">
			<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>
		</div>
		<br />
		<div class="center-image"><img src="style/images/logo.png" style="width:100%"></img></div>
		<div data-role="content" data-theme="a">
				<a href="#contactform" type="button" data-theme="a" data-transition="slide">Contact Form</a>
			<br />
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>

<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="contactform" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>Contact Form</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
		<form method="post" action="mail.php" enctype="multipart/form-data" data-ajax="false">
		  Name: <input type="text" id="naam" name="naam" value="" placeholder="Name" required/><br>
		  E-mail: <input type="email" id="mail" name="mail" value="" placeholder="E-mail" required/><br>
		  Phone Number: <input type="tel" id="telefoon" name="telefoon" value="" placeholder="Phone"/><br>
		  Subject: <input type="text" id="onderwerp" name="onderwerp" value="" placeholder="Subject" required/><br>
		  Message:<br>
		  <textarea style="height:100px;" id="bericht" name="bericht" placeholder="Enter your message here..." required></textarea> <br />
		  File upload: 

		  <input name="attachment" type="file" id="attachment" /><br>
		  <input type="submit" value="Send" name="submit" class="btn">
		 </form>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="succes" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>Sent Succesful</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
		 <p>The contact form was sent succesful!</p>
		 </form>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="error" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>Error</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<p>The contact form wasn't sent because of an error!</p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->	
</body>
</html>

100

101

102

103

104

105

<!DOCTYPE HTML>

<html>

<head>

<title>Example Website</title>

//google analytics//

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-6021558-12']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</head>

<body>

<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>

</div>

<br />

<a href="#contactform" type="button" data-theme="a" data-transition="slide">Contact Form</a>

<br />

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>Contact Form</h1>

</div>

Name: <input type="text" id="naam" name="naam" value="" placeholder="Name" required/><br>

E-mail: <input type="email" id="mail" name="mail" value="" placeholder="E-mail" required/><br>

Phone Number: <input type="tel" id="telefoon" name="telefoon" value="" placeholder="Phone"/><br>

Subject: <input type="text" id="onderwerp" name="onderwerp" value="" placeholder="Subject" required/><br>

Message:<br>

File upload:

</form>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>Sent Succesful</h1>

</div>

<p>The contact form was sent succesful!</p>

</form>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>Error</h1>

</div>

<p>The contact form wasn't sent because of an error!</p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</body>

</html>

PHP mailing script:

<?php
session_start();
if(isset($_POST['mail'])){
    // antiflood controle
    if (!empty($_SESSION['antiflood']))
    {
        $seconde = 20; // 20 seconden voordat dezelfde persoon nog een keer een e-mail mag versturen
        $tijd = time() - $_SESSION['antiflood'];
        if($tijd < $seconde)
            $antiflood = 1;
    }

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "info@pietervanos.net";
    $email_subject = "Information from the MOBILE contact form!"; 

	// validation expected data exists
    if(	!isset($_POST['naam']) ||
		!isset($_POST['mail']) ||
        !isset($_POST['telefoon']) ||
		!isset($_POST['onderwerp']) ||
        !isset($_POST['bericht'])) {
		header("Location: index.php#error");
    }

    $first_name = $_POST['naam']; // required
    $email_from = $_POST['mail']; // required
    $telephone = $_POST['telefoon']; // not required
	$subject	= $_POST['onderwerp']; // not required
    $comments = $_POST['bericht']; // required
	// GET File Variables
	$attachment = $field_file = $_POST['attachment'];
	$tmpName = $_FILES['attachment']['tmp_name'];
	$fileType = $_FILES['attachment']['type'];
	$fileName = $_FILES['attachment']['name']; 

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message = "error";
  }
    $string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$first_name)) {
    $error_message = "error";
  }
  if(strlen($comments) < 2) {
    $error_message = "error";
  }
  if(strlen($error_message) > 0) {
    header("Location: index.php#error");
  }
      function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
	$datum = date('d/m/Y H:i:s');

	$email_message = "===================================================\n";
	$email_message .= "Mobile contact form " . $_SERVER['HTTP_HOST'] . "\n";
	$email_message .= "===================================================\n\n";
    $email_message .= "Name: ".clean_string($first_name)."\n";
    $email_message .= "E-mail: ".clean_string($email_from)."\n";
    $email_message .= "Tel: ".clean_string($telephone)."\n";
	$email_message .= "Subject: ".clean_string($subject)."\n";
	$email_message .= "Attachment: ".clean_string($fileName)."\n\n";
    $email_message .= "Message: ".clean_string($comments)."\n\n";
    $email_message .= "Send on " . $datum . " from IP address " . $_SERVER['REMOTE_ADDR'] . "\n\n";
	$email_message .= "===================================================\n";
	$email_message .= "Tech support:\n";
	$email_message .= "===================================================\n\n";
	$email_message .= $_SERVER['HTTP_USER_AGENT'];

// create email headers
$headers = 'From: '.$email_from."\r\n".
			'Reply-To: '.$email_from."\r\n" .
			'X-Mailer: PHP/' . phpversion();
 if (!empty($tmpName)) 
	{
		  /* Reading file ('rb' = read binary)  */
		  $file = fopen($tmpName,'rb');
		  $data = fread($file,filesize($tmpName));
		  fclose($file); 
			/* a boundary string */
		  $randomVal = md5(time());
		  $mimeBoundary = "==Multipart_Boundary_x{$randomVal}x";

		  /* Header for File Attachment */
		  $headers .= "\nMIME-Version: 1.0\n";
		  $headers .= "Content-Type: multipart/mixed;\n" ;
		  $headers .= " boundary=\"{$mimeBoundary}\"";

		  /* Multipart Boundary above message */
		  $email_message = "This is a multi-part message in MIME format.\n\n" .
		  "--{$mimeBoundary}\n" .
		  "Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
		  "Content-Transfer-Encoding: 7bit\n\n" .
		  $email_message . "\n\n";

		  /* Encoding file data */
		  $data = chunk_split(base64_encode($data));

		  /* Adding attchment-file to message*/
		  $email_message .= "--{$mimeBoundary}\n" .
		  "Content-Type: {$fileType};\n" .
		  " name=\"{$fileName}\"\n" .
		  "Content-Transfer-Encoding: base64\n\n" .
		  $data . "\n\n" .
		  "--{$mimeBoundary}--\n";
	}
 if (($error_message == "") && ($antiflood == "")) 
  {
	$_SESSION['antiflood'] = time();
	  @mail($email_to, $email_subject, $email_message, $headers);
	  header("Location: index.php#succes");
  }
  else
  {
      header("Location: index.php#error");
  }  
} 
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

session_start();

if(isset($_POST['mail'])){

// antiflood controle

if (!empty($_SESSION['antiflood']))

{

$seconde = 20; // 20 seconden voordat dezelfde persoon nog een keer een e-mail mag versturen

$tijd = time() - $_SESSION['antiflood'];

if($tijd < $seconde)

$antiflood = 1;

}

// EDIT THE 2 LINES BELOW AS REQUIRED

$email_to = "info@pietervanos.net";

$email_subject = "Information from the MOBILE contact form!";

// validation expected data exists

if( !isset($_POST['naam']) ||

!isset($_POST['mail']) ||

!isset($_POST['telefoon']) ||

!isset($_POST['onderwerp']) ||

!isset($_POST['bericht'])) {

header("Location: index.php#error");

}

$first_name = $_POST['naam']; // required

$email_from = $_POST['mail']; // required

$telephone = $_POST['telefoon']; // not required

$subject = $_POST['onderwerp']; // not required

$comments = $_POST['bericht']; // required

// GET File Variables

$attachment = $field_file = $_POST['attachment'];

$tmpName = $_FILES['attachment']['tmp_name'];

$fileType = $_FILES['attachment']['type'];

$fileName = $_FILES['attachment']['name'];

$error_message = "";

$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

if(!preg_match($email_exp,$email_from)) {

$error_message = "error";

}

$string_exp = "/^[A-Za-z .'-]+$/";

if(!preg_match($string_exp,$first_name)) {

$error_message = "error";

}

if(strlen($comments) < 2) {

$error_message = "error";

}

if(strlen($error_message) > 0) {

header("Location: index.php#error");

}

function clean_string($string) {

$bad = array("content-type","bcc:","to:","cc:","href");

return str_replace($bad,"",$string);

}

$datum = date('d/m/Y H:i:s');

$email_message = "===================================================\n";

$email_message .= "Mobile contact form " . $_SERVER['HTTP_HOST'] . "\n";

$email_message .= "===================================================\n\n";

$email_message .= "Name: ".clean_string($first_name)."\n";

$email_message .= "E-mail: ".clean_string($email_from)."\n";

$email_message .= "Tel: ".clean_string($telephone)."\n";

$email_message .= "Subject: ".clean_string($subject)."\n";

$email_message .= "Attachment: ".clean_string($fileName)."\n\n";

$email_message .= "Message: ".clean_string($comments)."\n\n";

$email_message .= "Send on " . $datum . " from IP address " . $_SERVER['REMOTE_ADDR'] . "\n\n";

$email_message .= "===================================================\n";

$email_message .= "Tech support:\n";

$email_message .= "===================================================\n\n";

$email_message .= $_SERVER['HTTP_USER_AGENT'];

// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

if (!empty($tmpName))

{

/* Reading file ('rb' = read binary) */

$file = fopen($tmpName,'rb');

$data = fread($file,filesize($tmpName));

fclose($file);

/* a boundary string */

$randomVal = md5(time());

$mimeBoundary = "==Multipart_Boundary_x{$randomVal}x";

/* Header for File Attachment */

$headers .= "\nMIME-Version: 1.0\n";

$headers .= "Content-Type: multipart/mixed;\n" ;

$headers .= " boundary=\"{$mimeBoundary}\"";

/* Multipart Boundary above message */

$email_message = "This is a multi-part message in MIME format.\n\n" .

"--{$mimeBoundary}\n" .

"Content-Type: text/plain; charset=\"iso-8859-1\"\n" .

"Content-Transfer-Encoding: 7bit\n\n" .

$email_message . "\n\n";

/* Encoding file data */

$data = chunk_split(base64_encode($data));

/* Adding attchment-file to message*/

$email_message .= "--{$mimeBoundary}\n" .

"Content-Type: {$fileType};\n" .

" name=\"{$fileName}\"\n" .

"Content-Transfer-Encoding: base64\n\n" .

$data . "\n\n" .

"--{$mimeBoundary}--\n";

}

if (($error_message == "") && ($antiflood == ""))

{

$_SESSION['antiflood'] = time();

@mail($email_to, $email_subject, $email_message, $headers);

header("Location: index.php#succes");

}

else

{

header("Location: index.php#error");

}

Download jQuery Mobile example website here–> [download id=”11″] <-

Jquery Mobile contact form - Knowledge March 8, 2014 at 14:57 Reply

[…] Jquery Mobile contact form with file upload […]

William Castro - June 10, 2014 at 18:49 Reply

hello, dear. how to adapter this cbeat code to send mails with authentication? tx

p.vanos June 13, 2014 at 16:28 Reply

The builtin mail() function does not provide any sort of authentication. You need to use a third-party library that offers SMTP authentication. Popular choices include:

PHPMailer
Swift Mailer
PEAR Mail (has not been updated for a while)

Rohit July 24, 2014 at 13:49 Reply

hello,
I am new in jQuery Mobile, i go through this example but the problem is when i click on send button it show ” Error Loading Page”
please help me..!!!!!

p.vanos July 24, 2014 at 15:23 Reply

Can you sent me your code?

Rohit July 24, 2014 at 15:34 Reply

yeah sure
can you give me your email id please?

p.vanos July 24, 2014 at 17:11 Reply

info@pietervanos.net

Rohit July 25, 2014 at 04:42 Reply

I mail you please check your inbox.
I will be waiting for your reply.
Thank you.

p.vanos July 25, 2014 at 21:22 Reply

With the code is nothing wrong, I placed your example on my site.
http://www.pietervanos.net/test/foo/

I think I know what the problem is. You are trying to build a mobile application with phonegap. The file mail.php is using the php mailing function which is not build in phonegap. You can place the phonegap website online and make a port to it or you have to change the mailing function to one that works with phonegap. (smtp authentication for example)

Rohit July 26, 2014 at 11:22 Reply

Hello,
Yes i visit your website and i try its work fine with your example site, but i need a solution for my application.
But can you help to solve my problem.
Yes i am using phonegap for build mobile application.

p.vanos July 26, 2014 at 16:56 Reply

For the moment I can think of 2 solutions.
#1 Host the website somewhere and port it to a mobile application
#2 Change the PHP mailer I used to one that supports smtp authentication. Then you can use the smtp credentials i.e. of google.
- Rohit July 27, 2014 at 06:06 Reply
  
  hello,
  As you say host the app on server , I done that part it work awesome, but the next part is after click on send button email is send and receive properly but the success or error page is not display. It show ajax loader so any suggestion for this?
  
  Thank you,
  Regards,
  Rohit
  - Rohit July 27, 2014 at 06:21 Reply
    
    Problem Solve,
    Thank you so much for help.!!!!
    
    Regards,
    Rohit
    - p.vanos July 28, 2014 at 21:09
      
      No problem, good luck with with your app.
    - kiah September 17, 2014 at 02:44
      
      hi rohit. how u make the solution? im facing the same problem with you.
    - p.vanos September 17, 2014 at 13:47
      
      Try to turn on debugging. By change you made one of the following mistakes.
      
      #1 Typo in the php code, try the example first without changing it.
      #2 A webserver that does not support PHP or SMTP mailing.

Rohit July 29, 2014 at 06:52 Reply

thank you.!!

Richard Horasio August 19, 2014 at 14:55 Reply

Hey bro, nice tutorial.. but why I can download the example? can I get this one? I’m new in jQuery Mobile and want to build my own mobile web.. can you send the zip of this example to my email? here’s my email:

richardsilalahi35@gmail.com

Hope you can send it to me, because I really need it.. thank you 🙂 🙂

p.vanos August 27, 2014 at 17:53 Reply

The download button is at the bottom of the page.

Geoff May 23, 2015 at 11:27 Reply

I have modified the input file in the html so I can add multiple images but how can I get the mail.php to attach all the pictures. I only get the last one I attached

Debbie May 23, 2016 at 15:57 Reply

Hello,

Is it possible to have multiple email attachments? Not sure how to add this.

Portfolio

Knowledge

Jquery Mobile contact form with file upload

Jquery Mobile contact form with file upload function

Download jQuery Mobile example website here–> [download id=”11″] <-

Comments: 21

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Archives

Categories