What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Why my form is crashing in mobile devices?

    Asked by Dptak01 on September 19, 2016 at 04:43 PM

    When trying to complete the form on a mobile device the form crashes and cannot be completed.

    Page URL:
    http://www.blacktiecasinoevents.com/join-the-team/

    mobile device crashes
  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 19, 2016 at 09:07 PM

    I have checked your form and I can see it works fine, the form does not crash when it is being viewed in a mobile device, but I have noticed there is a strange behavior and when you attempt to fill some of the fields in your form in a mobile device it seems to redirect to another webpage.

    This is because there is a conflict with the responsiveness in your form and the menu is still active even when the menu button has not been clicked. 

    The HTML element that is conflicting in the webpage when viewed in a mobile device has this class "navigation-mobileNav" and I would suggest you to check the CSS style applied to this HTML element.

    Please if the issue about the form crashing when viewed in mobile devices continues on your end, let us know, we will be glad to further test your form. 

  • Profile Image

    Answered by Dptak01 on September 19, 2016 at 09:46 PM
    blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; } Thanks so much for the feedback it sounds like you understand the problem well. Unfortunately I'm no expert at css. Would it be possible for you to provide directions step by step to fix the problem? Or if you could just replace the code that would be fantastic. Please let me know what you can do for me. Thank you!
    Sent from Yahoo Mail for iPhone
    ...
  • Profile Image

    Answered by Dptak01 on September 19, 2016 at 09:46 PM
    blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; }
    Sent from Yahoo Mail for iPad
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 19, 2016 at 11:17 PM

    I found a possible solution to fix the problem, I'm not sure how are you embedding your form, but I can see moving the embedded code fixes the issue, currently seems like the form was embedded out of the content of your webpage, I have moved the form into the <div> HTML element with class "content" and then the form started to work fine. 

    I made the change on my end through the developers tool, but unfortunately these changes are not applied nor saved to the website, here is how the form should work in a mobile device: 

    Here is a screenshot of the change I made:

    I would suggest you to try re-embedding your form, please try embedding it into the place shown in my screenshot above, it should work fine after that.

    Hope this helps. 

  • Profile Image

    Answered by Dptak01 on September 23, 2016 at 07:08 PM

    Hi thanks for the information. However, my problem is that I don't know where to go to get to that page where I embed the code that you gave me. Would you be able to help me with that? Also, I wasn't totally clear on the instructions. Would you be able to try explaining one more time the steps I take?

     

    1. go to xxxx

    2. copy xxxx

    3. paste xxxx to xxxxx

    etc.

     

    Thank you so much!

     

    Actually I've spoken with support at squarespace. I'm integrating this form into a squarespace web page. This means I have limited access to the code. So, I can't really get to the place that you are showing me on your screen. Do you know how to properly insert a jotform into a squarespace page so that it works on mobile? This is what I'm trying to accomplish. Is this something jotform is capable of integrating into? I thought it worked with squarespace pages. 

     

    thanks,

    Dave

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 23, 2016 at 10:46 PM

    I see, since you have embedded it in Squarespace, I believe you know where you pasted the code of the form as shown on this guide: https://www.jotform.com/help/37-Adding-a-form-to-Squarespace 

    paste code

    Can you try to add the following code before your forms Iframe code? Example

    <style>

    @media only screen and (max-width: 480px) {

    .nav-wrapper{

        z-index: -1 !important;

    }

    }

    </style>

    <iframe ....

    the  code of your form

    ></iframe>

    Let us know if that helps, we will be glad to assist you.

     

  • Profile Image

    Answered by Dptak01 on September 24, 2016 at 11:47 AM

    so is this right? should I embed this in my page?

     

    <style>@media only screen and (max-width: 480px) {.nav-wrapper{z-index: -1 !important;}}</style><iframe id="JotFormIFrame-60908895922166" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60908895922166" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>></iframe>

     

  • Profile Image
    JotForm Support

    Answered by Welvin on September 24, 2016 at 02:43 PM

    Yes, that is correct. But I would also suggest trying the method of removing the scripts in the iframe codes. In this case, you need to use the following codes only:

    <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/60908895922166"

          frameborder="0"

          style="width:100%;

          height:992px;

          border:none;"

          scrolling="no">

        </iframe>

  • Profile Image

    Answered by Dptak01 on September 30, 2016 at 06:29 PM

    you guys fixed this for me!!! Thank you very much!!!