Jquery Mobile contact form

Jquery Mobile contact form

Update: This updated version contains javascript form validation that also works with android and iphone.

This contact form is created for Jquery Mobile.It contains some basic spam protections and an anti-flooding script.

See also my contact form with file upload function !

jquery mobile contact form

jquery mobile contact form

http://www.pietervanos.net/dev/jquerymobile/contactform/index.php#contactform

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 contact form here–> Jquery Mobile Contact Form (1752) <-

 Download jQuery Mobile example contact form V2 here–> Contactform V2 (1764) <-

Comments: 46

  1. Francis December 16, 2013 at 12:48 Reply

    Please I need your help on how to retrieve/display contacts on blackberry device using jquery mobile and phonegap

    • p.vanos January 15, 2014 at 21:17 Reply

      I have no Blackberry sorry, did you try google 😉 ?

  2. matt January 15, 2014 at 17:12 Reply

    Your mobile contact form script is very nice! I was just testing some possible implementations on my end. It doesn’t seem like the HTML5 validation is working on the iphone? I can see the tooltip validation working in a browser perfectly.

    Is this to be expected? Let me know, thanks!

    • p.vanos January 15, 2014 at 21:20 Reply

      Mmm yeah that’s a bit of a problem with HTML5 not all the browser are a 100% compatible with it. I will test it this weekend for you!

  3. jimmy March 13, 2014 at 07:14 Reply

    Beautiful script and design. You really made it simple to use
    and edit. Nice site too.

    Thank You

    was there a iphone issue

    • p.vanos March 15, 2014 at 14:08 Reply

      Jep, Iphone is ignoring the requirements tag I used in html5.
      I will look for a solution to fix this.

  4. p.vanos March 15, 2014 at 20:41 Reply

    This contact form is now updated with a javascript form validation so it also works on iphone and android.

  5. Reco April 29, 2014 at 01:23 Reply

    How can i change home and add back button link. Thanks

    • p.vanos April 29, 2014 at 14:32 Reply

      I think this will work,

      change it to:

      or

  6. ujwol May 1, 2014 at 07:22 Reply

    works on desktop but not in iphone 5:(

  7. Cameron Harbrecht June 23, 2014 at 15:46 Reply

    I’ve been looking at your demo files, and trying to set up a mobile contact form in the same manner as this, but I keep encountering a problem.
    When the form is submitted, I am redirected to the mail.php page, instead of being directed to the success or error divs. I’ve gone through my mail.php script multiple times and I can’t seem to find an error that would stop the redirects from occurring.

    • Cameron Harbrecht June 23, 2014 at 16:06 Reply

      Scratch that, I got it figured out.
      Thanks for the tutorial!

      • p.vanos June 24, 2014 at 09:36 Reply

        Perfect 😀

    • moses September 14, 2014 at 20:55 Reply

      Hi Cameron i am facing the same issue i keep getting mail php page once i hit submit. Do you mind sending me the code that work so i can check whats wrong with mine.

  8. Abdul Jasim July 1, 2014 at 17:25 Reply

    Hi,
    Can you help me please? when I submit the form I get to the Success page but the email does not get send. I have changed the email in this line and replaced it with my email,
    $email_to = “info@pietervanos.net”;
    BTW, i was able to get it worked for couple times, then it stopped working.
    Thank you

    • p.vanos July 1, 2014 at 17:55 Reply

      Can you send me your code then I can check it out for you.

      • Abdul July 3, 2014 at 16:34 Reply

        I got it to work p.vanos.
        Thank you very much for such an awesome form 🙂

  9. mark July 31, 2014 at 15:04 Reply

    Hi Mate
    everytime i submit the form it keep redirect me to mail.php !!!!

    • p.vanos July 31, 2014 at 15:35 Reply

      Are you using a webserver with php 🙂 ?

  10. mark July 31, 2014 at 23:07 Reply

    yes…
    localhost

    • p.vanos August 1, 2014 at 15:53 Reply

      I am willing to help you if you give me some more information. What webserver are you using and can I have a look at your code?

  11. Sean August 12, 2014 at 15:13 Reply

    Hello, i copied everything and changed the $email_to to my email but it doesn’t work for me.
    I did not receive any email. Could you please help me with this?

    • p.vanos August 27, 2014 at 17:58 Reply

      What webserver are you using?
      Does the webserver support php mailing?

  12. […] also tried later this one and worked really well too…Just to give it a try you can download the first example (at the […]

  13. Shahbaz August 20, 2014 at 05:26 Reply

    does it works in phonegap ?

    • p.vanos August 27, 2014 at 17:52 Reply

      Jep it will, if you host the PHP email code somewhere and make a link to it.

  14. Mudhi September 20, 2014 at 01:20 Reply

    Hello,

    It is working fine when user submits his message in English. But I through an error and email is not going when Arabic language is used in the Name or Subject fields. When Name and subject fields are in English and message filed in Arabic, the email is sent but the Arabic message is not readable. Would you please help in this regard.

    Thanks

    • p.vanos September 20, 2014 at 08:11 Reply

      Ah really?
      Can you e-mail me some more information: info@pietervanos.net
      So I can try it out my self.

      Regards,

      Pieter

  15. Mudhi September 20, 2014 at 10:30 Reply

    Hi Again,

    Thank you very much I did it, it is working fine now.
    One more question, How can I remove subject and comment sections?

  16. Jerome September 23, 2014 at 04:13 Reply

    Thank you so much for this. It is very helpful.

    I am trying to display the values entered on the “success” page, but I can’t figure it out.

    I tried including this code in at the top of index.php:

    and this code in the success div:

    Name:
    Email:
    Telephone:
    Subject:
    Comments:

    but the values are not showing.

    Am I in the right direction?

  17. Jerome September 23, 2014 at 04:19 Reply

    Hi! Thank you so much for this. It is very helpful.

    I am trying to display the value entered on the success page, but I can’t figure it out.

    I tried including this code in at the top of index.php:

    /?php
    $first_name = $_POST[‘naam’];
    $email_from = $_POST[‘mail’];
    $telephone = $_POST[‘telefoon’];
    $subject = $_POST[‘onderwerp’];
    $comments = $_POST[‘bericht’];
    ?/

    and this code at the in the success div:

    Name: /?php echo $first_name ?/
    Email: /?php echo $email_from ?/
    Telephone: /?php echo $telephone ?/
    Subject: /?php echo $subject ?/
    Comments: /?php echo $comments ?/

    but the values are not showing.

    Am I in the right direction?

  18. Jerome September 23, 2014 at 04:21 Reply

    Hi! Thank you so much for this. It is very helpful.

    I am trying to display the values entered on the success page, but I can’t figure it out.

    I tried including this code at the top of index.php:

    /?php
    $first_name = $_POST[‘naam’];
    $email_from = $_POST[‘mail’];
    $telephone = $_POST[‘telefoon’];
    $subject = $_POST[‘onderwerp’];
    $comments = $_POST[‘bericht’];
    ?/

    and this code in the success div:

    Name: /?php echo $first_name ?/
    Email: /?php echo $email_from ?/
    Telephone: /?php echo $telephone ?/
    Subject: /?php echo $subject ?/
    Comments: /?php echo $comments ?/

    but the values are not showing.

    Am I in the right direction?

    • p.vanos September 24, 2014 at 05:28 Reply

      You can try to post the variables back from the mail.php to the succespage.

  19. Oz Mudhi September 25, 2014 at 01:10 Reply

    Hello,

    Really need your help on removing subject and comments section.
    I have removed them from index.php form and

    in mail.php I have removed the the following lines but still it giving error and redirect to mail.php:

    !isset($_POST[‘onderwerp’]) ||
    !isset($_POST[‘bericht’]) {

    $subject = “notthere”; // not required
    $comments = “notthere notthere notthere notthere”; // required

    if(strlen($comments) < 2) {
    $error_message = "error";
    }

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

    Please help me what I should do here?

    • p.vanos September 25, 2014 at 20:32 Reply

      It is pretty easy.

      In the html form you remove i.e. the line:
      input type=”tel” id=”telefoon” name=”telefoon” value=”” placeholder=”Phone”

      Then it won’t post the telefoon variable. In the mail.php you have to remove the following:
      !isset($_POST[‘telefoon’]) ||
      $telephone = $_POST[‘telefoon’]; // not required
      $email_message .= “Tel: “.clean_string($telephone).”\n”;

      That’s it. Easy does it 🙂

  20. Oz Mudhi October 24, 2014 at 17:13 Reply

    Hello P.Vanos,

    I did what you wrote and I tried again and again and again.

    It redirects to mail.php and following msg is shown

    ——————–
    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator, and inform them of the time the error occurred, and anything you might have done that may have caused the error.

    More information about this error may be available in the server error log.

    ————–

    • p.vanos October 24, 2014 at 20:30 Reply

      Hi Mudhi,

      Have you changed the code or are you just trying my example?
      Next to that, can you give me some meer informatie about your webserver etc.

      Pieter

  21. Mudhi October 26, 2014 at 05:15 Reply

    Hello again,

    The code is working fine with me, but when I remove the comment & Subject fields or one of them as you described to me above it through the 500 error.

    • p.vanos October 29, 2014 at 22:35 Reply

      Mmm, you have to remove them also in the PHP file.
      It’s searching for the post values to proces. If you remove some in the html but not in the PHP file you will get errors.

      I can review your code is you sent it to me.
      info@pietervanos.net

  22. SOYON December 2, 2014 at 12:00 Reply

    Usable project.
    I have one problem & one question.
    – this form is work (sent mail) in web browser. but when I build an app for Android & when I click the send button it shows the mail.php file codes. not redirecting & not sending mail.
    – Is this form work in PhoneGap?

    Waiting for your reply.

    Best Regards
    SOYON

    • p.vanos December 2, 2014 at 12:46 Reply

      The front-end is doing a post to the mail.php file to proces the form values into an e-mail.
      You can use this inside phonegap but then you have to host the mail.php file somewhere else.

      This:

      Into this:

  23. Arnan January 11, 2015 at 10:28 Reply

    Not working for me…
    PHP Notice: Undefined variable: antiflood in /home/xxx/public_html/contact/mail.php on line 73

    • p.vanos January 11, 2015 at 15:06 Reply

      I think you edited the mail.php. In the top is the variable antiflood which is a small layer of protection. If you don’t want to use it then you have to change the following code:

      if (($error_message == “”) && ($antiflood == “”))

      into

      if ($error_message == “”)

  24. Teja Reddy November 2, 2015 at 17:46 Reply

    Hi sir,your code testing on server receive a mail corrrectly,but same code testing on phone gap android mobile doesn’t work even validation also not work plz help me sir.

  25. Damir March 8, 2016 at 18:34 Reply

    I seem to have one issue… after it validates on server link to a mail.php file, after it opens the success page on the server, not on phone (where i’m trying to install it) I used phonegap for packaging…

Leave a Reply

Your email address will not be published. Required fields are marked *

-->