Jquery Mobile contact form with file upload

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


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

PHP mailing script:

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


Comments: 23

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

  2. 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:

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

  3. Rohit July 24, 2014 at 13:49 Reply

    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?

  4. Rohit July 24, 2014 at 15:34 Reply

    yeah sure
    can you give me your email id please?

  5. 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.

      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)

  6. Rohit July 26, 2014 at 11:22 Reply

    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

        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,

        • Rohit July 27, 2014 at 06:21 Reply

          Problem Solve,
          Thank you so much for help.!!!!


          • 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.

          • abdalla aly November 19, 2017 at 20:31

            please can you share the new code with me ,

  7. Rohit July 29, 2014 at 06:52 Reply

    thank you.!!

  8. 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:

    [email protected]

    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.

  9. 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

  10. Debbie May 23, 2016 at 15:57 Reply


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

  11. Paul Verstraten (Frankrijk) January 8, 2017 at 08:52 Reply

    More than three years later, but this is a very fine job. Bedankt

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.