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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!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> |
PHP mailing script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 with file upload […]
hello, dear. how to adapter this cbeat code to send mails with authentication? tx
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)
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..!!!!!
Can you sent me your code?
yeah sure
can you give me your email id please?
info@pietervanos.net
I mail you please check your inbox.
I will be waiting for your reply.
Thank you.
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)
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.
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.
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
Problem Solve,
Thank you so much for help.!!!!
Regards,
Rohit
No problem, good luck with with your app.
hi rohit. how u make the solution? im facing the same problem with you.
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.
thank you.!!
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 🙂 🙂
The download button is at the bottom of the page.
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
Hello,
Is it possible to have multiple email attachments? Not sure how to add this.